From 45b9273d3731605db7c32206a596e4e193d15a39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BF=A0=20/=20green?= <green@sapphi.red>
Date: Mon, 4 Apr 2022 19:21:02 +0900
Subject: [PATCH] fix(css): include inline css module in bundle (#7591)

---
 packages/playground/css/__tests__/css.spec.ts |  5 +++++
 packages/playground/css/index.html            |  3 +++
 packages/playground/css/inline.module.css     |  3 +++
 packages/playground/css/main.js               |  3 +++
 packages/vite/src/node/plugins/css.ts         | 21 ++++++++++++-------
 5 files changed, 28 insertions(+), 7 deletions(-)
 create mode 100644 packages/playground/css/inline.module.css

diff --git a/packages/playground/css/__tests__/css.spec.ts b/packages/playground/css/__tests__/css.spec.ts
index ddb5c8c69d0e48..a476826e2023cc 100644
--- 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
index d08bc232752e8b..52d6bffef134e6 100644
--- 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
new file mode 100644
index 00000000000000..9566e21e2cd1af
--- /dev/null
+++ 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
index 6edd840a87c5e7..564b3a56677dbd 100644
--- 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
index c60430f40eca71..e2ce47851b7818 100644
--- 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()