Error while using registerTransformGroup

[a-petrukhnov]

I want to create custom transform property and then include it to custom transformGroup. Code here:

const { registerTransforms, transforms, transformFontWeights } = require('@tokens-studio/sd-transforms');
const StyleDictionary = require('style-dictionary');
const { promises } = require('fs');

StyleDictionary.registerTransform({
  name: 'custom/typography/fontWeight',
  type: 'value',
  transitive: true,
  matcher: token => ['fontWeight'].includes(token.type),
  transformer: token => {
    console.log(token)
    return transformFontWeights(token)
  },
});

StyleDictionary.registerTransformGroup({
  name: 'custom/tokens-studio',
  transforms: [...transforms, 'custom/typography/fontWeight'],
});

registerTransforms(StyleDictionary, {
  /* options here if needed */
});

async function run(project) {
  const $themes = JSON.parse(await promises.readFile(`somePath/$themes.json`, 'utf-8'));
  const configs = $themes.map(theme => ({
    source: Object.entries(theme.selectedTokenSets)
      .filter(([, val]) => val !== 'disabled')
      .map(([tokenset]) => `somePath/${tokenset}.json`),
    platforms: {
      css: {
        transformGroup: 'custom/tokens-studio',
        buildPath: 'somepath/design-tokens/',
        files: [
          {
            destination: `vars-${theme.name}.css`,
            format: 'css/variables',
          },
        ],
      },
    },
  }));

  configs.forEach(cfg => {
    const sd = StyleDictionary.extend(cfg);
    sd.cleanAllPlatforms();
    sd.buildAllPlatforms();
  });
}

run()

But when I run this code I have error Error: transforms must be an array of registered value transforms

Even if I remove custom transform and left just

StyleDictionary.registerTransformGroup({
  name: 'custom/tokens-studio',
  transforms,
});

error still exists. Can you point me what I am doing wrong?

[jorenbroekema]

The call of registerTransforms(StyleDictionary) needs to happen first, which registers the sd-transforms. Only after that can you register a transformGroup that uses these transforms. Try:

const { registerTransforms, transforms, transformFontWeights } = require('@tokens-studio/sd-transforms');
const StyleDictionary = require('style-dictionary');
const { promises } = require('fs');

StyleDictionary.registerTransform({
  name: 'custom/typography/fontWeight',
  type: 'value',
  transitive: true,
  matcher: token => ['fontWeight'].includes(token.type),
  transformer: token => {
    console.log(token)
    return transformFontWeights(token)
  },
});

registerTransforms(StyleDictionary, {
  /* options here if needed */
});

StyleDictionary.registerTransformGroup({
  name: 'custom/tokens-studio',
  transforms: [...transforms, 'custom/typography/fontWeight'],
});

async function run(project) {
  const $themes = JSON.parse(await promises.readFile(`somePath/$themes.json`, 'utf-8'));
  const configs = $themes.map(theme => ({
    source: Object.entries(theme.selectedTokenSets)
      .filter(([, val]) => val !== 'disabled')
      .map(([tokenset]) => `somePath/${tokenset}.json`),
    platforms: {
      css: {
        transformGroup: 'custom/tokens-studio',
        buildPath: 'somepath/design-tokens/',
        files: [
          {
            destination: `vars-${theme.name}.css`,
            format: 'css/variables',
          },
        ],
      },
    },
  }));

  configs.forEach(cfg => {
    const sd = StyleDictionary.extend(cfg);
    sd.cleanAllPlatforms();
    sd.buildAllPlatforms();
  });
}

run()

[a-petrukhnov]

Yes, it works. Thank you!