stitchesjs / stitches

[Not Actively Maintained] CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.

https://stitches.dev

MIT License

7.75k stars 253 forks source link

Variants incorrect priority #1009

Open panzelva opened 2 years ago

panzelva commented 2 years ago

Bug report

Describe the bug

Looks like there is some inconsistency how stitches prioritizes styles from variants. I would expect, that variant that is declared later in styled component would take priority, but it looks like sometimes it does and sometimes it doesn't. If this is not the case, I would expect that it is atleast consistent.

I guess that this is not big issue, because I can use compoundVariants, but the inconsistency seems wierd.

To Reproduce

Please see this sandbox.

In the sandbox, there is styled component Button, that has variants variant and isDisabled. When combining these variants, isDisabled sometimes takes priority, sometimes doesn't.

Expected behavior

isDisabled always takes priority, because its declared later in styled component.

Screenshots

System information

OS: Ubuntu 21.10
Browser: chrome
Version of Stitches: 1.2.7
Version of Node.js: 16.14.0

lucastobrazil commented 2 years ago

Related: https://github.com/stitchesjs/stitches/issues/883

b3ncr0w commented 1 year ago

I changed this behavior in the fork I prepared for my company. Variants take priority due to the order of declaration, not the order of use

https://github.com/patchkit-net/stitches

yarn add git+https://github.com/patchkit-net/stitches-react-package.git

stitches-fork-demo.zip stitches-original-demo.zip Original: Forked: fork