Question: Is there a way to transform alias into css variables without resolving the actual value?
See original GitHub issueIs there a way to NOT resolve alias to values, but rather transform alias into css variable names?
For example, if I have defined in my properties like so:
//base.json
{
"color": {
"g500": { "value": "green" },
}
}
}
//other.json
{
"color": {
"success": { "value": {color.g500} },
}
}
}
Is there a way to generate:
:root {
--g500: green;
--success: var(--g500);
}
EDIT: The reason I ask is that we want to use StoryBooks’ Design Token addon which uses css variable aliases to identify when two tokens are actually the same color and display them as such:
eg: here, both success
and published
are g500
Issue Analytics
- State:
- Created 4 years ago
- Reactions:2
- Comments:7 (4 by maintainers)
Top Results From Across the Web
Custom value transforms skip values with aliases #451 - GitHub
The relevant steps to this are: transforming the tokens and then resolving aliases/references which are done in 2 passes of the entire style ......
Read more >Naming CSS alias same as assigned CSS variable
The snippet below demonstrates the basic approach you had in mind with toggling the variable values. Seems to work just fine.
Read more >Using CSS custom properties (variables) - MDN Web Docs
Custom properties allow a value to be stored in one place, then referenced in multiple other places. An additional benefit is semantic ...
Read more >A Complete Guide To CSS Variables [With Examples]
In this guide, we delve deeper into what CSS variables are and how to use them to create beautiful responsive websites, along with...
Read more >How to use CSS variables like a pro - LogRocket Blog
The basics. To declare a variable in CSS, come up with a name for the variable, then append two hyphens (–) as the...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
This is now possible via the merge of #504
Thanks @dbanksdesign
If you build one, we would love a PR for a format that includes this!