@servicetitan/hammer-token 2.5.1 → 3.0.0

package/src/utils/sd-transforms.js

@@ -0,0 +1,165 @@
+/**
+ * Style Dictionary transform registrations
+ * @module sd-transforms
+ */
+const {
+  getDtcgValue,
+  getTokenType,
+  isCompositeColor,
+  isDimensionValue,
+  isGradientValue,
+} = require("./token-helpers");
+
+/**
+ * Registers all custom Style Dictionary transforms for DTCG token format.
+ * This includes transforms for token names, values, cubic-bezier functions, and color opacity.
+ * Also registers a "dtcg" transform group that combines all these transforms.
+ * @param {import('style-dictionary').default} StyleDictionary - The Style Dictionary class instance
+ * @returns {void}
+ * @example
+ * const StyleDictionary = require('style-dictionary');
+ * registerTransforms(StyleDictionary);
+ */
+const registerTransforms = (StyleDictionary) => {
+  /**
+   * Transform: dtcg/name
+   * Generates a clean token name from the token path, filtering out $schema
+   * and other $-prefixed segments.
+   */
+  StyleDictionary.registerTransform({
+    name: "dtcg/name",
+    type: "name",
+    transform: (token) => {
+      const tokenPath =
+        token.path || token.original?.path || token.pathSegments;
+
+      if (Array.isArray(tokenPath) && tokenPath.length > 0) {
+        const filteredPath = tokenPath.filter(
+          (segment) =>
+            segment !== "$schema" && !String(segment).startsWith("$"),
+        );
+        if (filteredPath.length > 0) {
+          return filteredPath.join("-");
+        }
+      }
+      if (token.name && typeof token.name === "string") {
+        return token.name
+          .replace(/\$schema/g, "")
+          .replace(/-+/g, "-")
+          .replace(/^-|-$/g, "");
+      }
+      return "unknown";
+    },
+  });
+
+  /**
+   * Transform: dtcg/value
+   * Extracts the DTCG $value from a token, handling dimension objects with value/unit.
+   */
+  StyleDictionary.registerTransform({
+    name: "dtcg/value",
+    type: "value",
+    transform: (token) => {
+      const value = getDtcgValue(token);
+
+      // Handle new format { value, unit }
+      if (isDimensionValue(value)) {
+        return `${value.value}${value.unit}`;
+      }
+      return value;
+    },
+  });
+
+  /**
+   * Transform: dtcg/cubic-bezier
+   * Converts cubicBezier token arrays to CSS cubic-bezier() function strings.
+   */
+  StyleDictionary.registerTransform({
+    name: "dtcg/cubic-bezier",
+    type: "value",
+    matcher: (token) => getTokenType(token) === "cubicBezier",
+    transform: (token) => {
+      const value = getDtcgValue(token);
+      if (Array.isArray(value)) {
+        return `cubic-bezier(${value.join(", ")})`;
+      }
+      return value;
+    },
+  });
+
+  /**
+   * Transform: dtcg/color-opacity
+   * Handles composite color tokens that have separate color and alpha values.
+   */
+  StyleDictionary.registerTransform({
+    name: "dtcg/color-opacity",
+    type: "value",
+    matcher: (token) =>
+      getTokenType(token) === "color" && isCompositeColor(getDtcgValue(token)),
+    transform: (token) => getDtcgValue(token),
+  });
+
+  /**
+   * Transform: dtcg/gradient
+   * Passes gradient token arrays through unchanged so the format layer can
+   * assemble the final linear-gradient() string with CSS var() chains.
+   */
+  StyleDictionary.registerTransform({
+    name: "dtcg/gradient",
+    type: "value",
+    matcher: (token) =>
+      getTokenType(token) === "gradient" &&
+      isGradientValue(getDtcgValue(token)),
+    transform: (token) => getDtcgValue(token),
+  });
+
+  /**
+   * Preprocessor: dtcg/set-token-names
+   * Sets token.name to the full hyphenated path (minus $-prefixed segments) on every leaf
+   * token before transforms run. This ensures SD's collision detection uses the real unique
+   * name even for tokens that are deferred due to unresolvable references — those tokens
+   * skip the transform pipeline and would otherwise keep the last-segment default name
+   * (e.g. "color"), causing false collision warnings.
+   */
+  StyleDictionary.registerPreprocessor({
+    name: "dtcg/set-token-names",
+    preprocessor: (tokens) => {
+      function walk(obj, path = []) {
+        for (const [key, val] of Object.entries(obj)) {
+          if (val && typeof val === "object") {
+            if (val["$value"] !== undefined) {
+              const filtered = [...path, key].filter(
+                (s) => !String(s).startsWith("$"),
+              );
+              val.name = filtered.join("-");
+            } else {
+              walk(val, [...path, key]);
+            }
+          }
+        }
+      }
+      walk(tokens);
+      return tokens;
+    },
+  });
+
+  /**
+   * Transform Group: dtcg
+   * Combines all DTCG-related transforms plus the built-in color/css transform.
+   */
+  StyleDictionary.registerTransformGroup({
+    name: "dtcg",
+    transforms: [
+      "dtcg/name",
+      "dtcg/value",
+      "dtcg/cubic-bezier",
+      "dtcg/color-opacity",
+      "dtcg/gradient",
+      "color/css",
+    ],
+  });
+};
+
+module.exports = {
+  registerTransforms,
+};