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

ygj6 · Jun 1, 2021 · dfccbf6 · dfccbf6
1 parent c16f9aa
commit dfccbf6
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 2 deletions.
diff --git a/packages/playground/css/__tests__/css.spec.ts b/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')
 

diff --git a/packages/playground/css/imported-without-variable.css b/packages/playground/css/imported-without-variable.css
@@ -0,0 +1,3 @@
+.imported-no-vars {
+  color: magenta;
+}
diff --git a/packages/playground/css/index.html b/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

diff --git a/packages/playground/css/main.js b/packages/playground/css/main.js
@@ -1,3 +1,5 @@
+import './imported-without-variable.css'
+
 import css from './imported.css'
 text('.imported-css', css)
 

diff --git a/packages/vite/src/node/plugins/css.ts b/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()