Advanced CSS selectors plugin for grapesjs

[lexoyo]

Why?

GrapesJS style manager is used in Silex v3 to style CSS classes and ID of the selected element in the editor

Here are use cases where this is not enough

• In silex v3 users are designing with dynamic data, so sometimes we need to style selectors like .container img because the image is not selectable at edition time
• When designing lists or cards, one need selectors and pseudo selectors: .list ul.cell::nth-child(odd) > li
• Also when styling a rich text which comes from a headless CMS you need selectors like .my-text ul li
• It would be nice to be able to style html tags (h2, nav...) in grapesjs
• For now in silex v3 what we do is add CSS to the head editor but then these styles are not available in the style manager

Here are the ideas I could come up with in order to create a useful plugin for grapesjs

Solution 1

A UI for grapesjs css

• UI to list, select, edit, add, delete css selectors present in grapesjs
• code editor to edit the properties of the selected selectors

Solution 2

Just a code editor to edit all CSS

• Code editor displaying the site css
• Plug the code editor with grapesjs style manager so that the edited styles are also editable in the ui (if they are simple classes or ids)

Solution 3

Preview arbitrary selectors in the layers UI and add arbitrary selectors to the style manager

• Add a text filed on top of the layers list
• Type arbitrary css selector
• Highlight the targeted elements or hide the others
• [No? Or add a button "select targets"?] select elements in the list (+on stage, just use GrapesJS select with component find)
• A button to "style selection" => adds the css selector to the site and select it in the style editor (firrst ask for its display name in the style manager)
• Add a button to the style manager to edit the selector (in a dialog? In the layers?)
• When the user renames the style from the style manager, make sure it works properly

About custom UI for Selector Manager: https://grapesjs.com/docs/modules/Selectors.html#customization

Links

• https://grapesjs.com/docs/api/css_composer.html
• https://github.com/GrapesJS/parser-postcss
• https://github.com/GrapesJS/grapesjs/issues/510#issuecomment-350551593

[lexoyo]

Solution 4

Do as they do in webflow:

• button under the Selector Manager: style all H2
• when styling a tag display a button to add a "nested rule" / a class which is on the parent

Add the ability to

• select a css class as parent
• select a pseudo class
• have multiple pairs "child / parent", e.g. style .parent:pseudo .child

[lexoyo]

@ceubri

[lexoyo]

Solution 4 is good, it lets the user select a class among parents, but while we are at it, we should also let the user select among other CSS combinators such as "next sibling", which would mean we style the element when it is the next sibling of the 2nd selector

=> Replace "when nested in" with "when <select>"

Also why not support design tokens?

=> how?

[lexoyo]

Links

• discussion
• Official feature request
• repo/code