[📖] CSS Modules and useStyles$() hook approach incompatibility

[shukklin]

Suggestion

Original docs URL are:
https://qwik.dev/docs/components/styles/#css-modules
https://qwik.dev/docs/components/styles/#usestyles

The context:

1. We have several Qwik repositories - UI Kit and SSR application.
2. We build the UI Kit using Vite with separate index (.js, .css) files for each components to support further tree-shaking in the SSR application.
3. Then we use these builded files in the SSR application and link styles using the useStyles$() hook to support tree-shaking. Because if we import only pure CSS modules without processing it with useStyles$() hook, we will get one large CSS file bundled, which is not good for a large amount of CSS code (currently we have about 840KB CSS bundle size code in total).

We have found that Qwik does not support the use of CSS Modules together with useStyles$()/useStylesScoped$() hooks to load only required CSS rules on the page, as the styles loaded from CSS Modules don't tree-shake (look at the screenshot below with identical styles in different chunks). This leads to CSS code duplication and increased bundle size.

As it turned out, useStyles$()/useStylesScoped$ hooks only supports plain CSS, but not CSS Modules.

I think this point should be better reflected in the documentation, because at the moment there is nothing about it and it is not entirely clear.

[shairez]

@Varixo is it the same in V2?

[Varixo]

@Varixo is it the same in V2?

yes, probably yes