Styledictionary/4/Hook Api Transform

Last update

Sep 9, 2024

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

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

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

Before

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

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

Build custom codemods

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

Get Started Now