fix(language-core): optimize matching of scoped class and v-bind() (#4679)

Author: KazariEX

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

@@ -1,16 +1,14 @@
 import { clearComments } from './parseCssVars';
 
-const cssClassNameReg = /(?=([\.]{1}[a-zA-Z_]+[\w\_\-]*)[\s\.\,\+\{\>#\:]{1})/g;
+const cssClassNameReg = /(?=(\.[a-z_][-\w]*)[\s.,+~>:#[{])/gi;
 
 export function* parseCssClassNames(styleContent: string) {
 	styleContent = clearComments(styleContent);
 	const matches = styleContent.matchAll(cssClassNameReg);
 	for (const match of matches) {
-		if (match.index !== undefined) {
-			const matchText = match[1];
-			if (matchText !== undefined) {
-				yield { offset: match.index, text: matchText };
-			}
+		const matchText = match[1];
+		if (matchText) {
+			yield { offset: match.index, text: matchText };
 		}
 	}
 }

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

@@ -1,19 +1,17 @@
 // https://github.com/vuejs/core/blob/main/packages/compiler-sfc/src/cssVars.ts#L47-L61
 
-const vBindCssVarReg = /\bv-bind\(\s*(?:'([^']+)'|"([^"]+)"|([^'"][^)]*))\s*\)/g;
+const vBindCssVarReg = /\bv-bind\(\s*(?:'([^']+)'|"([^"]+)"|([a-z_]\w*))\s*\)/gi;
 const commentReg1 = /\/\*([\s\S]*?)\*\//g;
 const commentReg2 = /\/\/([\s\S]*?)\n/g;
 
 export function* parseCssVars(styleContent: string) {
 	styleContent = clearComments(styleContent);
 	const matchs = styleContent.matchAll(vBindCssVarReg);
 	for (const match of matchs) {
-		if (match.index !== undefined) {
-			const matchText = match[1] ?? match[2] ?? match[3];
-			if (matchText !== undefined) {
-				const offset = match.index + styleContent.slice(match.index).indexOf(matchText);
-				yield { offset, text: matchText };
-			}
+		const matchText = match.slice(1).find(t => t);
+		if (matchText) {
+			const offset = match.index + styleContent.slice(match.index).indexOf(matchText);
+			yield { offset, text: matchText };
 		}
 	}
 }

packages/language-server/tests/renaming.spec.ts

@@ -185,7 +185,6 @@ describe('Renaming', async () => {
 				.bar { color: v-bind(foo|); }
 				.bar { color: v-bind('foo'); }
 				.bar { color: v-bind("foo"); }
-				.bar { color: v-bind(foo + foo); }
 				.bar { color: v-bind('foo + foo'); }
 				.bar { color: v-bind("foo + foo"); }
 				.bar { color: v-bind(); }
@@ -199,32 +198,6 @@ describe('Renaming', async () => {
 			{
 			  "changes": {
 			    "file://\${testWorkspacePath}/fixture.vue": [
-			      {
-			        "newText": "bar",
-			        "range": {
-			          "end": {
-			            "character": 34,
-			            "line": 10,
-			          },
-			          "start": {
-			            "character": 31,
-			            "line": 10,
-			          },
-			        },
-			      },
-			      {
-			        "newText": "bar",
-			        "range": {
-			          "end": {
-			            "character": 28,
-			            "line": 10,
-			          },
-			          "start": {
-			            "character": 25,
-			            "line": 10,
-			          },
-			        },
-			      },
 			      {
 			        "newText": "bar",
 			        "range": {
@@ -256,11 +229,11 @@ describe('Renaming', async () => {
 			        "range": {
 			          "end": {
 			            "character": 35,
-			            "line": 12,
+			            "line": 11,
 			          },
 			          "start": {
 			            "character": 32,
-			            "line": 12,
+			            "line": 11,
 			          },
 			        },
 			      },
@@ -269,11 +242,11 @@ describe('Renaming', async () => {
 			        "range": {
 			          "end": {
 			            "character": 29,
-			            "line": 12,
+			            "line": 11,
 			          },
 			          "start": {
 			            "character": 26,
-			            "line": 12,
+			            "line": 11,
 			          },
 			        },
 			      },
@@ -282,11 +255,11 @@ describe('Renaming', async () => {
 			        "range": {
 			          "end": {
 			            "character": 35,
-			            "line": 11,
+			            "line": 10,
 			          },
 			          "start": {
 			            "character": 32,
-			            "line": 11,
+			            "line": 10,
 			          },
 			        },
 			      },
@@ -295,11 +268,11 @@ describe('Renaming', async () => {
 			        "range": {
 			          "end": {
 			            "character": 29,
-			            "line": 11,
+			            "line": 10,
 			          },
 			          "start": {
 			            "character": 26,
-			            "line": 11,
+			            "line": 10,
 			          },
 			        },
 			      },