Skip to content

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

Open
@JounQin

Description

@JounQin

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions