feat(language-core): experimental resolve external stylesheets

packages/language-core/lib/codegen/script/index.ts

@@ -5,13 +5,13 @@ import type { ScriptRanges } from '../../parsers/scriptRanges';
 import type { ScriptSetupRanges } from '../../parsers/scriptSetupRanges';
 import type { Code, Sfc, VueCodeInformation, VueCompilerOptions } from '../../types';
 import { generateGlobalTypes } from '../globalTypes';
+import { generateStyleModules } from '../style/modules';
 import type { TemplateCodegenContext } from '../template/context';
 import { endOfLine, generateSfcBlockSection, newLine } from '../utils';
 import { generateComponentSelf } from './componentSelf';
 import { createScriptCodegenContext, ScriptCodegenContext } from './context';
 import { generateScriptSetup, generateScriptSetupImports } from './scriptSetup';
 import { generateSrc } from './src';
-import { generateStyleModulesType } from './styleModulesType';
 import { generateTemplate } from './template';
 
 export const codeFeatures = {
@@ -76,14 +76,16 @@ export function* generateScript(options: ScriptCodegenOptions): Generator<Code,
 	}
 
 	if (options.sfc.script?.src) {
-		yield* generateSrc(options.sfc.script, options.sfc.script.src);
+		yield* generateSrc(options.sfc.script.src);
+	}
+	if (options.sfc.scriptSetup && options.scriptSetupRanges) {
+		yield* generateScriptSetupImports(options.sfc.scriptSetup, options.scriptSetupRanges);
 	}
 	if (options.sfc.script && options.scriptRanges) {
 		const { exportDefault, classBlockEnd } = options.scriptRanges;
 		const isExportRawObject = exportDefault
 			&& options.sfc.script.content[exportDefault.expression.start] === '{';
 		if (options.sfc.scriptSetup && options.scriptSetupRanges) {
-			yield* generateScriptSetupImports(options.sfc.scriptSetup, options.scriptSetupRanges);
 			if (exportDefault) {
 				yield generateSfcBlockSection(options.sfc.script, 0, exportDefault.expression.start, codeFeatures.all);
 				yield* generateScriptSetup(options, ctx, options.sfc.scriptSetup, options.scriptSetupRanges);
@@ -139,7 +141,6 @@ export function* generateScript(options: ScriptCodegenOptions): Generator<Code,
 		}
 	}
 	else if (options.sfc.scriptSetup && options.scriptSetupRanges) {
-		yield* generateScriptSetupImports(options.sfc.scriptSetup, options.scriptSetupRanges);
 		yield* generateScriptSetup(options, ctx, options.sfc.scriptSetup, options.scriptSetupRanges);
 	}
 
@@ -156,7 +157,7 @@ export function* generateScript(options: ScriptCodegenOptions): Generator<Code,
 	}
 
 	// #4788
-	yield* generateStyleModulesType(options, ctx);
+	yield* generateStyleModules(options, ctx);
 
 	if (options.edited) {
 		yield `type __VLS_IntrinsicElementsCompletion = __VLS_IntrinsicElements${endOfLine}`;

packages/language-core/lib/codegen/script/scriptSetup.ts

@@ -38,17 +38,21 @@ export function* generateScriptSetup(
 			}
 			yield `export default `;
 		}
