CSS Custom Properties (CSS Variables: var(--x))

[wangnaihe]

Context

Per docs/vscode-compat.md Phase A (P1). VS Code's entire theme system is built on CSS custom properties. Without this, no VS Code theme can render.

Example from VS Code:
```css
:root {
--vscode-editor-background: #1e1e1e;
--vscode-editor-foreground: #d4d4d4;
}
.editor { background: var(--vscode-editor-background); }
```

Requirements

• Parse `var(--property-name)` in style values
• Parse `var(--prop, fallback)` with fallback values
• Support defining custom properties on any element (`style: { "--my-color": "#ff0" }`)
• Inherit custom properties from parent to children (CSS inheritance)
• Resolve custom properties at layout/render time
• Support `:root` level definitions (global variables)

Implementation

1. Parser: recognize `var(--xxx)` in any CSS value position, store as `Dimension::Var(name, fallback)` or similar
2. Style resolution: before layout, walk the tree and resolve all `var()` references against the inherited property map
3. Storage: each node carries a `HashMap<String, String>` for custom properties; children inherit from parent
4. Performance: cache resolved values per subtree; invalidate on property change

References

• MDN CSS Custom Properties
• crates/w3cos-std/src/style.rs — Style struct
• crates/w3cos-compiler/src/parser.rs — style parsing

[github-actions]

AI Triage — Auto-classified this issue.

Labels: module:compiler, module:runtime, module:dom, difficulty:low, good first issue

To make this issue AI-ready, add clear acceptance criteria and expected behavior.

This comment was generated by the W3C OS Management AI. See AI_DEVELOPMENT.md for details.