Replace css-tree with @projectwallace/css-parser by bartveneman · Pull Request #488 · projectwallace/css-analyzer

bartveneman · 2025-12-26T10:55:43Z

Technically a breaking change:

Comment size now calculates size including the /* and */ characters
Value complexity no longer adds 1 complexity point for margin: 10px !ie browser hacks
Exported functions like selectorComplexity and isValuePrefixed work the same but only on @projectwallace/css-parser AST, not CSSTree.

New:

calculateSpecificity is now exported

Technical considerations:

Inlined the core of @bramus/specificity because I need it to work with the new AST, not CSSTree's. Planning to prose a 'fix' upstream, but I can see reasons to keep the main repo CSSTree based.

Create tracking documents for css-tree → @projectwallace/css-parser migration: - MIGRATION-PLAN.md: Complete migration plan with 5 phases - parser-improvements.md: Track API issues discovered during migration 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Replace manual implementation with Wallace parser's is_vendor_prefixed. Both implementations are functionally identical but Wallace's is battle-tested. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Replace manual implementation with Wallace parser's is_custom function. Both check for -- prefix but Wallace's is battle-tested. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Replace manual case-insensitive comparison with Wallace parser's str_equals. Both provide identical case-insensitive comparison but Wallace's is optimized. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Replace manual case-insensitive prefix matching with Wallace parser's str_starts_with. Note: parameter order is reversed (string, prefix) compared to our internal implementation (prefix, string). Documented parameter order difference in parser-improvements.md. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Phase 1 Complete (String Utilities): - hasVendorPrefix → is_vendor_prefixed ✅ - isCustom → is_custom ✅ - strEquals → str_equals ✅ - startsWith → str_starts_with ✅ Discovered Migration Challenges: - Wallace and css-tree have incompatible AST structures - Files cannot be migrated independently (parse-first requirement) - Wallace's walk() only works with Wallace nodes, not css-tree nodes - No built-in compatibility adapter provided Documented three migration strategy options: A) All-at-once (high risk) B) Compatibility adapter (recommended) C) Dual parser approach Parser improvements documented: - str_starts_with parameter order difference - Missing css-tree compatibility mode - Structural differences in children, location, and types 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

codecov-commenter · 2025-12-26T11:22:01Z

Bundle Report

Changes will increase total bundle size by 59.51kB (21.25%) ⬆️⚠️, exceeding the configured threshold of 5%.

Bundle name	Size	Change
analyzeCss-esm	92.13kB	59.51kB (182.41%) ⬆️⚠️

Affected Assets, Files, and Routes:

view changes for bundle: analyzeCss-esm

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`css-*.js`	59.51kB	92.13kB	182.41% ⚠️

Files in css-*.js:

./src/properties/property-utils.ts → Total Size: 573 bytes
./src/index.ts → Total Size: 28.82kB
./src/values/values.ts → Total Size: 414 bytes
./src/string-utils.ts → Total Size: 585 bytes
./src/values/vendor-prefix.ts → Total Size: 205 bytes
./src/values/browserhacks.ts → Total Size: 222 bytes
./src/context-collection.ts → Total Size: 935 bytes
./src/atrules/atrules.ts → Total Size: 1.92kB
./src/values/animations.ts → Total Size: 995 bytes
./src/selectors/utils.ts → Total Size: 3.19kB
./src/vendor-prefix.ts → Total Size: 77 bytes
./src/collection.ts → Total Size: 1.96kB
./src/values/destructure-font-shorthand.ts → Total Size: 2.32kB
./src/selectors/specificity.ts → Total Size: 6.08kB

