feat: support composition api

Author: baiwusanyu-c

packages/core/core.ts

@@ -35,6 +35,7 @@ const unplugin = createUnplugin<Options>(
             const importCSSModule = createCSSModule(descriptor, id, preProcessCSSRes)
             const variableName = getVariable(descriptor)
             code = injectCSSVars(code, importCSSModule, variableName)
+            console.log(code)
           }
           return code
         } catch (err: unknown) {

packages/core/get-variable.ts

@@ -10,8 +10,13 @@ import type { Node } from 'estree-walker'
  */
 export const getVariable = (descriptor: SFCDescriptor) => {
   // ⭐⭐⭐ TODO: options
-  // ⭐⭐⭐ TODO: setup composition
-  const ast = babelParse(descriptor.scriptSetup.content, {
+  let content = ''
+  if (descriptor.script)
+    content = descriptor.script.content
+  else if (descriptor.scriptSetup)
+    content = descriptor.scriptSetup.content
+
+  const ast = babelParse(content, {
     sourceType: 'module',
     plugins: ['typescript'],
   })

play/src/App.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<!-- <script setup lang="ts">
 import { reactive, ref } from 'vue'
 /* import Comp from './comp.vue' */
 const appAsd = () => 'red'
@@ -8,6 +8,36 @@ const appTheme3 = ref('red')
 const appTheme4 = reactive({ color: 'red' })
 const appTheme5 = { color: 'red' }
 const appTheme6 = () => 'red'
+</script> -->
+<script>
+import { defineComponent, reactive, ref } from 'vue'
+/* import Comp from './comp.vue' */
+const appAsd = () => 'red'
+const color = appAsd()
+const appTheme2 = 'red'
+const appTheme3 = ref('red')
+const appTheme4 = reactive({ color: 'red' })
+const appTheme5 = { color: 'red' }
+const appTheme6 = () => 'red'
+export default defineComponent({
+  setup() {
+    const appAsd = () => 'red'
+    const color = appAsd()
+    const appTheme2 = 'red'
+    const appTheme3 = ref('red')
+    const appTheme4 = reactive({ color: 'red' })
+    const appTheme5 = { color: 'red' }
+    const appTheme6 = () => 'red'
+    return {
+      color,
+      appTheme2,
+      appTheme3,
+      appTheme4,
+      appTheme5,
+      appTheme6,
+    }
+  },
+})
 </script>
 
 <template>