vitejs / vite

Next generation frontend tooling. It's fast!
http://vitejs.dev
MIT License
67.17k stars 6.04k forks source link

Reserved JS keywords are not allowed as CSS modules class names #14050

Open Maxou44 opened 1 year ago

Maxou44 commented 1 year ago

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

stackblitz[bot] commented 1 year ago

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

sapphi-red commented 1 year ago

This is not supported because export const for = '' is not valid. We'll need https://github.com/rollup/plugins/issues/1437 to be implemented.

related: https://github.com/vitejs/vite/issues/11359

You can import the default import instead for a workaround.

import style from './style.module.css';
privatenumber commented 6 months ago

@Maxou44

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

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

EDIT: Confirmed working via https://github.com/privatenumber/vite-css-modules/commit/9fdfa5bdbcd246ca7e9fd3a79f5c6a156a35a181

Maxou44 commented 6 months ago

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