Skip to content

feat(css): emit named exports for JS keyword class names in CSS modules#22393

Open
semimikoh wants to merge 1 commit into
vitejs:mainfrom
semimikoh:fix/css-modules-keyword-named-exports
Open

feat(css): emit named exports for JS keyword class names in CSS modules#22393
semimikoh wants to merge 1 commit into
vitejs:mainfrom
semimikoh:fix/css-modules-keyword-named-exports

Conversation

@semimikoh
Copy link
Copy Markdown
Contributor

@semimikoh semimikoh commented May 5, 2026

CSS modules containing class names that match JavaScript reserved keywords
(e.g. switch, if, for, class) were not emitted as named exports,
making them accessible only via the default export object.

Summary

  • dataToEsm skips named export generation when a key fails the
    key === makeLegalIdentifier(key) check — reserved words like switch
    get prefixed to _switch, so they never match
  • Added includeArbitraryNames: true option to the dataToEsm call in
    cssPostPlugin, which emits string-named exports for such keys:
    export { _arbitrary0 as "switch" }
  • Reserved keyword class names are now accessible via namespace import
    (styles.switch) or string literal import (import { "switch" as s })

Related

Fixes #14050

Test plan

Added playground test case with a CSS module containing a .switch class,
verifying it is correctly applied via import * as keywordMod and
keywordMod.switch

Copy link
Copy Markdown
Member

@sapphi-red sapphi-red left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this will break existing apps when the app targets browsers that does not support the arbitrary names feature.
I guess we need to conditionally enable this when the target supports them. or maybe we can transpile it somehow.

@sapphi-red sapphi-red changed the title fix(css): emit named exports for JS keyword class names in CSS modules feat(css): emit named exports for JS keyword class names in CSS modules May 21, 2026
@sapphi-red sapphi-red added feat: css p2-nice-to-have Not breaking anything but nice to have (priority) labels May 21, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feat: css p2-nice-to-have Not breaking anything but nice to have (priority)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Reserved JS keywords are not allowed as CSS modules class names

2 participants