fix(css): include inline css module in bundle (fix #6984,#7552)

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')
 })

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>

packages/playground/css/inline.module.css

@@ -0,0 +1,3 @@
+.apply-color-inline {
+  color: turquoise;
+}

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'
 

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()