css-design-tdd

CSS Design System TDD

Overview

Apply TDD principles to CSS design system work:

1. RED: Run checks that reveal current issues
2. GREEN: Fix CSS to pass checks
3. REFACTOR: Verify no regressions, clean up

Available Checks

1. Undefined Variable Check

Find CSS variables used but never defined:

# Extract all var(--name) usages
grep -rhoE 'var\(--[a-zA-Z0-9-]+' src/**/*.css | sort -u | sed 's/var(//' > /tmp/css-vars-used.txt

# Extract all --name: definitions
grep -rhoE '^[[:space:]]*--[a-zA-Z0-9-]+:' src/**/*.css | sed 's/://' | sed 's/^[[:space:]]*//' | sort -u > /tmp/css-vars-defined.txt

# Find undefined (used but not defined)
comm -23 /tmp/css-vars-used.txt /tmp/css-vars-defined.txt

2. Missing Fallback Check

Find var(--name) without fallbacks in container blocks:

# Blockquote variables without fallback
grep -n 'var(--[^,)]*)[^,]' src/components/Editor/editor.css | grep -E 'blockquote|alert|details'

# All containers - should have fallbacks for --list-indent, etc.
grep -rn 'var(--list-indent)' src/**/*.css  # Should be var(--list-indent, 1em)

3. Hardcoded Color Check

Find hex/rgba colors that should be tokens:

# Hex colors outside :root definitions
grep -rn '#[0-9a-fA-F]\{3,6\}' src/**/*.css | grep -v ':root' | grep -v 'var(--'

# Hardcoded rgba (should be tokens in dark mode)
grep -rn 'rgba(255, 255, 255' src/**/*.css | grep -v ':root'

4. Container Consistency Check

Verify container blocks use consistent values:

# Check margins across containers
echo "=== MARGINS ==="
grep -rn 'margin:.*em' src/components/Editor/editor.css src/plugins/alertBlock/*.css src/plugins/detailsBlock/*.css

# Check padding
echo "=== PADDING ==="
grep -rn 'padding:' src/components/Editor/editor.css src/plugins/alertBlock/*.css src/plugins/detailsBlock/*.css | head -20

# Check list multipliers
echo "=== LIST MULTIPLIERS ==="
grep -rn 'list-indent.*\*' src/**/*.css

5. Focus Indicator Check

Find interactive elements without focus styles: