feat: Make dot notation and double dash notation interchangeable in variable names #68
Conversation
🦋 Changeset detectedLatest commit: 1e6c7e9 The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR introduces comprehensive support for dot notation in variable and reference names throughout the Styleframe engine. The implementation allows developers to use more natural, hierarchical naming conventions (e.g., color.primary) which are automatically converted to CSS-compatible double-dash notation (e.g., color--primary) for variable output.
Key Changes
- Enhanced the default variable naming function to automatically convert dots to double dashes while handling edge cases like consecutive, leading, and trailing dots
- Added extensive test coverage across multiple layers (defaults, variable consumption, reference consumption, and core token creation)
- Maintained backward compatibility with existing dash-based naming conventions
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
engine/transpiler/src/defaults.ts |
Updated defaultVariableNameFn to convert dot notation to double-dash notation using regex pattern replacement |
engine/transpiler/src/defaults.test.ts |
Added comprehensive test cases for dot notation conversion including edge cases (multiple dots, leading/trailing dots, mixed notation) |
engine/transpiler/src/consume/variable.test.ts |
Added tests verifying variable consumption correctly handles dot notation in variable names and references with various scenarios |
engine/transpiler/src/consume/ref.test.ts |
Added tests ensuring reference consumption properly converts dot notation to double dashes in reference names and with custom naming functions |
engine/core/src/tokens/ref.test.ts |
Added tests validating core reference token creation preserves dot notation internally and handles it correctly in reference chains |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
This pull request introduces comprehensive support for dot notation in variable and reference names throughout the codebase. The changes ensure that names containing dots (e.g.,
color.primary) are consistently converted to double dash notation (e.g.,color--primary) for CSS variable output, and adds extensive test coverage for these cases. It also updates the default variable naming function to handle edge cases such as consecutive, leading, and trailing dots.Dot notation support and conversion:
defaultVariableNameFninengine/transpiler/src/defaults.tsto convert dots in variable names to double dashes, and to handle consecutive, leading, and trailing dots.engine/transpiler/src/defaults.test.tsto cover dot notation conversion, edge cases (multiple, leading, trailing dots), and mixed dot/dash notation. [1] [2]Reference and variable consumption enhancements:
engine/transpiler/src/consume/ref.test.tsto verify correct conversion of dot notation in references to double dashes, including fallback values and custom naming functions.engine/transpiler/src/consume/variable.test.tsto ensure variables and references with dot notation are consumed and output with the correct double dash format, including nested paths and fallback scenarios.Core reference handling:
engine/core/src/tokens/ref.test.tsto validate creation and chaining of references and variables using dot notation, including mixed dot/dash cases and complex fallbacks. [1] [2]