jellyfish_designtokens/build.js

Ultimate design tokens from Jelly Fish Design System

const { registerTransforms } = require("@tokens-studio/sd-transforms");
const StyleDictionary = require("style-dictionary");
const { componentNames, configComponentsFiles } = require("./getCompsFiles.js");
const { brandNames, themesNames, configBrandFiles} = require("./getBrandFiles.js");
const { patternNamesArray, configPatternsFiles } = require("./getPatternsFiles.js");
const outputRefs = require("./outputRefs.js");

StyleDictionary.registerFormat({
  name: "outputRefs",
  formatter: outputRefs,
});

registerTransforms(StyleDictionary, {
  expand: { composition: false, typography: true, border: false, shadow: false },
  excludeParentKeys: false,
});

//Constant transformGroup used across platforms

StyleDictionary.registerTransformGroup({
  name: "jellyfish/web",
  transforms: [
    "name/cti/kebab",
    "attribute/cti",
    "ts/opacity",
    "ts/resolveMath",
    "ts/size/lineheight",
    "ts/typography/fontWeight",
    "ts/size/css/letterspacing",
    "ts/typography/css/fontFamily",
    "ts/typography/css/shorthand",
    "ts/border/css/shorthand",
    "ts/shadow/css/shorthand",
    "ts/color/css/hexrgba",
    "ts/color/modifiers",
  ],
});

//Global Tokens Builder Configuration

const Global = StyleDictionary.extend({
  source: ["figma/GLOBAL/*.+(json)"],
  platforms: {
    scss: {
      transformGroup: "jellyfish/web",
      buildPath: "dist/global/",
      files: [{ destination: "global.css", format: "css/variables" }],
    },
  },
});

//Patterns Files Builder Configuration

const Patterns = StyleDictionary.extend({
  include: ["figma/**/*.+(json)"],
  source: ["figma/PATTERNS/**/*.+(json)"],
  platforms: {
    scss: {
      transformGroup: "jellyfish/web",
      buildPath: "dist/patterns/",
      files: configPatternsFiles(patternNamesArray),
    },
  },
});

//Components Files Builder Configuration

const Comps = StyleDictionary.extend({
  source: ["figma/**/*.+(json)"],
  platforms: {
    scss: {
      transformGroup: "jellyfish/web",
      buildPath: "dist/comps/",
      files: configComponentsFiles(componentNames),
    },
  },
});

//Running Builders

console.log("\n==============================================");
console.log("\nBuilding Global Tokens");

Global.cleanAllPlatforms();
Global.buildAllPlatforms();

brandNames.map(function (brand) {
  themesNames.map(function (themes) {
    console.log("\n==============================================");
    console.log(`\nProcessing: [${themes}] [${brand}]`);

    const Brands = StyleDictionary.extend(configBrandFiles(brand, themes));

    Brands.buildAllPlatforms();
  });
});

console.log("\n==============================================");
console.log("\nBuilding Patterns Tokens");

Patterns.cleanAllPlatforms();
Patterns.buildAllPlatforms();

console.log("\n==============================================");
console.log("\nBuilding Component Tokens");

Comps.cleanAllPlatforms();
Comps.buildAllPlatforms();