feat: add CSS token hoisting with comment-based signal bindings#82
Merged
mohamedmansour merged 1 commit intomainfrom Mar 7, 2026
Merged
feat: add CSS token hoisting with comment-based signal bindings#82mohamedmansour merged 1 commit intomainfrom
mohamedmansour merged 1 commit intomainfrom
Conversation
…ings
Extract CSS custom property usages (var() calls) at build time across all
components and entry page styles. The sorted, deduplicated token names are
included in the protocol output, enabling host runtimes to resolve only
the design tokens an application actually needs.
Protocol schema:
- Add 'repeated string tokens = 2' to WebUIProtocol message
- Add WebUIProtocol::new() and ::with_tokens() constructors
- Replace all struct literals with constructor calls (109 sites)
CSS token extraction (webui-parser/css_parser.rs):
- Add CssParser::extract_tokens() for var() usage extraction
- Add CssParser::extract_definitions() for custom property definitions
- Add CssParser::extract_tokens_and_definitions() for single-parse path
- Iterative tree-sitter-css AST walk (no recursion)
- Handle nested fallbacks: var(--a, var(--b, var(--c))) extracts all three
- Exclude locally-defined properties (--name: value) from token set
- Implement Debug for CssParser (tree-sitter Parser lacks it)
Component registry (webui-parser/component_registry.rs):
- Add css_tokens field to Component struct
- Extract tokens automatically during register_component() and
register_component_from_paths()
- ComponentRegistry owns a reusable CssParser instance (not per-call)
Token collection during parsing (webui-parser/lib.rs):
- Add token_store and token_definitions to HtmlParser
- Merge component css_tokens on first component encounter
- Extract tokens and definitions from inline <style> tags (single parse)
- take_tokens() returns sorted tokens with entry definitions excluded
- Parse <!--{{identifier}}--> HTML comments as Signal fragments
CLI integration (webui-cli):
- Wire tokens through build_protocol() into protocol output
- Display 'Discovered N CSS tokens' in build command output
- Add token_count to BuildOutput
Documentation:
- Update DESIGN.md with CSS Token Hoisting specification
- Add docs/guide/concepts/css-tokens.md with sidebar entry
Tests (26 new tests):
- 18 unit tests for extract_tokens, extract_definitions, combined method,
edge cases (malformed var, empty var, definitions-only CSS)
- 3 component registry tests for token extraction on registration
- 3 protocol tests for constructors and protobuf roundtrip with tokens
- 2 build integration tests for token inclusion and entry exclusion
janechu
approved these changes
Mar 7, 2026
Contributor
|
The description does not talk about the handler. Do we handle these tokens at runtime in this PR or this will be separate PR? |
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
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.
Extract CSS custom property usages (var() calls) at build time across all components and entry page styles. The sorted, deduplicated token names are included in the protocol output, enabling host runtimes to resolve only the design tokens an application actually needs.
Protocol schema:
CSS token extraction (webui-parser/css_parser.rs):
Component registry (webui-parser/component_registry.rs):
Token collection during parsing (webui-parser/lib.rs):
CLI integration (webui-cli):
Documentation:
Tests (26 new tests):