refactor(css): use default CSS modules localsConvention settings

BREAKING CHANGE: CSS modules now defaults to export class names as-is. To get camelCase exports like before, explictly set `css.modules.localsConvention` via config.
vitejs · Feb 5, 2021 · fee7393 · fee7393
1 parent 2c914a5
commit fee7393
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/docs/guide/features.md b/docs/guide/features.md
@@ -123,7 +123,15 @@ import classes from './example.module.css'
 document.getElementById('foo').className = classes.red
 ```
 
-Note that the CSS modules `localsConvention` defaults to `camelCaseOnly` - i.e. a class named `.foo-bar` will be exposed as `classes.fooBar`. CSS modules behavior can be configured via the [`css.modules` option](/config/#css-modules).
+CSS modules behavior can be configured via the [`css.modules` option](/config/#css-modules).
+
+If `css.modules.localsConvention` is set to enable camelCase locals (e.g. `localsConvention: 'camelCaseOnly'`), you can also use named imports:
+
+```js
+// .apply-color -> applyColor
+import { applyColor } from './example.module.css'
+document.getElementById('foo').className = applyColor
+```
 
 ### CSS Pre-processors
 

diff --git a/packages/playground/css/main.js b/packages/playground/css/main.js
@@ -8,11 +8,11 @@ import less from './less.less'
 text('.imported-less', less)
 
 import mod from './mod.module.css'
-document.querySelector('.modules').classList.add(mod.applyColor)
+document.querySelector('.modules').classList.add(mod['apply-color'])
 text('.modules-code', JSON.stringify(mod, null, 2))
 
 import sassMod from './mod.module.scss'
-document.querySelector('.modules-sass').classList.add(sassMod.applyColor)
+document.querySelector('.modules-sass').classList.add(sassMod['apply-color'])
 text('.modules-sass-code', JSON.stringify(sassMod, null, 2))
 
 import './dep.css'

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
@@ -59,9 +59,14 @@ export interface CSSModulesOptions {
     | ((name: string, filename: string, css: string) => string)
   hashPrefix?: string
   /**
-   * default: 'camelCaseOnly'
+   * default: 'camelCase'
    */
-  localsConvention?: 'camelCase' | 'camelCaseOnly' | 'dashes' | 'dashesOnly'
+  localsConvention?:
+    | 'camelCase'
+    | 'camelCaseOnly'
+    | 'dashes'
+    | 'dashesOnly'
+    | null
 }
 
 const cssLangs = `\\.(css|less|sass|scss|styl|stylus|postcss)($|\\?)`
@@ -560,7 +565,6 @@ async function compileCSS(
   if (isModule) {
     postcssPlugins.unshift(
       (await import('postcss-modules')).default({
-        localsConvention: 'camelCaseOnly',
         ...modulesOptions,
         getJSON(_: string, _modules: Record<string, string>) {
           modules = _modules