Support for (S)CSS modules

Qwik Version

0.0.39

Operating System (or Browser)

chrome 103 on windows 11

Node Version (if applicable)

node 18

Which component is affected?

Qwik Rollup / Vite plugin

Expected Behaviour

If I import a SCSS module like this:

import { component$, Host } from '@builder.io/qwik';

import classes from './greet.module.scss';

export const Greet = component$(() => {
  return (
    <Host>
      <div>Hello <span class={classes.pink}>pink</span>!</div>
    </Host>
  );
});

The class name should be applied to the DOM element AND the styles should be appended to the page (if sass is installed)

Actual Behaviour

The class name is applied to the DOM element but the styles are not in the page (even if I have sass installed). Regular non-module scss do work though (ie. import “./greet.scss”)

Additional Information

No response

[IgorSzymanski]

@TheKinng96 The thing you’re talking about is unrelated to the issue. The issue described here is related to CSS modules (namely, files named *.module.(s)css. Now the problem is CSS modules seem to only work with CSS files, but not SCSS files. Vite out of the box is supposed to handle the compilation from SCSS to CSS, but it seems the styles are processed, because classes created by CSS modules are added to HTML elements, but the stylesheet is missing, so the classes reference non-existing styles.

[jrson83]

bump. any updates on this? only thing stopping me from using qwik for prod

Yeah, same here. SASS support would be a great addition.