Version 4 documentation

[Gristof]

The official documentation (website and readme) is not up to date with the latest v4 release. The official official release notes are only partially helpful, when it comes to migrating from v3.

Specifically, I am struggling to get this configuration to work with v4, even though I was working as close as possible to the release notes:

import StyleDictionary from "style-dictionary";

const sd = new StyleDictionary({
  source: ["./tokens/**/*.json"],
  platforms: {
    ts: {
      transformGroup: "js",
      buildPath: "dist/js/",
      files: [
        {
          format: "javascript/es6",
          destination: "variables.js",
        },
        {
          format: "typescript/es6-declarations",
          destination: "variables.d.ts",
        },
      ],
    },
    scss: {
      transformGroup: "scss",
      buildPath: "dist/scss/",
      files: [
        {
          format: "scss/variables",
          destination: "_variables.scss",
        },
      ],
    },
  },
});

sd.registerFormat({
  name: "scss/variables",
  format: function ({ dictionary }) {
    return dictionary.allTokens
      .map((token) => `$${token.name}: ${token.value};`)
      .join("\n");
  },
});

await sd.buildAllPlatforms();

1. Am I missing something obvious here?
2. Is it possible to update the official documentation?

[jorenbroekema]

Ah yeah the README is still for v3, we should update that ASAP.

The new site can be found at https://v4.styledictionary.com/ for now, the old domain will eventually redirect to it, this is still a work in progress.

As for your code snippet, I don't see much wrong with it, can you elaborate on what part isn't working or what kind of error you're getting?

[Gristof]

Thanks for the quick reply.

Unfortunetaly there is no error in the CLI. The files seem to be generated. In my dist folder, only the js files are generated -- but empty, and the scss are not at all.

[jorenbroekema]

Huh, odd, I tried your config in the configurator here and this does generate the files, so not sure what's going wrong on your end

[Gristof]

Seems like I found the issue. In the new v4 docs it says either token format works. When changing valueto $value though, the tokens actually compile.

Edit: here is an excerpt of one of our tokens files (with value already replaced by $value):

{
  "z-index": {
    "$type": "number",
    "deep": { "$value": -999 },
    "default": { "$value": 1 },
    "fixed": { "$value": 4 },
    "sticky": { "$value": 100 },
    "tooltip": { "$value": 500 },
    "dialog": { "$value": 600 },
    "dropdown": { "$value": 700 },
    "overlay": { "$value": 800 },
    "modal": { "$value": 900 },
    "spinner": { "$value": 950 }
  }
}

[jorenbroekema]

Ah right yes if you're using $type let's say, Style Dictionary assumes the rest of the tokens will be written in DTCG format, it's not possible to mix the DTCG format with the old SD JSON format 👍🏻 so it makes sense now why it didn't give you any output, because it didn't consider your tokens to be tokens

[Gristof]

Makes sense. I remember wanting to stick to the DTCG standard, but $value just wouldn't compile in v3. I probably should have removed all the $ instead of mix and match. Thanks for the explanation.

[jorenbroekema]

You can now switch to DTCG fully just FYI: https://v4.styledictionary.com/info/dtcg/