feat: CSS/SCSS/LESS parsing with cross-language STYLES edges and conflict detection#61
Open
CodeBlackwell wants to merge 1 commit intotirth8205:mainfrom
Open
feat: CSS/SCSS/LESS parsing with cross-language STYLES edges and conflict detection#61CodeBlackwell wants to merge 1 commit intotirth8205:mainfrom
CodeBlackwell wants to merge 1 commit intotirth8205:mainfrom
Conversation
…lict detection Add comprehensive CSS ecosystem support to the code knowledge graph: **CSS/SCSS Parsing (v1)** - Tree-sitter based parsing for CSS and SCSS files - Selector extraction with specificity computation (a, b, c tuples) - Single-file override detection via specificity, !important, BEM refinement, and source order - OVERRIDES edges with mechanism metadata - Custom properties (CSS variables), @media, @Keyframes, @import/@use - SCSS: $variables, @mixin/@include, & nesting resolution - Vue SFC <style> block delegation to CSS/SCSS parser **Cross-language STYLES Edges (v2)** - Extract className from JSX/TSX (static strings, JSX expressions, template literals) - Extract class attributes from Vue <template> sections - Post-build linking pass creates STYLES edges from components to CSS selectors - CSS Modules resolution: import styles from './x.module.css' → styles.foo → .foo with camelCase-to-kebab conversion **Cross-file Conflict Detection (v2)** - Heuristic detection of same-name selectors across different CSS files - POTENTIAL_CONFLICT edges with specificity comparison and confidence metadata - Capped at 50 pairwise comparisons per class name **LESS Support (v2)** - Regex-based parser (no tree-sitter grammar available) - Selectors, @variables, .mixins(), @import extraction - Regex-based specificity computation - Override detection via existing _detect_css_overrides() **MCP Tools** - 3 new query patterns: styles_of, styled_by, conflicts_of - 2 existing patterns: overrides_of, overridden_by **Visualization** - STYLES edges (blue, dashed) and POTENTIAL_CONFLICT edges (red, dashed) - Legend entries and arrow markers **Graph Infrastructure** - GraphStore.delete_edges_by_kind() for linking pass cleanup - GraphStore.get_nodes_by_extra_pattern() for CSS node queries - find_dependents() extended to traverse STYLES edges - link_css_styles() and detect_cross_file_conflicts() integrated into full_build() and incremental_update() **Tests** - 47 new tests (229 total), all passing - 6 new fixture files (TSX, Vue, CSS, LESS, CSS Modules, conflict pairs) - TestJSXClassExtraction, TestVueTemplateClassExtraction, TestLESSParsing - TestCSSStylesLinking, TestCrossFileConflicts, TestCamelToKebab Supported languages: 16 (Python, JS, TS, TSX, Go, Rust, Java, C, C++, C#, Ruby, PHP, Solidity, Vue, CSS, SCSS) + LESS via regex fallback.
Owner
|
Closing — CSS/SCSS support scope is too broad for the current architecture. Tree-sitter CSS parsing doesn't produce meaningful function/class nodes for the knowledge graph. |
2 tasks
Owner
|
CSS/SCSS/LESS parsing with cross-language STYLES edges is not in main — parser.py has no CSS/SCSS/LESS support, no STYLES edge type, and no styles_of/styled_by/conflicts_of query patterns. This is a substantial PR (2135 additions) with well-defined scope. Worth reviving — it would be valuable for frontend-heavy codebases. The two-phase approach (per-file extraction + post-build linking) is architecturally sound. |
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
2 participants
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
[a,b,c], single-file override detection (specificity,!important, BEM, source order), custom properties,@media/@keyframes/@import, SCSS$variables/@mixin/@include/&nesting, Vue<style>block delegationclassNamefrom JSX/TSX andclassfrom Vue<template>, post-build linking pass connects components to CSS selectors, CSS Modules resolution (styles.foo→.foowith camelCase-to-kebab)POTENTIAL_CONFLICTedges with specificity comparison and confidence metadata@variables,.mixins(),@importstyles_of,styled_by,conflicts_ofNew Edge Types
OVERRIDESSTYLESPOTENTIAL_CONFLICTArchitecture
Two-phase approach keeps the parser stateless:
extrametadatalink_css_styles()anddetect_cross_file_conflicts()query the graph and create cross-file edgesBoth phases run automatically in
full_build()andincremental_update().Test Plan
ruff checkcleanmypycleanTestJSXClassExtraction— static className, CSS Module refs, dynamic skip, function attachmentTestVueTemplateClassExtraction— static class, dynamic:classskip, style+template coexistenceTestLESSParsing— selectors,@variables,@import,.mixins, language taggingTestCSSStylesLinking— cross-file STYLES edges, Vue same-file linking, missing selector no-opTestCrossFileConflicts— same-selector conflict, unique selector no-conflict, metadata validationTestCamelToKebab— camelCase conversion correctness