@servicetitan/hammer-token 2.5.1 → 3.0.0

package/config.js

@@ -1,504 +1,128 @@
-/* eslint-disable @typescript-eslint/no-require-imports */
-const StyleDictionary = require("style-dictionary");
 const fs = require("fs-extra");
-const {
-  cssUtilsFormatter,
-  getVarValue,
-  generateBorderClasses,
-  generateColorClasses,
-  generateFontClasses,
-  generateSpacingClasses,
-} = require("./src/utils/css-utils-format-utils");
-
-StyleDictionary.registerFormat({
-  name: `custom/SCSSVariable`,
-  formatter: function ({ dictionary }) {
-    return dictionary.allTokens
-      .map((token) => {
-        const value = token.value;
-        const name = `${token.name.replace("-default", "")}`;
-        if (token.name.includes("font-family"))
-          return `$${name}: var(--${name}, ${value});`;
-        if (token.attributes.appearance) {
-          return `$${name}: var(--${name}, ${value});`;
-        }
-        return `$${name}: ${value};`;
-      })
-      .join(`\n`);
-  },
-});
-
-const nonColorTokens = [
-  "border-radius",
-  "font-family",
-  "font-weight",
-  "size",
-  "width",
-];
-
-StyleDictionary.registerFormat({
-  name: `custom/variables-map`,
-  formatter: function ({ dictionary }) {
-    const light = dictionary.allTokens
-      .filter((token) => {
-        let isColor = true;
-        nonColorTokens.forEach((t) => {
-          if (token.name.includes(t)) {
-            isColor = false;
-          }
-        });
-        return isColor;
-      })
-      .map((token) => {
-        const value = token.value;
-        const name = `${token.name.replace("-default", "")}`;
-        return `  ${name}: ${value},`;
-      })
-      .join(`\n`);
-
-    const dark = dictionary.allTokens
-      .filter((token) => {
-        let isColor = true;
-        nonColorTokens.forEach((t) => {
-          if (token.name.includes(t)) {
-            isColor = false;
-          }
-        });
-        return isColor;
-      })
-      .map((token) => {
-        const value = token.value;
-        const name = `${token.name.replace("-default", "")}`;
-        if (token.attributes.appearance) {
-          return `  ${name}: ${token.attributes.appearance.dark.value},`;
-        }
-        return `  ${name}: ${value},`;
-      })
-      .join(`\n`);
+const path = require("path");
+const { registerTransforms } = require("./src/utils/sd-transforms");
+const { registerFormats } = require("./src/utils/sd-formats");
 
-    const nonColor = dictionary.allTokens
-      .filter((token) => {
-        let isColor = true;
-        nonColorTokens.forEach((t) => {
-          if (token.name.includes(t)) {
-            isColor = false;
-          }
-        });
-        return !isColor;
-      })
-      .map((token) => {
-        const value = token.value;
-        const name = `${token.name.replace("-default", "")}`;
-        if (token.name.includes("font-family")) return `  ${name}: "${value}",`;
-        return `  ${name}: ${value},`;
-      })
-      .join(`\n`);
-
-    return [
-      `$light: (`,
-      light,
-      `);`,
-      `$dark: (`,
-      dark,
-      `);`,
-      `$nonColor: (`,
-      nonColor,
-      `);`,
-    ].join(`\n`);
-  },
-});
-
-StyleDictionary.registerFormat({
-  name: `custom/primitive-variables`,
-  formatter: function ({ dictionary }) {
-    const vars = dictionary.allTokens
-      .map((token) => {
-        const value = token.value;
-        const name = `${token.name.replace("-default", "")}`;
-        if (token.name.includes("font-family")) return `  ${name}: "${value}",`;
-        return `  ${name}: ${value},`;
-      })
-      .join(`\n`);
-
-    return [`$token: (`, vars, `);`].join(`\n`);
-  },
-});
-
-StyleDictionary.registerFormat({
-  name: `custom/es6`,
-  formatter: function ({ dictionary }) {
-    const light = dictionary.allTokens
-      .filter((token) => !!token.attributes.appearance)
-      .map((token) => {
-        const value = JSON.stringify(token.value);
-        const name = token.name.replace("Default", "");
-        return `\t${name}: ${value}`;
-      })
-      .join(`,\n`);
-    const dark = dictionary.allTokens
-      .filter((token) => !!token.attributes.appearance)
-      .map((token) => {
-        const value = JSON.stringify(token.attributes.appearance.dark.value);
-        const name = token.name.replace("Default", "");
-        return `\t${name}: ${value}`;
-      })
-      .join(`,\n`);
-    const common = dictionary.allTokens
-      .filter((token) => !token.attributes.appearance)
-      .map((token) => {
-        const value = JSON.stringify(token.value);
-        const name = token.name.replace("Default", "");
-        return `\t${name}: ${value}`;
-      })
-      .join(`,\n`);
-    return `export const common = {\n${common}\n}\nexport const light = {\n${light}\n}\nexport const dark = {\n${dark}\n}\n`;
-  },
-});
-
-StyleDictionary.registerFormat({
-  name: `custom/es6Variable`,
-  formatter: function ({ dictionary }) {
-    return dictionary.allTokens
-      .map((token) => {
-        const value = token.value;
-        const name = `${token.name.replace("Default", "")}`;
-        if (token.attributes.appearance) {
-          return `export const ${name} = {
-  value: "${value}",
-  attributes: {
-    appearance: {
+// Prefix for CSS variable names (e.g., --a2-border-radius-medium)
+const CSS_VAR_PREFIX = "a2-";
+const {
+  createPrimitiveConfig,
+  createThemeConfig,
+  createComponentConfig,
+} = require("./src/utils/sd-build-configs");
+
+// Use dynamic import for Style Dictionary v5 (ESM)
+(async () => {
+  const StyleDictionary = (await import("style-dictionary")).default;
+  const { resolveReferences, usesReferences } =
+    await import("style-dictionary/utils");
+
+  // Register transforms and formats
+  registerTransforms(StyleDictionary);
+  registerFormats(
+    StyleDictionary,
+    usesReferences,
+    resolveReferences,
+    CSS_VAR_PREFIX,
+  );
+
+  // Build primitive tokens
+  const sdPrimitive = new StyleDictionary(createPrimitiveConfig());
+  await sdPrimitive.buildAllPlatforms();
+
+  // Build theme tokens (includes primitives, excludes components)
+  const sdTheme = new StyleDictionary(createThemeConfig());
+  await sdTheme.buildAllPlatforms();
+
+  // Build component tokens
+  const sdComponent = new StyleDictionary(createComponentConfig());
+  await sdComponent.buildAllPlatforms();
+
+  // Post-build: Generate index files
+  const buildWebPath = path.join(process.cwd(), "build/web");
+  const buildCorePath = path.join(buildWebPath, "core");
+  const indexJsPath = path.join(buildWebPath, "index.js");
+  const coreIndexJsPath = path.join(buildCorePath, "index.js");
+
+  const coreIndexJsContent = `import * as primitive from './primitive';
+import * as semantic from './semantic';
+import * as component from './component';
+const name = 'core';
+export { primitive, semantic, component, name };
+`;
+
+  const indexJsContent = `import * as core from './core';
+export { core };
+`;
+
+  // Type definitions
+  const typesContent = `export type TokenObj = {
+  value: string;
+  extensions?: {
+    appearance?: {
       dark: {
-        value: "${token.attributes.appearance.dark.value}"
-      }
+        value: string;
+      };
+    };
+  };
+};
+
+export type Token = {
+  primitive: any;
+  semantic: any;
+  component: any;
+  name: string;
+};
+`;
+
+  const indexDtsContent = `export * from './types';
+import * as core from './core';
+export { core };
+`;
+
+  const coreIndexDtsContent = `export * from '../types';
+import * as primitive from './primitive';
+import * as semantic from './semantic';
+import * as component from './component';
+export declare const name: string;
+export { primitive, semantic, component };
+`;
+
+  await fs.ensureDir(buildWebPath);
+  await fs.ensureDir(buildCorePath);
+
+  await fs.writeFile(coreIndexJsPath, coreIndexJsContent);
+  await fs.writeFile(indexJsPath, indexJsContent);
+
+  // Write type definition files
+  await fs.writeFile(path.join(buildWebPath, "types.d.ts"), typesContent);
+  await fs.writeFile(path.join(buildWebPath, "index.d.ts"), indexDtsContent);
+  await fs.writeFile(
+    path.join(buildCorePath, "index.d.ts"),
+    coreIndexDtsContent,
+  );
+
+  // Generate .d.ts for each token file based on their .js exports
+  const tokenFiles = ["primitive", "semantic", "component"];
+  for (const file of tokenFiles) {
+    const jsPath = path.join(buildCorePath, `${file}.js`);
+    const jsContent = await fs.readFile(jsPath, "utf8");
+
+    // Extract export names
+    const exportRegex = /export const (\w+) = \{/g;
+    const exports = [];
+    let match;
+    while ((match = exportRegex.exec(jsContent)) !== null) {
+      exports.push(match[1]);
     }
-  }
-};`;
-        }
-        return `export const ${name} = { value: "${value}" };`;
-      })
-      .join(`\n`);
-  },
-});
-
-const CSS_UTILS_PREFIXES = ["", "a2-"];
-
-for (const prefix of CSS_UTILS_PREFIXES) {
-  StyleDictionary.registerFormat({
-    name: `custom/CSSUtils/${prefix}All`,
-    formatter: function ({ dictionary }) {
-      const colorTokens = dictionary.allTokens
-        .map((token) => {
-          const value = getVarValue(dictionary, token);
-          const name = `${token.name.replace("Default", "")}`;
-
-          if (
-            // name.startsWith("color") || // primitives
-            name.startsWith("status-color") ||
-            name.startsWith("foreground-color") ||
-            name.startsWith("background-color") ||
-            name.startsWith("overlay-color")
-          ) {
-            const darkValue = getVarValue(dictionary, token, { isDark: true });
-            return generateColorClasses(name, value, { darkValue, prefix });
-          }
-          if (name.startsWith("border-color")) {
-            const darkValue = getVarValue(dictionary, token, { isDark: true });
-            return generateBorderClasses(name, value, { darkValue, prefix });
-          }
-          return null;
-        })
-        .flat()
-        .filter((t) => t != null)
-        .map((t) => `${t}`)
-        .sort((a, b) => a.localeCompare(b))
-        .join(`\n`);
-      const nonColorTokens = dictionary.allTokens
-        .map((token) => {
-          const value = getVarValue(dictionary, token);
-          const name = `${token.name.replace("Default", "")}`;
-
-          if (name.startsWith("border")) {
-            return generateBorderClasses(name, value, { prefix });
-          }
-          if (name.startsWith("typography")) {
-            return generateFontClasses(name, value, { prefix });
-          }
-          if (name.startsWith("size")) {
-            return generateSpacingClasses(name, value, { prefix });
-          }
-          return null;
-        })
-        .flat()
-        .filter((t) => t != null)
-        .map((t) => `${t}`)
-        .sort((a, b) => a.localeCompare(b))
-        .join(`\n`);
 
-      const colorFallbackTokens = dictionary.allTokens
-        .map((token) => {
-          const value = getVarValue(dictionary, token);
-          const name = `${token.name.replace("Default", "")}`;
+    const dtsContent = `import { TokenObj } from '../types';
 
-          if (
-            name.startsWith("status-color") ||
-            name.startsWith("foreground-color") ||
-            name.startsWith("background-color") ||
-            name.startsWith("overlay-color")
-          ) {
-            return generateColorClasses(name, value, { prefix });
-          }
-          if (name.startsWith("border-color")) {
-            return generateBorderClasses(name, value, { prefix });
-          }
-          return null;
-        })
-        .flat()
-        .filter((t) => t != null)
-        .map((t) => `${t}`)
-        .sort((a, b) => a.localeCompare(b))
-        .join(`\n`);
-
-      // Manually adding .sr-only
-      const withSr = nonColorTokens.concat(
-        "\n",
-        ".sr-only {border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding-block: 0; padding-inline: 0; position: absolute; white-space: nowrap; width: 1px;}",
-      );
-
-      return `@layer starter, reset, base, state, application;
-
-${withSr}
-${colorFallbackTokens}
-
-@supports (color: light-dark(#fff, #000)) {
-  ${colorTokens.replaceAll("\n", "\n  ")}
-}
-
-@layer application {
-    ${withSr.replaceAll("\n", "\n    ")}
-    ${colorFallbackTokens.replaceAll("\n", "\n    ")}
-    
-    @supports (color: light-dark(#fff, #000)) {
-      ${colorTokens.replaceAll("\n", "\n      ")}
-    }
-}`;
-    },
-  });
-
-  StyleDictionary.registerFormat({
-    name: `custom/CSSUtils/${prefix}Borders`,
-    formatter: function ({ dictionary }) {
-      return cssUtilsFormatter(dictionary, generateBorderClasses, {
-        hasDark: true,
-        prefix,
-      });
-    },
-  });
-
-  StyleDictionary.registerFormat({
-    name: `custom/CSSUtils/${prefix}Colors`,
-    formatter: function ({ dictionary }) {
-      return cssUtilsFormatter(dictionary, generateColorClasses, {
-        hasDark: true,
-        prefix,
-      });
-    },
-  });
-
-  StyleDictionary.registerFormat({
-    name: `custom/CSSUtils/${prefix}Fonts`,
-    formatter: function ({ dictionary }) {
-      return cssUtilsFormatter(dictionary, generateFontClasses, { prefix });
-    },
-  });
-
-  StyleDictionary.registerFormat({
-    name: `custom/CSSUtils/${prefix}Spacing`,
-    formatter: function ({ dictionary }) {
-      return cssUtilsFormatter(dictionary, generateSpacingClasses, { prefix });
-    },
-  });
-}
-
-const getDirectories = (source) =>
-  fs
-    .readdirSync(source, { withFileTypes: true })
-    .filter((dirent) => dirent.isDirectory())
-    .map((dirent) => dirent.name);
-
-const themes = getDirectories(`src/theme`);
-
-themes.forEach((theme) => {
-  StyleDictionary.extend({
-    source: [`src/theme/${theme}/*.js`, `src/theme/${theme}/component/*.js`],
-    include: ["src/global/primitive/*.js"],
-    platforms: {
-      css: {
-        transformGroup: "css",
-        buildPath: `build/web/${theme}/css-utils/`,
-        files: CSS_UTILS_PREFIXES.flatMap((prefix) => [
-          {
-            destination: `${prefix}utils.css`,
-            format: `custom/CSSUtils/${prefix}All`,
-          },
-          {
-            destination: `${prefix}border.css`,
-            format: `custom/CSSUtils/${prefix}Borders`,
-            filter: function (token) {
-              return token.filePath.includes("border");
-            },
-          },
-          {
-            destination: `${prefix}color.css`,
-            format: `custom/CSSUtils/${prefix}Colors`,
-            filter: function (token) {
-              return (
-                token.filePath.includes("primitive/color") ||
-                token.name.includes("color")
-              );
-            },
-          },
-          {
-            destination: `${prefix}font.css`,
-            format: `custom/CSSUtils/${prefix}Fonts`,
-            filter: function (token) {
-              return (
-                token.filePath.includes("primitive/font") ||
-                token.filePath.includes("typography")
-              );
-            },
-          },
-          {
-            destination: `${prefix}spacing.css`,
-            format: `custom/CSSUtils/${prefix}Spacing`,
-            filter: function (token) {
-              return token.filePath.startsWith("src/global/primitive/size");
-            },
-          },
-        ]),
-      },
-      scss: {
-        transformGroup: "scss",
-        buildPath: `build/web/${theme}/`,
-        files: [
-          {
-            destination: "primitive.scss",
-            format: "custom/SCSSVariable",
-            filter: function (token) {
-              return token.filePath.startsWith("src/global/primitive");
-            },
-          },
-          {
-            destination: "primitive-variables.scss",
-            format: "custom/primitive-variables",
-            filter: function (token) {
-              return token.filePath.startsWith("src/global/primitive");
-            },
-          },
-          {
-            destination: "semantic.scss",
-            format: "custom/SCSSVariable",
-            filter: function (token) {
-              return (
-                token.filePath.startsWith(`src/theme/${theme}`) &&
-                !token.filePath.startsWith(`src/theme/${theme}/component`)
-              );
-            },
-          },
-          {
-            destination: "semantic-variables.scss",
-            format: "custom/variables-map",
-            filter: function (token) {
-              return (
-                token.filePath.startsWith(`src/theme/${theme}`) &&
-                !token.filePath.startsWith(`src/theme/${theme}/component`)
-              );
-            },
-          },
-          {
-            destination: "component.scss",
-            format: "custom/SCSSVariable",
-            filter: function (token) {
-              return token.filePath.startsWith(`src/theme/${theme}/component`);
-            },
-          },
-          {
-            destination: "component-variables.scss",
-            format: "custom/variables-map",
-            filter: function (token) {
-              return token.filePath.startsWith(`src/theme/${theme}/component`);
-            },
-          },
-        ],
-      },
-      tsLight: {
-        transformGroup: "js",
-        buildPath: `build/web/${theme}/`,
-        files: [
-          {
-            format: "custom/es6Variable",
-            destination: "primitive.js",
-            filter: function (token) {
-              return token.filePath.startsWith("src/global/primitive");
-            },
-          },
-          {
-            format: "custom/es6",
-            destination: "raw.js",
-            filter: function (token) {
-              return (
-                token.filePath.startsWith(`src/theme/${theme}`) &&
-                !token.filePath.startsWith(`src/theme/${theme}/component`)
-              );
-            },
-          },
-          {
-            format: "custom/es6Variable",
-            destination: "semantic.js",
-            filter: function (token) {
-              return (
-                token.filePath.startsWith(`src/theme/${theme}`) &&
-                !token.filePath.startsWith(`src/theme/${theme}/component`)
-              );
-            },
-          },
-          {
-            format: "custom/es6Variable",
-            destination: "component.js",
-            filter: function (token) {
-              return token.filePath.startsWith(`src/theme/${theme}/component`);
-            },
-          },
-        ],
-      },
-    },
-  }).buildAllPlatforms();
-});
-
-console.log("\n==============================================");
-console.log("Building index files...\n");
-const mainJS = fs.createWriteStream(`build/web/index.js`);
-
-const mainType = fs.createWriteStream(`build/web/index.d.ts`);
-mainType.write(`import Token from '../../type/types';\n`);
-
-themes.forEach((theme) => {
-  const indexJS = fs.createWriteStream(`build/web/${theme}/index.js`);
-  indexJS.write(`import * as semantic from './semantic';\n`);
-  indexJS.write(`import * as primitive from './primitive';\n`);
-  indexJS.write(`import * as component from './component';\n`);
-  indexJS.write(`const name = '${theme}';\n`);
-  indexJS.write(`export { primitive, semantic, component, name };\n`);
-  indexJS.end();
-  mainType.write(`declare const ${theme}: Token;\n`);
-  mainJS.write(`import * as ${theme} from './${theme}';\n`);
+${exports.map((name) => `export declare const ${name}: TokenObj;`).join("\n")}
+`;
+    await fs.writeFile(path.join(buildCorePath, `${file}.d.ts`), dtsContent);
+  }
+})().catch((error) => {
+  console.error("Error building tokens:", error);
+  process.exit(1);
 });
-
-mainType.write(`export { Token }\n`);
-mainType.write(`export { ${themes.join(", ")} }\n`);
-mainType.end();
-
-mainJS.write(`export * as Token from '../../type/types';\n`);
-mainJS.write(`export { ${themes.join(", ")} };\n`);
-mainJS.end();
-console.log(`Index built!`);
-console.log("==============================================\n");

package/eslint.config.mjs

@@ -1,4 +1,14 @@
 import baseConfig from "../../eslint.base.config.mjs";
 import eslintConfigPrettier from "eslint-config-prettier/flat";
 
-export default [...baseConfig, eslintConfigPrettier];
+export default [
+  ...baseConfig,
+  eslintConfigPrettier,
+  {
+    // Allow require() in Node.js utility scripts
+    files: ["src/utils/**/*.js", "config.js"],
+    rules: {
+      "@typescript-eslint/no-require-imports": "off",
+    },
+  },
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servicetitan/hammer-token",
-  "version": "2.5.1",
+  "version": "3.0.0",
   "description": "",
   "main": "build/web/index.js",
   "types": "build/web/index.d.ts",
@@ -11,15 +11,25 @@
     "commander": "^12.1.0"
   },
   "devDependencies": {
+    "@vitest/coverage-v8": "^3.0.8",
     "fs-extra": "^11.2.0",
-    "style-dictionary": "^3",
-    "tinycolor2": "^1.6.0"
+    "style-dictionary": "^5.1.1",
+    "tinycolor2": "^1.6.0",
+    "typescript": "^5.0.0",
+    "vitest": "^3.2.4"
   },
   "scripts": {
-    "build": "node ./config.js",
+    "build": "pnpm clean && node ./config.js",
     "dev": "pnpm build && chokidar \"./src\" -c \"pnpm build\"",
     "clean": "rimraf build .turbo",
     "lint": "eslint .",
-    "nuke": "pnpm clean && rimraf node_modules"
+    "test": "vitest run --coverage.enabled=true --coverage.reporter=text",
+    "nuke": "pnpm clean && rimraf node_modules",
+    "figma:sync": "node src/utils/figma/sync-main.js sync",
+    "figma:sync:file": "node src/utils/figma/sync-main.js file",
+    "figma:test": "node src/utils/figma/sync-main.js test",
+    "figma:test:file": "node src/utils/figma/sync-main.js test:file",
+    "figma:validate": "node src/utils/figma/sync-main.js validate",
+    "figma:get-token": "node src/utils/figma/get-token.js"
   }
 }