Repository navigation
chore: handle spaces, dashes and underscores in token names - #420
Merged
Merged
Conversation
Figma variables named with separators (e.g. "strong--highlight") were emitted as unquoted object keys in the generated TypeScript themes, producing invalid syntax and failing the update-design-tokens workflow. convertToCamelCase now treats spaces, dashes and underscores as word separators, so "Strong Highlight", "strong-highlight", "strong--highlight" and "strong_highlight" all become "strongHighlight" (CSS variables remain kebab-case). Existing token names are unaffected.
gorandalum
force-pushed
the
dalum/tolerate_dash_and_space_in_figma_variables
branch
from
October 9, 2026 10:58
38e6ec8 to
ba1b3a6
Compare
gorandalum
changed the title
gorandalum
requested review from
pettersuul and
reidzeibel
and
a balanced review from Copilot
October 9, 2026 10:59
There was a problem hiding this comment.
🟢 Approval recommended
The focused conversion change correctly handles the documented separator variants without altering separator-free names.
0 open findings
What changed in this PR
Updates token-name normalization so generated TypeScript object keys remain valid when Figma names contain common separators.
Changes:
- Treats spaces, dashes, and underscores as camel-case separators.
- Documents expected conversions.
| File | Description |
|---|---|
packages/theme/tools/utils.ts |
Enhances camel-case conversion for token names. |
🧠 Review effort: Balanced
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
pettersuul
approved these changes
Oct 9, 2026
gorandalum
deleted the
dalum/tolerate_dash_and_space_in_figma_variables
branch
October 9, 2026 11:03
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.
Figma variables named with separators (e.g. "strong--highlight") were
emitted as unquoted object keys in the generated TypeScript themes,
producing invalid syntax and failing the update-design-tokens workflow.
convertToCamelCase now treats spaces, dashes and underscores as word
separators, so "Strong Highlight", "strong-highlight", "strong--highlight"
and "strong_highlight" all become "strongHighlight" (CSS variables remain
kebab-case). Existing token names are unaffected.