tokens-studio / sd-transforms

Custom transforms for Style-Dictionary, to work with Design Tokens that are exported from Tokens Studio
MIT License
191 stars 28 forks source link

[Bug]: reference token not transform #288

Closed harrycod1205 closed 3 months ago

harrycod1205 commented 3 months ago

What happened?

I am referencing a primitive token in a semantic token, but an error occurs when transforming.

Reproduction

I am using @tokens-studio/sd-transforms version ^1.0.1.

this is my tokens.json

// tokens.json
{
  "primitive": {
    "common": {
      "white": {
        "value": "#ffffff",
        "type": "color"
      },
      "black": {
        "value": "#000000",
        "type": "color"
      }
    },
    "gray": {
      "0": {
        "value": "#f8f9fa",
        "type": "color"
      },
      "1": {
        "value": "#f1f3f5",
        "type": "color"
      }
    }
  },
  "semantic": {
    "background": {
      "primary": {
        "value": "{common.white}",
        "type": "color"
      },
      "secondary": {
        "value": "{gray.0}",
        "type": "color"
      }
    }
  },
  "$themes": [],
  "$metadata": {
    "tokenSetOrder": [
      "primitive",
      "semantic"
    ]
  }
}
// buildWebTokens.js

import { register } from '@tokens-studio/sd-transforms';
import StyleDictionary from 'style-dictionary';

// will register them on StyleDictionary object
// that is installed as a dependency of this package.
register(StyleDictionary);

const sd = new StyleDictionary({
  // make sure to have source match your token files!
  // be careful about accidentally matching your package.json or similar files that are not tokens
  source: ['tokens.json'],
  preprocessors: ['tokens-studio'], // <-- since 0.16.0 this must be explicit
  platforms: {
    scss: {
      transformGroup: 'tokens-studio', // <-- apply the tokens-studio transformGroup to apply all transforms
      transforms: ['name/kebab'], // <-- add a token name transform for generating token names, default is camel
      buildPath: 'build/scss/',
      files: [
        {
          destination: 'variables.scss',
          format: 'scss/variables',
        },
      ],
    },
  },
});

await sd.cleanAllPlatforms();
await sd.buildAllPlatforms();

error code below

npm run build-web

> build-web
> node buildWebTokens.js

file:///Users/soohyuncho/Documents/GitHub/tagby-design-system/node_modules/style-dictionary/lib/StyleDictionary.js:517
        throw new Error(err);
              ^

Error: 
Reference Errors:
Some token references (2) could not be found.
Use log.verbosity "verbose" or use CLI option --verbose for more details.

    at StyleDictionary.exportPlatform (file:///Users/soohyuncho/Documents/GitHub/tagby-design-system/node_modules/style-dictionary/lib/StyleDictionary.js:517:15)
    at async StyleDictionary.getPlatform (file:///Users/soohyuncho/Documents/GitHub/tagby-design-system/node_modules/style-dictionary/lib/StyleDictionary.js:565:20)
    at async StyleDictionary.cleanPlatform (file:///Users/soohyuncho/Documents/GitHub/tagby-design-system/node_modules/style-dictionary/lib/StyleDictionary.js:893:44)
    at async Promise.all (index 0)
    at async StyleDictionary.cleanAllPlatforms (file:///Users/soohyuncho/Documents/GitHub/tagby-design-system/node_modules/style-dictionary/lib/StyleDictionary.js:921:7)
    at async file:///Users/soohyuncho/Documents/GitHub/tagby-design-system/buildWebTokens.js:28:1

Node.js v18.16.1

Expected output

$primitive-common-white: #ffffff;
$primitive-common-black: #000000;
$primitive-gray-0: #f8f9fa;
$primitive-gray-1: #f1f3f5;
$semantic-background-primary: #ffffff;
$semantic-background-secondary: #f8f9fa;

or

$primitive-common-white: #ffffff;
$primitive-common-black: #000000;
$primitive-gray-0: #f8f9fa;
$primitive-gray-1: #f1f3f5;
$semantic-background-primary: $primitive-common-white;
$semantic-background-secondary: $primitive-common-black;

Version

1.0.1

harrycod1205 commented 3 months ago
register(StyleDictionary, {
  excludeParentKeys: true,
});

It works properly when passing this option. It would be nice if the default value is true.

jorenbroekema commented 3 months ago

The default value should be false because the recommended method of exporting design tokens in the Tokens Studio plugin is multi-file mode. If you use this, you won't need that option. Exclude parent keys is for the special case of doing a single-file export because style-dictionary won't understand that it needs to skip the parent keys for resolving references.