How do I transform the convention of my Style Dictionary variables.js after being compiled. To ignore they parent style folder

Question

This is my transform-token.js file:

const StyleDictionary = require('style-dictionary');
const baseConfig = require('./style-dictionary.config.json');

StyleDictionary.registerTransform({
  name: 'size/px',
  type: 'value',
  matcher: token => {
    return (token.unit === 'pixel' || token.type === 'dimension') && token.value !== 0;
  },
  transformer: token => {
    return `${token.value}px`;
  },
});

StyleDictionary.registerTransform({
  name: 'size/percent',
  type: 'value',
  matcher: token => {
    return token.unit === 'percent' && token.value !== 0;
  },
  transformer: token => {
    return `${token.value}%`;
  },
});

StyleDictionary.registerTransformGroup({
  name: 'custom/css',
  transforms: StyleDictionary.transformGroup['css'].concat([
    'size/px',
    'size/percent',
  ]),
});

// StyleDictionary.registerFilter({
//   name: 'validToken',
//   matcher: function(token) {
//     return ['dimension', 'string', 'number', 'color'].includes(token.type)
//   }
// });

StyleDictionary
  .extend(baseConfig)
  .buildAllPlatforms();

And when we build we get this: TypographyTypographyHeadersSubheadersSubheading1400 instead of getting something like: "Subheading1400"

This how tokens are getting exported to their typography.json

{
  "typography": {
    "typography": {
      "headers": {
        "subheaders": {
          "subheading1-400": {
            "value": {
              "font": {
                "type": "font",
                "value": {
                  "family": {
                    "type": "string",
                    "value": "Plus Jakarta Sans"
                  },
                  "subfamily": {
                    "type": "string",
                    "value": "Regular"
                  }
                }
              },

It seems it is taking all the parent folders from this style inside Figma and putting it into the variable name.

I did editing the js file, but I am not entirely sure what to tackle.

Answer 1

Hmm... you need to make a small tweak to your transform-token.js file

Right now, it seems like the naming convention is including the parent folders of your style in Figma, which is causing the problem you described.

You'll need to update the name property in the extend method to avoid this.

Here's what it would look like:

StyleDictionary
  .extend({ ...baseConfig, name: "Subheading1400" })
  .buildAllPlatforms();

This will make sure that your exported tokens are named Subheading1400 instead of TypographyTypographyHeadersSubheadersSubheading1400.