New
Codemod Registry
Explore community-led codemods to migrate, optimize, and transform your codebase.
Ready to contribute?
Build your own codemod and share it with the community.
Explore community-led codemods to migrate, optimize, and transform your codebase.
Build your own codemod and share it with the community.
Explore community-led codemods to migrate, optimize, and transform your codebase.
## What Changed This codemod introduces strict typing across Style Dictionary, with `.d.ts` files published alongside each file. Importing from Style Dictionary’s entrypoints now automatically provides implicit types, offering significant improvements for TypeScript users with more accurate and fewer `any` types. Specific type interfaces can still be imported separately from the `style-dictionary/types` entrypoint if needed. ## Before ```jsx import StyleDictionary from 'style-dictionary'; declare type DesignToken = StyleDictionary.DesignToken; declare type Transform = StyleDictionary.Transform; ``` ## After ```jsx import type { DesignToken, Transform } from 'style-dictionary/types'; ```
## What Changed This codemod updates the logging system to be more configurable, as detailed in the Logging docs. You can now customize the verbosity of logs and silence warnings and success logs, in addition to the previous option of setting `log: 'error'` to change the default behavior to throw warnings as errors. ## Before ```jsx { "source": ["tokens.json"], "log": "error" } ``` ## After ```jsx { "source": [ "tokens.json" ], "log": { "warnings": "error", "verbosity": "default" } } ```
## What Changed This codemod updates registered actions to be placed inside the `hooks.actions` property, instead of `action`. Note the shift from the singular to the plural form in this update. ## Before ```jsx export default { action: { "copy-assets": { do: () => {}, undo: () => {}, }, }, platforms: { css: { actions: ["copy-assets"], files: [{ format: "css/variables", destination: "_variables.css" }], }, }, }; ``` ## After ```jsx export default { platforms: { css: { actions: ["copy-assets"], files: [{ format: "css/variables", destination: "_variables.css" }], }, }, hooks: { actions: { "copy-assets": { do: () => {}, undo: () => {}, }, }, }, }; ```
## What Changed This codemod relocates the format helpers from the `StyleDictionary` module/class to the `utils` entrypoint, ensuring consistency across the API. ## Before ```jsx import StyleDictionary from 'style-dictionary'; const { fileHeader, formattedVariables } = StyleDictionary.formatHelpers; ``` ## After ```jsx import StyleDictionary from 'style-dictionary'; import { fileHeader, formattedVariables } from 'style-dictionary/utils'; ```
This codemod updates the following StyleDictionary class methods to be asynchronous: `extend()`, `exportPlatform()`, `getPlatform()`, `buildAllPlatforms()`, `buildPlatform()`, `cleanAllPlatforms()`, and `cleanPlatform()`. This ensures compatibility with the latest asynchronous workflows in Style Dictionary. ## Before ```jsx import StyleDictionary from 'style-dictionary'; const sd = new StyleDictionary({ source: ['tokens.json'], platforms: {} }); await sd.hasInitialized; console.log(sd.allTokens); sd.cleanAllPlatforms(); sd.buildAllPlatforms(); sd.extend(); sd.exportPlatform(); sd.getPlatform(); sd.buildPlatform(); sd.cleanPlatform(); ``` ## After ```jsx import StyleDictionary from 'style-dictionary'; const sd = new StyleDictionary({ source: ['tokens.json'], platforms: {} }); await sd.hasInitialized; console.log(sd.allTokens); await sd.cleanAllPlatforms(); await sd.buildAllPlatforms(); await sd.extend(); await sd.exportPlatform(); await sd.getPlatform(); await sd.buildPlatform(); await sd.cleanPlatform(); ```
This recipe is a set of codemods that will help migrate to Style Dictionary 4. The recipe includes the following codemods: - styledictionary/4/asynchronous-api - styledictionary/4/asynchronous-api-file-headers - styledictionary/4/format-helpers - styledictionary/4/formatting-options - styledictionary/4/hook-api-actions - styledictionary/4/hook-api-file-header - styledictionary/4/hook-api-filters - styledictionary/4/hook-api-formats - styledictionary/4/hook-api-parsers - styledictionary/4/hook-api-preprocessors - styledictionary/4/hook-api-transform - styledictionary/4/hook-api-transform-groups - styledictionary/4/instantiating-style-dictionary - styledictionary/4/logging - styledictionary/4/module-common-js - styledictionary/4/reference-utils - styledictionary/4/type - styledictionary/4/updated-and-removed-transforms
## What Changed This codemod updates the reference utilities to be available from the `style-dictionary/utils` entrypoint, instead of being attached to the `StyleDictionary` instance. The function signatures of these utilities have also been updated for better reuse and consistency in their APIs. ## Before ```jsx import StyleDictionary from 'style-dictionary'; StyleDictionary.registerFormat({ name: `myCustomFormat`, format: function ({ dictionary }) { return dictionary.allTokens .map((token) => { let value = JSON.stringify(token.value); if (dictionary.usesReferences(token.original.value)) { const refs = dictionary.getReferences(token.original.value); refs.forEach((ref) => { value = value.replace(ref.value, function () { return `${ref.name}`; }); }); } return `export const ${token.name} = ${value};`; }) .join(`\n`); }, }); ``` ## After ```jsx import StyleDictionary from 'style-dictionary'; import { usesReferences, getReferences } from 'style-dictionary/utils'; StyleDictionary.registerFormat({ name: `myCustomFormat`, format: function ({ dictionary }) { return dictionary.allTokens .map((token) => { let value = JSON.stringify(token.value); if (usesReferences(token.original.value, dictionary.tokens)) { const refs = getReferences( token.original.value, dictionary.tokens, ); refs.forEach((ref) => { value = value.replace(ref.value, function () { return `${ref.name}`; }); }); } return `export const ${token.name} = ${value};`; }) .join(`\n`); }, }); ```
## What Changed This codemod updates registered filters to be placed inside the `hooks.filters` property, instead of `filter`. Note the shift from the singular to the plural form in this update. ## Before ```jsx export default { filter: { "colors-only": (token) => token.type === "color", }, platforms: { css: { files: [ { format: "css/variables", destination: "_variables.css", filter: "colors-only", }, ], }, }, }; ``` ## After ```jsx export default { platforms: { css: { files: [ { format: "css/variables", destination: "_variables.css", filter: "colors-only", }, ], }, }, hooks: { filters: { "colors-only": (token) => token.type === "color", }, }, }; ```
## What Changed This codemod updates registered formats to be placed inside the `hooks.formats` property, instead of `format`, with a shift from the singular to the plural form. Additionally, the formatter handler function has been renamed to `format` for consistency. Some importable type interfaces have also been renamed. ## Before ```jsx 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 ```jsx 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 { platforms: { json: { files: [ { destination: 'output.json', format: 'custom/json', }, ], }, }, hooks: { formats: { 'custom/json': ({ dictionary }) => JSON.stringify(dictionary, null, 2), }, }, }; ```
## What Changed This codemod updates registered parsers to be placed inside the `hooks.parsers` property, instead of `parser`, with a shift from the singular to the plural form. Registered parsers now apply globally without needing explicit application in the config. Additionally, the `parse` function has been renamed to `parser` for consistency. ## Before ```jsx export default { // register it inline or by SD.registerPreprocessor parsers: [ { pattern: /\.json5$/, parse: ({ contents, filePath }) => { return JSON5.parse(contents); }, }, ], }; ``` ## After ```jsx export default { // register it inline or by SD.registerPreprocessor parsers: ["json5-parser"], hooks: { parsers: { name: "json5-parser", pattern: /\.json5$/, parser: ({ contents, filePath }) => { return JSON5.parse(contents); }, }, }, }; ```
## What Changed This codemod updates file formats to accept options that influence output creation, with the options now nested under the `options` property. In v3, these options were previously placed directly at the file properties level alongside the `destination` and `format` props. ## Before ```jsx { "source": ["tokens.json"], "platforms": { "css": { "transformGroup": "scss", "files": [ { "destination": "map.scss", "format": "scss/map-deep", "mapName": "tokens" } ] } } } ``` ## After ```jsx { "source": [ "tokens.json" ], "platforms": { "css": { "transformGroup": "scss", "files": [ { "destination": "map.scss", "format": "scss/map-deep", "options": { "mapName": "tokens" } } ] } } } ```
## What Changed This codemod updates Style Dictionary to be a class in version 4, rather than a regular JS object. This allows for instance creation using the new class instantiator keyword. Due to ES Modules' asynchronous nature, you must await initialization before accessing properties like tokens on the instance. The `.extend()` method remains available for creating instances based on another instance. ## Before ```jsx const StyleDictionary = require("style-dictionary"); const sd = StyleDictionary.extend("config.json"); console.log(sd.tokens); ``` ## After ```jsx import StyleDictionary from "style-dictionary"; const sd = new StyleDictionary("config.json"); await sd.hasInitialized; console.log(sd.tokens); ```
Build your own codemod and share it with the community.