Unique components receive non-unique classnames

[mindplay-dk]

I was trying out goober and quickly ran into problems with nested selectors - have a look here:

https://stackblitz.com/edit/vitejs-vite-zbyg2anw?file=src%2FApp.tsx

The letters should turn red, green, blue and yellow when hovering - instead, the red/green/blue hover states all turn blue.

It looks like this is due to colliding hashes:

For this simple example, you can fix it by making sure the styles are non-unique, e.g.:

const R = styled('div')`
  color: gray;
`;

const G = styled('div')`
  color: darkgray;
`;

const B = styled('div')`
  color: lightgray;
`;

If unique components don't get a unique hash, you can't override them individually, as I'm trying to do in this example.

To ensure that unique components get unique class-names, probably the component ID should figure into the hash?

e.g. a global component ID counter being used to assign a unique ID to every styled component, and then including that in the hash?

[mindplay-dk]

Huh, that might not be the reason at all. 😅

Looking at the compiled CSS stylesheet:

.go4059959218 {
  color: gray;
}
.go1859850488 {
  color: hotpink;
}
.go1202408551 {
  font-size: 80px;
  font-weight: bold;
}
.go1202408551:hover .go4059959218 {
  color: blue;
}
.go1202408551:hover .go1859850488 {
  color: yellow;
}

is it trying to emulate CSS native nested child selectors for older browsers?

native support for nesting is only just over a year new, but perhaps that's not needed anymore?

or maybe ensuring uniqueness for unique components like I suggested is enough? it appears to solve it, so I'm not sure. here's a before/after with the uniqueness change for my example:

it looks to me as though it's unwrapping nested rules? but the result doesn't currently work quite like natively nested CSS? nor like nested CSS in other CSS-in-JS frameworks, I think? certainly not like I'd expect anyway. 😊

[cristianbote]

heya @mindplay-dk!

or maybe ensuring uniqueness for unique components like I suggested is enough?

I tend to agree here.

The classnames are generated based on the styles. So if two calls to styled uses the same styles value, the generated classnames are and will always be equal.

[mindplay-dk]

To be clear, what meant by ensuring uniqueness was this:

If unique components don't get a unique hash, you can't override them individually, as I'm trying to do in this example.

To ensure that unique components get unique class-names, probably the component ID should figure into the hash?

e.g. a global component ID counter being used to assign a unique ID to every styled component, and then including that in the hash?

I would not suggest developers need to learn how to work around this issue.

Would it be that difficult to include a component ID in the hash? I don't imagine this would take more than a few lines of code.

From my perspective, this is definitely a bug, and not something we should deal with on a case-by-case basis. (which isn't really practically possible in a modular scenario even with a few contributors, much less with third-party packages, and so on.)

[cristianbote]

Including it wouldn't be that problematic the issue would be generating different IDs on the server vs the client -- since goober can run anywhere. But maybe at that point goober essentially will generate new style entries with different IDs on the client.

This was just something I quickly added in it #610

[mindplay-dk]

Including it wouldn't be that problematic the issue would be generating different IDs on the server vs the client -- since goober can run anywhere. But maybe at that point goober essentially will generate new style entries with different IDs on the client.

I'm not really sure what you're saying at all. 😅

This was just something I quickly added in it #610

this looks like it would create a unique ID for every call to styled? isn't that effectively the same as disabling the cache?

my thinking was more along the lines of let _uniqueId = 'go' + (tag.__co || (tag.__co = ++co))

such that you would get a unique ID for every component, rather than every derived component? not sure. 😅