fix(css): include inline css module in bundle (#7591)

vitejs · Apr 4, 2022 · 45b9273 · 45b9273
1 parent cf59005
commit 45b9273
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 7 deletions.
diff --git a/packages/playground/css/__tests__/css.spec.ts b/packages/playground/css/__tests__/css.spec.ts
@@ -242,6 +242,11 @@ test('css modules w/ sass', async () => {
   await untilUpdated(() => getColor(imported), 'blue')
 })
 
+test('inline css modules', async () => {
+  const css = await page.textContent('.modules-inline')
+  expect(css).toMatch(/\.inline-module__apply-color-inline___[\w-]{5}/)
+})
+
 test('@import dependency w/ style entry', async () => {
   expect(await getColor('.css-dep')).toBe('purple')
 })

diff --git a/packages/playground/css/index.html b/packages/playground/css/index.html
@@ -89,6 +89,9 @@ <h1>CSS</h1>
   </p>
   <pre class="path-resolved-modules-code"></pre>
 
+  <p>Inline CSS module:</p>
+  <pre class="modules-inline"></pre>
+
   <p class="css-dep">
     @import dependency w/ style enrtrypoints: this should be purple
   </p>

diff --git a/packages/playground/css/inline.module.css b/packages/playground/css/inline.module.css
@@ -0,0 +1,3 @@
+.apply-color-inline {
+  color: turquoise;
+}
diff --git a/packages/playground/css/main.js b/packages/playground/css/main.js
@@ -38,6 +38,9 @@ text(
   JSON.stringify(composesPathResolvingMod, null, 2)
 )
 
+import inlineMod from './inline.module.css?inline'
+text('.modules-inline', inlineMod)
+
 import './dep.css'
 import './glob-dep.css'
 

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
@@ -358,14 +358,21 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
         styles.set(id, css)
       }
 
+      let code: string
+      if (usedRE.test(id)) {
+        if (inlined) {
+          code = `export default ${JSON.stringify(
+            await minifyCSS(css, config)
+          )}`
+        } else {
+          code = modulesCode || `export default ${JSON.stringify(css)}`
+        }
+      } else {
+        code = `export default ''`
+      }
+
       return {
-        code:
-          modulesCode ||
-          (usedRE.test(id)
-            ? `export default ${JSON.stringify(
-                inlined ? await minifyCSS(css, config) : css
-              )}`
-            : `export default ''`),
+        code,
         map: { mappings: '' },
         // avoid the css module from being tree-shaken so that we can retrieve
         // it in renderChunk()