refactor: replace direct Vue compiler import with dynamic import utility

Author: Simon-He95

src/prettierCode.ts

@@ -1,9 +1,9 @@
-// @ts-expect-error vue
-import { parse } from '@vue/compiler-sfc/dist/compiler-sfc.esm-browser.js'
+import { getVueCompilerSfc } from './utils'
 
 const emptyStyle = /<style[\s\w'=]*>(\s+)/
 
 export async function prettierCode(code: string) {
+  const { parse } = await getVueCompilerSfc()
   const {
     descriptor: { styles },
   } = parse(code)

src/transformCss.ts

@@ -1,8 +1,6 @@
 import fsp from 'node:fs/promises'
 import path from 'node:path'
 import { escapeRegExp } from '@unocss/core'
-// @ts-expect-error vue
-import { parse } from '@vue/compiler-sfc/dist/compiler-sfc.esm-browser.js'
 import {
   isNot,
   joinWithUnderLine,
@@ -18,6 +16,7 @@ import {
   diffTemplateStyle,
   getCssType,
   getStyleScoped,
+  getVueCompilerSfc,
   isEmptyStyle,
   TRANSFER_FLAG,
   transformUnocssBack,
@@ -57,6 +56,7 @@ export async function transformCss(
 ): Promise<string> {
   isRem = _isRem
   const allChanges: AllChange[] = []
+  const { parse } = await getVueCompilerSfc()
   let newCode = (await importCss(code, style, filepath, isJsx, debug)) as string
 
   if (debug) {

src/transformVue.ts

@@ -1,11 +1,10 @@
 import type { CssType } from './utils'
-// @ts-expect-error vue
-import { parse } from '@vue/compiler-sfc/dist/compiler-sfc.esm-browser.js'
 import { compilerCss } from './compilerCss'
 import { prettierCode } from './prettierCode'
 import { transformCss } from './transformCss'
 import { transformInlineStyle } from './transformInlineStyle'
 import { transformMedia } from './transformMedia'
+import { getVueCompilerSfc } from './utils' // 从utils引入公共函数
 
 interface Options {
   isJsx?: boolean
@@ -17,7 +16,7 @@ interface Options {
 
 export async function transformVue(code: string, options?: Options) {
   const { isJsx, filepath, isRem, globalCss, debug } = options || {}
-
+  const { parse } = await getVueCompilerSfc()
   if (debug) {
     console.log(
       '[DEBUG] transformVue started:',

src/utils.ts

@@ -66,3 +66,12 @@ export function getCssType(filename: string) {
   const result = ext === 'styl' ? 'stylus' : ext
   return result as CssType
 }
+
+/**
+ * 动态导入 Vue Compiler SFC，避免打包时的问题
+ * @returns Vue Compiler SFC 中的方法
+ */
+export async function getVueCompilerSfc() {
+  const { parse } = await import('@vue/compiler-sfc')
+  return { parse }
+}