Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] css module path with spaces does not work as expected, rspack works by the way #4278

Closed
JounQin opened this issue Dec 26, 2024 · 2 comments

Comments

@JounQin
Copy link

JounQin commented Dec 26, 2024

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

{
  "@rspack/cli": "^1.1.8",
  "@rspack/core": "^1.1.8",
  "@rsbuild/core": "^1.1.13"
}

When running pnpm dev:rspack, the generated class name is rspack-repro-_src_space_folder_render_module_css-text which works as expected, but for pnpm dev:rsbuild, it's src-space folder-render-module__text-DF713n in html and .src-space\ folder-render-module__text-DF713n in .css file.

And it's not possible to escape spaces into html.

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

The original el.classList.add(styles.text) throws:

https://github.com/JounQin/rspack-css-modules-spaces/blob/4d081a81dafb914b63d3800e06cc3bb62032224c/src/render.js#L5

Uncaught (in promise) InvalidCharacterError: Failed to execute 'add' on 'DOMTokenList': The token provided ('src-space folder-render-module__text-DF713n') contains HTML space characters, which are not valid in tokens.
    at Module.render (render.js:6:1)
    at index.js:2:1
@JounQin
Copy link
Author

JounQin commented Dec 26, 2024

Just find out it's actually css-loader's issue, it can also be reproduced with webpack and rspack:

JounQin/rspack-css-modules-spaces@aba4f74#diff-72c0c573b2c8e6a48f39d5398d801b197415040d87363a982bc57dbc024d3d75R23-R44

I raised webpack-contrib/css-loader#1626

@chenjiahan
Copy link
Member

Thanks, as this has been reported to the css-loader repo, I will close the current issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants