build.js

// If you are unfamiliar with Style Dictionary take a look at the docs:
// https://styledictionary.com
const StyleDictionary = require('style-dictionary');

// This is a custom name transform for Style Dictionary
// It will take the token's object path and create a dot-separated string
// for example: activityBar.background or comment.line
StyleDictionary.registerTransform({
  name: 'vsCodeName',
  type: 'name',
  transformer: (token) => {
    // syntax tokens we remove the first part of the object path
    if (token.path[0] === 'syntax') {
      // This allows you to have tokens at multiple levels
      // like `comment` and `comment.line`
      if (token.name === '*') {
        // removes the first and last parts of the path
        return token.path.slice(1,-1).join('.')
      } else {
        // removes the first part of the path which would be 'syntax'
        return token.path.slice(1).join('.')
      }
    } else {
      // Used for application colors
      return token.path.join('.');
    }
  }
});

// Add a custom format that will generate the VSCode theme JSON
StyleDictionary.registerFormat({
  name: 'vsCodeTheme',
  formatter: (dictionary, config) => {
    // VSCode theme JSON files have this structure
    const theme = {
      "name": `Nu Disco ${config.themeType}`,
      "type": config.themeType,
      "colors": {},
    }
    
    // Filter out the design tokens we don't want to add to the
    // 'colors' object. This includes core colors defined in tokens/core.json5
    // and syntax tokens defined in tokens/syntax
    dictionary.allProperties.filter((token) => {
      return !['color','syntax'].includes(token.path[0])
    }).forEach((token) => {
      // Add each token to the colors object, the name is generated by the custom
      // transform defined above
      theme.colors[token.name] = token.value;
    });
    
    // Map the syntax styles
    theme.tokenColors = dictionary.allProperties.filter((token) => {
      return token.path[0] === 'syntax'
    }).map((token) => ({
      scope: token.name,
      settings: {
        foreground: token.value,
        fontStyle: token.fontStyle,
      }
    }));
    
    // Style Dictionary formats expect a string that will be then written to a file
    return JSON.stringify(theme, null, 2);
  }
});

// Iterate over each theme type and build with style dictionary
// We will use the theme type to include design tokens from that theme
// and also use it to create separate vs code theme files
[`dark`, `light`].forEach((themeType) => {
  StyleDictionary.extend({
    // Style Dictionary will find all files defined in source and do a deep merge
    // on them. 
    source: [
      // This is the core color palette
      `tokens/core.json5`,
      // These directories are where we keep theme specific tokens
      `tokens/${themeType}/*.json5`,
      // These are like component tokens, they reference theme type tokens
      `tokens/application/*.json5`,
      `tokens/syntax/*.json5`
    ],
    platforms: {
      vscode: {
        // Directory to build files to
        buildPath: `build/`,
        // Adding a custom attribute on the platform so we can use it in
        // the custom format
        themeType: themeType,
        // The name of the custom transform we defined above
        transforms: [`vsCodeName`],
        files: [{
          // The path the file will be created at. Make sure this matches
          // the file paths defined in the package.json
          destination: `nu-disco-${themeType}.color-theme.json`,
          // The name of the custom format defined above
          format: `vsCodeTheme`
        }]
      }
    }
  }).buildAllPlatforms();
});