v3, registerFormat formatter: tokens & allTokens are not available on dictionary positional argument

[kylegach]

This works:

StyleDictionary.registerFormat({
  name: 'javascript/es6DefaultExport',
  formatter: ({ dictionary }) => {
    return [
      'const tokens = {',
      ...dictionary.allTokens.map(
        // ...format logic
      ),
      '};',
      'export default tokens;',
    ].join('\n');
  },
});

But this does not:

Full error

/Users/.../packages/tokens/scripts/build-tokens.js:19
      ...dictionary.allTokens.map(function (prop) {
                              ^

TypeError: Cannot read property 'map' of undefined
    at Object.formatter [as format] (/Users/.../packages/tokens/scripts/build-tokens.js:19:31)
    at buildFile (/Users/.../node_modules/style-dictionary/lib/buildFile.js:103:37)
    at /Users/.../node_modules/style-dictionary/lib/buildFiles.js:33:7
    at Array.forEach (<anonymous>)
    at buildFiles (/Users/.../node_modules/style-dictionary/lib/buildFiles.js:31:18)
    at Object.buildPlatform (/Users/.../node_modules/style-dictionary/lib/buildPlatform.js:62:3)
    at /Users/.../node_modules/style-dictionary/lib/buildAllPlatforms.js:31:10
    at Array.forEach (<anonymous>)
    at Object.buildAllPlatforms (/Users/.../node_modules/style-dictionary/lib/buildAllPlatforms.js:30:39)
    at Object.<anonymous> (/Users/.../packages/tokens/scripts/build-tokens.js:51:17)

StyleDictionary.registerFormat({
  name: 'javascript/es6DefaultExport',
  formatter: (dictionary) => {
    return [
      'const tokens = {',
      ...dictionary.allTokens.map(
        // ...formatting logic
      ),
      '};',
      'export default tokens;',
    ].join('\n');
  },
});

---

I'm not familiar enough with the codebase to know if this is the correct approach, but de-structuring and then returning tokens & allTokens in createFormatArgs seemed to fix it. Happy to submit a PR if you agree with this approach. It also looks like the types are incorrect when using positional arguments, as the first dictionary argument is typed as FormatterArguments.

Submitting an issue rather than a PR to confirm approach and confirm that the effort is even worthwhile, as the positional arguments are on their way out.

Relatedly, the "What's new in 3.0" post explains the Updated format method arguments, but other code snippets on this page (like the one under the Output references section) use the old, positional arguments. I can combine an update to that post (and elsewhere?) with the suggested PR for this issue, submit an unrelated PR, or leave it be. Just let me know. 🙂

[dbanksdesign]

Thanks for catching this! These issues are definitely all to blame on me. If you have the time, it would be great to submit PRs for these fixes. Your approach sounds good to me. It would be helpful to have separate PRs: the de-structuring fix, the typescript fix, and the documentation/examples fixes.