diff --git a/src/index.ts b/src/index.ts index b48084e..7413ab0 100644 --- a/src/index.ts +++ b/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) => { diff --git a/src/utils/index.ts b/src/utils/index.ts index 80ec687..0413d10 100644 --- a/src/utils/index.ts +++ b/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,10 +122,29 @@ 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) @@ -132,7 +152,8 @@ export function transformVueAst(code: string) { // 在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) {