[🐞] CSS is being included multiple times on the page

[cmbartschat]

Which component is affected?

Qwik Runtime

Describe the bug

The same CSS file is being inlined multiple times.

I have two separate components including the same style.css with useStyles$. If I render the same component multiple times, the css file is only included once, but with multiple components, there are duplicate <style> elements inserted.

Reproduction

https://stackblitz.com/edit/qwik-starter-yaczdi

Steps to reproduce

• Open the link
• npm run preview
• Inspect the section elements
• See that there are two css rules that target it

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    @builder.io/qwik: ^0.100.0 => 0.100.0 
    @builder.io/qwik-city: ^0.100.0 => 0.100.0 
    undici: 5.21.0 => 5.21.0 
    vite: 4.2.1 => 4.2.1 

[bolt-new-by-stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• qwik-starter-yaczdi (Open reproduction)

[gioboa]

Hi @cmbartschat
I can't reproduce the issue, with the latest version of Qwik, is it still valid?

[github-actions[bot]]

Hello @cmbartschat. Please provide the missing information requested above.
Issues marked with STATUS-2: missing info will be automatically closed if they have no activity within 14 days.
Thanks 🙏

[wmertens]

The CSS is included twice because you include it twice in two different components.

Although probably the css import should result in the same css qrl somehow.

[cmbartschat]

Here's a repro with the latest qwik.new

https://stackblitz.com/edit/qwik-starter-ihm7vt?file=src%2Froutes%2Fsection-b.tsx,src%2Froutes%2Fsection-a.tsx,src%2Froutes%2Fservice-worker.ts

We still see the duplicated styles:

The problem goes away if I switch to a shared hook like:

import { useStyles$ } from '@builder.io/qwik';

import styles from './shared-styles.css?inline';

export const useSharedStyles = () => {
  useStyles$(styles);
}

[gioboa]

We moved this issue to qwik-evolution repo to create a RFC discussion for this.
Here is our Qwik RFC process thanks.

[wmertens]

So I think we should change the optimizer because right now it is using the location of the line for the hash of the QRL and instead it should use the location of the variable that it is wrapping. So in that case this import would always have the same hash and it would only be included once.