Issue #6365Opened January 8, 2025by MLMarxx0 reactions

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:

  1. Add the dark-style class to the body:
    editor.getWrapper().addClass("dark-style");
    
  2. 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)

artfJanuary 10, 20250 reactions

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

MLMarxxJanuary 10, 20250 reactions

Ok, thanks for clarification - currently using select, any ideas how to target media tags that way?

artfJanuary 11, 20250 reactions

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.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.