css-loader icon indicating copy to clipboard operation
css-loader copied to clipboard

CSS modules with path which contains spaces does not work as expected

Open JounQin opened this issue 10 months ago • 7 comments

Bug report

Actual Behavior

generated src_render_js.js:

image

source render.js:

import * as styles from './space folder/render.module.css';

export function render() {
  const el = document.createElement('div');
  el.className = styles.text; // styles.text contains a space which breaks styling
  document.getElementsByTagName('body')[0].appendChild(el);
  el.innerHTML = 'hello, world';
}

Expected Behavior

https://stackoverflow.com/questions/50812118/is-it-possible-to-use-the-space-character-in-css-class-names

The generated class is src-space folder-render-module__text-WVNeAh which contains a space, but it's not possible to escape spaces, so the spaces in path should be changed to __ for example.

How Do We Reproduce?

https://github.com/JounQin/rspack-css-modules-spaces

Run pnpm dev:webpack

Please paste the results of npx webpack-cli info here, and mention other relevant information

JounQin avatar Dec 26 '24 16:12 JounQin