feat(language-core): resolve external stylesheets (#5136)

Author: KazariEX

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

@@ -0,0 +1,35 @@
+import type { Code, Sfc, VueCodeInformation } from '../../types';
+import { combineLastMapping, newLine } from '../utils';
+import { wrapWith } from '../utils/wrapWith';
+
+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* wrapWith(
+			style.src.offset,
+			style.src.offset + style.src.text.length,
+			'main',
+			features,
+			`'`,
+			[style.src.text, 'main', style.src.offset, combineLastMapping],
+			`'`
+		);
+		yield `).default`;
+	}
+	for (const { text, offset } of style.imports) {
+		yield `${newLine} & typeof import('`;
+		yield [
+			text,
+			style.name,
+			offset,
+			features
+		];
+		yield `').default`;
+	}
+}

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

@@ -3,6 +3,7 @@ import { codeFeatures } from '../codeFeatures';
 import type { ScriptCodegenOptions } from '../script';
 import { endOfLine, newLine } from '../utils';
 import { generateClassProperty } from './classProperty';
+import { generateExternalStylesheets } from './externalStylesheets';
 
 export function* generateStyleModules(
 	options: ScriptCodegenOptions
@@ -22,10 +23,13 @@ export function* generateStyleModules(
 				text,
 				'main',
 				offset,
-				codeFeatures.withoutHighlight
+				codeFeatures.navigation,
 			];
 		}
 		yield `: Record<string, string> & __VLS_PrettifyGlobal<{}`;
