[🐞] useStylesScoped$ doesn't support nested CSS

[netzpixel]

[🐞] useStylesScoped$ doesn't support nested CSS

[wmertens]

Ok so the problem seems to be nested CSS not being supported by the scoped styles.

The original CSS (in a .module.css) is

ul {
  color: green;
  
  > :global(a) {
    color: red;
  }
}

During dev, the resulting CSS is

ul.⭐️d907jw-0 {
  color: green;
  
  > a {
    color: red;
  }
}

Note that this is nested CSS, and that Chrome supports this, but the scoped styles don't support it.

And in prod, it becomes

            ul.⭐️d907jw-0 {
                color: green
            }

            ul.⭐️d907jw-0>a.⭐️d907jw-0 {
                color: red
            }

Here, the nested rules are flattened, and the scoped styles correctly add the scoped classes.

So, it's a bug, but only because it should also not be red in dev mode.

To get the Link to be red, you have to do const {scopeId} = useScopedStyles$(...) and then <Link class={scopeId} />. This is the correct way to pass scopes down to Qwik Components.

[netzpixel]

This is in conflict with the docs: https://qwik.dev/docs/components/styles/#global-selector
The <Link class={something} /> is only for non scoped css according to the docs.
Using the ?inline parameter on the style file import changes how the file is read (I'm assuming here) and therefor I can't use it in the same way.

So what is the correct way to handle scoped css? And even better would be to know how to use scoped scss (but we can ignore that for the moment if it makes things way to complicated).

[wmertens]

TBH I think the best way to style is using Tailwind (or UnoCSS).

And to style Qwik components it's best to use the scopeId.

But the behavior of global is a bug

[netzpixel]

Ok, I finally found a solution. The hint with the nested stuff was essential:

Instead of:

ul {
  color: green;
  
  > :global(a) {
    color: red;
  }
}

I have to write this:

ul {
  color: green;
}

ul  > :global(a) {
  color: red;
}

I think the qwikest way to improve the issue would be to update the docs to remove the nesting there.

But still, the bug should be fixed.

[netzpixel]

Ok, I think I have to revert my last comment... It worked in one scenario and doesn't in another.
It works if the global is added to an element which already is tracked. Example:

this works:

nav:global(.open) {
  display: block;
}

this doesn't:

nav :global(a) {
  display: block;
}

Reason seams to be that the first example only adds the .open via JS to an element which has a scoped class already and the second doesn't.
The first one results in something like this: nav.open.⭐️rwl3jt-0 { while the second one creates something like this: nav.⭐️rwl3jt-0 a.⭐️rwl3jt-0 { which doesn't work since the .⭐️rwl3jt-0 doesn't exist on the a tag which still comes from the Link component.