OrderClass Not Creating Unique Selector

[dtcblyth]

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

The Problem:

For example, see this style in the Parent Module example, ModuleStyles, styles.tsx, line 66:

<CommonStyle
  selector={iconSelector}
  attr={attrs?.icon?.advanced?.color}
  property="color"
 />

iconSelector is:

const iconSelector = `${orderClass} .et-pb-icon`

When we set a color, the orderClass prop uses the module ID to create this selector:

.example_parent_module_d9d13485-a41a-41a9-b2e2-f125efdb900c .et-pb-icon {
    color: #e09900;
}

Which is the expected selector, BUT if I add another parent module, THAT COLOR IS ALSO APPLIED TO THE NEW CREATED MODULE because of this selector:

.example_parent_module_d04ee6bf-336e-4dac-b16a-422cdd227f83 .et-pb-icon {
    color: #e09900;
}

We haven't set any color in the d04ee6bf-336e-4dac-b16a-422cdd227f83 module yet, but the #e09900 color is also applied there. It looks like the orderClass is generating multiple selectors and therefore, all the styles you defined for a module will be applied to all modules.

To Reproduce:

You can see this by yourself. Just add a module that uses the orderClass prop in the module styles (e.g. icon color in the parent module), set a style from the module settings modal in order for the CSS to be generated, add the same module to the page and the style will be applied to the new module as well.

An Example:

Here’s a screen recording of the problem on a third-party module. Notice that adding border styles to the second instance of the module also affects the first instance. Also, when deleting the second module the styles in the first module are also removed.