fix(css): treeshake css modules (#16051)

Author: bluwy

packages/vite/src/node/plugins/css.ts

@@ -542,7 +542,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
         map: { mappings: '' },
         // avoid the css module from being tree-shaken so that we can retrieve
         // it in renderChunk()
-        moduleSideEffects: inlined ? false : 'no-treeshake',
+        moduleSideEffects: modulesCode || inlined ? false : 'no-treeshake',
       }
     },
 

playground/css/__tests__/css.spec.ts

@@ -533,3 +533,8 @@ test.runIf(isBuild)('manual chunk path', async () => {
     findAssetFile(/dir\/dir2\/manual-chunk-[-\w]{8}\.css$/),
   ).not.toBeUndefined()
 })
+
+test.runIf(isBuild)('CSS modules should be treeshaken if not used', () => {
+  const css = findAssetFile(/\.css$/, undefined, undefined, true)
+  expect(css).not.toContain('treeshake-module-b')
+})

playground/css/index.html

@@ -105,6 +105,8 @@ <h1>CSS</h1>
   <p>Imported SASS module:</p>
   <pre class="modules-sass-code"></pre>
 
+  <p class="modules-treeshake">CSS modules should treeshake in build</p>
+
   <p>Imported compose/from CSS/SASS module:</p>
   <p class="path-resolved-modules-css">
     CSS modules composes path resolving: this should be turquoise

playground/css/main.js

@@ -20,6 +20,11 @@ import sassMod from './mod.module.scss'
 document.querySelector('.modules-sass').classList.add(sassMod['apply-color'])
 text('.modules-sass-code', JSON.stringify(sassMod, null, 2))
 
+import { a as treeshakeMod } from './treeshake-module/index.js'
+document
+  .querySelector('.modules-treeshake')
+  .classList.add(treeshakeMod()['treeshake-module-a'])
+
 import composesPathResolvingMod from './composes-path-resolving.module.css'
 document
   .querySelector('.path-resolved-modules-css')

playground/css/treeshake-module/a.js

@@ -0,0 +1,5 @@
+import style from './a.module.css'
+
+export function a() {
+  return style
+}

playground/css/treeshake-module/a.module.css

@@ -0,0 +1,3 @@
+.treeshake-module-a {
+  color: red;
+}

playground/css/treeshake-module/b.js

@@ -0,0 +1,5 @@
+import style from './b.module.css'
+
+export function b() {
+  return style
+}

playground/css/treeshake-module/b.module.css

@@ -0,0 +1,3 @@
+.treeshake-module-b {
+  color: red;
+}

playground/css/treeshake-module/index.js

@@ -0,0 +1,2 @@
+export { a } from './a.js'
+export { b } from './b.js'

playground/test-utils.ts

@@ -156,6 +156,7 @@ export function findAssetFile(
   match: string | RegExp,
   base = '',
   assets = 'assets',
+  matchAll = false,
 ): string {
   const assetsDir = path.join(testDir, 'dist', base, assets)
   let files: string[]
@@ -167,10 +168,21 @@ export function findAssetFile(
     }
     throw e
   }
-  const file = files.find((file) => {
-    return file.match(match)
-  })
-  return file ? fs.readFileSync(path.resolve(assetsDir, file), 'utf-8') : ''
+  if (matchAll) {
+    const matchedFiles = files.filter((file) => file.match(match))
+    return matchedFiles.length
+      ? matchedFiles
+          .map((file) =>
+            fs.readFileSync(path.resolve(assetsDir, file), 'utf-8'),
+          )
+          .join('')
+      : ''
+  } else {
+    const matchedFile = files.find((file) => file.match(match))
+    return matchedFile
+      ? fs.readFileSync(path.resolve(assetsDir, matchedFile), 'utf-8')
+      : ''
+  }
 }
 
 export function readManifest(base = ''): Manifest {