chore(deps): update dependency style-dictionary to v5 #208

renovate · 2026-01-05T15:14:21Z

Note: This PR body was truncated due to platform limits.

This PR contains the following updates:

Package	Change	Age	Confidence
style-dictionary (source)	`^3.9.0` → `^5.0.0`

Release Notes

style-dictionary/style-dictionary (style-dictionary)

`v5.1.3`

Compare Source

Patch Changes

6e306bc: Upgrade glob@11.1.0 forked package to fix vulnerability in origin package.

`v5.1.1`

Compare Source

Patch Changes

65745da: Fix outputReferences for tokens with 'value' in their name. Previously, references to tokens like object_type.value_chain were incorrectly resolved because the code removed the first occurrence of .value instead of only the trailing suffix.

`v5.1.0`

Compare Source

Minor Changes

97a209a: Add new size/compose/{sp,dp} transforms

Patch Changes

dbcdae3: Fix fontName parsing to handle double quotes
c47600d: Export expand DTCGTypesMap for extension use cases.

`v5.0.4`

Compare Source

Patch Changes

7a238af: Fix an issue with token collisions being way to eager about complaining when values that are identical are "colliding". This cuts collision warnings by 75% or more.

`v5.0.3`

Compare Source

Patch Changes

3d070f5: Move patch-package to devDependencies and run in prepare instead of postinstall, so it only runs when npm installing locally and not for consumers.
71614da: Wrap structuredClone in loadFile in a try catch, in case we have a JS/TS config file with dynamic content.

`v5.0.2`

Compare Source

Patch Changes

8e413a2: Fix vulnerable dependencies, patch-package and its transitive tmp dependency in particular.
9f84a81: Remove node-sass from create-react-app example, dart-sass is used now usually.
da19c8f: Small patch to allow no-destination "files" to not cause errors when using clean methods.

`v5.0.1`

Compare Source

Patch Changes

463b456: Simplify internal cleanFile(s) utils, fix a bug that would still attempt to unlink non-existent files in verbosity "silent" mode.
8f7c522: Fix loadFile to deep clone ES module exports to avoid unintended mutations

`v5.0.0`

Compare Source

Major Changes

02300b1: No longer allow references to non-token leaf nodes. References only work when referencing a Design Token (its value).
Non-token nodes will also not make it to the output, because they are filtered out during the flattening process to tokenMap and tokenArray.
Remove allowing references with .value suffix.
f19a0cb: BREAKING: no longer possible to pass options to change the reference syntax {ref.foo}. The opening, closing and separator characters are now set to be aligned with the DTCG spec.
02300b1: BREAKING: minimum NodeJS version required is now v22.0.0 (LTS, at time of writing this). This is to support Set.prototype.union which we utilize in our token reference resolution utility, and it's important to use the cheaper built-in versus doing a union manually.

Minor Changes

02300b1: Support passing Token Map structure to getReferences and resolveReferences utils.
b80e75b: When transform hooks throw errors, they will now be caught and error-handled by Style Dictionary.
Instead of causing a fatal failure, the error is collected and logged as a warning at the end.
With verbosity turned to "verbose", information about which tokens in which files are causing an error in which transform, to help debugging the problem.
Sensible fallbacks are used when a transform cannot complete.

Patch Changes

a23f353: SD will use posix style paths ('/') as much as possible and rely on node:fs to translate to win32 paths whenever a call to the filesystem is done. The exception is for dynamic imports of JS files (SD config, token files).
a23f353: Allow buildPaths without a trailing slash, by making use of path.join() utility.
9bbbc8a: Dynamically import prettier and plugins so that they can be chunked separately by bundlers, and only imported on demand. This will significantly improve bundle size for users of Style Dictionary.

`v4.4.0`

Compare Source

Minor Changes

f2395f3: Add a 'flat' option to the javascriptEsm format
2f13dcb: Added support for using the selector option as a string or string array in the css/variables formatter. When an array is provided, the CSS variables will be nested within the specified selectors in order

Patch Changes

ee85609: fix misaligned comments in typescript/es6-declarations
6ff17ec: If several preprocessors are defined in the SD configuration, the execution of the preprocessors is now guaranteed in the exact order in which they were configured in the SD configuration.

`v4.3.3`

Compare Source

Patch Changes

ea0ec73: Fix convertToDTCG for sets that are already (partially) DTCG.
1d4389a: - 'color/hex' (colorHex enum) built-in transform can now handle alpha channels properly by outputting hex8 format if needed. This also affects the transformGroups less and js which apply this transform.
- 'color/hex8' (colorHex8 enum) built-in transform is now deprecated, use 'color/hex' (colorHex enum) instead.
e77feb4: Move the tinycolor2 patch from a patch file to a 3-liner fix in our source code, so it gets correctly published and usable by consumers.
177c25e: Account for multiline comments in javascript/es6 format

