[🐞] 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 

[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);
}