Output reference compiled token order creates invalid variables

[samwilliscreative]

I am having an issue where the compiled SCSS variables are in an order that doesn't allow them to be used when using the output references option:

Here are some of my compiled tokens:

$kalos-spacing-30: 1.875rem;
$kalos-spacing-15: 0.938rem;
$kalos-sidebar-head-padding-bottom: $kalos-spacing-30;
$kalos-sidebar-head-padding-top: $kalos-spacing-15;
$kalos-sidebar-base-padding-right: $kalos-spacing-15;
$kalos-sidebar-base-padding-left: $kalos-spacing-15;
$kalos-sidebar-head-padding-base: $kalos-sidebar-head-padding-top $kalos-sidebar-head-padding-right $kalos-sidebar-head-padding-bottom $kalos-sidebar-head-padding-left;
$kalos-sidebar-head-padding-right: $kalos-sidebar-base-padding-right;
$kalos-sidebar-head-padding-left: $kalos-sidebar-base-padding-left;

Notice that in $kalos-sidebar-head-padding-base, the right and left variables have yet to be defined, they actually appear after this variable.

My tokens setup looks like this:

{
  "sidebar": {
    "base": {
      "padding": {
        "left": { "value": "{spacing.15.value}" },
        "right": { "value": "{spacing.15.value}" }
      },
   },
   "head": {
      "padding": {
        "top": { "value": "{spacing.15.value}" },
        "bottom": { "value": "{spacing.30.value}" },
        "left": { "value": "{sidebar.base.padding.left.value}" },
        "right": { "value": "{sidebar.base.padding.right.value}" },
        "base": {
          "value": "{sidebar.head.padding.top.value} {sidebar.head.padding.right.value} {sidebar.head.padding.bottom.value} {sidebar.head.padding.left.value}"
        }
      },
  }
}

[chazzmoney]

ooooooo good find. Dependency info needs to be sent to the formatter in the case of outputReferences... or managed at an earlier stage prior to sending to the formatter (though a formatter could perform its own sort).

Let me think on a good solution.

[dbanksdesign]

Thanks for catching this! This is definitely a more complex use-case than we originally thought building the feature. We should definitely fix this though and we can verify the fix with an integration / snapshot test using your example. If you'd like to submit a PR we would gladly review it. The offending code is in the sortByReference function.