build-tokens.cjs

const StyleDictionary = require("style-dictionary");
const {
  registerTransforms,
  transforms,
} = require("@tokens-studio/sd-transforms");
const { promises } = require("node:fs");

registerTransforms(StyleDictionary, {
  "ts/color/modifiers": {
    format: "hex",
  },
});
StyleDictionary.registerTransformGroup({
  name: "custom/tokens-studio",
  transforms: [...transforms, "attribute/cti", "name/cti/kebab"],
});

// filters only tokens originating from core.json
const coreFilter = (token) => token.filePath.endsWith("Core.json");
const coreWithoutFilter = (token) => !token.filePath.includes("Core.json");

// filters tokens by attributes.category (first key in the token hierachy, see attributes/cti transform for more info)
// must match per component name, in this repository we currently only have "button"
const componentFilter = (cat) => (token) => token.attributes.category === cat;

// for each component (currently only button), filter those specific component tokens and output them
// to the component folder where the component source code will live
const generateComponentFiles = (tokensCategories, theme, format, ext) => {
  return tokensCategories.map((cat) => ({
    destination: `${cat}/${cat}-${theme.toLowerCase()}.${ext}`,
    format: format,
    filter: coreWithoutFilter,
    options: {
      selector: ":host",
      fileHeader: "autoGeneratedFileHeader",
    },
  }));
};

async function run() {
  const $themes = JSON.parse(await promises.readFile("tokens/$themes.json"));
  const configs = $themes.map((theme) => ({
    source: Object.entries(theme.selectedTokenSets)
      .filter(([, val]) => val !== "disabled")
      .map(([tokenset]) => `tokens/${tokenset}.json`),
    fileHeader: {
      autoGeneratedFileHeader: () => {
        return [`Do not edit directly, this file was auto-generated`];
      },
    },
    platforms: {
      css: {
        transformGroup: "custom/tokens-studio",
        buildPath: "build/css/",
        files: [
          // core/semantic tokens, e.g. for application developer
          {
            destination: "style.css",
            format: "css/variables",
          },
          // component tokens, e.g. for design system developer
          ...generateComponentFiles(
            ["fiber"],
            theme.name,
            "css/variables",
            "css"
          ),
        ],
      },
      js: {
        transformGroup: "tokens-studio",
        buildPath: "build/js/",
        files: [
          {
            destination: "variables.js",
            format: "javascript/es6",
          },
          ...generateComponentFiles(
            ["fiber"],
            theme.name,
            "javascript/es6",
            "js"
          ),
        ],
      },
      JSON: {
        transformGroup: "tokens-studio",
        buildPath: "build/json/",
        files: [
          {
            destination: "variables.json",
            format: "json",
          },
          ...generateComponentFiles(["fiber"], theme.name, "json", "json"),
        ],
      },
      android: {
        transforms: [
          "attribute/cti",
          "name/cti/snake",
          "color/hex",
          "size/remToSp",
          "size/remToDp",
          "asset/path",
          "content/quote",
          "color/css"
        ],
        buildPath: "build/android/",
        files: [
          {
            destination: "style_dictionary_colors.xml",
            format: "android/resources",
          },
          ...generateComponentFiles(["fiber"], theme.name, "android/resources", "xml"),

        ],
      },
      scss:{
        transformGroup: "tokens-studio",
        buildPath: "build/scss/",
        files: [
          {
            destination: "variables.scss",
            format: "scss/variables",
          },
          ...generateComponentFiles(["fiber"], theme.name, "scss/variables", "scss"),
        ],
      }
    },
  }));

  configs.forEach((cfg) => {
    const sd = StyleDictionary.extend(cfg);
    sd.cleanAllPlatforms();
    sd.buildAllPlatforms();
  });
}
run();