[🐞] CSS modules not being linked in the build.

[FelipeIzolan]

Which component is affected?

Qwik Rollup / Vite plugin

Describe the bug

Reproduction

https://github.com/FelipeIzolan/qwik-issue

Steps to reproduce

No response

System Info

System:
    OS: Linux 6.9 Arch Linux
    CPU: (8) x64 AMD Ryzen 5 7520U with Radeon Graphics
    Memory: 4.06 GB / 7.00 GB
    Container: Yes
    Shell: 5.2.26 - /usr/bin/bash
  Binaries:
    Node: 22.3.0 - /usr/bin/node
    npm: 10.8.1 - /usr/bin/npm
    pnpm: 9.3.0 - /usr/bin/pnpm
  Browsers:
    Chromium: 126.0.6478.114
  npmPackages:
    @builder.io/qwik: ^1.5.7 => 1.5.7
    @builder.io/qwik-city: ^1.5.7 => 1.5.7
    typescript: 5.4.5 => 5.4.5
    undici: ^6.19.2 => 6.19.2
    vite: ^5.3.1 => 5.3.1

Additional Information

No response

[gioboa]

Hi @FelipeIzolan thanks for your report. what's the expected behaviour? From your screenshot I can see the "terminal" with a different style

[FelipeIzolan]

Hi @FelipeIzolan thanks for your report. what's the expected behaviour? From your screenshot I can see the "terminal" with a different style

Hi! So in the dev environment, the css module that i'm importing on line-14 (the second image) is working fine, but when I execute the preview and see the result, the css module that was imported is not being linked.

The expected behavior is to split the CSS files and only load what the page needs, instead of bundling all CSS into a single file.

Example: I'm using Prism to syntax-highlight the <code> block. Since not every page will have a code block, it's best to only load the necessary CSS.

[gioboa]

Hi @FelipeIzolan thanks for the basic reproduction repository. I tested the your example and in production build ~/prism.module.css is detected as unused. In fact, the preview build remove it. To solve this issue you need to use the css module as explained in the Qwik documentation.

eg.

import styles from '~/prism.module.css';

export default component$(() => {
  return (
    <>
      <h1 class={styles.test}>Hello, World!</h1>
      [...]
    </>
  );
});

CSS file

It works as documented, so I'm closing this issue for now, feel free to re-open it if it's still an issue for you. Thanks