refactor(language-core): extract collectStyleScopedClassReferences

Author: KazariEX

packages/language-core/lib/codegen/template/element.ts

@@ -1,11 +1,9 @@
 import * as CompilerDOM from '@vue/compiler-dom';
 import { camelize, capitalize } from '@vue/shared';
-import type * as ts from 'typescript';
-import { getNodeText } from '../../parsers/scriptSetupRanges';
 import type { Code, VueCodeInformation } from '../../types';
 import { hyphenateTag } from '../../utils/shared';
 import { createVBindShorthandInlayHintInfo } from '../inlayHints';
-import { collectVars, createTsAst, endOfLine, newLine, variableNameRegex, wrapWith } from '../utils';
+import { collectVars, createTsAst, endOfLine, newLine, normalizeAttributeValue, variableNameRegex, wrapWith } from '../utils';
 import { generateCamelized } from '../utils/camelized';
 import type { TemplateCodegenContext } from './context';
 import { generateElementChildren } from './elementChildren';
@@ -16,6 +14,7 @@ import type { TemplateCodegenOptions } from './index';
 import { generateInterpolation } from './interpolation';
 import { generateObjectProperty } from './objectProperty';
 import { generatePropertyAccess } from './propertyAccess';
+import { collectStyleScopedClassReferences } from './styleScopedClasses';
 import { generateTemplateChild } from './templateChild';
 
 const colonReg = /:/g;
@@ -420,7 +419,7 @@ function* generateVScope(
 
 	yield* generateElementDirectives(options, ctx, node);
 	const [refName, offset] = yield* generateReferencesForElements(options, ctx, node); // <el ref="foo" />
-	yield* generateReferencesForScopedCssClasses(options, ctx, node);
+	collectStyleScopedClassReferences(options, ctx, node);
 
 	if (inScope) {
 		yield `}${newLine}`;
@@ -618,193 +617,10 @@ function* generateReferencesForElements(
 	return [];
 }
 
-function* generateReferencesForScopedCssClasses(
-	options: TemplateCodegenOptions,
-	ctx: TemplateCodegenContext,
-	node: CompilerDOM.ElementNode
-): Generator<Code> {
-	for (const prop of node.props) {
-		if (
-			prop.type === CompilerDOM.NodeTypes.ATTRIBUTE
-			&& prop.name === 'class'
-			&& prop.value
-		) {
-			if (options.template.lang === 'pug') {
-				const getClassOffset = Reflect.get(prop.value.loc.start, 'getClassOffset') as (offset: number) => number;
-				const content = prop.value.loc.source.slice(1, -1);
-
-				let startOffset = 1;
-				for (const className of content.split(' ')) {
-					if (className) {
-						ctx.scopedClasses.push({
-							source: 'template',
-							className,
-							offset: getClassOffset(startOffset),
-						});
-					}
-					startOffset += className.length + 1;
-				}
-			}
-			else {
-				let isWrapped = false;
-				const [content, startOffset] = normalizeAttributeValue(prop.value);
-				if (content) {
-					const classes = collectClasses(content, startOffset + (isWrapped ? 1 : 0));
-					ctx.scopedClasses.push(...classes);
-				}
-				else {
-					ctx.emptyClassOffsets.push(startOffset);
-				}
-			}
-		}
-		else if (
-			prop.type === CompilerDOM.NodeTypes.DIRECTIVE
-			&& prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
-			&& prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
-			&& prop.arg.content === 'class'
-		) {
-			const content = '`${' + prop.exp.content + '}`';
-			const startOffset = prop.exp.loc.start.offset - 3;
-
-			const { ts } = options;
-			const ast = ts.createSourceFile('', content, 99 satisfies ts.ScriptTarget.Latest);
-			const literals: ts.StringLiteralLike[] = [];
-
-			ts.forEachChild(ast, node => {
-				if (
-					!ts.isExpressionStatement(node) ||
-					!isTemplateExpression(node.expression)
-				) {
-					return;
-				}
-
-				const expression = node.expression.templateSpans[0].expression;
-
-				if (ts.isStringLiteralLike(expression)) {
-					literals.push(expression);
-				}
-
-				if (ts.isArrayLiteralExpression(expression)) {
-					walkArrayLiteral(expression);
-				}
-
-				if (ts.isObjectLiteralExpression(expression)) {
-					walkObjectLiteral(expression);
-				}
-			});
-
-			for (const literal of literals) {
-				if (literal.text) {
-					const classes = collectClasses(
-						literal.text,
-						literal.end - literal.text.length - 1 + startOffset
-					);
-					ctx.scopedClasses.push(...classes);
-				}
-				else {
-					ctx.emptyClassOffsets.push(literal.end - 1 + startOffset);
-				}
-			}
-
-			function walkArrayLiteral(node: ts.ArrayLiteralExpression) {
-				const { elements } = node;
-				for (const element of elements) {
-					if (ts.isStringLiteralLike(element)) {
-						literals.push(element);
-					}
-					else if (ts.isObjectLiteralExpression(element)) {
-						walkObjectLiteral(element);
-					}
-				}
-			}
-
-			function walkObjectLiteral(node: ts.ObjectLiteralExpression) {
-				const { properties } = node;
-				for (const property of properties) {
-					if (ts.isPropertyAssignment(property)) {
-						const { name } = property;
-						if (ts.isIdentifier(name)) {
-							walkIdentifier(name);
-						}
-						else if (ts.isStringLiteral(name)) {
-							literals.push(name);
-						}
-						else if (ts.isComputedPropertyName(name)) {
-							const { expression } = name;
-							if (ts.isStringLiteralLike(expression)) {
-								literals.push(expression);
-							}
-						}
-					}
-					else if (ts.isShorthandPropertyAssignment(property)) {
-						walkIdentifier(property.name);
-					}
-				}
-			}
-
-			function walkIdentifier(node: ts.Identifier) {
-				const text = getNodeText(ts, node, ast);
-				ctx.scopedClasses.push({
-					source: 'template',
-					className: text,
-					offset: node.end - text.length + startOffset
-				});
-			}
-		}
-	}
-}
-
 function camelizeComponentName(newName: string) {
 	return camelize('-' + newName);
 }
 
 function getTagRenameApply(oldName: string) {
 	return oldName === hyphenateTag(oldName) ? hyphenateTag : undefined;
 }
-
-function normalizeAttributeValue(node: CompilerDOM.TextNode): [string, number] {
-	let offset = node.loc.start.offset;
-	let content = node.loc.source;
-	if (
-		(content.startsWith(`'`) && content.endsWith(`'`))
-		|| (content.startsWith(`"`) && content.endsWith(`"`))
-	) {
-		offset++;
-		content = content.slice(1, -1);
-	}
-	return [content, offset];
-}
-
-function collectClasses(content: string, startOffset = 0) {
-	const classes: {
-		source: string;
-		className: string;
-		offset: number;
-	}[] = [];
-
-	let currentClassName = '';
-	let offset = 0;
-	for (const char of (content + ' ')) {
-		if (char.trim() === '') {
-			if (currentClassName !== '') {
-				classes.push({
-					source: 'template',
-					className: currentClassName,
-					offset: offset + startOffset
-				});
-				offset += currentClassName.length;
-				currentClassName = '';
-			}
-			offset += char.length;
-		}
-		else {
-			currentClassName += char;
-		}
-	}
-	return classes;
-}
-
-// isTemplateExpression is missing in tsc
-function isTemplateExpression(node: ts.Node): node is ts.TemplateExpression {
-	return node.kind === 228 satisfies ts.SyntaxKind.TemplateExpression;
-}