Output References does not work with interpolated values

[dbanksdesign]

Based on the comments in #428 the current implementation of outputReferences does not handle interpolated values, like calc({breakpoint.sm.value} / {breakpoint.xs.value}) because the getReference method returns a single token (the first reference it finds).

[uptonking]

a config option should be provided by style-dictionary for users to replace referenced value directly.

I also mentioned this problem here with detailed example:

#565 (comment)

[dbanksdesign]

@uptonking I think this fix (#590) which is in the latest release candidate should handle your use case in #565 without a custom format. We updated getReference to getReferences which returns an array of the references used in a value and the css/variables format will replace the proper references in a value like hsl({component.btn.h.value}, {component.btn.s.value}, {component.btn.l.value}) which will become: --component-btn-hsl: hsl(var(--component-btn-h), var(--component-btn-s), var(--component-btn-l)); using the css/variables format with outputReferences: true. I just tried it with your example in #565

{
  "component": {
    "btn": {
      "h": { "value": "10" },
      "s": { "value": "12%" },
      "l": { "value": "12%" },
      "hsl": {
        "value": "hsl({component.btn.h.value}, {component.btn.s.value}, {component.btn.l.value})"
      }
    }
  }
}

With those tokens and this configuration:

  platforms: {
    css: {
      transformGroup: `css`,
      files: [{
        destination: `build/variables2.css`,
        format: `css/variables`,
        options: {
          outputReferences: true
        }
      }]
    }
  }

You should get this output:

:root {
  --component-btn-l: 12%;
  --component-btn-s: 12%;
  --component-btn-h: 10;
  --component-btn-hsl: hsl(var(--component-btn-h), var(--component-btn-s), var(--component-btn-l));
}

We did change getReference to getReferences to handle this case so if you do still want to use a custom format, update your code accordingly.

[uptonking]

@dbanksdesign
I tried to update my code to use built-in refs replacement from style-dictionary.
but it's not so easy as i expected.

i hope u can provide another utility function named replaceReferences like getReferences/usesReference.

• use cases:
  • for advanced example variables-in-outputs, u can output format: 'css/variables' well；
    • but u cannot output format: 'customFormat' js tokens as expected.
    • u need to update ur config of latest example.
  • i want to customize my output to support css variables with fallback value.
    • so i need a function to control the output logic details.

although i can write one function, but this usecase(replace reference) is so frequent that official api from style-dictionary should be better.

• u can put the following json in example variables-in-outputs to reproduce.
  • the last line export const CompBtnBoxShadow = CompBtnBoxShadowColor; from output tokens.js is not what is expected

{
  "comp": {
    "btn": {
      "h": { "value": "10" },
      "s": { "value": "12%" },
      "l": { "value": "12%" },
      "hsl": {
        "value": "hsl({comp.btn.h.value}, {comp.btn.s.value}, {comp.btn.l.value})"
      },
      "box-shadow-color": {
        "value": "{comp.btn.hsl.value}"
      },
      "box-shadow": {
        "value": "0 0.125rem 0 {comp.btn.box-shadow-color.value}",
        "replaceRefs": "all"
      }
    }
  }