CRITICAL: in development, CSS modules class names are not scoped and collide between sources of the same folder

[jsamr]

🐛 Bug Report

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io
• I have read the console error message carefully (if applicable)

Description

In development, CSS modules class names are not scoped and collide between sources of the same folder

Have you read the Contributing Guidelines on issues?

Yes.

Steps to reproduce

1. Create two components in the same folder, each with its own .module.css file.
2. For each of those CSS modules, create a .root rule with a discernible background color.
3. Import the root class in each of these component and apply the style to the top element returned by this component.
4. Import and display those two components in a page.

Expected behavior

Each of these components background should be distinct, because each component should have a unique class name.

Actual behavior

Each of these components has the same background color, because each component has the same class name (e.g. root_src-components-. It looks like the method to extract a unique class name is missing the file name.

Your environment

• Public source code: https://codesandbox.io/s/docusaurus-css-collision-5xqmy?file=/src/pages/index.js
• Public site URL: https://codesandbox.io/s/docusaurus-css-collision-5xqmy?file=/src/pages/index.js
• Docusaurus version used: 2.0.0-beta.1
• Environment name and version : Firefox 89
• Operating system and version : Manjaro Linux, kernel 5.9.16

Reproducible demo

https://codesandbox.io/s/docusaurus-css-collision-5xqmy?file=/src/pages/index.js

Remarks: I haven't tried to assess if this issue also happens in production yet.

[slorber]

Thanks, will be fixed by #5034

Shouldn't happen in prod because we use shorter classnames including a hash