Client generated different class names than server-side when using source-maps

[mgroenhoff]

I found that when I enable source maps, React is giving me a warning:

Warning: Prop className did not match. Server: "css-18slqts-Cell e148iowh2" Client: "css-ngphzi-Cell e148iowh2"

I looked into this and i found that when generating the class name, a hash is created from the generated CSS + some identifier name.

emotion/packages/create-emotion/src/index.js

Line 262 in d9a9e33

name = hashString(styles + identifierName) + identifierName

The styles in my case contains an inline source map URL and this URL is what is different (they're different because one is has a 'sourceRoot' property and contains Windows style paths, and the other does not have a 'sourceRoot' property and contains Unix style paths).

My suggestion is to only generate a hash of the styles up to the start of the source mapping URL comment (when process.env.NODE_ENV !== 'production' ofcourse).

I have tried a quick fix and replaced the previous line with the following and this seems to do the job for me:

    if (process.env.NODE_ENV !== 'production') {
      name = hashString(styles.slice(0, styles.indexOf("/*# sourceMappingURL=") || styles.length) + identifierName) + identifierName;
    } else {
      name = hashString(styles + identifierName) + identifierName;
    }