`v4.3.2`

Compare Source

Patch Changes

7d60069: Hotfix for 'size/rem' => sizeRem transform to not change values with 'px' units to 'rem'. Regression was added in v4.3.1 (commit sha 1684a8e).

`v4.3.1`

Compare Source

Patch Changes

1684a8e: Fix sizeRem to allow negative values
803d1f8: Fix gradients with rgba values returning rgba(0, 0, 0, 0)
6cc1da3: Add and check types to CLI file, fix typo for --platform flag.

`v4.3.0`

Compare Source

Minor Changes

302b466: Introduce a new entrypoint: style-dictionary/enums for most of the library's hard-coded string values. Most of these are built-in hooks names. This provides better type-safety for consumers as well as various maintainability related benefits for this library. See documentation for more info.
5aad797: Add tailwind preset example, remove unused .editorconfig file
bd8be17: Add support for native .TS token & config file processing.
209085d: Add tokenMap properties to Dictionary, which is a JavaScript Map structure of the tokens, which makes it easy to iterate as well as access tokens. Also add convertTokenData utility that allows to seemlessly convert between Map, Object or Array of tokens, and deprecate the flattenTokens utility in favor of that one.

Patch Changes

2966cfd: handle DTCG-format tokens in typescript/es6-declarations formatter
4a7bca7: add accessControl field to Android Compose template
f694f67: Fix Prettier imports, see https://prettier.io/docs/en/api#custom-parser-api-removed for more info.
fd8cdb4: handle DTCG-format tokens in javascript/es6 formatter
6a6a409: Move prettier to dependencies since style-dictionary isn't really a prettier plugin and a direct dependency seems more accurate here.
8a9cfa0: Fix outputReferencesTransformed util, would return true for tokens which original values were not strings.
7a661bb: Fix font-style and font-weight logic for fonts.css.template.js

`v4.2.0`

Compare Source

Minor Changes

0fcf229: Add a new built-in format javascript/esm that outputs an ES module JS default export.
d7b5836: Mark javascript/esm as nested, use Prettier on all JavaScript/TypeScript formats, use 3.x.x peerDependency so the user's installation is used when possible.
4bf68a3: Apply stripMeta from "json" format to the new "javascript/esm" as well.
8f1b4f0: Add new utility in style-dictionary/utils -> stripMeta for stripping metadata from tokens.
This utility is used now as an opt-in for the built-in 'json' format by using options.stripMeta, which if set to true will strip Style Dictionary meta props.
You can specify keep/strip (allow/blocklist) for granular control about which properties to keep or strip.

Patch Changes

5e3a5af: Update .d.ts/js files type imports to use correct extensions rather than extensionless. This fixes some incompatibilities with latest TypeScript "NodeNext" moduleResolution.

`v4.1.4`

Compare Source

Patch Changes

a67ed31: Pass PlatformConfig as options param to platform-applied preprocessors.
19aee32: Fix convertToBase64 util to support converting binary files such as fonts, for both Browser and NodeJS.

`v4.1.3`

Compare Source

Patch Changes

