CSS variables using output references results in reversed order

[jaredcwhite]

Given an input JSON of:

{
  "spacing": {
    "1": { "value": "0.5rem" },
    "2": { "value": "1rem" },
    "3": { "value": "2rem" },
    "4": { "value": "4rem" }
  }
}

When outputting to a CSS variables file normally, you get that exact order in the output. So far, so good. However, when switching on outputReferences in the file options, it then reverses the output:

:root {
  --spacing-4: 4rem;
  --spacing-3: 2rem;
  --spacing-2: 1rem;
  --spacing-1: 0.5rem;
}

Tested on v3.1.1, Node v17.3.1

[chazzmoney]

Thanks for letting us know, @jaredcwhite

While SD doesn't have a token output ordering guarantee, if you wanted to submit a PR to make the ordering consistent with the original, we'd be happy to add that in.

[evul]

This reverse ordering is also causing further problems in the SCSS output when you have aliased tokens. Since the order of the tokens is of course important when compiling SASS, the reverse ordering causes a compiling error because it thinks the aliased variable is undefined.

For example, you have a button background color token which references a color token. In the output, the referenced token is being inserted after all other tokens which reference it.

SD output (breaks SASS compiling):

$button-background-color: $primary-color;
$primary-color: #0066cc;

Expected output:

$primary-color: #0066cc;
$button-background-color: $primary-color;

Aside from fixing the output order of the tokens, is it currently possible to output an individual SCSS file for each token.json file?

I have my tokens separated into multiple JSON files, such as, colors.json, font-size.json, button.json, and so on. By outputting each JSON file to its own SCSS equivalent, I would be able to manage the load order of each variable file in the main SCSS file.

[mryechkin]

Would love to hear from the team if this is something that is going to be addressed in v4?