microsoft / microsoft/vscode-css-languageservice
Symbols are not found across file boundaries
@aeschli is already working on this.
Since Jul 6, 2019.
- Dominant language
- TypeScript
- Stars
- 384
- Forks
- 217
- Avg merge
- 3d 16h
- Merged PRs (30d)
- 14
Description
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);
}
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.