+		if (options.vueCompilerOptions.resolveExternalStylesheets) {
+			yield* generateExternalStylesheets(style);
+		}
 		for (const className of style.classNames) {
 			yield* generateClassProperty(
 				i,

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

@@ -3,6 +3,7 @@ import type { ScriptCodegenOptions } from '../script';
 import type { TemplateCodegenContext } from '../template/context';
 import { endOfLine } from '../utils';
 import { generateClassProperty } from './classProperty';
+import { generateExternalStylesheets } from './externalStylesheets';
 
 export function* generateStyleScopedClasses(
 	options: ScriptCodegenOptions,
@@ -19,6 +20,9 @@ export function* generateStyleScopedClasses(
 	const firstClasses = new Set<string>();
 	yield `type __VLS_StyleScopedClasses = {}`;
 	for (const [style, i] of styles) {
+		if (options.vueCompilerOptions.resolveExternalStylesheets) {
+			yield* generateExternalStylesheets(style);
+		}
 		for (const className of style.classNames) {
 			if (firstClasses.has(className.text)) {
 				ctx.scopedClasses.push({

packages/language-core/lib/types.ts

@@ -43,6 +43,7 @@ export interface VueCompilerOptions {
 	inferTemplateDollarSlots: boolean;
 	skipTemplateCodegen: boolean;
 	fallthroughAttributes: boolean;
+	resolveExternalStylesheets: boolean;
 	fallthroughComponentNames: string[];
 	dataAttributes: string[];
 	htmlAttributes: string[];
@@ -139,8 +140,13 @@ export interface Sfc {
 		ast: ts.SourceFile;
 	} | undefined;
 	styles: readonly (SfcBlock & {
+		src: SfcBlockAttr | undefined;
+		module: SfcBlockAttr | undefined;
 		scoped: boolean;
-		module?: SfcBlockAttr | undefined;
+		imports: {
+			text: string;
+			offset: number;
+		}[],
 		cssVars: {
 			text: string;
 			offset: number;

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

@@ -0,0 +1,16 @@
+const cssImportReg = /(?<=@import\s+url\()(["']?).*?\1(?=\))|(?<=@import\b\s*)(["']).*?\2/g;
+
+export function* parseCssImports(css: string) {
+	const matches = css.matchAll(cssImportReg);
+	for (const match of matches) {
+		let text = match[0];
+		let offset = match.index;
+		if (text.startsWith('\'') || text.startsWith('"')) {
+			text = text.slice(1, -1);
+			offset += 1;
+		}
+		if (text) {
+			yield { text, offset };
+		}
+	}
+}

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

@@ -281,6 +281,7 @@ export function getDefaultCompilerOptions(target = 99, lib = 'vue', strictTempla
 		inferTemplateDollarSlots: false,
 		skipTemplateCodegen: false,
 		fallthroughAttributes: false,
+		resolveExternalStylesheets: false,
 		fallthroughComponentNames: [
 			'Transition',
 			'KeepAlive',

packages/language-core/lib/virtualFile/computedSfc.ts

@@ -4,6 +4,7 @@ import { computed, setCurrentSub } from 'alien-signals';
 import type * as ts from 'typescript';
 import type { Sfc, SfcBlock, SfcBlockAttr, VueLanguagePluginReturn } from '../types';
 import { parseCssClassNames } from '../utils/parseCssClassNames';
+import { parseCssImports } from '../utils/parseCssImports';
 import { parseCssVars } from '../utils/parseCssVars';
 import { computedArray, computedItems } from '../utils/signals';
 
@@ -114,8 +115,13 @@ export function computedSfc(
 		computed(() => getParseResult()?.descriptor.styles ?? []),
 		(getBlock, i) => {
 			const base = computedSfcBlock('style_' + i, 'css', getBlock);
+			const getSrc = computedAttrValue('__src', base, getBlock);
 			const getModule = computedAttrValue('__module', base, getBlock);
 			const getScoped = computed(() => !!getBlock().scoped);
+			const getImports = computedItems(
+				() => [...parseCssImports(base.content)],
+				(oldItem, newItem) => oldItem.text === newItem.text && oldItem.offset === newItem.offset
+			);
 			const getCssVars = computedItems(
 				() => [...parseCssVars(base.content)],
 				(oldItem, newItem) => oldItem.text === newItem.text && oldItem.offset === newItem.offset
@@ -125,8 +131,10 @@ export function computedSfc(
 				(oldItem, newItem) => oldItem.text === newItem.text && oldItem.offset === newItem.offset
 			);
 			return () => mergeObject(base, {
+				get src() { return getSrc(); },
 				get module() { return getModule(); },
 				get scoped() { return getScoped(); },
+				get imports() { return getImports(); },
 				get cssVars() { return getCssVars(); },
 				get classNames() { return getClassNames(); },
 			}) satisfies Sfc['styles'][number];

packages/language-core/schemas/vue-tsconfig.schema.json

@@ -177,6 +177,10 @@
 					],
 					"markdownDescription": "https://github.com/vuejs/language-tools/issues/1038, https://github.com/vuejs/language-tools/issues/1121"
 				},
+				"experimentalResolveExternalStylesheets": {
+					"type": "boolean",
+					"default": false
+				},
 				"experimentalModelPropName": {
 					"type": "object",
 					"default": {

test-workspace/tsc/passedFixtures/#5136/env.d.ts

@@ -0,0 +1,6 @@
+declare module '*.css' {
+	const classes: {
+		foo: string;
+	}
+	export default classes;
+}

test-workspace/tsc/passedFixtures/#5136/src.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { useCssModule } from 'vue';
+import { exactType } from '../shared';
+
+const $src = useCssModule("$src");
+exactType($src, {} as Record<string, string> & {
+	foo: string;
+});
+
+const $import = useCssModule("$import");
+exactType($import, {} as Record<string, string> & {
+	foo: string;
+	bar: string;
+});
+</script>
+
+<style module="$src" src="./main.css"></style>
+
+<style module="$import">
+@import "./main.css";
+
+.bar { }
+</style>

test-workspace/tsc/passedFixtures/#5136/tsconfig.json

@@ -0,0 +1,7 @@
+{
+	"extends": "../../../tsconfig.base.json",
+    "vueCompilerOptions": {
+        "experimentalResolveExternalStylesheets": true
+    },
+	"include": [ "**/*" ]
+}