Issues with class name generation

[satya164]

In development, the class name is generated from the file hash and the variable name, while in production it's generated from the hash of the styles and variable name. This might result in inconsistent output between production and development, and cause hard to track specificity issues.

For example, in production, multiple styles won't be inserted for a style block if they are the same, even if they are in separate files. In development, multiple styles will always be inserted if they are in separate files regardless of their content.

This might cause specificity issues if a style is exported for use in a separate file, or passed as a prop, since the order of declaration matters.

We have the following problems to solve here:

• The output stylesheet should be consistent between production and development
• HMR should work, which means the class names in a file cannot change
• There should be no collision between class names

Appending line numbers have the same issue as hashing the content, because they can easily change just like the content.

Possible solution

• Always use hash of file name instead of the content. AFAIK this is how CSS modules does it too.
• Keep track of class names generated per file, and if there are multiple instances of class names in a file which has the same name, append the count of the class name. For example, if there are 2 header__grefwr5, then append 1 to the second one and so on.
• This logic can be inside the sheet module, where it can keep a cache of css per file, e.g. - { [filepath: string]: { [selector: string]: string } }
• Even with this approach, HMR can still break if the declarations are moved around, but the frequency of this happening should be low.
• The downside of this approach is that styles aren't de-duplicated in production, but this would be easily optimized by gzipping the CSS.

Lemme know if you have any better ideas.

[zamotany]

Ok, we can change it. Class name hashes should be generated from filename.