Skip to content

[πŸ“–] CSS Modules and useStyles$() hook approach incompatibilityΒ #7145

@shukklin

Description

@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.

image

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    COMP: docsImprovements or additions to documentation

    Type

    No type

    Projects

    Status

    Backlog

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions