CSS class name collisions
Closed this issue · 5 comments
If you have multiple copies of RCSS running on a single page, it seems like the CSS classes collide (given that class names are now based on a global (to RCSS) counter).
For example, let's say my project requires one version of RCSS, and one of my node modules also requires a (potentially different) version of RCSS. They both declare a single class, and in both cases, this single class will be labeled with c0, even though they're completely independent and different. Then, two different style objects will both be applied to any item that I identify as .c0.
Moving back to a SHA1 approach would fix this (not that that's necessarily the right answer). A better strategy might be to check if the CSS class already exists on the page in generateValidCSSClassName().
(I could understand this being a "Won't Fix", given that it's sort of an uncommon scenario, but I feel like the whole point of RCSS is to be able to generate CSS classes in a modular way without worrying about what's going on outside your module, and this seems to break just that expectation.)
That's definitely a problem for using third-party modules that use RCSS. SHA1 is slow. Generating a unique className from the object in general is slow.
How about generating a random, low-collision prefix in front of c0? That seems the easiest solution. Alternatively, you can pollute the global scope with an RCSS namespace and store the current class count there. Though not sure how that'll work out for server-side rendering.
Seems reasonable. What about a low-collision suffix (e.g., c0-abcd)? Then, you wouldn't need to worry about the random string starting with a character and it'd be slightly easier (in my opinion) to quickly differentiate between classes on the page (e.g., in devtools).
That said, the prefix seems more logical in that it sort of says "For RCSS instance abcd, this is class c0".
👍
I'll think of some other ways. If this is the better one then I'll go with it.
actually... would it be better to use a version number instead? (Assuming you don't include two identical RCSSs on your page, in which case you have a bigger dedupe problem anyways)
This also helps with debugging in the future.
Nvm. Supporting server-side rendering soon so many same versions of RCSS is possible and ok.