feat: jsx support in sfc (#63)

* chore: temp commit

* chore: temp commit

* chore: updated todo

* chore: support jsx with vite on dev

* feat: jsx support in sfc

Author: baiwusanyu-c

package.json

@@ -4,7 +4,7 @@
   "private": false,
   "type": "module",
   "version": "1.3.3",
-  "packageManager": "pnpm@6.32.4",
+  "packageManager": "pnpm@6.35.1",
   "keywords": [
     "cssvars",
     "sass",
@@ -70,7 +70,8 @@
     "prepare": "npx simple-git-hooks",
     "test": "vitest",
     "test:update": "vitest -u",
-    "test:coverage": "vitest --coverage"
+    "test:coverage": "vitest --coverage",
+    "update:deps": "npx taze -w && pnpm run init"
   },
   "peerDependencies": {
     "baiwusanyu-utils": "^1.0.12",
@@ -84,62 +85,61 @@
     "vue": "^3.2.47"
   },
   "dependencies": {
-    "baiwusanyu-utils": "^1.0.8",
+    "baiwusanyu-utils": "^1.0.12",
     "chalk": "^4.1.2",
     "estree-walker-ts": "^1.0.0",
     "fast-glob": "^3.2.12",
     "fs-extra": "^11.1.1",
     "hash-sum": "^2.0.0",
     "magic-string": "^0.30.0",
     "unplugin": "^1.3.1",
-    "vue": "^3.2.47"
+    "vue": "^3.3.4"
   },
   "devDependencies": {
-    "@babel/parser": "^7.20.15",
-    "@babel/types": "^7.20.7",
+    "@babel/parser": "^7.21.9",
+    "@babel/types": "^7.21.5",
     "@baiwusanyu/eslint-config": "^1.0.12",
     "@rollup/pluginutils": "^5.0.2",
     "@types/css-tree": "^2.3.1",
-    "@types/debug": "^4.1.7",
-    "@types/estree": "^1.0.0",
+    "@types/debug": "^4.1.8",
+    "@types/estree": "^1.0.1",
     "@types/fs-extra": "^11.0.1",
     "@types/gulp": "^4.0.10",
     "@types/hash-sum": "^1.0.0",
     "@types/less": "^3.0.3",
-    "@types/node": "^20.1.2",
+    "@types/node": "^20.2.3",
     "@types/stylus": "^0.48.38",
     "@unplugin-vue-cssvars/build": "workspace:*",
     "@unplugin-vue-cssvars/core": "workspace:*",
     "@unplugin-vue-cssvars/entry": "workspace:*",
     "@unplugin-vue-cssvars/utils": "workspace:*",
-    "@vitejs/plugin-vue": "^4.1.0",
+    "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
-    "@vitest/coverage-c8": "^0.31.0",
-    "@vitest/ui": "^0.31.0",
-    "@vue/compiler-sfc": "^3.2.47",
+    "@vitest/coverage-c8": "^0.31.1",
+    "@vitest/ui": "^0.31.1",
+    "@vue/compiler-sfc": "^3.3.4",
     "bumpp": "^9.1.0",
     "cross-env": "^7.0.3",
-    "debug": "^4.3.4",
-    "eslint": "^8.38.0",
+    "eslint": "^8.41.0",
     "esno": "^0.16.3",
     "git-ensure": "^0.1.0",
     "gulp": "^4.0.2",
     "jsdom": "^22.0.0",
     "less": "^4.1.3",
-    "lint-staged": "^13.1.1",
+    "lint-staged": "^13.2.2",
     "magic-string-ast": "^0.1.2",
     "npm-run-all": "^4.1.5",
-    "rimraf": "^5.0.0",
-    "rollup": "^3.19.1",
-    "sass": "^1.60.0",
+    "rimraf": "^5.0.1",
+    "rollup": "^3.23.0",
+    "sass": "^1.62.1",
     "simple-git-hooks": "^2.8.1",
     "stylus": "^0.59.0",
-    "sucrase": "^3.21.0",
-    "tsup": "^6.2.3",
+    "sucrase": "^3.32.0",
+    "tsup": "^6.7.0",
     "typescript": "5.0.4",
-    "vite": "^4.3.0",
-    "vitest": "^0.31.0",
-    "webpack": "^5.80.0"
+    "vite": "^4.3.8",
+    "vitest": "^0.31.1",
+    "webpack": "^5.83.1"
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged",

packages/core/hmr/hmr.ts

@@ -37,10 +37,11 @@ export function updatedCSSModules(
   CSSFileModuleMap: ICSSFileMap,
   userOptions: Options,
   file: string) {
-  const updatedCSSMS = preProcessCSS(userOptions, userOptions.alias, [file]).get(file)
+  const updatedCSSMS = preProcessCSS(userOptions, userOptions.alias, [file]).get(file)!
+  const sfcPath = CSSFileModuleMap.get(file)!.sfcPath || new Set<string>()
   const res = {
     ...updatedCSSMS,
-    sfcPath: CSSFileModuleMap.get(file).sfcPath,
+    sfcPath,
   }
   CSSFileModuleMap.set(file, res!)
 }

packages/core/index.ts

@@ -7,7 +7,7 @@ import MagicString from 'magic-string'
 import { preProcessCSS } from './runtime/pre-process-css'
 import { initOption } from './option'
 import {
-  transformPostVite,
+  transformPostViteDev,
   transformPreVite,
   vitePlugin,
 } from './runtime/vite'
@@ -54,15 +54,18 @@ const unplugin = createUnplugin<Options>(
           const transId = normalizePath(id)
           let mgcStr = new MagicString(code)
           try {
-            if (context.framework !== 'webpack'
-                && context.framework !== 'rspack') {
+            if (context.framework === 'vite'
+              || context.framework === 'rollup'
+              || context.framework === 'esbuild') {
               mgcStr = transformPreVite(
                 transId,
                 code,
                 mgcStr,
                 context,
               )
-            } else {
+            }
+
+            if (context.framework === 'webpack') {
               transformPreWebpack(
                 transId,
                 code,
@@ -84,7 +87,7 @@ const unplugin = createUnplugin<Options>(
             this.error(`[${NAME}] ${err}`)
           }
         },
-        // handle hmr with vite
+        // handle hmr with vite and command
         vite: vitePlugin(context),
         // handle hmr with webpack
         webpack(compiler: Compiler) {
@@ -103,15 +106,15 @@ const unplugin = createUnplugin<Options>(
           let mgcStr = new MagicString(code)
           try {
             // transform in dev
-            // 'vite' | 'rollup' | 'esbuild'
+            // dev only
             if (context.isServer) {
               if (context.framework === 'vite'
                 || context.framework === 'rollup'
                 || context.framework === 'esbuild')
-                mgcStr = transformPostVite(transId, code, mgcStr, context)
+                mgcStr = transformPostViteDev(transId, code, mgcStr, context)
             }
 
-            // webpack dev 和 build 都回进入这里
+            // webpack dev 和 build 都会执行
             if (context.framework === 'webpack')
               mgcStr = transformPostWebpack(transId, code, mgcStr, context)
 

packages/core/inject/inject-css.ts

@@ -26,10 +26,10 @@ export function injectCssOnBuild(
   injectCSSContent: TInjectCSSContent | null,
   descriptor: SFCDescriptor | null) {
   if (!injectCSSContent && !descriptor) return mgcStr
-  const cssContent = [...injectCSSContent]
+  const cssContent = [...injectCSSContent!]
   let resCode = ''
 
-  descriptor.styles && descriptor.styles.forEach((value, index) => {
+  descriptor!.styles && descriptor!.styles.forEach((value, index) => {
     let injectCssCode = ''
     cssContent.forEach((value) => {
       if (value.styleTagIndex === index)

packages/core/parser/__test__/parser-compiled-sfc.spec.ts

@@ -7,7 +7,7 @@ import {
   parseSetupBody,
   parseUseCSSVars,
   parserCompiledSfc,
-  reSetVar,
+  resetVar,
   setVar,
 } from '../parser-compiled-sfc'
 import type { CallExpression, Identifier, ImportSpecifier, ObjectExpression } from '@babel/types'
@@ -16,7 +16,7 @@ describe('parseSetupBody', () => {
 
   beforeEach(() => {
     node = {}
-    reSetVar()
+    resetVar()
   })
 
   test('should set isSetupEnter to true when node is an Identifier with name "setup"', () => {
@@ -62,7 +62,7 @@ describe('parseSetupBody', () => {
 describe('parseHasCSSVars', () => {
   beforeEach(() => {
     // reset the state of `hasCSSVars` to `false` after each test
-    reSetVar()
+    resetVar()
   })
 
   test('should set `hasCSSVars` to `true` if node type is Identifier with name "useCssVars" and has a parent ImportSpecifier', () => {
@@ -106,7 +106,7 @@ describe('parseUseCSSVars function', () => {
   let parent: Node & { scopeIds?: Set<string> } & Identifier & CallExpression & ObjectExpression
 
   beforeEach(() => {
-    reSetVar()
+    resetVar()
     node = {} as Node & { scopeIds?: Set<string> } & Identifier & CallExpression & ObjectExpression
     parent = {} as Node & { scopeIds?: Set<string> } & Identifier & CallExpression & ObjectExpression
   })

packages/core/parser/__test__/parser-variable.spec.ts

@@ -73,7 +73,7 @@ describe('get variable name', () => {
     const mockContent = 'const color = "red"'
     const ast = babelParse(mockContent, {
       sourceType: 'module',
-      plugins: ['typescript'],
+      plugins: ['typescript', 'jsx'],
     })
     const res = getVariableNameBySetup('', ast)
     expect(res).toMatchObject({

packages/core/parser/parser-compiled-sfc.ts

@@ -57,12 +57,11 @@ export function parseUseCSSVars(
 }
 
 export function parserCompiledSfc(code: string) {
-  reSetVar()
+  resetVar()
   const ast = babelParse(code, {
     sourceType: 'module',
-    plugins: ['typescript'],
+    plugins: ['typescript', 'jsx'],
   });
-
   (walk as any)(ast, {
     enter(
       node: Node & { scopeIds?: Set<string> },
@@ -79,7 +78,7 @@ export function parserCompiledSfc(code: string) {
   } as IParseSFCRes
 }
 
-export function reSetVar() {
+export function resetVar() {
   isSetupEnter = false
   setupBodyNode = {} as BlockStatement
   isUseCSSVarsEnter = false

packages/core/parser/parser-variable.ts

@@ -48,7 +48,7 @@ export function getVariableNameBySetup(content: string, contextAst?: ParseResult
 
   const ast = contextAst || babelParse(content, {
     sourceType: 'module',
-    plugins: ['typescript'],
+    plugins: ['typescript', 'jsx'],
   });
   (walk as any)(ast, {
     enter(node: Node & { scopeIds?: Set<string> }, parent: Node | undefined) {
@@ -92,7 +92,7 @@ export function getVariableNameByScript(content: string, variableName: VariableN
 
   const ast = babelParse(content, {
     sourceType: 'module',
-    plugins: ['typescript'],
+    plugins: ['typescript', 'jsx'],
   });
   (walk as any)(ast, {
     enter(

packages/core/runtime/handle-variable.ts

@@ -1,5 +1,4 @@
 import { parse } from '@vue/compiler-sfc'
-import { JSX_TSX_REG } from '@unplugin-vue-cssvars/utils'
 import { getVariable, matchVariable } from '../parser'
 import { getVBindVariableListByPath } from './process-css'
 import type { IVueCSSVarsCtx } from '../types'
@@ -10,32 +9,34 @@ export function handleVBindVariable(
   ctx: IVueCSSVarsCtx,
 ) {
   const { descriptor } = parse(code)
-  let lang = 'js'
-  if (descriptor?.scriptSetup?.lang)
-    lang = descriptor.scriptSetup.lang
+  // let lang = 'js'
+  // if (descriptor?.scriptSetup?.lang)
+  //   lang = descriptor.scriptSetup.lang
 
-  if (descriptor?.script?.lang)
-    lang = descriptor.script.lang
+  // if (descriptor?.script?.lang)
+  //   lang = descriptor.script.lang
 
   // ⭐TODO: 只支持 .vue ? jsx, tsx, js, ts ？
-  if (!JSX_TSX_REG.test(`.${lang}`)) {
-    ctx.isScriptSetup = !!descriptor.scriptSetup
-    const {
-      vbindVariableListByPath,
-      injectCSSContent,
-    } = getVBindVariableListByPath(
-      descriptor,
-      id,
-      ctx.CSSFileModuleMap,
-      ctx.isServer,
-      ctx.userOptions.alias,
-    )
-
-    const variableName = getVariable(descriptor)
-    ctx.vbindVariableList.set(id, matchVariable(vbindVariableListByPath, variableName))
-    return {
-      descriptor,
-      injectCSSContent,
-    }
+  // if (!JSX_TSX_REG.test(`.${lang}`)) {
+  ctx.isScriptSetup = !!descriptor.scriptSetup
+  // 分析 @import 的链路
+  const {
+    vbindVariableListByPath,
+    injectCSSContent,
+  } = getVBindVariableListByPath(
+    descriptor,
+    id,
+    ctx.CSSFileModuleMap,
+    ctx.isServer,
+    ctx.userOptions.alias,
+  )
+  // 分析 sfc 内容中的变量
+  const variableName = getVariable(descriptor)
+  // 进行匹配得到最终的 cssvars 内容
+  ctx.vbindVariableList.set(id, matchVariable(vbindVariableListByPath, variableName))
+  return {
+    descriptor,
+    injectCSSContent,
   }
+  // }
 }