Fix normalize bug

.changeset/thick-mayflies-thank.md

@@ -0,0 +1,7 @@
+---
+"@terrazzo/cli": patch
+"@terrazzo/parser": patch
+"@terrazzo/token-tools": patch
+---
+
+Fix bug in normalize where modes were skipped over

package.json

@@ -6,7 +6,6 @@
   "scripts": {
     "build": "turbo run build",
     "build:apps": "turbo run build:app",
-    "build:examples": "pnpm run -r --parallel --if-present --stream build:tokens",
     "changeset": "changeset",
     "inject-license": "node scripts/inject-license.js",
     "dev": "pnpm run -r --parallel --if-present dev",

packages/cli/src/normalize.ts

@@ -1,16 +1,19 @@
 import fs from 'node:fs';
 import path from 'node:path';
-import { type MemberNode, type ObjectNode, parse as parseJSON, print } from '@humanwhocodes/momoa';
-import { type Logger, defineConfig, parse, traverse } from '@terrazzo/parser';
+import { type MemberNode, type ObjectNode, type StringNode, parse as parseJSON, print } from '@humanwhocodes/momoa';
+import { type Logger, defineConfig, getObjMembers, parse, traverse } from '@terrazzo/parser';
+import { isAlias } from '@terrazzo/token-tools';
 import { cwd, printError } from './shared.js';
 
 export interface NormalizeOptions {
   logger: Logger;
   output: URL;
 }
 
-function find$value(member: MemberNode) {
-  return member.name.type === 'String' && member.name.value === '$value';
+function findMember(name: string) {
+  return function (member: MemberNode) {
+    return member.name.type === 'String' && member.name.value === name;
+  };
 }
 
 export async function normalizeCmd(filename: string, { logger, output }: NormalizeOptions) {
@@ -33,19 +36,38 @@ export async function normalizeCmd(filename: string, { logger, output }: Normali
     traverse(document, {
       enter(node, _parent, nodePath) {
         const token = tokens[nodePath.join('.')];
+
         if (!token || token.aliasOf || node.type !== 'Member' || node.value.type !== 'Object') {
           return;
         }
-        const $valueI = node.value.members.findIndex(find$value);
-        const newValueContainer = parseJSON(JSON.stringify({ $value: token.$value })).body as ObjectNode;
-        const newValueNode = newValueContainer.members.find(find$value)!;
+        const $valueI = node.value.members.findIndex(findMember('$value'));
 
         switch (token.$type) {
           case 'color':
           case 'dimension':
           case 'duration': {
             if (node.value.members[$valueI]!.value.type === 'String') {
+              const newValueContainer = parseJSON(JSON.stringify({ $value: token.$value })).body as ObjectNode;
+              const newValueNode = newValueContainer.members.find(findMember('$value'))!;
               node.value.members[$valueI] = newValueNode;
+
+              const { $extensions } = getObjMembers(node.value);
+              if ($extensions?.type === 'Object') {
+                const { mode } = getObjMembers($extensions);
+                if (mode?.type === 'Object') {
+                  for (let i = 0; i < mode.members.length; i++) {
+                    const modeName = (mode.members[i]!.name as StringNode).value;
+                    if (isAlias(token.mode[modeName]!)) {
+                      continue;
+                    }
+                    const newModeValueContainer = parseJSON(
+                      JSON.stringify({ [modeName]: token.mode[modeName]!.$value }),
+                    ).body as ObjectNode;
+                    const newModeValueNode = newModeValueContainer.members.find(findMember(modeName))!;
+                    mode.members[i] = newModeValueNode;
+                  }
+                }
+              }
             }
             break;
           }

packages/cli/test/fixtures/normalize/input.json

@@ -109,6 +109,60 @@
       "900": { "$value": "#522504" },
       "1000": { "$value": "#401b01" }
     },
+    "celery": {
+      "400": {
+        "$value": "rgb(39, 187, 54)",
+        "$extensions": {
+          "mode": {
+            "dark": "rgb(34, 184, 51)",
+            "darkest": "rgb(13, 171, 37)",
+            "light": "rgb(39, 187, 54)",
+            "lightest": "rgb(48, 193, 61)",
+            "middark": "rgb(45, 190, 58)",
+            "midlight": "rgb(7, 167, 33)"
+          }
+        }
+      },
+      "500": {
+        "$value": "rgb(7, 167, 33)",
+        "$extensions": {
+          "mode": {
+            "dark": "rgb(68, 202, 73)",
+            "darkest": "rgb(45, 191, 58)",
+            "light": "rgb(7, 167, 33)",
+            "lightest": "rgb(15, 172, 38)",
+            "middark": "rgb(78, 207, 80)",
+            "midlight": "rgb(0, 148, 19)"
+          }
+        }
+      },
+      "600": {
+        "$value": "rgb(0, 145, 18)",
+        "$extensions": {
+          "mode": {
+            "dark": "rgb(105, 220, 99)",
+            "darkest": "rgb(80, 208, 82)",
+            "light": "rgb(0, 145, 18)",
+            "lightest": "rgb(0, 150, 20)",
+            "middark": "rgb(112, 223, 104)",
+            "midlight": "rgb(0, 127, 15)"
+          }
+        }
+      },
+      "700": {
+        "$value": "rgb(0, 124, 15)",
+        "$extensions": {
+          "mode": {
+            "dark": "rgb(142, 235, 127)",
+            "darkest": "rgb(115, 224, 107)",
+            "light": "rgb(0, 124, 15)",
+            "lightest": "rgb(0, 128, 15)",
+            "middark": "rgb(146, 237, 130)",
+            "midlight": "rgb(0, 107, 15)"
+          }
+        }
+      }
+    },
     "background": {
       "brand": {
         "default": { "$value": "{color.brand.800}" },