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 updates Style Dictionary to use ES Modules format entirely in version 4, making it browser-compatible out of the box. This modern JavaScript standard, which supports NodeJS/Browser interoperability among other benefits, allows Style Dictionary to run in many more environments compared to before. ## Before ```jsx const StyleDictionary = require("style-dictionary"); ``` ## After ```jsx import StyleDictionary from "style-dictionary"; ```
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 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 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); ```
## What Changed This codemod updates registered transforms to be placed inside the `hooks.transforms` property, instead of `transform`, with a shift from the singular to the plural form. Additionally, the name of the filter function has been changed from `matcher` to `filter` for consistency. ## Before ```jsx 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 ```jsx export default { platforms: { css: { // apply it per platform transforms: ["color-transform"], }, }, hooks: { transforms: { "color-transform": { type: "value", filter: (token) => token.type === "color", transform: (token) => token.value, }, }, }, }; ```
## What Changed This codemod updates registered transform groups to be placed inside the `hooks.transformGroups` property, instead of `transformGroup`, with a shift from the singular to the plural form. ## Before ```jsx export default { // register it inline or by SD.registerTransformGroup transformGroup: { foo: ["foo-transform"], }, platforms: { css: { // apply it per platform transformGroup: ["foo"], }, }, }; ``` ## After ```jsx export default { platforms: { css: { // apply it per platform transformGroup: ["foo"], }, }, hooks: { transformGroups: { foo: ["foo-transform"], }, }, }; ```
## What Changed This codemod updates registered preprocessors to be placed inside the `hooks.preprocessors` property, instead of `preprocessor`, with a shift from the singular to the plural form. Registered preprocessors now apply globally without requiring explicit application in the config. ## Before ```jsx export default { preprocessors: { foo: (dictionary) => { // preprocess it return dictionary; }, }, preprocessors: ["foo"], platforms: { css: { preprocessors: ["foo"], }, }, }; ``` ## After ```jsx export default { preprocessors: ["foo"], platforms: { css: { preprocessors: ["foo"], }, }, hooks: { preprocessors: { foo: (dictionary) => { // preprocess it return dictionary; }, }, }, }; ```
## 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 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 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 file headers to be placed inside the `hooks.fileHeaders` property, instead of `fileHeader`. Note the shift from the singular to the plural form in this update. ## Before ```jsx export default { fileHeader: { foo: (defaultMessages = []) => [ "Ola, planet!", ...defaultMessages, "Hello, World!", ], }, platforms: { css: { options: { fileHeader: "foo", }, }, }, }; ``` ## After ```jsx export default { platforms: { css: { options: { fileHeader: "foo", }, }, }, hooks: { fileHeaders: { foo: (defaultMessages = []) => [ "Ola, planet!", ...defaultMessages, "Hello, World!", ], }, }, }; ```
## 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: () => {}, }, }, }, }; ```
Build your own codemod and share it with the community.