Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Jun 9, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions packages/language-core/lib/codegen/style/externalStylesheets.ts
Original file line number Diff line number Diff line change
@@ -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`;
}
}
6 changes: 5 additions & 1 deletion packages/language-core/lib/codegen/style/modules.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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,
Expand Down
4 changes: 4 additions & 0 deletions packages/language-core/lib/codegen/style/scopedClasses.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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({
Expand Down
8 changes: 7 additions & 1 deletion packages/language-core/lib/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export interface VueCompilerOptions {
inferTemplateDollarSlots: boolean;
skipTemplateCodegen: boolean;
fallthroughAttributes: boolean;
resolveExternalStylesheets: boolean;
fallthroughComponentNames: string[];
dataAttributes: string[];
htmlAttributes: string[];
Expand Down Expand Up @@ -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;
Expand Down
16 changes: 16 additions & 0 deletions packages/language-core/lib/utils/parseCssImports.ts
Original file line number Diff line number Diff line change
@@ -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 };
}
}
}
1 change: 1 addition & 0 deletions packages/language-core/lib/utils/ts.ts
Original file line number Diff line number Diff line change
Expand Up @@ -281,6 +281,7 @@ export function getDefaultCompilerOptions(target = 99, lib = 'vue', strictTempla
inferTemplateDollarSlots: false,
skipTemplateCodegen: false,
fallthroughAttributes: false,
resolveExternalStylesheets: false,
fallthroughComponentNames: [
'Transition',
'KeepAlive',
Expand Down
8 changes: 8 additions & 0 deletions packages/language-core/lib/virtualFile/computedSfc.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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
Expand All @@ -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];
Expand Down
4 changes: 4 additions & 0 deletions packages/language-core/schemas/vue-tsconfig.schema.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
6 changes: 6 additions & 0 deletions test-workspace/tsc/passedFixtures/#5136/env.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
declare module '*.css' {
const classes: {
foo: string;
}
export default classes;
}
23 changes: 23 additions & 0 deletions test-workspace/tsc/passedFixtures/#5136/src.vue
Original file line number Diff line number Diff line change
@@ -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>
7 changes: 7 additions & 0 deletions test-workspace/tsc/passedFixtures/#5136/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"extends": "../../../tsconfig.base.json",
"vueCompilerOptions": {
"experimentalResolveExternalStylesheets": true
},
"include": [ "**/*" ]
}