question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Question: Is there a way to transform alias into css variables without resolving the actual value?

See original GitHub issue

Is 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

image

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:2
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
chazzmoneycommented, Feb 2, 2021

This is now possible via the merge of #504

Thanks @dbanksdesign

1reaction
chazzmoneycommented, May 15, 2020

If you build one, we would love a PR for a format that includes this!

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found