#6011·qwik

[] useStylesScoped$ doesn't support nested CSS

Author: netzpixelCreated Mar 14, 2024Updated Aug 29, 2026
LabelsbugstylingPR welcomed

Which component is affected?

Qwik Runtime

Describe the bug

I have a simple qwik project with qwik city. I use scoped styles with useStylesScoped$. I'm styling the Link component via the :global() selector. In development all is fine. After deployment I noticed all the :global() styles are missing. I use the node deployment with the entry.server.js.

I investigated a bit and found out that if I start the app via the terminal with yarn start (after a successful build) all is fine, but if I start the same build via a node command (which I have to do for my specific deployment environment) the :global() styles are all gone.

I have a entry.cjs file to then just import the entry.express.js Like so:

(() => import('./entry.express.js'))()

With that setup (local and on the hosting provider) I get the same broken result.

Reproduction

https://github.com/netzpixel/qwik-broken-global-example

Steps to reproduce

npm install´ npm run dev` open the page

check the color of the first link (Docs) -> should be red


stop the running process node entry.cjs open the page

check the color of the first link (Docs) -> it's not red anymore

System Info

System:
    OS: macOS 14.3.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 136.67 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v20.11.0/bin/yarn
    npm: 10.4.0 - ~/.nvm/versions/node/v20.11.0/bin/npm
    bun: 1.0.7 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 122.1.63.165
    Chrome: 122.0.6261.128
    Edge: 122.0.2365.80
    Safari: 17.3.1
  npmPackages:
    @builder.io/qwik: ^1.5.1 => 1.5.1 
    @builder.io/qwik-city: ^1.5.1 => 1.5.1 
    undici: * => 6.8.0 
    vite: ^5.1.4 => 5.1.6

Additional Information

The system seams to be unrelated. The same happens on a linux server.