Style Dictionary config.js – JSON not being transformed to CSS Variables successfully

I have a a JSON file that contains color and semantic theme variables, and an expected outcome I would like Style Dictionary to create in the CSS file using the provided “config.js” file.

Can you help me troubleshoot the config.js file so it successfully outputs the correct css variables?

Here’s the JSON content:

JSON file in my public repo

Here’s the expected outcome I would like in the CSS file, for the config.js file to propagate:

CSS file in my public repo

And here’s the content of my config.js file:

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

// Define the Style Dictionary configuration
StyleDictionary.registerFormat({
  name: 'custom/css',
  formatter(dictionary) {
    console.log(dictionary); // Log the dictionary object to check its properties
    let css = '';

    // Generate CSS content from the tokens
    css += `:root {n`;
    Object.keys(dictionary.properties).forEach((key) => {
      const value = dictionary.properties[key];
      css += `  --${key}: ${value};n`;
    });
    css += `}nn`;

    // Generate light theme CSS
    css += `[data-theme="light"] {n`;
    css += `  /* Light theme styles */n`;
    css += `}nn`;

    // Generate dark theme CSS
    css += `[data-theme="dark"] {n`;
    css += `  /* Dark theme styles */n`;
    css += `}n`;

    return css;
  },
});

// Define the source JSON file
StyleDictionary.extend({
  source: [path.join(__dirname, '../json/fds-tokens-structure.json')],
});

// Define the platforms object
const platforms = {
  css: {
    transformGroup: 'css',
    buildPath: 'build/css',
    files: [
      {
        destination: 'fds-tokens-color.css',
        format: 'custom/css',
        options: {
          outputReferences: true,
        },
      },
    ],
  },
};

// Build the Style Dictionary for all platforms
StyleDictionary.buildAllPlatforms({ platforms });

I’m getting this error when I run “style-dictionary build”:

  Object.keys(this.options.platforms).forEach(function (key) {
         ^

TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at Object.buildAllPlatforms (/Volumes/T5/GitHub/FDS/packages/tokens/style-dictionary/node_modules/style-dictionary/lib/buildAllPlatforms.js:30:10)
    at Object.<anonymous> (/Volumes/T5/GitHub/FDS/packages/tokens/style-dictionary/config.js:56:17)
    at Module._compile (node:internal/modules/cjs/loader:1376:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at require (node:internal/modules/helpers:176:18)
    at Object.extend (/usr/local/lib/node_modules/style-dictionary/lib/extend.js:95:15)

Thanks, and have a good weekend.