…idation Implement dual parser approach (Phase 2 of migration plan): - Import Wallace parser alongside css-tree - Create analyzeWithWallace() function counting basic metrics - Add WALLACE_COMPARE env flag for side-by-side validation - Compare stylesheet size, rules count, declarations count All metrics match perfectly between parsers: ✅ Stylesheet size ✅ Rules count ✅ Declarations count This validates Wallace parser accuracy and enables gradual migration. Next steps: Migrate additional metrics one by one. Related: MIGRATION-PLAN.md Phase 2 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Move rule and declaration counting from css-tree to Wallace parser: - Wallace walks AST and updates totalRules and totalDeclarations directly - Removed totalRules++ from css-tree Rule handler - Removed totalDeclarations++ from css-tree Declaration handler This is actual incremental migration - Wallace now owns this functionality. Both parsers run (double parse+walk), but Wallace handles what it can. All 228 tests pass - results are identical. Next: Migrate more metrics from css-tree to Wallace. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Discovered parser bug: comments in selector lists cause Wallace to stop parsing remaining selectors. Attempted selector counting migration but had to revert due to this bug. Details: - Wallace stops parsing at comment in comma-separated selector list - Example: 6 selectors expected, Wallace only parses 4 - Documented in parser-improvements.md under "Parser Bugs" - Updated MIGRATION-PLAN.md with attempted migration and blocker Selector counting remains with css-tree until Wallace bug is fixed. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Reverted selector counting migration back to css-tree approach after discovering Wallace parser bug with comments in selector lists. Changes: - Removed totalSelectors early declaration (duplicate) - Simplified wallaceWalk to only count Rules and Declarations - Selector counting uses css-tree: totalSelectors = selectorComplexities.size() - All 228 tests passing Wallace parser successfully handling: - ✅ Rules counting - ✅ Declarations counting Remaining with css-tree: - Selectors (blocked by parser bug with comments) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Migrated empty rules detection from css-tree to Wallace parser. Implementation: - Wallace checks if Rule node's block has no Declaration children - Uses node.block.children.some() to detect declarations - Removed emptyRules++ from css-tree walk All 228 tests passing - Wallace now handles: - ✅ Rules counting - ✅ Declarations counting - ✅ Empty rules counting 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Migrated important declarations counting from css-tree to Wallace parser. Implementation: - Wallace checks Declaration node's is_important property - Simple boolean flag check, no context needed - Removed importantDeclarations++ from css-tree walk - Kept importantsInKeyframes with css-tree (requires atrule context) All 228 tests passing - Wallace now handles: - ✅ Rules counting - ✅ Declarations counting - ✅ Empty rules counting - ✅ Important declarations counting 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Replace manual check for declarations with Wallace's built-in is_empty flag. This is a cleaner API than manually iterating children to check emptiness. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Wallace now handles all nesting depth tracking for aggregate collections: - atruleNesting (depth when entering atrule) - ruleNesting (depth when entering rule) - selectorNesting (depth - 1 for selectors) - declarationNesting (depth - 1 for declarations) css-tree walk still maintains nestingDepth for location-based unique collections which will be migrated once location format is unified. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Document that Wallace now handles nesting depth tracking for aggregate collections. Update next migration targets to focus on simple metrics like ruleSizes, selectorsPerRule, and declarationsPerRule. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Wallace now handles: - ruleSizes (selectors + declarations per rule) - selectorsPerRule (count Selector nodes in SelectorList) - declarationsPerRule (count Declaration nodes in Block) Learned Wallace AST structure: - Rule has children: [SelectorList, Block] - SelectorList contains Selector nodes - Block contains Declaration nodes 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Document Wallace now handles rule metrics (ruleSizes, selectorsPerRule, declarationsPerRule). Add AST structure learnings about Rule/SelectorList/Block hierarchy. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Key learnings from attempted property migration: - Wallace only parses valid CSS, skips hacks like *zoom - Properties with browser hacks must stay in css-tree - Block nodes appear in both children[] and block property - Walking both causes double-counting (walk children only) This blocks migration of property tracking since hack detection is needed. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

partially unblocks projectwallace/css-analyzer#488

bartveneman and others added 7 commits December 26, 2025 11:47

install pw parser

505a141

bartveneman and others added 13 commits December 26, 2025 12:56

migrate some counters

b63782d

bartveneman mentioned this pull request Jan 1, 2026

fix: parse property with browser hack projectwallace/css-parser#90

Merged

bartveneman added a commit to projectwallace/css-parser that referenced this pull request Jan 1, 2026

fix: parse property with browser hack (#90)

11c7ef4

partially unblocks projectwallace/css-analyzer#488

bartveneman added 7 commits January 1, 2026 21:23

property analysis converted

6e9122a

convert atrule counters

938ad55

migrate font-face analysis

649a2f0

convert some of the atrule analysis

43dd912

migrate property and container atrules

925adff

convert rule size counting

fb05091

convert some simple selector counting

e053ef0

bartveneman added 19 commits January 10, 2026 22:13

rm unused code

305e083

convert value browserhacks

353efa1

rework values into declarations

08a4150

convert some simple values

1b20904

convert more easy values

d42b2ad

convert animations

3562bb4

convert font destructuring

0379b9e

converted all values

5297df6

all AST traversing done, only comments left

0b625d5

remove ALL csstree references

b2e5f4c

rm useless file

7fa1732

fix lint and knip

ba5f49f

use more wallace walkers

7c4d920

rm unused code

218e2ad

use more wallace walkers

1dd9f5e

use more wallace walkers

19ede94

rm regference to csstree

ba2276b

perf: use node.type instead of node.type_name

de9b755

use wallaces node.is_vendor_prefixed more

6ada112

bartveneman marked this pull request as ready for review January 11, 2026 11:49

bartveneman and others added 7 commits January 11, 2026 12:53

fix build

3306a11

simpler regex-based line counting

a2eb2d6

parser @ 0.11.3

dcad3cb

use wallace.walk for main loop

1f34599

simplify location tracking

584d705

Merge branch 'main' into pw-parser

56c7291

update parser to 0.12.2

732f715

bartveneman merged commit 1049deb into main Jan 18, 2026
5 checks passed

bartveneman deleted the pw-parser branch January 18, 2026 21:41

bartveneman mentioned this pull request Jan 18, 2026

BREAKING: replace css-tree with @eslint/css-tree #479

Closed

Navigation Menu

Repository navigation

Replace css-tree with @projectwallace/css-parser - #488

Replace css-tree with @projectwallace/css-parser#488
bartveneman merged 63 commits into
mainfrom
pw-parser

bartveneman commented Dec 26, 2025 •

edited

Loading

Uh oh!

codecov-commenter commented Dec 26, 2025 •

edited

Loading

Assets Changed:

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

bartveneman commented Dec 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov-commenter commented Dec 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

bartveneman commented Dec 26, 2025 •

edited

Loading

codecov-commenter commented Dec 26, 2025 •

edited

Loading