fix: Ignore jsx and tsx parsing(close:#47 )

Author: baiwusanyu-c

package.json

@@ -106,7 +106,8 @@
     "@unplugin-vue-cssvars/entry": "workspace:*",
     "@unplugin-vue-cssvars/play": "workspace:*",
     "@unplugin-vue-cssvars/utils": "workspace:*",
-    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue": "^4.1.0",
+    "@vitejs/plugin-vue-jsx": "^3.0.1",
     "@vitest/coverage-c8": "^0.30.1",
     "@vitest/ui": "^0.30.1",
     "@vue/compiler-sfc": "^3.2.47",

packages/core/index.ts

@@ -1,5 +1,5 @@
 import { createUnplugin } from 'unplugin'
-import { NAME, SUPPORT_FILE_REG } from '@unplugin-vue-cssvars/utils'
+import { JSX_TSX_REG, NAME, SUPPORT_FILE_REG } from '@unplugin-vue-cssvars/utils'
 import { createFilter } from '@rollup/pluginutils'
 import { parse } from '@vue/compiler-sfc'
 import chalk from 'chalk'
@@ -47,6 +47,11 @@ const unplugin = createUnplugin<Options>(
           // ⭐TODO: 只支持 .vue ? jsx, tsx, js, ts ？
             if (id.endsWith('.vue')) {
               const { descriptor } = parse(code)
+              const lang = descriptor?.script?.lang ?? 'js'
+              // ⭐TODO: 只支持 .vue ? jsx, tsx, js, ts ？
+              if (JSX_TSX_REG.test(`.${lang}`))
+                return code
+
               isScriptSetup = !!descriptor.scriptSetup
               const {
                 vbindVariableListByPath,

play/src/comp.vue

@@ -1,5 +1,5 @@
-<script setup lang="ts">
-import { reactive, ref } from 'vue'
+<script lang="tsx">
+/* import { reactive, ref } from 'vue'
 const compAsd = () => 'red'
 const color = 'red'
 const compTheme1 = compAsd()
@@ -8,7 +8,13 @@ const sassColor = 'pink'
 const compTheme3 = ref('red')
 const compTheme4 = reactive({ color: 'red' })
 const compTheme5 = { color: 'red' }
-const compTheme6 = () => 'red'
+const compTheme6 = () => 'red' */
+import { defineComponent } from 'vue'
+export default defineComponent({
+  setup() {
+    return () => (<div>test</div>)
+  },
+})
 </script>
 
 <template>

play/vite.config.ts

@@ -1,6 +1,7 @@
 import { resolve } from 'path'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
 import { viteVueCSSVars } from '../dist'
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -32,13 +33,13 @@ export default defineConfig({
   },
   plugins: [
     vue(),
+    vueJsx(),
     viteVueCSSVars({
       include: [/.vue/],
       includeCompile: ['**/**.scss', '**/**.css'],
       alias: {
         '@': resolve(__dirname, './src'),
       },
-      server: true,
     }),
   ],
 })