Reserved JS keywords are not allowed as CSS modules class names

[Maxou44]

Describe the bug

When using CSS modules and importing to obtain computed class names, classes named using a JS reserved keywords are not available and return undefined.

There is no console warning or information in the documentation about that, and this test works on Webpack and Parcel.

As the following code is valid in JS, I don't think it should be a problem to support it:

const obj = {
  for : 'hello',
  while: 'world',
};
console.log(obj.for, obj.while);

Reproduction

https://stackblitz.com/edit/vitejs-vite-qmdhmt?file=main.js

Steps to reproduce

No response

System Info

Vite v4.4.9

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-qmdhmt (Open reproduction)

[sapphi-red]

This is not supported because export const for = '' is not valid. We'll need rollup/plugins#1437 to be implemented.

related: #11359

You can import the default import instead for a workaround.

import style from './style.module.css';

[privatenumber]

@Maxou44

I've implemented a fix via https://github.com/privatenumber/vite-css-modules (which is getting integrated into Vite core via #16018).

Would you mind testing it out to see if it resolves your issue?

EDIT: Confirmed working via privatenumber/vite-css-modules@9fdfa5b

[Maxou44]

@privatenumber Tested and it works, thanks for the fix 💪