fix(language-core): match classname before ) (#4887)

Author: KazariEX

packages/language-core/lib/utils/parseCssClassNames.ts

@@ -1,10 +1,11 @@
-import { clearComments } from './parseCssVars';
+import { commentReg, fillBlank } from './parseCssVars';
 
-const cssClassNameReg = /(?=(\.[a-z_][-\w]*)[\s.,+~>:#[{])/gi;
+const cssClassNameReg = /(?=(\.[a-z_][-\w]*)[\s.,+~>:#)[{])/gi;
+const fragmentReg = /(?<={)[^{]*(?=(?<!\\);)/g;
 
-export function* parseCssClassNames(styleContent: string) {
-	styleContent = clearComments(styleContent);
-	const matches = styleContent.matchAll(cssClassNameReg);
+export function* parseCssClassNames(css: string) {
+	css = fillBlank(css, commentReg, fragmentReg);
+	const matches = css.matchAll(cssClassNameReg);
 	for (const match of matches) {
 		const matchText = match[1];
 		if (matchText) {

packages/language-core/lib/utils/parseCssVars.ts

@@ -1,23 +1,23 @@
 // https://github.com/vuejs/core/blob/main/packages/compiler-sfc/src/cssVars.ts#L47-L61
 
 const vBindCssVarReg = /\bv-bind\(\s*(?:'([^']+)'|"([^"]+)"|([a-z_]\w*))\s*\)/gi;
-const commentReg1 = /\/\*([\s\S]*?)\*\//g;
-const commentReg2 = /\/\/([\s\S]*?)\n/g;
+export const commentReg = /(?<=\/\*)[\s\S]*?(?=\*\/)|(?<=\/\/)[\s\S]*?(?=\n)/g;
 
-export function* parseCssVars(styleContent: string) {
-	styleContent = clearComments(styleContent);
-	const matchs = styleContent.matchAll(vBindCssVarReg);
+export function* parseCssVars(css: string) {
+	css = fillBlank(css, commentReg);
+	const matchs = css.matchAll(vBindCssVarReg);
 	for (const match of matchs) {
 		const matchText = match.slice(1).find(t => t);
 		if (matchText) {
-			const offset = match.index + styleContent.slice(match.index).indexOf(matchText);
+			const offset = match.index + css.slice(match.index).indexOf(matchText);
 			yield { offset, text: matchText };
 		}
 	}
 }
 
-export function clearComments(css: string) {
-	return css
-		.replace(commentReg1, match => `/*${' '.repeat(match.length - 4)}*/`)
-		.replace(commentReg2, match => `//${' '.repeat(match.length - 3)}\n`);
-}
+export function fillBlank(css: string, ...regs: RegExp[]) {
+	for (const reg of regs) {
+		css = css.replace(reg, (match) => ' '.repeat(match.length));
+	}
+	return css;
+}