bug: mergeClasses order of arguments not working as expected when used with Webpack Extraction plugin about griffel HOT 5 CLOSED

Hi @layershifter. Please take a closer look at the screenshots of FUI9 Button's computed styles, the mergeClasses bug @rafaeltavares identified (including multiple classNames with different values for the same style rule) can be seen in the official Button Storybook examples as well as in our product.

There is no problem with that, it's how the combination of makeResetStyles() and makeStyles() works 🐱

makeResetStyles() produces a monolithic class, makeStyles() a set of atomic that will be deduplicated in mergeClasses() call. Classes from makeStyles() will always win over makeResetStyles() because of the order of appearance (that's why deduplication between makeResetStyles() and makeStyles() is not needed):

<style data-make-styles-bucket="r">
 .reset-styles {}
</style>
<style data-make-styles-bucket="d">
 .atomic-a {}
 .atomic-b {}
 .atomic-c {}
</style>

Here is, the example: https://codesandbox.io/s/boring-poitras-5rdxnl?file=/src/App.js

The problem is that in your stylesheet you have following (wrong order):

/* WRONG ORDER & DUPLICATION 🔴 */
 .atomic-a {}
 .atomic-b {}
 .atomic-b {}
 .atomic-c {}
 .reset-styles {}

While it should be:

/* CORRECT ORDER 🟢  */
 .reset-styles {}
 .atomic-a {}
 .atomic-b {}
 .atomic-c {}

Please check suggestions from #447 (comment).

from griffel.

Rules in styles-commond_ should be sorted and deduplicated in the same way as in runtime. This looks like a problem with your setup.

Please check that you're using the latest versions of the plugin and you have proper setup (https://griffel.js.org/react/css-extraction/with-webpack), you should have GriffelCSSExtractionPlugin in your config.

from griffel.

Hi @layershifter. Please take a closer look at the screenshots of FUI9 Button's computed styles, the mergeClasses bug @rafaeltavares identified (including multiple classNames with different values for the same style rule) can be seen in the official Button Storybook examples as well as in our product. Note that the bug doesn't manifest in visual errors unless the Webpack Extraction Plugin is enabled, in which case the order of class names in griffel.css appears to introduce the specificity issue.

At this point we don't have a clear repro in our own feature code so it's hard to tell how exactly to reproduce this. We suspect this is either a bug in Griffel's mergeClasses there's some type of configuration or API misuse in the FUI9 Button code.

from griffel.

We'll investigate our webpack config, thank you!

from griffel.

Closing for now, will reopen if new details will appear.

from griffel.