Custom CSS Styles Rendering Order

[dtcblyth]

Related thread: https://discord.com/channels/1041765492907589683/1079860683623116862/threads/1199967451060895764

The Problem

I have a text element which the user can style using FontGroup settings and also with an Advanced > Custom CSS field. The CSS selectors for the FontGroup and the Custom CSS field are identical.

It the past, Custom CSS styles were rendered last, so that they would override any other rendered styles for the same element. This no longer seems to be the case.

In Divi 5, Custom CSS styles appear to be rendered after styles which have been rendered by the elements.style({ ... }) function or <CommonStyle /> component. This means that in order to override styles on some elements via Custom CSS, the user is forced use the !important property. However, for element styles which may already use !important, it becomes impossible to ovverride the element with Custom CSS.

You can see an example of this in the screen shot attached. Notice how the FontGroup styles are rendered after the Custom CSS styles and therefore override them. In my opinion this is the incorrect behaviour.

From a developer point of view, the only way to overcome this is to make the Custom CSS selector more specific than the elements.style({ ... }) or selectors, so that it has a higher heirachy. However, this is not always desirable or even possible. A better solution would be for the Custom CSS styles to be rendered last.

[dtcblyth]

Update:

I’ve since realised we can affect the order of the output directly from the code order in module-styles.jsx. So, if the code which generates the Custom CSS is at the end of the file the Custom CSS will override other stlyes as expected.

However, please see the full conversation on Discord, as I believe this is still a valid issue: https://discord.com/channels/1041765492907589683/1079860683623116862/threads/1199967451060895764