fix(optimizer): include exports for css modules (#13519)

vitejs · Jun 14, 2023 · 1fd9919 · 1fd9919
1 parent 1999311
commit 1fd9919
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 5 deletions.
diff --git a/packages/vite/src/node/optimizer/esbuildDepPlugin.ts b/packages/vite/src/node/optimizer/esbuildDepPlugin.ts
@@ -1,6 +1,6 @@
 import path from 'node:path'
 import type { ImportKind, Plugin } from 'esbuild'
-import { CSS_LANGS_RE, KNOWN_ASSET_TYPES } from '../constants'
+import { KNOWN_ASSET_TYPES } from '../constants'
 import { getDepOptimizationConfig } from '..'
 import type { PackageCache, ResolvedConfig } from '..'
 import {
@@ -12,6 +12,7 @@ import {
   normalizePath,
 } from '../utils'
 import { browserExternalId, optionalPeerDepId } from '../plugins/resolve'
+import { isCSSRequest, isModuleCSSRequest } from '../plugins/css'
 
 const externalWithConversionNamespace =
   'vite:dep-pre-bundle:external-conversion'
@@ -172,10 +173,11 @@ export function esbuildDepPlugin(
           // import itself with prefix (this is the actual part of require-import conversion)
           const modulePath = `"${convertedExternalPrefix}${args.path}"`
           return {
-            contents: CSS_LANGS_RE.test(args.path)
-              ? `import ${modulePath};`
-              : `export { default } from ${modulePath};` +
-                `export * from ${modulePath};`,
+            contents:
+              isCSSRequest(args.path) && !isModuleCSSRequest(args.path)
+                ? `import ${modulePath};`
+                : `export { default } from ${modulePath};` +
+                  `export * from ${modulePath};`,
             loader: 'js',
           }
         },

diff --git a/playground/optimize-deps/__tests__/optimize-deps.spec.ts b/playground/optimize-deps/__tests__/optimize-deps.spec.ts
@@ -215,6 +215,7 @@ test('pre bundle css require', async () => {
   }
 
   expect(await getColor('.css-require')).toBe('red')
+  expect(await getColor('.css-module-require')).toBe('red')
 })
 
 test.runIf(isBuild)('no missing deps during build', async () => {

diff --git a/playground/optimize-deps/dep-css-require/mod.cjs b/playground/optimize-deps/dep-css-require/mod.cjs
@@ -0,0 +1,2 @@
+const style = require('./mod.module.css')
+module.exports = style
diff --git a/playground/optimize-deps/dep-css-require/mod.module.css b/playground/optimize-deps/dep-css-require/mod.module.css
@@ -0,0 +1,3 @@
+.cssModuleRequire {
+  color: red;
+}
diff --git a/playground/optimize-deps/index.html b/playground/optimize-deps/index.html
@@ -99,6 +99,9 @@ <h2>Non Optimized Module isn't duplicated</h2>
 <h2>Pre bundle css require</h2>
 <div class="css-require">css require</div>
 
+<h2>Pre bundle css modules require</h2>
+<div class="css-module-require">This should be red</div>
+
 <script>
   function text(el, text) {
     document.querySelector(el).textContent = text
@@ -127,6 +130,10 @@ <h2>Pre bundle css require</h2>
 
   import '@vitejs/test-dep-cjs-with-assets'
   import '@vitejs/test-dep-css-require'
+  import cssModuleRequire from '@vitejs/test-dep-css-require/mod.cjs'
+  document
+    .querySelector('.css-module-require')
+    .classList.add(cssModuleRequire.cssModuleRequire)
 
   import { env } from '@vitejs/test-dep-node-env'
   text('.node-env', env)