Cannot add a new css rule if an element that is using it is not present in the html
Yes, it's a normal behavior, the editor optimizes the exported code, but in the next release you'll find a new keepUnusedStyles option, which allows you to skip this optimization
Read full answer below ↓Question
HI, i'm using the latest build and i have the issue as described in the title.
I am editing html and css separately. I have noticed that when editing the css, if i try to add a new class, not used by any of the elements in the canvas yet, after saving, that css class is removed,
if instead i go and create a dummy div, assign i.e class ="test", and then go and add the .test{color="red"} rule to the css, the css change is retained correctly.
here is a JS Fiddle you can play with to see the behaviour. https://jsfiddle.net/d64sc5g4/
is this normal behaviour or a bug?
Answers (2)
Yes, it's a normal behavior, the editor optimizes the exported code, but in the next release you'll find a new keepUnusedStyles option, which allows you to skip this optimization
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1661
I've created html table and cannot drag new elements to table cells
Hello. if I create html table with next block of code, everything works, I'm able to drop a Quote, for example, to any cell: But next code...
Issue #2008
[Question]The canvas turns dark and unmodifiable on adding a large piece of custom html.
I used to add custom html with editor.addComponent(). It works well at most of the time, but when I try to insert a large piece of HTML whi...
Issue #1900
bug - plus sign ("+") not show if change the selection
to simulate de bug follow the steps: Click on a element in canvas Click on tab to add class click on the plus sign to add new class string...
Issue #1621
Question on css classnames used in demo
In the demo page https://grapesjs.com/demo.html, I see that the elements are centered using a class called container-width.Where can I see...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.