BUG: Style Manager Fails to Interpret Descendant Selectors Correctly
Question
GrapesJS version
- I confirm to use the latest version of GrapesJS
What browser are you using?
Chrome Version 131.0.6778.205
Reproducible demo link
https://codesandbox.io/p/sandbox/naughty-microservice-5hp3h4
Describe the bug
How to reproduce the bug:
- Add the
dark-styleclass to the body:editor.getWrapper().addClass("dark-style"); - Add a descendant selector rule:
editor.CssComposer.addRules(".dark-style .test-block { margin-top: 50px; }");
What is the expected behavior: Interpret in style manager as margin-top: 50px;
What is the current behavior: Does not show up in style manager, but renders correctly in canvas
Html example:
<div id="gjs">
<div class="test-block">Hello World!!!</div>
</div>
### Code of Conduct
- [X] I agree to follow this project's Code of Conduct
Answers (3)
Yeah, that's not supported as there might be some performance implications trying to match any possible rule there. What you can do though is select any rule via styleManager.select
Ok, thanks for clarification - currently using select, any ideas how to target media tags that way?
You can get the CSSRule you need (getRule) and then pass it to styleManager.select
Related Questions and Answers
Continue research with similar issue discussions.
Issue #6685
BUG: Custom component styles are not applied after deletion and re-addition
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v143.0.7499.193 Reproducible demo l...
Issue #6180
BUG: Trait's `setValue()` method not called when value changes
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome latest Reproducible demo link https...
Issue #4411
BUG: XSS when add class name to Selector Manager
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v102 Reproducible demo link https:/...
Issue #4310
BUG: Style Manager is inaccurate when using combined CSS selectors which contains "bout" and componentFirst = true
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome 100 Reproducible demo link https://...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.