Complex CSS selectors plugin for grapesjs

[lexoyo]

Hello

Here is an issue of the roadmap of silex i'd like some feedback on

It is about a plugin addressing this:

• When designing templates with grapesjs and liquidjs, sometimes we need to style selectors like .container img because the image is not selectable at edition time
• It would be nice to be able to style html tags (h2, nav...) In grapesjs

[artf]

It should be already possible, eg:

// Create the CSS rule
const ruleRedLinks = editor.Css.setRule('body a', { color: 'red' });
// Use the rule in the Selector Manager
editor.Selectors.select(ruleRedLinks);

Now all the updates in the Style Manager will be applied to the selected rule

[lexoyo]

Yes that's great thx
A UI is still needed though right?
Because typing directly in the class selector is not possible right now (it makes everything a class) + it is not easy to make up the selectors for most people

So maybe the solution 3? Preview arbitrary selectors in the layers UI and add arbitrary selectors to the style manager from there

[lexoyo]

Or I could do like webflow: https://www.youtube.com/watch?v=94KVMsMFChs&t=160

1. Make it so one could add tag names in addition to classes in the selector manager (how to do that?)
2. Add a second selector manager bellow it to specify a container class / tag name

The drawbacks I see

A/ users will not learn css selectors but custom logic
B/ what if the user needs .class:hover .other?

[artf]

Yeah for this use case you have to go with the custom selector UI

[lexoyo]

Ooooh that's a nice doc I didn't see yet!
Thank you !