From cf8a48a6c8b3b1f9ef2a2cf41765d456f85c6cae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BF=A0=20/=20green?= <green@sapphi.red>
Date: Mon, 2 May 2022 16:41:05 +0900
Subject: [PATCH] fix(css): inline css module when ssr, minify issue (fix
 #5471) (#7807)

---
 packages/playground/css/__tests__/css.spec.ts | 10 ++++++++-
 packages/vite/src/node/plugins/css.ts         | 22 +++++++++++++------
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/packages/playground/css/__tests__/css.spec.ts b/packages/playground/css/__tests__/css.spec.ts
index 6ca00e760349b1..9869bb34d2c690 100644
--- a/packages/playground/css/__tests__/css.spec.ts
+++ b/packages/playground/css/__tests__/css.spec.ts
@@ -15,7 +15,11 @@ import {
 // in later assertions to ensure CSS HMR doesn't reload the page
 test('imported css', async () => {
   const css = await page.textContent('.imported-css')
-  expect(css).toContain('.imported {')
+  expect(css).toMatch(/\.imported ?{/)
+  if (isBuild) {
+    expect(css.trim()).not.toContain('\n') // check minified
+  }
+
   const glob = await page.textContent('.imported-css-glob')
   expect(glob).toContain('.dir-import')
   const globEager = await page.textContent('.imported-css-globEager')
@@ -372,6 +376,10 @@ test('inlined-code', async () => {
   // should resolve assets
   expect(code).toContain('background:')
   expect(code).not.toContain('__VITE_ASSET__')
+
+  if (isBuild) {
+    expect(code.trim()).not.toContain('\n') // check minified
+  }
 })
 
 test('minify css', async () => {
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index b3ea3338cecc04..9ead17822d23a9 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -300,11 +300,17 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
         return
       }
 
+      const isHTMLProxy = htmlProxyRE.test(id)
       const inlined = inlineRE.test(id)
       const modules = cssModulesCache.get(config)!.get(id)
-      const isHTMLProxy = htmlProxyRE.test(id)
+
+      // #6984, #7552
+      // `foo.module.css` => modulesCode
+      // `foo.module.css?inline` => cssContent
       const modulesCode =
-        modules && dataToEsm(modules, { namedExports: true, preferConst: true })
+        modules &&
+        !inlined &&
+        dataToEsm(modules, { namedExports: true, preferConst: true })
 
       if (config.command === 'serve') {
         if (isDirectCSSRequest(id)) {
@@ -366,12 +372,14 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
 
       let code: string
       if (usedRE.test(id)) {
-        if (inlined) {
-          code = `export default ${JSON.stringify(
-            await minifyCSS(css, config)
-          )}`
+        if (modulesCode) {
+          code = modulesCode
         } else {
-          code = modulesCode || `export default ${JSON.stringify(css)}`
+          let content = css
+          if (config.build.minify) {
+            content = await minifyCSS(content, config)
+          }
+          code = `export default ${JSON.stringify(content)}`
         }
       } else {
         code = `export default ''`