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

Author: dominikg

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

@@ -30,19 +30,12 @@ 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

@@ -6,10 +6,6 @@ <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/index.html

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

packages/playground/css/main.js

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