refactor(language-core): rename style related configurations for consistency (#5414)

Author: KazariEX

packages/language-core/lib/codegen/style/externalStylesheets.ts renamed to packages/language-core/lib/codegen/style/imports.ts

@@ -2,7 +2,7 @@ import type { Code, Sfc, VueCodeInformation } from '../../types';
 import { combineLastMapping, newLine } from '../utils';
 import { wrapWith } from '../utils/wrapWith';
 
-export function* generateExternalStylesheets(
+export function* generateStyleImports(
 	style: Sfc['styles'][number]
 ): Generator<Code> {
 	const features: VueCodeInformation = {

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

@@ -3,7 +3,7 @@ import { codeFeatures } from '../codeFeatures';
 import type { ScriptCodegenOptions } from '../script';
 import { endOfLine, newLine } from '../utils';
 import { generateClassProperty } from './classProperty';
-import { generateExternalStylesheets } from './externalStylesheets';
+import { generateStyleImports } from './imports';
 
 export function* generateStyleModules(
 	options: ScriptCodegenOptions
@@ -31,8 +31,8 @@ export function* generateStyleModules(
 			yield `Record<string, string> & `;
 		}
 		yield `__VLS_PrettifyGlobal<{}`;
-		if (options.vueCompilerOptions.resolveExternalStylesheets) {
-			yield* generateExternalStylesheets(style);
+		if (options.vueCompilerOptions.resolveStyleImports) {
+			yield* generateStyleImports(style);
 		}
 		for (const className of style.classNames) {
 			yield* generateClassProperty(

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

@@ -3,25 +3,25 @@ import type { ScriptCodegenOptions } from '../script';
 import type { TemplateCodegenContext } from '../template/context';
 import { endOfLine } from '../utils';
 import { generateClassProperty } from './classProperty';
-import { generateExternalStylesheets } from './externalStylesheets';
+import { generateStyleImports } from './imports';
 
 export function* generateStyleScopedClasses(
 	options: ScriptCodegenOptions,
 	ctx: TemplateCodegenContext
 ): Generator<Code> {
-	const option = options.vueCompilerOptions.experimentalResolveStyleCssClasses;
+	const option = options.vueCompilerOptions.resolveStyleClassNames;
 	const styles = options.sfc.styles
 		.map((style, i) => [style, i] as const)
-		.filter(([style]) => option === 'always' || (option === 'scoped' && style.scoped));
+		.filter(([style]) => option === true || (option === 'scoped' && style.scoped));
 	if (!styles.length) {
 		return;
 	}
 
 	const firstClasses = new Set<string>();
 	yield `type __VLS_StyleScopedClasses = {}`;
 	for (const [style, i] of styles) {
-		if (options.vueCompilerOptions.resolveExternalStylesheets) {
-			yield* generateExternalStylesheets(style);
+		if (options.vueCompilerOptions.resolveStyleImports) {
+			yield* generateStyleImports(style);
 		}
 		for (const className of style.classNames) {
 			if (firstClasses.has(className.text)) {

packages/language-core/lib/types.ts

@@ -44,7 +44,8 @@ export interface VueCompilerOptions {
 	inferTemplateDollarSlots: boolean;
 	skipTemplateCodegen: boolean;
 	fallthroughAttributes: boolean;
-	resolveExternalStylesheets: boolean;
+	resolveStyleImports: boolean;
+	resolveStyleClassNames: boolean | 'scoped';
 	fallthroughComponentNames: string[];
 	dataAttributes: string[];
 	htmlAttributes: string[];
@@ -68,7 +69,6 @@ export interface VueCompilerOptions {
 
 	// experimental
 	experimentalDefinePropProposal: 'kevinEdition' | 'johnsonEdition' | false;
-	experimentalResolveStyleCssClasses: 'scoped' | 'always' | 'never';
 	experimentalModelPropName: Record<string, Record<string, boolean | Record<string, string> | Record<string, string>[]>>;
 
 	// internal

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

@@ -282,7 +282,8 @@ export function getDefaultCompilerOptions(target = 99, lib = 'vue', strictTempla
 		inferTemplateDollarSlots: false,
 		skipTemplateCodegen: false,
 		fallthroughAttributes: false,
-		resolveExternalStylesheets: false,
+		resolveStyleImports: false,
+		resolveStyleClassNames: 'scoped',
 		fallthroughComponentNames: [
 			'Transition',
 			'KeepAlive',
@@ -309,7 +310,6 @@ export function getDefaultCompilerOptions(target = 99, lib = 'vue', strictTempla
 		},
 		plugins: [],
 		experimentalDefinePropProposal: false,
-		experimentalResolveStyleCssClasses: 'scoped',
 		experimentalModelPropName: {
 			'': {
 				input: true

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

@@ -120,10 +120,23 @@
 					"default": false,
 					"markdownDescription": "Enable to support typed fallthrough attributes. Please note that enabling may significantly slow down type checking."
 				},
-				"resolveExternalStylesheets": {
+				"resolveStyleImports": {
 					"type": "boolean",
 					"default": false,
-					"markdownDescription": "https://github.com/vuejs/language-tools/pull/5136"
+					"markdownDescription": "Enable to generate type imports for external CSS files by `<style src=\"...\">` or `@import \"...\"`.\n\nSee: https://github.com/vuejs/language-tools/pull/5136"
+				},
+				"resolveStyleClassNames": {
+					"type": [
+						"boolean",
+						"string"
+					],
+					"default": "scoped",
+					"enum": [
+						true,
+						false,
+						"scoped"
+					],
+					"markdownDescription": "Enable to apply completions and document links for CSS class names used in templates."
 				},
 				"fallthroughComponentNames": {
 					"type": "array",
@@ -179,14 +192,6 @@
 					"default": [ ],
 					"markdownDescription": "Plugins to be used in the SFC compiler."
 				},
-				"experimentalResolveStyleCssClasses": {
-					"enum": [
-						"scoped",
-						"always",
-						"never"
-					],
-					"markdownDescription": "https://github.com/vuejs/language-tools/issues/1038, https://github.com/vuejs/language-tools/issues/1121"
-				},
 				"experimentalModelPropName": {
 					"type": "object",
 					"default": {

packages/language-service/lib/plugins/vue-document-links.ts

@@ -37,11 +37,11 @@ export function create(): LanguageServicePlugin {
 							style: Sfc['styles'][number];
 							classOffset: number;
 						}[]>();
-						const option = root.vueCompilerOptions.experimentalResolveStyleCssClasses;
+						const option = root.vueCompilerOptions.resolveStyleClassNames;
 
 						for (let i = 0; i < sfc.styles.length; i++) {
 							const style = sfc.styles[i];
-							if (option === 'always' || (option === 'scoped' && style.scoped)) {
+							if (option === true || (option === 'scoped' && style.scoped)) {
 								for (const className of style.classNames) {
 									if (!styleClasses.has(className.text.slice(1))) {
 										styleClasses.set(className.text.slice(1), []);

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

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

test-workspace/tsc/passedFixtures/vue3/#3688/main.vue

@@ -1,4 +1,4 @@
-<!-- @experimentalResolveStyleCssClasses "always" -->
+<!-- @resolveStyleClassNames true -->
 
 <template>
 	{{ () => {