-		yield `(<`;
-		yield [
-			scriptSetup.generic,
-			scriptSetup.name,
-			scriptSetup.genericOffset,
-			codeFeatures.all,
-		];
-		if (!scriptSetup.generic.endsWith(`,`)) {
-			yield `,`;
+		yield `(`;
+		if (typeof scriptSetup.generic === 'object') {
+			yield `<`;
+			yield [
+				scriptSetup.generic.text,
+				scriptSetup.name,
+				scriptSetup.generic.offset,
+				codeFeatures.all,
+			];
+			if (!scriptSetup.generic.text.endsWith(`,`)) {
+				yield `,`;
+			}
+			yield `>`;
 		}
-		yield `>(${newLine}`
+		yield `(${newLine}`
 			+ `	__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'],${newLine}`
 			+ `	__VLS_ctx?: ${ctx.localTypes.PrettifyLocal}<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>,${newLine}` // use __VLS_Prettify for less dts code
 			+ `	__VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>['expose'],${newLine}`

packages/language-core/lib/codegen/script/src.ts

@@ -1,54 +1,51 @@
-import type { Code, Sfc } from '../../types';
-import { endOfLine } from '../utils';
+import type { Code, SfcBlockAttr } from '../../types';
+import { endOfLine, generateSfcBlockAttrValue } from '../utils';
 import { codeFeatures } from './index';
 
-export function* generateSrc(
-	script: NonNullable<Sfc['script']>,
-	src: string
-): Generator<Code> {
-	if (src.endsWith('.d.ts')) {
-		src = src.slice(0, -'.d.ts'.length);
+export function* generateSrc(src: SfcBlockAttr): Generator<Code> {
+	if (src === true) {
+		return;
 	}
-	else if (src.endsWith('.ts')) {
-		src = src.slice(0, -'.ts'.length);
+	let { text } = src;
+
+	if (text.endsWith('.d.ts')) {
+		text = text.slice(0, -'.d.ts'.length);
+	}
+	else if (text.endsWith('.ts')) {
+		text = text.slice(0, -'.ts'.length);
 	}
-	else if (src.endsWith('.tsx')) {
-		src = src.slice(0, -'.tsx'.length) + '.jsx';
+	else if (text.endsWith('.tsx')) {
+		text = text.slice(0, -'.tsx'.length) + '.jsx';
 	}
 
-	if (!src.endsWith('.js') && !src.endsWith('.jsx')) {
-		src = src + '.js';
+	if (!text.endsWith('.js') && !text.endsWith('.jsx')) {
+		text = text + '.js';
 	}
 
 	yield `export * from `;
-	yield [
-		`'${src}'`,
-		'script',
-		script.srcOffset - 1,
-		{
-			...codeFeatures.all,
-			navigation: src === script.src
-				? true
-				: {
-					shouldRename: () => false,
-					resolveRenameEditText(newName) {
-						if (newName.endsWith('.jsx') || newName.endsWith('.js')) {
-							newName = newName.split('.').slice(0, -1).join('.');
-						}
-						if (script?.src?.endsWith('.d.ts')) {
-							newName = newName + '.d.ts';
-						}
-						else if (script?.src?.endsWith('.ts')) {
-							newName = newName + '.ts';
-						}
-						else if (script?.src?.endsWith('.tsx')) {
-							newName = newName + '.tsx';
-						}
-						return newName;
-					},
+	yield* generateSfcBlockAttrValue(src, text, {
+		...codeFeatures.all,
+		navigation: text === src.text
+			? true
+			: {
+				shouldRename: () => false,
+				resolveRenameEditText(newName) {
+					if (newName.endsWith('.jsx') || newName.endsWith('.js')) {
+						newName = newName.split('.').slice(0, -1).join('.');
+					}
+					if (src?.text.endsWith('.d.ts')) {
+						newName = newName + '.d.ts';
+					}
+					else if (src?.text.endsWith('.ts')) {
+						newName = newName + '.ts';
+					}
+					else if (src?.text.endsWith('.tsx')) {
+						newName = newName + '.tsx';
+					}
+					return newName;
 				},
-		},
-	];
+			},
+	});
 	yield endOfLine;
-	yield `export { default } from '${src}'${endOfLine}`;
+	yield `export { default } from '${text}'${endOfLine}`;
 }

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

@@ -1,5 +1,6 @@
 import type { Code } from '../../types';
 import { hyphenateTag } from '../../utils/shared';
+import { generateStyleScopedClasses } from '../style/scopedClasses';
 import { TemplateCodegenContext, createTemplateCodegenContext } from '../template/context';
 import { generateInterpolation } from '../template/interpolation';
 import { generateStyleScopedClassReferences } from '../template/styleScopedClasses';
@@ -137,71 +138,6 @@ function* generateTemplateBody(
 	yield `type __VLS_TemplateEl = typeof __VLS_rootEl${endOfLine}`;
 }
 
-function* generateStyleScopedClasses(
-	options: ScriptCodegenOptions,
-	ctx: TemplateCodegenContext
-): Generator<Code> {
-	const firstClasses = new Set<string>();
-	yield `type __VLS_StyleScopedClasses = {}`;
-	for (let i = 0; i < options.sfc.styles.length; i++) {
-		const style = options.sfc.styles[i];
-		const option = options.vueCompilerOptions.experimentalResolveStyleCssClasses;
-		if (option === 'always' || (option === 'scoped' && style.scoped)) {
-			for (const className of style.classNames) {
-				if (firstClasses.has(className.text)) {
-					ctx.scopedClasses.push({
-						source: 'style_' + i,
-						className: className.text.slice(1),
-						offset: className.offset + 1
-					});
-					continue;
-				}
-				firstClasses.add(className.text);
-				yield* generateCssClassProperty(
-					i,
-					className.text,
-					className.offset,
-					'boolean',
-					true
-				);
-			}
-		}
-	}
-	yield endOfLine;
-}
-
-export function* generateCssClassProperty(
-	styleIndex: number,
-	classNameWithDot: string,
-	offset: number,
-	propertyType: string,
-	optional: boolean
-): Generator<Code> {
-	yield `${newLine} & { `;
-	yield [
-		'',
-		'style_' + styleIndex,
-		offset,
-		codeFeatures.navigation,
-	];
-	yield `'`;
-	yield [
-		classNameWithDot.slice(1),
-		'style_' + styleIndex,
-		offset + 1,
-		codeFeatures.navigation,
-	];
-	yield `'`;
-	yield [
-		'',
-		'style_' + styleIndex,
-		offset + classNameWithDot.length,
-		codeFeatures.navigationWithoutRename,
-	];
-	yield `${optional ? '?' : ''}: ${propertyType}`;
-	yield ` }`;
-}
-
 function* generateCssVars(options: ScriptCodegenOptions, ctx: TemplateCodegenContext): Generator<Code> {
 	if (!options.sfc.styles.length) {
 		return;

packages/language-core/lib/codegen/style/classProperty.ts

@@ -0,0 +1,35 @@
+import type { Code } from '../../types';
+import { codeFeatures } from '../script';
+import { newLine } from '../utils';
+
+export function* generateClassProperty(
+	styleIndex: number,
+	classNameWithDot: string,
+	offset: number,
+	propertyType: string,
+	optional: boolean
+): Generator<Code> {
+	yield `${newLine} & { `;
+	yield [
+		'',
+		'style_' + styleIndex,
+		offset,
+		codeFeatures.navigation,
+	];
+	yield `'`;
+	yield [
+		classNameWithDot.slice(1),
+		'style_' + styleIndex,
+		offset + 1,
+		codeFeatures.navigation,
+	];
+	yield `'`;
+	yield [
+		'',
+		'style_' + styleIndex,
+		offset + classNameWithDot.length,
+		codeFeatures.navigationWithoutRename,
+	];
+	yield `${optional ? '?' : ''}: ${propertyType}`;
+	yield ` }`;
+}

packages/language-core/lib/codegen/style/externalStylesheets.ts

@@ -0,0 +1,26 @@
+import type { Code, Sfc, VueCodeInformation } from '../../types';
+import { generateSfcBlockAttrValue, newLine } from '../utils';
+
+export function* generateExternalStylesheets(
+	style: Sfc['styles'][number],
+): Generator<Code> {
+	const features: VueCodeInformation = {
+		navigation: true,
+		verification: true
+	};
+	if (typeof style.src === 'object') {
+		yield `${newLine} & typeof import(`;
+		yield* generateSfcBlockAttrValue(style.src, style.src.text, features);
+		yield `).default`;
+	}
+	for (const { text, offset } of style.imports) {
+		yield `${newLine} & typeof import('`;
+		yield [
+			text,
+			style.name,
+			offset,
+			features
+		];
+		yield `').default`;
+	}
+}