feat: ignore empty style (#193)

Author: yejinjian

playground/App.vue

@@ -3,6 +3,7 @@ import TestMultiplySrcImport from './src-import/TestMultiplySrcImport.vue'
 import TestBlockSrcImport from './src-import/TestBlockSrcImport.vue'
 import TestScopedCss from './css/TestScopedCss.vue'
 import TestCssModules from './css/TestCssModules.vue'
+import TestEmptyCss from './css/TestEmptyCss.vue'
 import TestCustomBlock from './custom/TestCustomBlock.vue'
 import TestHmr from './hmr/TestHmr.vue'
 import TestAssets from './test-assets/TestAssets.vue'
@@ -18,6 +19,7 @@ export default {
     TestScopedCss,
     TestBlockSrcImport,
     TestCssModules,
+    TestEmptyCss,
     TestCustomBlock,
     TestHmr,
     TestAssets,
@@ -37,6 +39,7 @@ export default {
     <TestScopedCss />
     <TestCssModules />
     <TestCustomBlock />
+    <TestEmptyCss />
     <TestHmr />
     <TestAssets />
     <TestJsx />

playground/css/TestEmptyCss.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h2>Empty CSS</h2>
+    <div>
+      &lt;style&gt;: empty style
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
+<style module></style>

src/main.ts

@@ -283,6 +283,8 @@ async function genStyleRequest(
   let stylesCode = ''
   for (let i = 0; i < descriptor.styles.length; i++) {
     const style = descriptor.styles[i]
+    if (!style.src && (!style.content || !style.content.trim()))
+      continue
     const src = style.src || filename
     const attrsQuery = attrsToQuery(style.attrs, 'css')
     const srcQuery = style.src ? '&src' : ''

test/e2e.spec.ts

@@ -100,6 +100,17 @@ export function declareTests(isBuild: boolean) {
     }
   })
 
+  test('SFC empty style', async() => {
+    const el = await page.$$eval('style', (elements) => {
+      return elements.map((e) => {
+        return e.innerHTML?.trim()
+      }).filter((e) => {
+        return !e
+      })
+    })
+    expect(el).toHaveLength(0)
+  })
+
   test('SFC <custom>', async() => {
     expect(await getText('.custom-block')).toMatch('Custom Block')
     expect(await getText('.custom-block-lang')).toMatch('Custom Block')