feat(language-service): add style scoped and module completion (#4705)

Author: runyasak

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

@@ -23,11 +23,23 @@ describe('Completions', async () => {
 			  "script setup lang="tsx"",
 			  "script setup lang="jsx"",
 			  "style lang="css"",
+			  "style lang="css" scoped",
+			  "style lang="css" module",
 			  "style lang="scss"",
+			  "style lang="scss" scoped",
+			  "style lang="scss" module",
 			  "style lang="less"",
+			  "style lang="less" scoped",
+			  "style lang="less" module",
 			  "style lang="stylus"",
+			  "style lang="stylus" scoped",
+			  "style lang="stylus" module",
 			  "style lang="postcss"",
+			  "style lang="postcss" scoped",
+			  "style lang="postcss" module",
 			  "style lang="sass"",
+			  "style lang="sass" scoped",
+			  "style lang="sass" module",
 			  "template lang="pug"",
 			]
 		`);

packages/language-service/lib/plugins/vue-sfc.ts

@@ -195,16 +195,11 @@ export function create(): LanguageServicePlugin {
 						styleItem.kind = 17 satisfies typeof vscode.CompletionItemKind.File;
 						styleItem.detail = '.css';
 						for (const lang of styleLangs) {
-							result.items.push({
-								...styleItem,
-								kind: 17 satisfies typeof vscode.CompletionItemKind.File,
-								detail: lang === 'postcss' ? '.css' : `.${lang}`,
-								label: styleItem.label + ' lang="' + lang + '"',
-								textEdit: styleItem.textEdit ? {
-									...styleItem.textEdit,
-									newText: styleItem.textEdit.newText + ' lang="' + lang + '"',
-								} : undefined,
-							});
+							result.items.push(
+								getStyleCompletionItem(styleItem, lang),
+								getStyleCompletionItem(styleItem, lang, 'scoped'),
+								getStyleCompletionItem(styleItem, lang, 'module')
+							);
 						}
 					}
 
@@ -253,3 +248,20 @@ export function create(): LanguageServicePlugin {
 		}
 	}
 }
+
+function getStyleCompletionItem(
+	styleItem: vscode.CompletionItem,
+	lang: string,
+	attr?: string
+): vscode.CompletionItem {
+	return {
+		...styleItem,
+		kind: 17 satisfies typeof vscode.CompletionItemKind.File,
+		detail: lang === 'postcss' ? '.css' : `.${lang}`,
+		label: styleItem.label + ' lang="' + lang + '"' + (attr ? ` ${attr}` : ''),
+		textEdit: styleItem.textEdit ? {
+			...styleItem.textEdit,
+			newText: styleItem.textEdit.newText + ' lang="' + lang + '"' + (attr ? ` ${attr}` : ''),
+		} : undefined
+	};
+}