feat(css): tree shake scoped styles

Author: sapphi-red

packages/plugin-vue/src/main.ts

@@ -275,9 +275,9 @@ export async function transformMain(
 
   return {
     code: resolvedCode,
-    map: resolvedMap || {
+    map: (resolvedMap || {
       mappings: '',
-    },
+    }) as any,
     meta: {
       vite: {
         lang: descriptor.script?.lang || descriptor.scriptSetup?.lang || 'js',

packages/plugin-vue/src/style.ts

@@ -62,5 +62,12 @@ export async function transformStyle(
   return {
     code: result.code,
     map: map,
+    meta: block.scoped
+      ? {
+          vite: {
+            cssScopeTo: [descriptor.filename, 'default'],
+          },
+        }
+      : undefined,
   }
 }

playground/vue/Main.vue

@@ -66,6 +66,12 @@ import PreCompiledExternalScoped from './pre-compiled/external-scoped.vue'
 import PreCompiledExternalCssModules from './pre-compiled/external-cssmodules.vue'
 import ParserOptions from './ParserOptions.vue'
 import HmrCircularReference from './HmrCircularReference.vue'
+import TreeShakeScopedStyle from './TreeShakeScopedStyle.vue'
+
+// NOTE: this function is not used intentionally
+function foo() {
+  console.log(TreeShakeScopedStyle)
+}
 
 const TsGeneric = defineAsyncComponent(() => import('./TsGeneric.vue'))
 

playground/vue/TreeShakeScopedStyle.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>tree shake scoped style</div>
+</template>
+
+<style scoped>
+.tree-shake-scoped-style {
+  color: red;
+}
+</style>

playground/vue/__tests__/vue.spec.ts

@@ -3,6 +3,7 @@ import { version } from 'vue'
 import {
   browserLogs,
   editFile,
+  findAssetFile,
   getBg,
   getColor,
   isBuild,
@@ -441,3 +442,8 @@ describe('template parse options', () => {
     )
   })
 })
+
+test.runIf(isBuild)('scoped style should be tree-shakeable', async () => {
+  const indexCss = findAssetFile(/index-[\w-]+\.css/)
+  expect(indexCss).not.toContain('.tree-shake-scoped-style')
+})