fix: avoid css leaking into emitted javascript (#3402)

Author: ferdinando-ferreira

packages/playground/css/__tests__/css.spec.ts

@@ -30,12 +30,19 @@ test('linked css', async () => {
 })
 
 test('css import from js', async () => {
+  const importedNoVars = await page.$('.imported-no-vars')
   const imported = await page.$('.imported')
   const atImport = await page.$('.imported-at-import')
 
+  expect(await getColor(importedNoVars)).toBe('magenta')
   expect(await getColor(imported)).toBe('green')
   expect(await getColor(atImport)).toBe('purple')
 
+  editFile('imported-without-variable.css', (code) =>
+    code.replace('color: magenta', 'color: cyan')
+  )
+  await untilUpdated(() => getColor(importedNoVars), 'cyan')
+
   editFile('imported.css', (code) => code.replace('color: green', 'color: red'))
   await untilUpdated(() => getColor(imported), 'red')
 

packages/playground/css/imported-without-variable.css

@@ -0,0 +1,3 @@
+.imported-no-vars {
+  color: magenta;
+}

packages/playground/css/index.html

@@ -6,6 +6,10 @@ <h1>CSS</h1>
   <p class="linked">&lt;link&gt;: This should be blue</p>
   <p class="linked-at-import">@import in &lt;link&gt;: This should be red</p>
 
+  <p class="imported-no-vars">
+    import from js, no vars: This should be magenta
+  </p>
+
   <p class="imported">import from js: This should be green</p>
   <p class="imported-at-import">
     @import in import from js: This should be purple

packages/playground/css/main.js

@@ -1,3 +1,5 @@
+import './imported-without-variable.css'
+
 import css from './imported.css'
 text('.imported-css', css)
 

packages/vite/src/node/plugins/css.ts

@@ -245,7 +245,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
         } else {
           // server only
           if (ssr) {
-            return modulesCode || `export default ${JSON.stringify(css)}`
+            return modulesCode || `export default ''`
           }
           return [
             `import { updateStyle, removeStyle } from ${JSON.stringify(
@@ -267,7 +267,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
       styles.set(id, css)
 
       return {
-        code: modulesCode || `export default ${JSON.stringify(css)}`,
+        code: modulesCode || `export default ''`,
         map: { mappings: '' },
         // avoid the css module from being tree-shaken so that we can retrieve
         // it in renderChunk()