feat: add CSS @import tracking and path alias resolution to dependency graph#13
Merged
giancarloerra merged 3 commits intogiancarloerra:mainfrom Mar 19, 2026
Conversation
…y graph Add CSS @import extraction from Svelte/Vue <style> blocks and standalone CSS/SCSS/SASS/LESS files. Add path alias resolution from tsconfig.json / jsconfig.json compilerOptions.paths with extends chain support.
… aliases - Move Svelte/Vue from "Indexing Only" to "Full Support" in README - Move SASS/LESS to "Code Graph via Regex" in README - Add graph-aliases.ts to DEVELOPER.md service file listing - Update DEVELOPER.md data flow with CSS @import, path alias, and SCSS partial resolution steps
6bd0ed3 to
f4c5518
Compare
Contributor
Author
|
@pineapplestrikesback, you might also want to have a look at this |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Follow-up to #9 (Svelte/Vue import parsing), addressing both known limitations listed there:
$lib/,@/,~/) were treated as external packages — now resolved viatsconfig.json/jsconfig.jsoncompilerOptions.paths@importin<style>blocks was not tracked — now extracted from Svelte and Vue<style>blocks (any combination oflang,scoped,module,globalattributes), plus standalone.css/.scss/.sass/.lessfilesBoth features add zero new dependencies, reusing existing ast-grep HTML parsing (same approach as #9) and the
resolveRelativePathinfrastructure.How it works
CSS @import extraction:
<script>imports, also finds<style>blocks viastyle_elementAST nodes and applies a regex to extract@import/@import url(...)statements (CSS/SCSS/LESS) and@require(Stylus)Lang.Css(lenient parser) and applies the same regex extractorisCssImport: trueso the graph builder routes them to CSS resolution (with.css/.scss/.sass/.less/.stylextensions) instead of JS resolution — critical for Svelte/Vue files where script and style imports coexist@import "variables"correctly finds_variables.scss(underscore-prefix convention)Path alias resolution:
loadPathAliases()readstsconfig.json(falling back tojsconfig.json) and parsescompilerOptions.paths+baseUrlextendschains (up to 10 levels, with circular reference protection) to find paths in parent configs — common in monorepo setups"$lib/*": ["src/lib/*"]) to prefix→directory mappings"~": ["./src"]) match only the exact specifier (not prefix-based)resolveImport()$lib/styles/vars.css)Changes
src/services/graph-aliases.ts(new):loadPathAliases()— reads tsconfig/jsconfig, followsextendschainsparsePathAliases()— parsescompilerOptions.pathswithbaseUrlsupportparseTsconfigJson()— JSON parser with comment stripping that preserves string valuesfollowExtendsChain()— walksextendsreferences with circular reference and depth protectionsrc/services/graph-imports.ts:extractCssImports()— regex-based extraction of@import,@import url(...), and Stylus@requireisCssImportflag toImportInfointerface<style>blocks after script extraction"Css"case in AST switch for standalone CSS/SCSS/SASS/LESS filessrc/services/graph-resolution.ts:aliasesparameter toresolveImport()resolveAliasPath()helper with wildcard vs exact prefix matchingcss/scss/sass/lesslanguage cases with CSS extension resolution_prefix) inresolveRelativePath()src/services/code-graph.ts:loadPathAliases()isCssImportimports to CSS resolution language.sassand.lesstogetAstGrepLang()mappingKnown limitations
@require(without quotes) is not supported — quoted form onlytsconfig.extendswith package references (e.g.,@tsconfig/node20) resolves via localnode_modules/— may not work with hoisted packages in some monorepo setups@importwith bare identifiers (no quotes) is not supported — very rare in practiceTest plan
tests/unit/graph-aliases.test.ts): tsconfig paths, baseUrl, jsconfig fallback, extends chains (single/multi-level), circular extends, missing files, comment stripping, malformed targetstests/unit/graph-imports.test.ts): CSS @import in Svelte/Vue style blocks (all attribute combinations), Stylus @require, standalone CSS, external URL filtering, isCssImport flagtests/unit/graph-resolution.test.ts): alias resolution (wildcard/exact), SCSS partials (_prefix), CSS/SCSS/SASS/LESS resolution, alias + partial combined, backwards compatibility without aliases