`outputReferences:true` still resolves for non-$value properties?

// demo.json
{
  "color": {
    "primitives": {
      "black": {
        "value": "#000000"
      },
      "white": {
        "value": "#ffffff"
      }
    },
    "icon": {
      "default": {
        "value": "{color.primitives.black}",
        "darkValue": "{color.primitives.white}"
      },
      "default-inverse": {
        "value": "{color.icon.default.darkValue}",
        "darkValue": "{color.icon.default.value}"
      }
    }
  }
}

// config.json
{
  "source": [
    "**/*.tokens.json"
  ],
  "platforms": {
    "css": {
      "transformGroup": "css",
      "prefix": "sd",
      "buildPath": "build/css/",
      "files": [
        {
          "destination": "_variables.css",
          "format": "css/variables",
          "options": {
            "outputReferences": true
          }
        }
      ]
    }
  }
}

Output

// output
/**
 * Do not edit directly
 * Generated on Thu, 14 Nov 2024 21:07:35 GMT
 */

:root {
  --sd-color-primitives-white: #ffffff;
  --sd-color-primitives-black: #000000;
  --sd-color-icon-default-inverse: #ffffff;
  --sd-color-icon-default: var(--sd-color-primitives-black);
}

Expected output

:root {
  --sd-color-primitives-white: #ffffff;
  --sd-color-primitives-black: #000000;
  --sd-color-icon-default-inverse: var(--sd-color-primitives-white);
  --sd-color-icon-default: var(--sd-color-primitives-black);
}

I don't know whether to file this as a bug or if it's some quirk of single-token method and my misunderstanding? For now I will just update sd.color.icon['default-inverse'] to point to the opposite primitives but ideally it should be pointing to the opposites of sd.color.icon.default.

The outputReferences feature does not support outputting refs for properties that aren't value (or $value if DTCG syntax is used). You'd have to create a custom format with an outputReferences feature that does support it. https://styledictionary.com/reference/hooks/formats/#custom-format-with-output-references https://github.com/amzn/style-dictionary/blob/main/lib/common/formatHelpers/createPropertyFormatter.js#L169 Above 2 resources can act as examples to do this.

Unfortunately I don't really see a straightforward way where the library can support outputting refs for all props of a token, it's not impossible but I consider this a pretty minority use case, especially given how DTCG will soon implement a spec regarding Theming which will take a different approach than inlining the themed variants in the token definition itself.

amzn / style-dictionary

`outputReferences:true` still resolves for non-$value properties? #1390

Output

Expected output