[heft-sass-plugin] Emit declaration source maps so "go to definition" resolves to the stylesheet
Nessuno ha ancora preso questa issue.
Valutazione
- Difficoltà
- 5/5
- Tempo stimato
- Più di una settimana
- Idoneità per principianti
- 45/100
- Tipo di issue
- Funzionalità
- Chiarezza
- Abbastanza chiara
- Stato di attività
- Tranquilla
- Stack tecnologico
- sass, typescript
- Ambito
- build-system, tooling
Direzione di ricerca
Start in the heft-sass-plugin's SassProcessor, where the plugin composes and writes its .d.ts, and review how postcss-modules and the Sass source map can provide class positions. Consider the relationship to typings-generator's serializeDeclarationMap from #5907 and the proposed opt-in behavior. Done means tsserver navigation reaches the declaring rule, including classes in partials and @media blocks.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Descrizione
Summary
Typings generated by @rushstack/heft-sass-plugin are written into a folder that is merged back
into the source tree via the TypeScript rootDirs compiler option, so the language service only
ever sees the generated .d.ts. The stylesheet that actually declares the class is invisible to it.
The effect is that "go to definition" on a CSS module class, or on the import specifier, navigates
to the generated declaration rather than to the file the developer can edit:
import * as styles from './HeaderBar.module.scss';
styles.headerBar; // -> temp/sass-ts/HeaderBar.module.scss.d.ts, not src/HeaderBar.module.scss
Because the generated file is a build artifact, landing there is a dead end.
This is the same underlying problem as #5906, which covers localization typings, but the Sass plugin
does not share the code path: it composes and writes its own .d.ts in SassProcessor rather than
going through @rushstack/typings-generator.
Repro steps
- Configure a project that uses
@rushstack/heft-sass-pluginto emit typings into a folder listed
inrootDirs. - Import a
.module.scssfrom a.tsfile and reference one of its classes. - Alt-click (or F12) the class, or the import specifier.
Expected result: the editor opens the .scss at the rule that declares the class.
Actual result: the editor opens the generated .module.scss.d.ts.
Details
TypeScript already solves this generally with declaration source maps (.d.ts.map): when a .d.ts
has a corresponding map pointing at real source, tsserver transparently redirects "go to
definition" there. The Sass plugin does not emit one, so there is nothing to redirect with.
The interesting part is obtaining accurate positions. Searching the stylesheet text for the class
name is unreliable in two common cases:
- A class declared in an
@imported partial does not appear in the entry file at all. - A class restated inside a
@mediaor theme block can be matched instead of its primary rule.
Both are avoidable, because Sass can produce a source map for the compilation. A PostCSS plugin
registered before postcss-modules (which rewrites class names) can record where each class
selector appears in the compiled CSS, and that position maps back through the Sass source map to the
original stylesheet. Because the lookup is done in compiled-CSS order, the top-level rule is
naturally preferred over a later restatement, and classes from partials resolve into the partial.
I have prototyped this and confirmed with a live tsserver that navigation resolves to the correct
rule, including the partial and @media cases.
Two design points I would like guidance on before sending a PR:
- Where the shared pieces should live. #5907 adds
serializeDeclarationMapto
@rushstack/typings-generator. The Sass plugin additionally needs to decode a source map to do
the position lookup. Putting the decoder alongside the encoder intypings-generatorwould keep
one implementation, butheft-sass-plugindoes not currently depend on that package. - Whether the Sass-specific helpers should be exported. Other Sass typings generators exist
outside this repo that would otherwise reimplement the same PostCSS-plus-source-map chain.
Exporting them would let those consumers reuse this rather than duplicate it.
Requesting the Sass source map has a cost, so the feature would be opt-in and off by default.
Standard questions
| Question | Answer |
|---|---|
| Package name: | @rushstack/heft-sass-plugin |
| Package version? | 0.15.24 |
| Operating system? | Linux (also reproduced on Mac) |
| Would you consider contributing a PR? | Yes |
Node.js version (node -v)? |
22.16.0 |
- Lingua principale
- TypeScript
- Stelle
- 6.5k
- Fork
- 708
- Merge medio
- 5g 7h
- PR unite (30g)
- 44
Guida per i contributori
Nessuna guida per i contributori indicizzata per questo repository
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Altre issue di microsoft/rushstack
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 72/100
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 65/100
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 68/100
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 70/100
-
Difficoltà 4/5 3-5 giorni Idoneità per principianti 48/100
Tutte le issue di microsoft/rushstack
Issue simili
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 74/100
ontola/atomic-server#1625 ·
-
bug
Difficoltà 2/5 1-3 ore Idoneità per principianti 70/100
melgarafael/DeskcommCRM#1451 ·
-
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 82/100
-
bug via-triage
Difficoltà 2/5 1-3 ore Idoneità per principianti 78/100
-
bot:ai-assisted component:compact-js status:untriaged
Difficoltà 2/5 1-3 ore Idoneità per principianti 84/100
midnightntwrk/midnight-sdk#403 ·