Gist of the problem:
We are using preact (10.11.3) and goober (2.1.13) on our project.
We have 2 level inheritance of extended components
Example from demo app:
Then actuall styles applied to the last component (Blue100 in this example) become dependant on the order in which those components are mounted to preact
I've found the order, which I also used in a demo app:
<Red50>
Red 50
</Red50>
<Blue100>
Blue 100
</Blue100>
<Blue50>
Blue 50
</Blue50>
In this case Blue100 and Blue50 have their styles broken
If I take a closer look on Blue100 and Blue50 styles, I see that background: blue class is applied
Which I can see is overriden but background: red, because of the order class selectors are put into
I believe all other combinations of mount order work well
@cristianbote, any updates on this? I'm also running into this problem. This is not a trivial bug. If users can't overwrite css properties, then goober is not a valid css-in-js solution.
I've created a demo repo to this bug, so it's easier to understand it https://github.com/dashzt/goober-extending-components-bug
Gist of the problem: We are using preact (10.11.3) and goober (2.1.13) on our project. We have 2 level inheritance of extended components Example from demo app:
Then actuall styles applied to the last component (Blue100 in this example) become dependant on the order in which those components are mounted to preact
I've found the order, which I also used in a demo app:
In this case Blue100 and Blue50 have their styles broken
If I take a closer look on Blue100 and Blue50 styles, I see that background: blue class is applied
Which I can see is overriden but background: red, because of the order class selectors are put into
I believe all other combinations of mount order work well