feat(language-core): experimental resolve external stylesheets

[KazariEX]

resolve #3505, resolve #3720

Introduce experimentalResolveExternalStylesheets option. It is effective for both <style src="..."> and @import "...".

Before turn on this option, you should create a stub declaration to avoid type break caused by invalid import statements:

declare module '*.css' {
  const classes: Record<string, string>;
  export default classes;
}

Then you can install a typescript plugin that provides the type support for .css files, such as https://github.com/mrmckeb/typescript-plugin-css-modules.

[pkg-pr-new[bot]]

Open in StackBlitz

vue-component-meta

npm i https://pkg.pr.new/vuejs/language-tools/vue-component-meta@5136

vue-component-type-helpers

npm i https://pkg.pr.new/vuejs/language-tools/vue-component-type-helpers@5136

@vue/language-core

npm i https://pkg.pr.new/vuejs/language-tools/@vue/language-core@5136

@vue/language-plugin-pug

npm i https://pkg.pr.new/vuejs/language-tools/@vue/language-plugin-pug@5136

@vue/language-server

npm i https://pkg.pr.new/vuejs/language-tools/@vue/language-server@5136

@vue/language-service

npm i https://pkg.pr.new/vuejs/language-tools/@vue/language-service@5136

vue-tsc

npm i https://pkg.pr.new/vuejs/language-tools/vue-tsc@5136

@vue/typescript-plugin

npm i https://pkg.pr.new/vuejs/language-tools/@vue/typescript-plugin@5136

commit: 82b5405

[johnsoncodehk]

I think we can detect if the current file is referencing external css, then suggest to the user to install css-modules-kit extension.