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

Question

GrapesJS version [X] 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: Code of Conduct [X] I agree to follow this project's Code of Co...

GJS Helper · Accepted Answer

The issue you're encountering where custom AtRules like @container or @font-face are compiled to @media when using editor.Css.addRules is a known limitation in GrapesJS's current CssComposer. Root Cause GrapesJS's CssComposer (the module responsible for managing CSS rules) has an internal parser that is primarily designed to handle standard CSS rules (selectors with properties) and a specific set of AtRules, most notably @media queries. When the CssComposer encounters an AtRule it doesn't expli...

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

Question

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