Provide a way to configure rule specificity

[drupsys]

I'm migration an old application to react, using mui as default components, since v5 mui started to use emotion which brings me here. This legacy application has a lot of styles that cannot be removed and are messing up material ui components, I need emotion generated css to have higher specificity. This is something that I used to be able to do quite easily with JSS plugins, all that you need to do is prefix all rules with :not(#\\20) where #\\20 is just a char DC4 (device control 4), this can be anything I just chose #\\20 because no one would normally have an id with this name, e.g.

example 1

:not(#\\20) div {
    // your css code...
}

the number of :not(#\\20) defines the specificity, with this approach you can have multiple layers of specificity

example 2

:not(#\\20):not(#\\20) div {
    // your css code...
}

will always take precendence over the example 1. This approach to specificity increase is described here and if you would like to see how I did this in JSS you can find source code for it here and here (no documentation for it, sorry).

Since material ui moved to emotion I now have a need to find a way to replicate this functionality in emotion, perhaps this is something that is already possible but I can't find any documentation for it, so I would like to propose 2 solutions.

Solution 1

Add an ability to add plugins that allow css rule names to be modified. A highly flexible solution but probably too difficult to use.

Solution 2

Add an ability to specify the level of specificity emotion should use. A react example could be something like

export interface ICssSpecificityState {
  level: number;
  prefix: string;
}

const CssSpecificityContext = createContext<ICssSpecificityState>({
  level: 0,
  prefix: ':not(#\\20)',
});

With this users would be able to choose the specificity that suits them, this is less flexible approach but very easy to use.