design-tokens-cli icon indicating copy to clipboard operation
design-tokens-cli copied to clipboard

Keeping references

Open Heydon opened this issue 3 years ago • 0 comments

Currently, references are resolved by finding and applying the true value.

{
  "token-1": "#fff",
  "token-2": "{ token.1 }"
}

...results in this Sass:

$token-1: #fff;
$token-2: #fff;

But it should be possible to just convert the reference:

$token-1: #fff;
$token-2: $token-1;

The difficulty comes in working out when the order needs changing and how. For CSS custom properties, this isn't an issue because of hoisting. But the following...

{
  "token-1": "{ token.2 }"
  "token-2": "#fff",
}

would break the Sass output (Error: undefined variable):

$token-1: $token-2;
$token-2: #fff;

Heydon avatar Jul 05 '22 07:07 Heydon