Styledictionary/4/Asynchronous Api File Headers

Last update

Sep 9, 2024

What Changed

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',
    formatter: 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 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',
    formatter: 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