Skip to content

Commit bfafac1

Browse files
bartvenemanclaude
andcommitted
docs: document Phase 1 completion and migration challenges
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 <[email protected]>
1 parent cf3e6fe commit bfafac1

File tree

2 files changed

+53
-52
lines changed

2 files changed

+53
-52
lines changed

MIGRATION-PLAN.md

Lines changed: 41 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -24,85 +24,75 @@ git commit -m "docs: add migration planning and parser improvement tracking"
2424

2525
---
2626

27-
## Phase 1: String Utilities (4 steps)
27+
## Phase 1: String Utilities ✅ COMPLETE
2828

2929
Replace internal string utils with Wallace's from `@projectwallace/css-parser`.
3030

31-
### Step 1.1: Replace hasVendorPrefix
32-
**File:** `src/vendor-prefix.ts`
33-
34-
Replace lines 1-12 with:
35-
```typescript
36-
import { is_vendor_prefixed } from '@projectwallace/css-parser'
37-
38-
export function hasVendorPrefix(keyword: string): boolean {
39-
return is_vendor_prefixed(keyword)
40-
}
41-
```
42-
43-
**Validation:** `npm run check && npm run lint && npm test && npm run build`
31+
**Status:** All 4 string utilities successfully migrated
32+
**Commits:** 4
4433

45-
**Commit:** "refactor: use Wallace is_vendor_prefixed for hasVendorPrefix"
34+
### Step 1.1: Replace hasVendorPrefix ✅
35+
**File:** `src/vendor-prefix.ts`
36+
**Commit:** `61bc022` - "refactor: use Wallace is_vendor_prefixed for hasVendorPrefix"
4637

4738
---
4839

49-
### Step 1.2: Replace isCustom
40+
### Step 1.2: Replace isCustom
5041
**File:** `src/properties/property-utils.ts`
42+
**Commit:** `3a34b55` - "refactor: use Wallace is_custom for custom property detection"
5143

52-
Add import and replace lines 23-27:
53-
```typescript
54-
import { is_custom } from '@projectwallace/css-parser'
55-
56-
export function isCustom(property: string): boolean {
57-
return is_custom(property)
58-
}
59-
```
60-
61-
**Validation:** `npm run check && npm run lint && npm test && npm run build`
44+
---
6245

63-
**Commit:** "refactor: use Wallace is_custom for custom property detection"
46+
### Step 1.3: Replace strEquals ✅
47+
**File:** `src/string-utils.ts`
48+
**Commit:** `f84e8af` - "refactor: use Wallace str_equals for string comparison"
6449

6550
---
6651

67-
### Step 1.3: Replace strEquals
52+
### Step 1.4: Replace startsWith ✅
6853
**File:** `src/string-utils.ts`
54+
**Commit:** `cf3e6fe` - "refactor: use Wallace str_starts_with for prefix matching"
55+
**Note:** Parameter order reversed - documented in parser-improvements.md
6956

70-
Add import and replace lines 26-39:
71-
```typescript
72-
import { str_equals } from '@projectwallace/css-parser'
73-
74-
export function strEquals(base: string, maybe: string): boolean {
75-
return str_equals(base, maybe)
76-
}
77-
```
57+
---
7858

79-
**Validation:** `npm run check && npm run lint && npm test && npm run build`
59+
---
8060

81-
**Commit:** "refactor: use Wallace str_equals for string comparison"
61+
## Migration Challenge Discovered
8262

83-
---
63+
### Structural Incompatibility
64+
During migration planning, we discovered that Wallace parser and css-tree have fundamentally different AST structures:
8465

85-
### Step 1.4: Replace startsWith
86-
**File:** `src/string-utils.ts`
66+
1. **Parse-first requirement**: Files like `atrules/atrules.ts` and `values/*.ts` cannot be migrated independently because they receive css-tree nodes from `index.ts`
67+
2. **Wallace's walk() only works with Wallace nodes**: Cannot use Wallace's walk on css-tree AST
68+
3. **No compatibility adapter**: Wallace doesn't provide a css-tree compatibility mode
8769

88-
Update import and replace lines 81-94:
89-
```typescript
90-
import { str_equals, str_starts_with } from '@projectwallace/css-parser'
70+
### Revised Strategy Options
9171

92-
export function startsWith(base: string, maybe: string): boolean {
93-
return str_starts_with(base, maybe)
94-
}
95-
```
72+
**Option A: All-at-once migration (High Risk)**
73+
- Migrate `index.ts` completely to Wallace parser in one large change
74+
- Update all dependent files simultaneously
75+
- Risk: Large, complex change affecting 770+ lines of walk logic
9676

97-
**Note:** `endsWith()` has no Wallace equivalent - keep for now.
77+
**Option B: Compatibility adapter (Recommended)**
78+
- Create an adapter layer that wraps Wallace nodes to expose css-tree-compatible API
79+
- Allows gradual file-by-file migration
80+
- Adapter handles differences in children storage, location structure, type identification
81+
- Risk: Additional maintenance burden for adapter layer
9882

99-
**Validation:** `npm run check && npm run lint && npm test && npm run build`
83+
**Option C: Dual parser approach**
84+
- Keep css-tree for main parsing temporarily
85+
- Use Wallace utilities (string functions) where beneficial
86+
- Plan full migration for a major version bump
87+
- Risk: Dependency on both parsers
10088

101-
**Commit:** "refactor: use Wallace str_starts_with for prefix matching"
89+
### Recommendation
90+
Phase 1 (string utilities) provides immediate value with zero risk. For the full parser migration, **Option B (compatibility adapter)** would enable the safest gradual migration path, though it requires implementing the adapter first.
10291

10392
---
10493

10594
## Phase 2: Small Files - Values (5 steps)
95+
**Status:** ⏸️ BLOCKED - Requires index.ts migration first
10696

10797
### Step 2.1: values/browserhacks.ts
10898
### Step 2.2: values/values.ts

parser-improvements.md

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,18 @@ Issues and enhancement suggestions discovered during css-tree → Wallace parser
1212
**Suggestion:** Consider documenting this clearly or providing an alias that matches common JS conventions where the needle comes before the haystack.
1313

1414
## Missing Features
15-
_(To be filled during migration)_
15+
16+
### CSS-Tree Compatibility Mode
17+
**Issue:** Wallace parser does not provide a css-tree compatibility mode or adapter layer, making migration from css-tree an all-or-nothing proposition.
18+
19+
**Impact:** Projects using css-tree cannot gradually migrate - they must rewrite all AST traversal code at once.
20+
21+
**Observed Differences:**
22+
1. **Children storage**: Wallace uses `first_child`/`next_sibling` + `children` array, while css-tree uses a custom List type with `.first`, `.last`, `.size`
23+
2. **Location structure**: Wallace uses discrete properties (`line`, `column`, `start`, `length`, `end`) while css-tree uses nested objects (`loc.start.line`, `loc.start.offset`, `loc.end.offset`)
24+
3. **Type identification**: Wallace provides `type` (numeric) and `type_name` (string) while css-tree primarily uses `type` (string)
25+
26+
**Suggestion:** Provide a css-tree compatibility adapter that wraps Wallace nodes to match css-tree's API, enabling gradual migration.
1627

1728
## Type Definition Issues
1829
_(To be filled during migration)_

0 commit comments

Comments
 (0)