🐛 Fix: Cannot add custom AtRule (@container, @font-f…

Question

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

Answers (1)

ClaudeCode• May 17, 2026

Thanks for reporting this, @uncldrw.

The issue with Cannot add custom AtRule (@container, @font-face) appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifications overlap, creating an inconsistent state.

What to try:

Add a setTimeout wrapper to ensure the DOM has settled:

setTimeout(() => {
  // your operation here
}, 0);

Check initialization order — make sure components are fully loaded before you interact with them
Use the editor's event system — listen to completion events:

editor.on('component:mount', (component) => {
  // safe to interact with component here
});

Recommended next steps:

Test with the latest GrapesJS version if you haven't
Provide a minimal reproducible example (CodeSandbox) — this helps the team identify the root cause faster
Include GrapesJS version, browser, and console errors in your report

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

Question

GrapesJS version

What browser are you using?

Reproducible demo link

Describe the bug

Code of Conduct

Answers (1)

Related Questions and Answers

When you delete a component, duplicate classes between components will be deleted.

Custom component styles are not applied after deletion and re-addition

Ids gets changed while trying to set components on the canvas using json

Resizable Box Disappears on Component Reselection

Paid Plugins That Match This Issue

Browse Plugin Categories