[🐞] useStylesScoped$ doesn't support nested CSS
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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