amzn / style-dictionary

A build system for creating cross-platform styles.
https://styledictionary.com
Apache License 2.0
3.86k stars 538 forks source link

Resolved references in output, as soon as expand is defined #1318

Open oliverschuerch opened 3 weeks ago

oliverschuerch commented 3 weeks ago

In our project, we want to output references, whenever possible. But also we have to expand typography tokens.

Therefore we set outputReferences to true in our config and also use expand like so:

import { expandTypesMap } from '@tokens-studio/sd-transforms';

const config = {
  ...
  preprocessors: ['tokens-studio'],
  platforms: {
    scss: {
      transformGroup: 'tokens-studio',
      transforms: ['name/kebab'],
      ...
      expand: {
        include: ['typography'],
        typesMap: expandTypesMap,
      },
      files: [
        {
          ...
          format: 'swisspost/scss-format',
          filter: 'swisspost/tokenset-filter',
          options: {
            outputReferences: true,
          },
        },
      ],
    },
  },
};

We're using a custom format and filter to get the desired output and everything works fine, instead of one thing: As soon as we start implementing the expand property into the config (to expand only typography tokens) our shadow tokens start being outputted with resolved references. All other tokens keep their reference definitions in the token.original.$value property, but not the shadow tokens.

Instead of:

$scss-map(
  any-other-token: var(--path-to-referenced-token),
  box-shadow-token: 0 1px 2px 0 rgba(0,0,0,0.16), 0 0 2px 0 rgba(0,0,0,0.16),
);

we would like to have the output like so:

$scss-map(
  any-other-token: var(--path-to-referenced-token),
  box-shadow-token: var(--path-to-referenced-shadow-core-token),
);

We logged the token.original.$value property of those shadow tokens within a preprocessor, a transform and a format hook:

As said, this does not happen if we do NOT use any expand config, but starts being the case if we use expand (no matter how we define the expand property). By the way, this happens as well, when we do not use our custom filter and format, but instead use the format css/variables.

Not sure if this is happening intentionally or if it is a bug, but at least it feels wrong to us.

jorenbroekema commented 2 weeks ago

Minimal reproduction Reproducible also without any sd-transforms stuff so definitely a style dictionary bug

Seems to happen only when the expand is configured on the platform level, works fine when put on the global level. Will need to investigate this one.