9376247: Make defaultMessage param in FileHeader type optional.
43ccb42: (#1305): fix reference sorting in sortByReference function for DTCG token format, ensuring token references are declared after their targets
26728b9: Fix filterTokens utility to deal with random metadata properties throughout token groups, without throwing errors.

`v4.1.2`

Compare Source

Patch Changes

e9cce6a: Reuse static hooks in the constructor to set instance hooks prop, to avoid discarding built-in hooks overwrites by consumers.
b48d0e9: Add missing type interfaces, most notably the ExpandConfig types.

`v4.1.1`

Compare Source

Patch Changes

5db3521: Add iosSwiftEnumOpts.className and iosSwiftAnyOpts.className formats property documentation
23f8a25: Use cp and rmdir commands for copy_assets do and undo methods, since they affect directories, not files.

`v4.1.0`

Compare Source

Minor Changes

ccf27b7: Prevent duplicate redundant calls to StyleDictionary class methods by caching platform specific config & tokens results.

Added reusable methods:
- getPlatformTokens() -> grabs the tokens/allTokens(new! exportPlatform does not return this) for a specific platform, after running platform specific preprocessors and transforms. This replaces the old exportPlatform method which is now deprecated and will be removed in v6.
- getPlatformConfig() -> grabs the processed/transformed PlatformConfig for a specific platform, replaces the now deprecated getPlatform method which will be removed in v6.
The reasons for deprecating those methods and replacing them with new ones is to reduce method ambiguity and make them more pure.

Add new options object to methods:
- getPlatformTokens
- getPlatformConfig
- exportPlatform (deprecated, see above)
- getPlatform (deprecated, see above)
- formatPlatform
- formatAllPlatforms
- buildPlatform
- buildAllPlatforms
- cleanPlatform
- cleanAllPlatforms
with property cache, which if set to false, will disable this caching of generating the platform specific config / tokens, e.g.:
```
await sd.exportPlatform('css', { cache: false });
await sd.buildAllPlatforms('css', { cache: false });
```
Expectation is that this is usually not useful for majority of users, unless for example you're testing multiple runs of StyleDictionary while changing tokens or platform configs in between those runs.

Patch Changes

2ec9a44: size/rem transform to leave 0 (string or number) values as is, since 0 doesn't need a unit.
f317430: Added link to logging documentation inside all of the warnings and errors that refer to verbosity.
6275983: Respect formatting options in scss map-deep/map-flat formats, those that make sense:
- commentPosition
- commentStyle
- indentation
Also export a new type interface FormattingOverrides, which is a limited version of FormattingOptions.
These contain the formatting options that can be overridden by users, whereas the full version is meant for the format helper utilities such as createPropertyFormatter/formattedVariables.

`v4.0.1`

Compare Source

Patch Changes

e6cbf73: Fix type information for Config.parser
e8aea2f: Fix transitive color transform advanced example, migrate chroma-js to colorjs.io
7afcffd: Fix bugs with expand tokens where they would run before instead of after user-configured preprocessors, and would fatally error on broken references. Broken refs should be tolerated at the expand stage, and errors will be thrown after preprocessor lifecycle if the refs are still broken at that point.
922b6aa: Update memfs esm-fork dependency to allow named import Volume.
61b6984: Fix 'filePath' missing from falsy token values
3ae67e3: Upgrade memfs esm fork to publish types and bumping stream to fix unclear licensing issue with transitive dependency.

`v4.0.0`

Compare Source

For a more comprehensive migration guide from version 3.x.x to version 4.0.0,
visit the migration guide page

Major Changes

6cc7f31: BREAKING:
- usesReference util function is now usesReferences to be consistent plural form like the other reference util functions.
- getReferences first and second parameters have been swapped to be consistent with resolveReferences, so value first, then the full token object (instead of the entire dictionary instance).
- getReferences accepts a third options parameter which can be used to set reference Regex options as well as an unfilteredTokens object which can be used as a fallback when references are made to tokens that have been filtered out. There will be warnings logged for this.
- format.formatter removed old function signature of (dictionary, platform, file) in favor of ({ dictionary, platform, options, file }).
- Types changes:
  - Style Dictionary is entirely strictly typed now, and there will be .d.ts files published next to every file, this means that if you import from one of Style Dictionary's entrypoints, you automatically get the types implicitly with it. This is a big win for people using TypeScript, as the majority of the codebase now has much better types, with much fewer anys.
  - There is no more hand-written Style Dictionary module index.d.ts anymore that exposes all type interfaces on itself. This means that you can no longer grab types that aren't members of the Style Dictionary class directly from the default export of the main entrypoint. External types such as Parser, Transform, DesignTokens, etc. can be imported from the newly added types entrypoint:
```
import type { DesignTokens, Transform, Parser } from 'style-dictionary/types';
```
  Please raise an issue if you find anything missing or suddenly broken.
  - Matcher, Transformer, Formatter, etc. are still available, although no longer directly but rather as properties on their parents, so Filter['matcher'], Transform['transformer'], Format['formatter']
dcbe2fb: - The project has been fully converted to ESM format, which is also the format that the browser uses.
For users, this means you'll have to either use Style Dictionary in ESM JavaScript code, or dynamically import it into your CommonJS code.
- StyleDictionary.extend() method is now asynchronous, which means it returns Promise<StyleDictionary.Core> instead of StyleDictionary.Core.
- allProperties / properties was deprecated in v3, and is now removed from StyleDictionary.Core, use allTokens and tokens instead.
- Templates and the method registerTemplate were deprecated in v3, now removed. Use Formats instead.
- The package now uses package entrypoints, which means that what is importable from the package is locked down to just the specified entrypoints: style-dictionary & style-dictionary/fs. If more is needed, please raise an issue explaining which file you were importing and why you need it to be public API.

f2ed88b: BREAKING: File headers, when registered, are put inside the hooks.fileHeaders property now, as opposed to fileHeader.
Note the change from singular to plural form here.

Before:

export default {
  fileHeader: {
    foo: (defaultMessages = []) => ['Ola, planet!', ...defaultMessages, 'Hello, World!'],
  },
};

After:

export default {
  hooks: {
    fileHeaders: {
      foo: (defaultMessages = []) => ['Ola, planet!', ...defaultMessages, 'Hello, World!'],
    },
  },
};

79bb201: BREAKING: Logging has been redesigned a fair bit and is more configurable now.

Before:
```
{
  "log": "error" // 'error' | 'warn'  -> 'warn' is the default value
}
```
After:
```
{
  "log": {
    "warnings": "error", // 'error' | 'warn'  -> 'warn' is the default value
    "verbosity": "verbose", // 'default' | 'verbose' | 'silent'  -> 'default' is the default value
    "errors": {
      "brokenReferences": "console" // 'console' | 'throw' -> 'throw' is the default value
    }
  }
}
```
Log is now and object and the old "log" option is now "warnings".

This configures whether the following five warnings will be thrown as errors instead of being logged as warnings:
- Token value collisions (in the source)
- Token name collisions (when exporting)
- Missing "undo" function for Actions
- File not created because no tokens found, or all of them filtered out
- Broken references in file when using outputReferences, but referring to a token that's been filtered out
Verbosity configures whether the following warnings/errors should display in a verbose manner:
- Token collisions of both types (value & name)
- Broken references due to outputReferences & filters
- Token reference errors
And it also configures whether success/neutral logs should be logged at all.
Using "silent" (or --silent in the CLI) means no logs are shown apart from fatal errors.

f2ed88b: BREAKING: Actions, when registered, are put inside the hooks.actions property now, as opposed to action.
Note the change from singular to plural form here.

Before:

export default {
  action: {
    'copy-assets': {
      do: () => {}
      undo: () => {}
    }
  },
};

After:

export default {
  hooks: {
    actions: {
      'copy-assets': {
        do: () => {}
        undo: () => {}
      }
    },
  },
};

a4542f4: BREAKING: StyleDictionaryInstance.properties & .allProperties have been removed. They were deprecated in v3 in favor of .tokens and .allTokens.

5e167de: BREAKING: moved formatHelpers away from the StyleDictionary class and export them in 'style-dictionary/utils' entrypoint instead.

Before

import StyleDictionary from 'style-dictionary';

const { fileHeader, formattedVariables } = StyleDictionary.formatHelpers;

After

import { fileHeader, formattedVariables } from 'style-dictionary/utils';

f2ed88b: Filters, when registered, are put inside the hooks.filters property now, as opposed to filter.
Note the change from singular to plural form here.

Before:

export default {
  filter: {
    'colors-only': (token) => token.type === 'color,
  },
  platforms: {
    css: {
      files: [{
        format: 'css/variables',
        destination: '_variables.css',
        filter: 'colors-only',
      }],
    },
  },
};

After:

export default {
  hooks: {
    filters: {
      'colors-only': (token) => token.type === 'color,
    },
  },
  platforms: {
    css: {
      files: [{
        format: 'css/variables',
        destination: '_variables.css',
        filter: 'colors-only',
      }],
    },
  },
};

In addition, when using registerFilter method, the name of the filter function is now filter instead of matcher.

Before:

import StyleDictionary from 'style-dictionary';

StyleDictionary.registerFilter({
  name: 'colors-only',
  matcher: (token) => token.type === 'color',
});

After:

import StyleDictionary from 'style-dictionary';

StyleDictionary.registerFilter({
  name: 'colors-only',
  filter: (token) => token.type === 'color',
});

These changes also apply for the filter function (previously matcher) inside transforms.

f2ed88b: BREAKING: Transform groups, when registered, are put inside the hooks.transformGroups property now, as opposed to transformGroup.

Before:

export default {
  // register it inline or by SD.registerTransformGroup
  transformGroup: {
    foo: ['foo-transform'],
  },
};

After:

export default {
  hooks: {
    transformGroups: {
      foo: ['foo-transform'],
    },
  },
};

502dbd1: BREAKING: All of our hooks, parsers, preprocessors, transforms, formats, actions, fileHeaders and filters, support async functions as well now. This means that the formatHelpers -> fileHeader helper method is now asynchronous, to support async fileheader functions.

import StyleDictionary from 'style-dictionary';

const { fileHeader } = StyleDictionary.formatHelpers;

StyleDictionary.registerFormat({
  name: 'custom/css',
  // this can be async now, usually it is if you use fileHeader format helper, since that now always returns a Promise
  formatter: async function ({ dictionary, file, options }) {
    const { outputReferences } = options;
    return (
      // this helper is now async! because the user-passed file.fileHeader might be an async function
      (await fileHeader({ file })) +
      ':root {\n' +
      formattedVariables({ format: 'css', dictionary, outputReferences }) +
      '\n}\n'
    );
  },
});

f2ed88b: BREAKING: Formats, when registered, are put inside the hooks.formats property now, as opposed to format.
The formatter handler function has been renamed to format for consistency.

The importable type interfaces have also been renamed, Formatter is now FormatFn and FormatterArguments is now FormatFnArguments.
Note that you can also use Format['format'] instead of FormatFn, or Parameters<Format['format']> instead of FormatFnArguments, so these renames may not matter.

Before:

import StyleDictionary from 'style-dictionary';
import type { Formatter, FormatterArguments } from 'style-dictionary/types';

// register it with register method
StyleDictionary.registerFormat({
  name: 'custom/json',
  formatter: ({ dictionary }) => JSON.stringify(dictionary, null, 2),
});

export default {
  // OR define it inline
  format: {
    'custom/json': ({ dictionary }) => JSON.stringify(dictionary, null, 2),
  },
  platforms: {
    json: {
      files: [
        {
          destination: 'output.json',
          format: 'custom/json',
        },
      ],
    },
  },
};

After:

import StyleDictionary from 'style-dictionary';
import type { FormatFn, FormatFnArguments } from 'style-dictionary/types';

// register it with register method
StyleDictionary.registerFormat({
  name: 'custom/json',
  format: ({ dictionary }) => JSON.stringify(dictionary, null, 2),
});

export default {
  // OR define it inline
  hooks: {
    formats: {
      'custom/json': ({ dictionary }) => JSON.stringify(dictionary, null, 2),
    },
  },
  platforms: {
    json: {
      files: [
        {
          destination: 'output.json',
          format: 'custom/json',
        },
      ],
    },
  },
};

e83886c: BREAKING: preprocessors must now also be explicitly applied on global or platform level, rather than only registering it. This is more consistent with how the other hooks work and allows applying it on a platform level rather than only on the global level.

preprocessors property that contains the registered preprocessors has been moved under a wrapping property called hooks.

Before:

export default {
  // register it inline or by SD.registerPreprocessor
  // applies automatically, globally
  preprocessors: {
    foo: (dictionary) => {
      // preprocess it
      return dictionary;
    },
  },
};

After:

export default {
  // register it inline or by SD.registerPreprocessor
  hooks: {
    preprocessors: {
      foo: (dictionary) => {
        // preprocess it
        return dictionary;
      },
    },
  },
  // apply it globally
  preprocessors: ['foo'],
  platforms: {
    css: {
      // or apply is per platform
      preprocessors: ['foo'],
    },
  },
};

2f80da2: BREAKING: className, packageName, mapName, type, name, resourceType and resourceMap options for a bunch of built-in formats have been moved from file to go inside the file.options object, for API consistency reasons.

Before:

{
  "files": [
    {
      "destination": "tokenmap.scss",
      "format": "scss/map-deep",
      "mapName": "tokens"
    }
  ]
}

After:

{
  "files": [
    {
      "destination": "tokenmap.scss",
      "format": "scss/map-deep",
      "options": {
        "mapName": "tokens"
      }
    }
  ]
}

f2ed88b: BREAKING: Transforms, when registered, are put inside the hooks.transforms property now, as opposed to transform.
The matcher property has been renamed to filter (to align with the Filter hook change), and the transformer handler function has been renamed to transform for consistency.

Before:

export default {
  // register it inline or by SD.registerTransform
  transform: {
    'color-transform': {
      type: 'value',
      matcher: (token) => token.type === 'color',
      transformer: (token) => token.value,
    },
  },
  platforms: {
    css: {
      // apply it per platform
      transforms: ['color-transform'],
    },
  },
};

After

export default {
  // register it inline or by SD.registerTransform
  hooks: {
    transforms: {
      'color-transform': {
        type: 'value',
        filter: (token) => token.type === 'color',
        transform: (token) => token.value,
      },
    },
  },
  platforms: {
    css: {
      // apply it per platform
      transforms: ['color-transform'],
    },
  },
};

90095a6: BREAKING: Allow specifying a function for outputReferences, conditionally outputting a ref or not per token. Also exposes outputReferencesFilter utility function which will determine whether a token should be outputting refs based on whether those referenced tokens were filtered out or not.

If you are maintaining a custom format that allows outputReferences option, you'll need to take into account that it can be a function, and pass the correct options to it.

Before:

StyleDictionary.registerFormat({
  name: 'custom/es6',
  formatter: async (dictionary) => {
    const { allTokens, options, file } = dictionary;
    const { usesDtcg } = options;

    const compileTokenValue = (token) => {
      let value = usesDtcg ? token.$value : token.value;
      const originalValue = usesDtcg ? token.original.$value : token.original.value;

      // Look here 👇
      const shouldOutputRefs = outputReferences && usesReferences(originalValue);

      if (shouldOutputRefs) {
        // ... your code for putting back the reference in the output
        value = ...
      }
      return value;
    }
    return `${allTokens.reduce((acc, token) => `${acc}export const ${token.name} = ${compileTokenValue(token)};\n`, '')}`;
  },
});

After

StyleDictionary.registerFormat({
  name: 'custom/es6',
  formatter: async (dictionary) => {
    const { allTokens, options, file } = dictionary;
    const { usesDtcg } = options;

    const compileTokenValue = (token) => {
      let value = usesDtcg ? token.$value : token.value;
      const originalValue = usesDtcg ? token.original.$value : token.original.value;

      // Look here 👇
      const shouldOutputRefs =
        usesReferences(original) &&
        (typeof options.outputReferences === 'function'
          ? outputReferences(token, { dictionary, usesDtcg })
          : options.outputReferences);

      if (shouldOutputRefs) {
        // ... your code for putting back the reference in the output
        value = ...
      }
      return value;
    }
    return `${allTokens.reduce((acc, token) => `${acc}export const ${token.name} = ${compileTokenValue(token)};\n`, '')}`;
  },
});

122c8f6: BREAKING: expose getReferences and usesReference utilities as standalone utils rather than requiring them to be bound to dictionary object. This makes it easier to use.
0b81a08: BREAKING: no longer wraps tokens of type asset in double quotes. Rather, we added a transform asset/url that will wrap such tokens inside url("") statements, this transform is applied to transformGroups scss, css and less.

a4542f4: BREAKING: StyleDictionary to be initialized with a new API and have async methods. Use:

import StyleDictionary from 'style-dictionary';

/**
 * old:
 *   const sd = StyleDictionary.extend({ source: ['tokens.json'], platforms: {} });
 *   sd.buildAllPlatforms();
 */
const sd = new StyleDictionary({ source: ['tokens.json'], platforms: {} });
await sd.buildAllPlatforms();

You can still extend a dictionary instance with an extended config, but .extend() is only used for this, it is no longer used to initialize the first instance:

import StyleDictionary from 'style-dictionary';

const sd = new StyleDictionary({ source: ['tokens.json'], platforms: {} });
const extended = await sd.extend({
  fileHeader: {
    myFileHeader: (defaultMessage) => {
      return [...defaultMessage, 'hello, world!'];
    },
  },
});

To ensure your initialized StyleDictionary instance is fully ready and has imported all your tokens, you can await hasInitialized:

import StyleDictionary from 'style-dictionary';

const sd = new StyleDictionary({ source: ['tokens.json'], platforms: {} });
await sd.hasInitialized;
console.log(sd.allTokens);

For error handling and testing purposes, you can also manually initialize the style-dictionary config:

import StyleDictionary from 'style-dictionary';

const sd = new StyleDictionary({ source: ['tokens.js'], platforms: {} }, { init: false });
try {
  await sd.init();
} catch (e) {
  // handle error, e.g. when tokens.js file has syntax errors and cannot be imported
}
console.log(sd.allTokens);

The main reason for an initialize step after class instantiation is that async constructors are not a thing in JavaScript, and if you return a promise from a constructor to "hack it", TypeScript will eventually trip over it.

Due to being able to dynamically (asynchronously) import ES Modules rather than synchronously require CommonJS modules, we had to make the APIs asynchronous, so the following methods are now async:

extend
exportPlatform
buildAllPlatforms & buildPlatform
cleanAllPlatforms & cleanPlatform

In a future release, most other methods will be made async or support async as well, such as parsers, transforms, formats etc.

f2ed88b: BREAKING: Parsers, when registered, are put inside the hooks.parsers property now, as opposed to parsers.
parsers property has been repurposed: you will now also need to explicitly apply registered parsers by name in the parsers property, they no longer apply by default.
When registering a parser, you must also supply a name property just like with all other hooks, and the parse function has been renamed to parser for consistency.

Before:

export default {
  // register it inline or by SD.registerPreprocessor
  parsers: [
    {
      pattern: /\.json5$/,
      parse: ({ contents, filePath }) => {
        return JSON5.parse(contents);
      },
    },
  ],
};

After:

export default {
  hooks: {
    parsers: {
      name: 'json5-parser',
      pattern: /\.json5$/,
      parser: ({ contents, filePath }) => {
        return JSON5.parse(contents);
      },
    },
  },
  // apply it globally by name reference
  parsers: ['json5-parser'],
};

bcb5ef3: Remove reliance on CTI token structure across transforms, actions and formats.

Breaking changes:
- Token type will now be determined by "type" (or "$type") property on the token, rather than by checking its CTI attributes. This change has been reflected in all of the format templates as well as transform "matcher" functions that were previously checking attributes.category as the token type indicator.
- Types are mostly aligned with DTCG spec types, although a few additional ones have been added for compatibility reasons:
  - asset -> string type tokens where the value is a filepath to an asset
  - icon -> content type string tokens where the content resembles an icon, e.g. for icon fonts like Microsoft codicons
  - html -> HTML entity strings for unicode characters
  - content -> regular string content e.g. text content which sometimes needs to be wrapped in quotes
- Built-in name transforms are now reliant only on the token path, and are renamed from name/cti/casing to just name/casing. name/ti/camel and name/ti/constant have been removed. For example name/cti/kebab transform is now name/kebab.
- Transform content/icon has been renamed to html/icon since it targets HTML entity strings, not just any icon content.
- font/objC/literal, font/swift/literal and font/flutter/literal have been removed in favor of font/objC/literal, font/swift/literal and font/flutter/literal, as they do he exact same transformations.
- typescript/module-declarations format to be updated with current DesignToken type interface.
Before:
```
{
  "color": {
    "red": {
      "value": "#FF0000"
    }
  }
}
```
After:
```
{
  "color": {
    // <-- this no longer needs to be "color" in order for the tokens inside this group to be considered of type "color"
    "red": {
      "value": "#FF0000",
      "type": "color"
    }
  }
}
```
7b82150: BREAKING: For formats using the fileHeader formatHelpers utility, it will no longer display a timestamp in the fileHeader output by default. This is now an opt-in by setting file.formatting.fileHeaderTimestamp to true. The reason for making this opt-in now is that using Style Dictionary in the context of a CI (continuous integration) pipeline is a common use-case, and when running on pull request event, output files always show a diff in git due to the timestamp changing, which often just means that the diff is bloated by redundancy.

New:
```
{
  "platforms": {
    "css": {
      "files": [
        {
          "destination": "variables.css",
          "format": "css/variables",
          "options": {
            "formatting": {
              "fileHeaderTimestamp": true
            }
          }
        }
      ]
    }
  }
}
```
or:
```
import { fileHeader } from 'style-dictionary/utils';

const headerContent = await fileHeader({
  formatting: { fileHeaderTimestamp: true },
});
```

Minor Changes

39f0220: Allow not throwing fatal errors on broken token references/aliases, but console.error instead.

You can also configure this on global/platform log property:
```
{
  "log": {
    "errors": {
      "brokenReferences": "console"
    }
  }
}
```
This setting defaults to "error" when not configured.

resolveReferences and getReferences warnImmediately option is set to true which causes an error to be thrown/warned immediately by default, which can be configured to false if you know those utils are running in the transform/format hooks respectively, where the errors are collected and grouped, then thrown as 1 error/warning instead of multiple.

Some minor grammatical improvements to some of the error logs were also done.
8450a45: Some fixes for Expand utility:
- Array values such as dashArray property of strokeStyle tokens no longer get expanded unintentionally, typeof 'object' check changed to isPlainObject check.
- Nested object-value tokens (such as style property inside border tokens) will now also be expanded.
- When references are involved during expansion, the resolved value is used when the property is an object, if not, then we keep the reference as is.
  This is because if the reference is to an object value, the expansion might break the reference.
c06661d: Re-add and update example basic, fix copySync command in CLI, fix android templates to use $type for DTCG tokens.
dcbe2fb: FileSystem that is used by Style Dictionary can now be customized:
```
import { setFs } from 'style-dictionary/fs';
setFs(myFileSystemShim);
```
By default, it uses an in-memory filesystem shim @bundled-es-modules/memfs in browser context, node:fs built-in module in Node context.
3485467: Fix some inconsistencies in some of the templates, usually with regards to spaces/newlines
606af51: Rename typeW3CDelegate utility function to typeDtcgDelegate, as using "W3C" is highly discouraged when the standard isn't a W3C standard yet.
4225d78: Added the following transforms for CSS, and added them to the scss, css and less transformGroups:
- fontFamily/css -> wraps font names with spaces in ' quotes
- cubicBezier/css -> array value, put inside cubic-bezier() CSS function
- strokeStyle/css/shorthand -> object value, transform to CSS shorthand
- border/css/shorthand -> object value, transform to CSS shorthand
- typography/css/shorthand -> object value, transform to CSS shorthand
- transition/css/shorthand -> object value, transform to CSS shorthand
- shadow/css/shorthand -> object value (or array of objects), transform to CSS shorthand
The main intention here is to ensure that Style Dictionary is compliant with DTCG draft specification out of the box with regards to exporting to CSS, where object-value tokens are not supported without transforming them to shorthands (or expanding them, which is a different feature that was added in 4.0.0-prerelease.27).
cedf8a0: Preprocessors are a new feature added to style-dictionary, which allows you to do any type of processing of the token dictionary after parsing, before resolving and transforming.
See preprocessor docs for more information.
cb94554: 'size/rem' transform to not transform tokens that already have a unit, such as "4px", this should not be transformed to "4rem".
a4542f4: options.log to be respected in all error logging, including platform specific logs.

122c8f6: Expose a new utility called resolveReferences which takes a value containing references, the dictionary object, and resolves the value's references for you.

import StyleDictionary from 'style-dictionary';
import { resolveReferences } from 'style-dictionary/utils';

const sd = new StyleDictionary({
  tokens: {
    foo: { value: 'foo' },
    bar: { value: '{foo}' },
    qux: { value: '{bar}' },
  },
});

console.log(resolveReferences(sd.tokens.qux.value, sd.tokens)); // 'foo'

0410295: Improve and test the error handling of standalone usage of reference utilities.
8b6fff3: Fixes some noisy warnings still being outputted even when verbosity is set to default.

We also added log.warning "disabled" option for turning off warnings altogether, meaning you only get success logs and fatal errors.
This option can be used from the CLI as well using the --no-warn flag.
2da5130: Added outputReferencesTransformed utility function to pass into outputReferences option, which will not output references for values that have been transitively transformed.
606af51: Support the use of "value"/"type"/"description" as token names or token group names, at the sacrifice of now no longer being able to combine non-DTCG and DTCG syntax within the same token dictionary.
7418c97: Add a couple of utilities for converting a regular Style Dictionary tokens object/file(s) to DTCG formatted tokens:
- convertToDTCG
- convertJSONToDTCG
- convertZIPToDTCG
Documentation of these utilities
294fd0e: Support Design Token Community Group Draft specification for Design Tokens, by adding support for $value, $type and $description properties.

aff6646: Allow passing a custom FileSystem Volume to your Style Dictionary instances, to ensure input/output files are read/written from/to that specific volume.
Useful in case you want multiple Style Dictionary instances that are isolated from one another in terms of inputs/outputs.

import { Volume } from 'memfs';
// You will need a bundler for memfs in browser...
// Or use as a prebundled fork:
import memfs from '@&#8203;bundled-es-modules/memfs';
const { Volume } = memfs;

const vol = new Volume();

const sd = new StyleDictionary(
  {
    tokens: {
      colors: {
        red: {
          value: '#FF0000',
          type: 'color',
        },
      },
    },
    platforms: {
      css: {
        transformGroup: 'css',
        files: [
          {
            destination: 'variables.css',
            format: 'css/variables',
          },
        ],
      },
    },
  },
  { volume: vol },
);

await sd.buildAllPlatforms();

vol.readFileSync('/variables.css');
/**
 * :root {
 *   --colors-red: #FF0000;
 * }
 */

This also works when using extend:

const extendedSd = await sd.extend(cfg, { volume: vol });

261a2cb: Handle transition timingFunction prop in cubicBezier/css transform. Handle typography fontFamily prop in fontFamily/css transform.
e83886c: Allow expanding tokens on a global or platform-specific level. Supports conditionally expanding per token type, or using a function to determine this per individual token.
af5cc94: Create formatPlatform and formatAllPlatforms methods.
This will return the outputs and destinations from the format hook for your dictionary, without building these outputs and persisting them to the filesystem.
Additionally, formats can now return any data type instead of requiring it to be a string and destination property in files is now optional.
This allows users to create formats intended for only formatting tokens and letting users do stuff with it during runtime rather than writing to files.
c06661d: Re-add and update example basic, fix copySync command in CLI, fix android templates to use $type for DTCG tokens.
4556712:

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

If you want to rebase/retry this PR, check this box

This PR was generated by Mend Renovate. View the repository job log.

renovate bot added the dependencies Issues related to dependency updates or management label Jan 5, 2026

renovate bot force-pushed the renovate/style-dictionary-5.x branch 9 times, most recently from 28a3edc to 30011db Compare January 12, 2026 06:46

chore(deps): update dependency style-dictionary to v5

644f0bb

renovate bot force-pushed the renovate/style-dictionary-5.x branch from 30011db to 644f0bb Compare January 12, 2026 17:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore(deps): update dependency style-dictionary to v5 #208

chore(deps): update dependency style-dictionary to v5 #208

Uh oh!

renovate bot commented Jan 5, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

chore(deps): update dependency style-dictionary to v5 #208

Are you sure you want to change the base?

chore(deps): update dependency style-dictionary to v5 #208

Uh oh!

Conversation

renovate bot commented Jan 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Release Notes

Patch Changes

Patch Changes

Minor Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Major Changes

Minor Changes

Patch Changes

Minor Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Minor Changes

Patch Changes

Minor Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Minor Changes

Patch Changes

Patch Changes

Major Changes

Minor Changes

Configuration

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

renovate bot commented Jan 5, 2026 •

edited

Loading