[🐞] Can't useStyle$ where the styles are a variable

[dnsosebee]

Which component is affected?

Qwik Runtime

Describe the bug

I would like a component to apply global styles using a string value at runtime.

Something like this: export const StyleView = component$((props) => { useStyles$(props.styles); return null; });

However, this throws the error [vite] Internal server error: Qrl($) scope is not a function, but it's capturing local identifiers: styles Plugin: vite-plugin-qwik

Other suggestions for achieving my goal would also be appreciated.

Reproduction

https://stackblitz.com/edit/qwik-starter-vtrpex?file=src/routes/styleTest/index.tsx

Steps to reproduce

Navigate to the /styleTest route in the StackBlitz.

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

Additional Information

No response

[stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• qwik-starter-vtrpex (Open reproduction)

[dnsosebee]

Solved via constructable Stylesheet, like so:

 useVisibleTask$(() => {
    const sheet = new CSSStyleSheet();
    sheet.replaceSync(styles);
    document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
  });