Styledictionary/4/Hook Api Transform

1.0.2Last update Jan 10, 2025

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