Custom transform not working with hooks in Style Dictionary 4

[Leejha]

I'm trying to implement a custom transform using hooks in Style Dictionary 4, but the transform is not being executed. Here's my configuration:

export default {
  source: [flattenedTokensPath],
  hooks: {
    transforms: {
      CssCustomPrefix: {
        transform: (token) => {
          console.log("test");  // This is never logged
          return token;
        },
      },
    },
  },
  platforms: {
    css: {
      transforms: ["CssCustomPrefix"],
      buildPath: "src/css/",
      files: [
        {
          destination: "color.css",
          format: formats.cssVariables,
          filter: {
            type: "color",
          },
        },
      ],
    }
  }
};

I'm running the build with:
pnpm exec style-dictionary build --config src/style-dictionary/transform-token.js

I also tried using transform groups like this:

export default {
  hooks: {
    transformGroups: {
      temp: ["CssCustomPrefix"],
    },
    transforms: {
      "CssCustomPrefix": {
        transform: (token) => {
          console.log("test");  // This is never logged
          return token;
        },
    },
  },
  platforms: {
    css: {
      transformGroup: [transformGroups.css, "temp"],
      // ... rest of the config
    }
  }
};

But neither approach seems to work - the transform is never executed (no console.log output).

Expected behavior:

The custom transform should be executed
console.log in the transform should be visible in the output

Actual behavior:

The transform appears to be ignored
No console.log output is visible
The build completes successfully but without applying the custom transform

Environment:

Style Dictionary version: 4.3.0
Node.js version: 20.16.0
Package manager: pnpm

Any help or guidance would be appreciated!

[jorenbroekema]

Try

export default {
  source: [flattenedTokensPath],
  hooks: {
    transforms: {
      CssCustomPrefix: {
        type: 'value',
        transform: (token) => {
          console.log("test");  // This is never logged
          return token.value;
        },
      },
    },
  },
  platforms: {
    css: {
      transforms: ["CssCustomPrefix"],
      buildPath: "src/css/",
      files: [
        {
          destination: "color.css",
          format: formats.cssVariables,
          filter: {
            type: "color",
          },
        },
      ],
    }
  }
};

1. Transforms must always have a "type" , if you register a transform through registerTransform but don't specify a type, it will throw an error, but by inlining the transform straight into the hooks, it doesn't pass through this validation step, so you're not made aware of this problem.
2. You probably dont want to return the entire token in the transform, this will lead to weird duplicate nesting issues, so token.value is safer for a dummy transform where you just want to log it that the transform function is being called.

[Leejha]

@jorenbroekema
It works well! Thank you

I have a question. Why is there a distinction between inlining transform in hooks and registerTransform?
And I wonder which thing you recommend more
I read the document, but I couldn't understand it.

[jorenbroekema]

My answer would be that this distinction was always there since the start of the library, just the shape of it has been adjusted for clarity (e.g. putting it inside a hooks wrapper object).

The reason for this is mostly because in the old library, Style Dictionary was "just an object" and completely mutable, so while you were advised to use the "registerTransform" etc. methods, you could always just mutate the SD object yourself to register it manually and essentially do whatever you like.
Now that we're using ES6 classes, we could consider making some properties read-only and some methods private to enforce a single way of doing X. But at the moment I don't think this has high priority when there are other future breaking changes that are more important, and keeping the breaking changes to a minimum for future major versions would be nice if possible.

[Leejha]

@jorenbroekema
You mean it doesn't matter which way i use it
Thank you. You helped me a lot