Unexpected behaviour when extending components

[dashzt]

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:

export const Red50 = styled('button')`
  width: 50px;
  height: 50px;
  background: red;
  color: white;
`

export const Blue50 = styled(Red50)`
  background: blue;
`

export const Blue100 = styled(Blue50)`
  width: 100px;
  height: 100px;
`

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

[buchansm]

@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.

[benskz]

I'm also running into this. Any thoughts on how to get around the issue?