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:
Here’s the expected outcome I would like in the CSS file, for the config.js file to propagate:
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.