[🐞] weirdness with CSS import names in dev

[wmertens]

Which component is affected?

Qwik City (routing)

Describe the bug

In https://stackblitz.com/edit/qwik-style9?file=src%2Froutes%2Findex.tsx, you can see that in dev mode, the word count is white. Then when you click + or -, it will become blue or red depending on odd or even.

This happens because the initial load has the style9-generated CSS with a path that doesn't exist, and then the update re-renders the count with a function that imports the CSS with the correct name.

What is going on, and how to fix it?

Reproduction

https://stackblitz.com/edit/qwik-style9?file=src%2Froutes%2Findex.tsx

Steps to reproduce

wait for dev mode to start, and click + or -

Look at the initial network load, it tries to load the CSS with the wrong name and fails. After that, it will load the CSS with the correct name, /@id/...

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: ^1.1.1 => 1.1.1 
    @builder.io/qwik-city: ^1.1.1 => 1.1.1 
    undici: ^5.22.1 => 5.22.1 
    vite: ^4.3.5 => 4.3.5

[stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• qwik-style9 (Open reproduction)