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

[JounQin]

Bug report

Actual Behavior

generated src_render_js.js:

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]

I tried to add space pattern into

css-loader/src/utils.js

Line 263 in 9dd1966

const filenameReservedRegex = /[<>:"/\\|?*]/g;

and then it works as expected, I'd raise a PR if it is accepted.

[JounQin]

Not sure if #997 related.

[JounQin]

@alexander-akait Any time to take a look?

[alexander-akait]

Yeah, technically we have CSS.escape to escape special character before inserting them in JS and it works good for non space characters, but there are some limitation with the class attribute

CSS.escape('1@a'); // -> \\31 \\@a, and you can using them in HTML class attribute
CSS.escape('a b'); // -> a\\ b, you can't

But https://html.spec.whatwg.org/multipage/dom.html#global-attributes:classes-2

When specified on HTML elements, the class attribute must have a value that is a set of space-separated tokens representing the various classes that the element belongs to.

Let's fix it