QwikDev / QwikDev/qwik

[🐞] useStylesScoped$ doesn't support nested CSS

Open
#6,011 18 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug PR welcomed styling
Dominant language
TypeScript
Stars
22.1k
Forks
1.4k
Avg merge
1d 10h
Merged PRs (30d)
52

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked reproduction and compare yarn start with node entry.cjs. Read the useStylesScoped$ usage, then inspect how entry.cjs imports entry.express.js. Done means the :global() style remains applied to the first Docs link in both startup modes.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, node.js, typescript
Domain
build-system, frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.