Styledictionary/4/Asynchronous Api File Headers

Last update

Oct 7, 2024

This codemod updates the fileHeader format helper utility to be asynchronous, allowing support for async fileHeaders while maintaining consistency with the latest updates.

Before

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

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'
        );
    },
});

This codemod updates the fileHeader format helper utility to be asynchronous, allowing support for async fileHeaders while maintaining consistency with the latest updates.

Before

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

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'
        );
    },
});

Build custom codemods

Use AI-powered codemod studio and automate undifferentiated tasks for yourself, colleagues or the community

Get Started Now