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 💯