Symbols are not found across file boundaries

[BPScott]

Thanks to @import definitions, usages of symbols may be found across file boundaries, instead of just the current file. It'd be cool if VSCode was smart enough to follow through @import definitions to find definitions and usages, in the same way that JS/TS language features can identify definitions/usage in other files. My primary use-case for this is scss files using things like mixins, extends and functions, but I believe this also applies to plain css files and features like animations and custom properties.

In the following example within internal.scss you can use "Find all References" on each of the internal-mixin mixin, the .internal-extends class, the internal-anim animation and the --internal-var custom property and it will show you two locations - the definition and the usage of those items.

However this fails to work for the external-mixin mixin, the .external-extends class, the external-anim animation and the --external-var custom property - "Find all References" only finds the usage within the current file (internal.scss). It does not find the definitions of this items within (_external.scss), even though that file was imported at the top of internal.scss (and ctrl+clicking on the @import will take you to _external.scss.

The inverse should also work - using "Find all References" on the definitions in _external.scss should identify the usages within internal.scss.

---

Given two files in the same folder:

The first _external.scss:

@mixin external-mixin() {
	.foo { content: '1' }
}

.external-extends {
	content: '1';
}

@keyframes external-anim {
	from {background-color: red;}
	to {background-color: yellow;}
}

:root {
	--external-var: '1';
}

And the second internal.scss:

// Resolves to _external.scss, where the `external` mixin extends
// animation and custom property are defined
@import 'external';

@mixin internal-mixin() {
	.foo { content: '1' }
}

.internal-extends {
	content: '1';
}

@keyframes internal-anim {
	from {background-color: red;}
	to {background-color: yellow;}
}

:root {
	--internal-var: '1';
}

// ---

.test-internals {
	@include internal-mixin;
	@extend .internal-extends;
	animation: internal-anim 20s;
	content: var(--internal-var);
}

.test-externals {
	@include external-mixin;
	@extend .external-extends;
	animation: external-anim 20s;
	content: var(--external-var);
}

[BPScott]

Yo @aeschli and @octref, I was wondering if you'd saw this or managed to fit this into your roadmap? It feels like a natural extension now that the language service can handle working out import paths now

[octref]

There's plan to do microsoft/vscode#6734 which could lay foundation for this to happen.