Bug when extending styles

[atersolis]

First of all, thanks for this lib, I'm amazed by how much it can do while being less than 1kb.
I have reduced my bundle size by a lot using this with preact.

Unfortunately I have run into a bug while extending styles.
Here is a minimal code sample to reproduce the bug:

import React from 'react'
import { render } from 'react-dom'
import { styled, setup } from "goober"

setup(React.createElement)

const RedBase = styled('div')`color: red;`
const Orange = styled(RedBase)`color: orange;`
const Blue = styled(RedBase)`color: blue;`
const UnderlinedBlue = styled(Blue)`text-decoration: underline;`

const App = () => {
	return <div>
		<Orange>Orange</Orange>
		<UnderlinedBlue>UnderlinedBlue</UnderlinedBlue>
	</div>
};

render(<App />, document.getElementById('app'))

In this situation the text in UnderlinedBlue should be blue, but it's red because of a wrong order of the class names in the class attribute. In that case, the classname of RedBase is after the classname of Blue and overwrite it.
Sorry the class names are actually in the right order. The problem most likely comes from the order in which the classes are declared in the generated CSS.

However if I remove <Orange>Orange</Orange>, it is blue as expected.

I am using goober 2.0.19-next.1
I will try to find some time to fix it.

happy new year !

[cristianbote]

Hey @atersolis! Happy New Year! 🎉

Thank you for opening this issue and an already working PR! Amazing! 🙏

The issue is really odd 🤦 was actually convinced that this got fixed a while ago. Gonna dig a bit to look into it more.

[riccardogiorato]

Hey @cristianbote I am having the same issue, is there any fix on this behaviour possible?

[thebrubaker]

Thanks for working on this one! Having the same issue and this would be 💯