New
Codemod Registry
Explore community-led codemods to migrate, optimize, and transform your codebase.
+600 codemods published
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 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 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 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 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 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 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: () => {}, }, }, }, }; ```
## 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), }, }, }; ```
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 codemod updates the `fileHeader` format helper utility to be asynchronous, allowing support for async fileHeaders while maintaining consistency with the latest updates. ## Before ```jsx import StyleDictionary from 'style-dictionary'; import { fileHeader } from 'style-dictionary/utils'; StyleDictionary.registerFormat({ name: 'custom/css', formatter: function ({ dictionary, file, options }) { const { outputReferences } = options; return ( fileHeader({ file }) ':root {\n' + formattedVariables({ format: 'css', dictionary, outputReferences, }) + '\n}\n' ); }, }); ``` ## After ```jsx import StyleDictionary from 'style-dictionary'; import { fileHeader } from 'style-dictionary/utils'; StyleDictionary.registerFormat({ name: 'custom/css', format: async function ({ dictionary, file, options }) { const { outputReferences } = options; return ( (await fileHeader({ file })) ':root {\n' + formattedVariables({ format: 'css', dictionary, outputReferences, }) + '\n}\n' ); }, }); ```
## What Changed This codemod updates several transforms: - Built-in name transforms now depend solely on the token path and have been renamed from `name/cti/casing` to `name/casing`. Transforms like `name/cti/kebab` are now `name/kebab`, and `name/ti/camel` and `name/ti/constant` have been removed. - The `content/icon` transform has been renamed to `html/icon` to reflect its focus on HTML entity strings. - `font/objC/literal`, `font/swift/literal`, and `font/flutter/literal` have been replaced with `content/objC/literal`, `content/swift/literal`, and `content/flutter/literal`, as they perform the same transformations. ## Before ```jsx { "source": ["tokens.json"], "platforms": { "css": { "transforms": [ "name/cti/camel", "name/cti/kebab", "name/cti/snake", "name/cti/human", "name/cti/human", "font/objC/literal", "font/swift/literal", "font/flutter/literal" ] } } } ``` ## After ```jsx { "source": [ "tokens.json" ], "platforms": { "css": { "transforms": [ "name/camel", "name/kebab", "name/snake", "name/human", "name/human" ] } } } ```
Build your own codemod and share it with the community.