Add v2 composable CSS analysis pipeline with multiple analyzers#602
Open
bartveneman wants to merge 5 commits into
Open
Add v2 composable CSS analysis pipeline with multiple analyzers#602bartveneman wants to merge 5 commits into
bartveneman wants to merge 5 commits into
Conversation
…nternals) Explores a from-scratch rewrite focused on tree-shaking, selective analysis, and lower memory. Each analyzer is a self-contained module subscribing to AST node types; the pipeline parses + walks once and dispatches via a precomputed table. Two demo analyzers (unique colors, declarations-per-rule) cover both the unique-string-count and numeric-distribution shapes, with locations toggleable per analyzer. Internals use a string interner + Uint32Array for counts, and flat Uint32Array location stores (4 slots per location). Not wired into the public API. src/v2/ core.ts pipeline + dispatch index.ts public exports v2.test.ts 14 tests, all passing internals/ interner, growable u32, locations, collections analyzers/ unique-colors, declarations-per-rule
…yzers Also adds optional prepare(css) hook to AnalyzerInstance, called before the AST walk, for string-level metrics (linesOfCode, embeddedContent sizeRatio). - linesOfCode: charCode loop over raw string, no allocations - uniqueMediaFeatures: CountCollection over MediaFeature.property - embeddedContent: URL nodes filtered to data: URIs, per-MIME-type count+size+optional-locations; sizeRatio requires prepare 32 tests total, all passing.
Bundle ReportChanges will increase total bundle size by 4.49kB (5.62%) ⬆️
Affected Assets, Files, and Routes:view changes for bundle: analyzeCss-esmAssets Changed:
|
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #602 +/- ##
==========================================
+ Coverage 94.48% 94.93% +0.44%
==========================================
Files 18 66 +48
Lines 1016 2171 +1155
Branches 321 640 +319
==========================================
+ Hits 960 2061 +1101
- Misses 46 89 +43
- Partials 10 21 +11 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Adds 30 new analyzer files covering every metric category from the v9
analyze() function. Each analyzer is an independently importable module;
the bundler can tree-shake anything that isn't imported.
New internals:
aggregate-collection.ts — min/max/mean/mode/range/sum over uint32 stream
context-count-collection.ts — CountCollection grouped by a context key (e.g. property name)
Pipeline changes (core.ts):
- WalkContext { depth, inKeyframes } passed to every visit()
- Optional on_comment() hook for parse-level comment metadata
- keyframesDepth tracked centrally so all analyzers share the context
New analyzers:
Stylesheet: stylesheetMeta, sourceLinesOfCode
At-rules: atruleImports, atruleCharsets, atruleLayers, atruleFontFaces,
atruleKeyframes, atruleMedia, atruleSupports, atruleContainers, atruleMisc
Rules: rules (total, empty, sizes, nesting, selectorsPerRule)
Selectors: selectors (specificity, complexity, ids, pseudos, attributes,
custom elements, combinators, prefixed, a11y, keyframe selectors)
Declarations: declarations (total, unique, importants, inKeyframes, nesting)
Properties: properties (prefixed, custom, shorthands, browserhacks, complexity)
Values: gradients, fontFamilies, fontSizes, lineHeights, zIndexes,
shadows, borderRadii, animations, units, keywords, resets,
displays, colorFormats, vendorPrefixedValues, valueBrowserhacks
84 tests, all passing.
- Add compat layer (src/v2/compat.ts) wrapping all v2 analyzers to produce identical output shape to v9's analyze() function - Copy v9 test suite as src/v2/compat.test.ts to prove compat parity - Add missing analyzers: atrule-all, colors-context, value-complexity - Fix properties analyzer to expose `unique` field in result - Fix compat: export compareSpecificity as `compare` alias from specificity.ts - Fix compat: exclude prefixedRatio from atrules.keyframes spread - Fix compat: use statsFromItems() for atrules.nesting (was flatAggColl cast) - Fix singleton pipeline bug: use makePipeline() factory to prevent state leakage All 24 compat tests and 84 v2 unit tests pass.
…olor skip set
WalkContext: reuse one mutable object across the whole walk instead of
allocating a new {depth, inKeyframes} per node. For a large stylesheet
with thousands of nodes this eliminates tens of thousands of short-lived
heap objects.
Dispatch table: replace Map<nodeType, handlers> with a flat array indexed
by node type (small dense integers). Array index access beats Map.get()
for the integer key case.
Keyframes guard: only call is_atrule() + toLowerCase() + endsWith() when
not already inside a @Keyframes block, cutting that work to zero for all
nodes inside keyframes.
AggregateCollection: track min/max at push() time (two scalar comparisons)
instead of sorting the full buffer. collect() now only sorts once — a
typed-array slice with no comparator function (numeric sort, faster than
Array sort with (a,b)=>a-b) — and allocates Array.from(view) once instead
of twice.
StringInterner: drop the parallel strings[] array. The reverse id→string
lookup is built as a side effect of the unique-record loop in
CountCollection.collect(), so no extra allocation or iteration.
CountCollection: bump GrowableUint32Array initial capacity 32→64 to
reduce early doublings. Per-value LocationStore initial capacity 4→8
(via explicit argument) to halve first-grow frequency for duplicate values.
LocationStore: bump default initial capacity 4→8 (2 locations before
first resize instead of 1).
colors-context: expand SKIPS_COLOR_LOOKUP from 2 entries to ~80 entries
covering layout, spacing, typography, transforms, animation, flex/grid,
table, and other properties whose values can never contain color tokens.
Skipping the inner value walk for these saves work proportional to their
frequency in real stylesheets.
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
3 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
Introduces a new v2 analysis pipeline architecture that enables composable, tree-shaking-friendly CSS analyzers. The pipeline parses CSS once, walks the AST once, and dispatches nodes to subscribed analyzers via a precomputed dispatch table.
Key Changes
Core pipeline (
src/v2/core.ts): ImplementscreatePipeline()that accepts a record of analyzer instances, precomputes node-type dispatch tables, and runs a single parse + walk cycle with efficient node routing.Analyzer implementations:
uniqueColors: Detects hex colors, named colors, system colors, and color functions while skipping false positives in font-family declarationsdeclarationsPerRule: Counts declarations per style rulelinesOfCode: Counts lines in raw CSS (string-based, no AST walk)uniqueMediaFeatures: Extracts and counts media query feature namesembeddedContent: Identifies and measures data URIs by MIME typeInternal utilities:
CountCollection: Efficient counting of unique string values with optional location tracking using string interning and growable Uint32ArrayNumericCollection: Records numeric samples (e.g., declaration counts) with optional per-sample locationsLocationStore: Compact Uint32Array-backed storage for line/column/offset/length tuplesStringInterner: Maps strings to dense integer IDs for efficient indexingGrowableUint32Array: Self-expanding Uint32Array for dynamic allocationComprehensive test suite (
src/v2/v2.test.ts): 40+ tests covering all analyzers with and without location tracking, edge cases, and tree-shaking verification.Notable Implementation Details
locations: trueoption to track source positions without overhead when not neededhttps://claude.ai/code/session_01BoXkHszbnfFu3yR2ictcJj