feat(css): tree shake scoped styles (#533)

Co-authored-by: edison <daiwei521@126.com>

Author: sapphi-red

packages/plugin-vue/src/index.ts

@@ -13,6 +13,7 @@ import { version } from '../package.json'
 import { resolveCompiler } from './compiler'
 import { parseVueRequest } from './utils/query'
 import {
+  type ExtendedSFCDescriptor,
   getDescriptor,
   getSrcDescriptor,
   getTempSrcDescriptor,
@@ -412,7 +413,7 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin<Api> {
         )
       } else {
         // sub block request
-        const descriptor = query.src
+        const descriptor: ExtendedSFCDescriptor = query.src
           ? getSrcDescriptor(filename, query) ||
             getTempSrcDescriptor(filename, query)
           : getDescriptor(filename, options.value)!

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

@@ -1,13 +1,13 @@
-import type { SFCDescriptor } from 'vue/compiler-sfc'
 import type { ExistingRawSourceMap, TransformPluginContext } from 'rollup'
 import type { RawSourceMap } from 'source-map-js'
 import { formatPostcssSourceMap } from 'vite'
+import type { ExtendedSFCDescriptor } from './utils/descriptorCache'
 import type { ResolvedOptions } from './index'
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export async function transformStyle(
   code: string,
-  descriptor: SFCDescriptor,
+  descriptor: ExtendedSFCDescriptor,
   index: number,
   options: ResolvedOptions,
   pluginContext: TransformPluginContext,
@@ -62,5 +62,13 @@ export async function transformStyle(
   return {
     code: result.code,
     map: map,
+    meta:
+      block.scoped && !descriptor.isTemp
+        ? {
+            vite: {
+              cssScopeTo: [descriptor.filename, 'default'],
+            },
+          }
+        : undefined,
   }
 }

packages/plugin-vue/src/utils/descriptorCache.ts

@@ -75,6 +75,10 @@ export function invalidateDescriptor(filename: string, hmr = false): void {
   }
 }
 
+export interface ExtendedSFCDescriptor extends SFCDescriptor {
+  isTemp?: boolean
+}
+
 export function getDescriptor(
   filename: string,
   options: ResolvedOptions,
@@ -113,7 +117,7 @@ export function getSrcDescriptor(
 export function getTempSrcDescriptor(
   filename: string,
   query: VueQuery,
-): SFCDescriptor {
+): ExtendedSFCDescriptor {
   // this is only used for pre-compiled <style src> with scoped flag
   return {
     filename,
@@ -124,9 +128,10 @@ export function getTempSrcDescriptor(
         loc: {
           start: { line: 0, column: 0 },
         },
-      },
+      } as any,
     ],
-  } as SFCDescriptor
+    isTemp: true,
+  } as ExtendedSFCDescriptor
 }
 
 export function setSrcDescriptor(

playground/ssr-vue/vite.config.js

@@ -93,7 +93,9 @@ export default defineConfig(({ command, ssrBuild, isSsrBuild }) => ({
           ) {
             return {
               code:
-                `import { __ssr_vue_processAssetPath } from '${virtualId}';__ssr_vue_processAssetPath;` +
+                `import { __ssr_vue_processAssetPath } from '${virtualId}';` +
+                // make `__ssr_vue_processAssetPath` not to be tree-shaken (`globalThis.__ssr_vue` doesn't exist)
+                `globalThis.__ssr_vue?.(__ssr_vue_processAssetPath);` +
                 code,
               sourcemap: null, // no sourcemap support to speed up CI
             }

playground/vue/Main.vue

@@ -68,6 +68,13 @@ 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)
+}
+
 import ExportTypeProps1 from './ExportTypeProps1.vue'
 import ExportTypeProps2 from './ExportTypeProps2.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,
@@ -455,3 +456,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')
+})