I'm using Style Dictionary to generate a theme.js file from JSON tokens. However, the output is flat, and I want to preserve the nested structure of the tokens. Here’s an example: Input (tokens/colors.json):

{
  "colors": {
    "primary": {
      "light": { "$value": "#FFCC00" },
      "dark": { "$value": "#FF9900" }
    },
    "secondary": {
      "light": { "$value": "#00CCFF" },
      "dark": { "$value": "#0066FF" }
    }
  }
}

Desired Output (theme.js):

export const theme = {
  colors: {
    primary: {
      light: "#FFCC00",
      dark: "#FF9900"
    },
    secondary: {
      light: "#00CCFF",
      dark: "#0066FF"
    }
  }
};

Currently, my output is flat, like this:

export const ColorsPrimaryLight = "#FFCC00";
export const ColorsPrimaryDark = "#FF9900";
export const ColorsSecondaryLight = "#00CCFF";
export const ColorsSecondaryDark = "#0066FF";

I registered a custom javascript/nested format but couldn't make it work as expected. My current configuration simplifies the output, but it doesn't preserve the nesting.

const StyleDictionary = require('style-dictionary');

StyleDictionary.registerFormat({
  name: 'javascript/nested',
  formatter: ({ dictionary }) => {
    return `export const theme = ${JSON.stringify(dictionary.tokens, null, 2)};`;
  },
});
module.exports = {
  source: ['tokens/**/*.json'],
  platforms: {
    js: {
      transformGroup: 'js',
      buildPath: 'build/js/',
      files: [
        {
          destination: 'theme.js',
          format: 'javascript/nested',
        },
      ],
    },
  },
};

My package.json

{
  "name": "style",
  "version": "1.0.0",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "build": "node config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}

I get an error TypeError: StyleDictionary.extend is not a function

How can I configure Style Dictionary to generate a theme.js file with a nested structure like the one I want?

I'm using Style Dictionary to generate a theme.js file from JSON tokens. However, the output is flat, and I want to preserve the nested structure of the tokens. Here’s an example: Input (tokens/colors.json):

{
  "colors": {
    "primary": {
      "light": { "$value": "#FFCC00" },
      "dark": { "$value": "#FF9900" }
    },
    "secondary": {
      "light": { "$value": "#00CCFF" },
      "dark": { "$value": "#0066FF" }
    }
  }
}

Desired Output (theme.js):

export const theme = {
  colors: {
    primary: {
      light: "#FFCC00",
      dark: "#FF9900"
    },
    secondary: {
      light: "#00CCFF",
      dark: "#0066FF"
    }
  }
};

Currently, my output is flat, like this:

export const ColorsPrimaryLight = "#FFCC00";
export const ColorsPrimaryDark = "#FF9900";
export const ColorsSecondaryLight = "#00CCFF";
export const ColorsSecondaryDark = "#0066FF";

I registered a custom javascript/nested format but couldn't make it work as expected. My current configuration simplifies the output, but it doesn't preserve the nesting.

const StyleDictionary = require('style-dictionary');

StyleDictionary.registerFormat({
  name: 'javascript/nested',
  formatter: ({ dictionary }) => {
    return `export const theme = ${JSON.stringify(dictionary.tokens, null, 2)};`;
  },
});
module.exports = {
  source: ['tokens/**/*.json'],
  platforms: {
    js: {
      transformGroup: 'js',
      buildPath: 'build/js/',
      files: [
        {
          destination: 'theme.js',
          format: 'javascript/nested',
        },
      ],
    },
  },
};

My package.json

{
  "name": "style",
  "version": "1.0.0",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "build": "node config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}

I get an error TypeError: StyleDictionary.extend is not a function

How can I configure Style Dictionary to generate a theme.js file with a nested structure like the one I want?

• reactjs
• react-native
• styled-components
• style-dictionary

Share Improve this question Follow asked Nov 18, 2024 at 13:16 andoando 1

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

You can use the built-in javascript/object format. (you can also change the name of the variable using the name option)

current version (v4) reference

previous version reference

The documentation for javascript/object seems to be old, the output is in below format.

The default name of the variable is _styleDictionary, but you can customize it using below config:

{
  "options": {
    "name": "designTokens",
  },
  "destination": "fileName.js",
  "format": "javascript/object"
}

---

Sample output using javascript/object

var _styleDictionary = {
  "color": {
    "primary": {
      "$value": "#007bff",
      "filePath": "src/tokens/tokens.json",
      "isSource": true,
      "$type": "color",
      "original": {
        "$value": "#007bff",
        "$type": "color"
      },
      "name": "ColorPrimary",
      "attributes": {
        "category": "color",
        "type": "primary"
      },
      "path": [
        "color",
        "primary"
      ]
    },
  // more code followed

---

Additional references:

• Outputting to Different Formats with Style Dictionary
• javascript/object format question