CSS modules with path which contains spaces does not work as expected
Opened this issue · 7 comments
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
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
I tried to add space pattern into https://github.com/webpack-contrib/css-loader/blob/9dd19662bd2df289b75283ebf277d1875bbe5089/src/utils.js#L263 and then it works as expected, I'd raise a PR if it is accepted.
@alexander-akait Any time to take a look?
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
@alexander-akait I don't know how to add a test case for it easily, or we just change the filenameReservedRegex?
@JounQin I think we can change filenameReservedRegex and look at our tests, if we don't broken anything we can merge and do a patch release
@alexander-akait Here we go #1632