Adds density / corner radius build

jpmorganchase · Jan 16, 2024 · 2ae8308 · 2ae8308
1 parent 8571e74
commit 2ae8308
Showing 1 changed file with 62 additions and 12 deletions.
diff --git a/packages/export-variables-rest-api/src/index.js b/packages/export-variables-rest-api/src/index.js
@@ -1,6 +1,12 @@
 import * as https from "node:https";
-import { readFile, existsSync, mkdirSync, writeFileSync } from "node:fs";
-import { join } from "node:path";
+import {
+  readFile,
+  existsSync,
+  mkdirSync,
+  writeFileSync,
+  readdirSync,
+} from "node:fs";
+import { join, basename, extname } from "node:path";
 import { ProxyAgent } from "proxy-agent";
 import "dotenv/config";
 
@@ -195,13 +201,8 @@ function buildUsingStyleDictionary() {
   // Example: https://dbanks.design/blog/dark-mode-with-style-dictionary/#Token-structure
   // https://github.com/lukasoppermann/style-dictionary-utils?tab=readme-ov-file#-parsers
 
-  const commonSource = [
-    `${OUTPUT_FOLDER}/Raw/*.json`,
-    `${OUTPUT_FOLDER}/Foundations/*.json`,
-  ];
-
-  const getPlatform = (mode) => ({
-    web: {
+  const getModePlatform = (mode) => ({
+    web_mode: {
       transformGroup: "web",
       buildPath: `${SD_BUILD_DIR}/web/${mode}/`,
       files: [
@@ -214,7 +215,7 @@ function buildUsingStyleDictionary() {
         },
       ],
     },
-    ios: {
+    ios_mode: {
       transformGroup: "ios",
       buildPath: `${SD_BUILD_DIR}/ios/${mode}/`,
       files: [
@@ -228,15 +229,64 @@ function buildUsingStyleDictionary() {
       ],
     },
   });
+  const getDensityPlatform = (density, subfolder, cornerRadiusMode) => ({
+    web_density: {
+      // WARNING: `web` includes 'size/px' transform, but it only matches when: token.attributes.category === 'size'
+      // TODO: find out why size tokens, e.g. `--size-unit` is not getting `px`
+      transformGroup: "web",
+      buildPath: `${SD_BUILD_DIR}/web/${density}/${subfolder}/`,
+      files: [
+        {
+          destination: `${cornerRadiusMode}.css`,
+          format: "css/variables",
+          options: {
+            outputReferences: true,
+          },
+        },
+      ],
+    },
+    ios_density: {
+      transformGroup: "ios",
+      buildPath: `${SD_BUILD_DIR}/ios/${density}/${subfolder}/`,
+      files: [
+        {
+          destination: `${cornerRadiusMode}.swift`,
+          format: "ios-swift/enum.swift",
+          options: {
+            outputReferences: true,
+          },
+        },
+      ],
+    },
+  });
   console.log("Build using StyleDictionary into directory:", SD_BUILD_DIR);
 
   // Build both light and dark modes
   ["Light", "Dark"].forEach((mode) => {
     StyleDictionary.extend({
-      source: [`${OUTPUT_FOLDER}/Mode/${mode}.json`, ...commonSource],
-      platforms: getPlatform(mode),
+      source: [
+        `${OUTPUT_FOLDER}/Mode/${mode}.json`,
+        // `${OUTPUT_FOLDER}/Raw/*.json`,
+        `${OUTPUT_FOLDER}/Foundations/*.json`,
+      ],
+      platforms: getModePlatform(mode),
     }).buildAllPlatforms();
   });
+  const subfolder = "Corner Radius";
+  const subfolderModes = readdirSync(`${OUTPUT_FOLDER}/${subfolder}/`).map(
+    (f) => basename(f, extname(f))
+  );
+  ["HD", "MD", "LD", "TD"].forEach((density) => {
+    subfolderModes.forEach((sfMode) => {
+      StyleDictionary.extend({
+        source: [
+          `${OUTPUT_FOLDER}/Density/${density}.json`,
+          `${OUTPUT_FOLDER}/${subfolder}/${sfMode}.json`,
+        ],
+        platforms: getDensityPlatform(density, subfolder, sfMode),
+      }).buildAllPlatforms();
+    });
+  });
   console.log("StyleDictionary build done");
 }