BUG: Cannot add custom AtRule (@container, @font-face)

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

Windows, Chrome, React

Reproducible demo link

/

Describe the bug

When attempting to add a custom atRules like @container or @font-face, the CSS consistently compiles to @media instead. I have tried various methods, including using Css.setRules and Css.addRules, as well as inserting an HTML string, all to no avail.

This is my given code:

import { useEffect } from "react";
import grapesjs from "grapesjs";
import "grapesjs/dist/css/grapes.min.css";
import "grapesjs/dist/grapes.min.js";
// import { blocks } from "../src/Grape/Blocks";

function WebBuilder() {
  useEffect(() => {
    const editor = grapesjs.init({
      container: "#gjs",
      height: "100vh",
      storageManager: false,
      //   blockManager: {
      //     blocks,
      //   },
    });

    editor.DomComponents.addType("component-css", {
      model: {
        defaults: {
          components: `
            <div class="container-portable"><div class="teaser-paa"><div class="teaser-paa__container"><div class="teaser-paa__wrapper"></div></div></div></div>
            `,
          styles: `
            .gjs-cv-canvas{top:0;width:100%;height:100%}.container-portable{width:100%;container-type:inline-size;container-name:portable}.teaser-paa{color:#262626;width:-webkit-calc(100% - 24px);width:calc(100% - 24px);height:504px;border-radius:9px;max-width:1296px;margin-left:auto;margin-right:auto;overflow:hidden}.teaser-paa__container{position:relative;margin:0 auto;width:100%;height:100%;background-position:50%;background-repeat:no-repeat;background-size:cover}@media (min-width: 768px) { .teaser-paa{ height: 300px } }
            `,
        },
      },
    });

    editor.Css.addRules(
      "@container portable (min-width: 768px) { .teaser-paa{ height: 300px } }"
    );
  }, []);

  return (
    <main>
      <div id="gjs"></div>
    </main>
  );
}
export default WebBuilder;

Code of Conduct

• I agree to follow this project's Code of Conduct