Merge pull request #24 from Simon-He95/dev

feat: support @apply | --at-apply magic transform

src/index.ts

@@ -1,6 +1,6 @@
 import * as vscode from 'vscode'
 import type { TextEditorDecorationType } from 'vscode'
-import { addEventListener, createBottomBar, createPosition, createRange, getActiveText, getActiveTextEditor, getConfiguration, getCopyText, getCurrentFileUrl, getLineText, getLocale, getSelection, message, nextTick, registerCommand, setConfiguration, setCopyText, updateText } from '@vscode-use/utils'
+import { addEventListener, createBottomBar, createPosition, createRange, getActiveText, getActiveTextEditor, getConfiguration, getCopyText, getCurrentFileUrl, getLineText, getLocale, getPosition, getSelection, message, nextTick, registerCommand, setConfiguration, setCopyText, updateText } from '@vscode-use/utils'
 import { findUp } from 'find-up'
 import { toUnocssClass, transformStyleToUnocss } from 'transform-to-unocss-core'
 import { rules, transformAttrs, transformClassAttr } from './transform'
@@ -367,13 +367,28 @@ export async function activate(context: vscode.ExtensionContext) {
       return
     // 对文档保存后的内容进行处理
     const text = document.getText()
-    const { classAttr, attrs } = parserAst(text) || {}
+    const { classAttr, attrs, styleChangeList } = parserAst(text) || {}
     const changeList: ChangeList[] = []
 
     if (classAttr?.length)
       changeList.push(...transformClassAttr(classAttr as any))
     if (attrs?.length)
       changeList.push(...transformAttrs(attrs))
+    if (styleChangeList?.length) {
+      changeList.push(...styleChangeList.map((item: any) => {
+        const start = getPosition(item.start)
+        start.line = start.line + 1
+        const end = getPosition(item.end)
+        end.line = end.line + 1
+        end.column = end.column + 1
+
+        return {
+          start,
+          end,
+          content: item.content,
+        }
+      }))
+    }
 
     if (changeList.length) {
       updateText((edit) => {

src/utils/index.ts

@@ -5,6 +5,7 @@ import * as vscode from 'vscode'
 import { parse } from '@vue/compiler-sfc'
 import { parse as tsParser } from '@typescript-eslint/typescript-estree'
 import { decorationType, toRemFlag } from '../'
+import { transformClass } from '../transform'
 
 export type CssType = 'less' | 'scss' | 'css' | 'stylus'
 export function getCssType(filename: string) {
@@ -121,18 +122,38 @@ export function parserAst(code: string) {
 
 export function transformVueAst(code: string) {
   const {
-    descriptor: { template, script, scriptSetup },
+    descriptor: { template, script, scriptSetup, styles },
     errors,
   } = parse(code)
 
+  const styleChangeList: { content: string, start: number, end: number }[] = []
+  if (styles.length) {
+    styles.forEach((style) => {
+      for (const match of style.content.matchAll(/\s*(?:@|--at-)apply:([^;]*);/gm)) {
+        const content = match[1]
+        const newAttr = transformClass(content)
+        if (content.trim() !== newAttr.trim()) {
+          const start = style.loc.start.offset + match.index + match[0].indexOf(content)
+          const end = start + content.length
+          styleChangeList.push({
+            content: newAttr,
+            start,
+            end,
+          })
+        }
+      }
+    })
+  }
+
   if ((script || scriptSetup)?.lang === 'tsx' && (script || scriptSetup)?.content)
     return parserJSXAst((script || scriptSetup)!.content)
   if (errors.length || !template)
     return
 
   // 在template中
   const { ast } = template
-  return jsxAstDfs(ast.children)
+
+  return Object.assign({}, jsxAstDfs(ast.children), { styleChangeList })
 }
 function jsxAstDfs(children: any, result: { classAttr: any[], attrs: any[] } = { classAttr: [], attrs: [] }) {
   for (const child of children) {