Merge pull request #3397 from hashicorp/project-solar/phase-1/HDS-5668/07c_modes-validation

[Project Solar / Phase 1 / Engineering Follow-ups] Improve validation for `$modes`

Author: didoo

packages/tokens/package.json

@@ -37,6 +37,7 @@
     "@types/tinycolor2": "^1.4.6",
     "@typescript-eslint/eslint-plugin": "^8.18.1",
     "@typescript-eslint/parser": "^8.18.1",
+    "chalk": "^5.4.1",
     "eslint": "^8.57.1",
     "fs-extra": "^11.2.0",
     "lodash-es": "^4.17.21",

packages/tokens/scripts/build.ts

@@ -8,6 +8,7 @@ import StyleDictionary from 'style-dictionary';
 import type { DesignToken, PlatformConfig } from 'style-dictionary/types';
 
 import tinycolor from 'tinycolor2';
+import chalk from 'chalk';
 
 import fs from 'fs-extra';
 import path from 'path';
@@ -36,27 +37,33 @@ const distFolder = path.resolve(__dirname, '../dist');
 for (const mode of modes) {
   StyleDictionary.registerPreprocessor({
     name: `replace-value-for-mode-${mode}`,
-    preprocessor: (dictionary, _options) => {
+    preprocessor: (dictionary, options) => {
+      // we get the `buildPath` from the `PlatformConfig` option
+      const buildPath = (options as any).buildPath;
       // recursively traverse token objects and replace the `$value` with the corresponding colocated `$modes` theme value
       // note: the `slice` is always an object (a token or a parent group)
-      function replaceModes(slice: DesignToken) {
+      function replaceModes(slice: DesignToken, tokenPath: string[]) {
         if (slice.$modes) {
           if (mode in slice.$modes) {
+            // extra validation to catch instances where the `default` mode value is different from the `$value`
+            if (mode === 'default' && slice.$modes[mode] !== slice.$value) {
+              console.warn(`⚠️ ${chalk.yellow.bold('WARNING')} - Found themed 'default' token '{${path.join('.')}}' with value different than '$value' (\`${slice.$modes[mode]}\` instead of the expected \`${slice.$value}\`) - BuildPath: ${buildPath} - File: ${slice.filePath}`);
+            }
             slice.$value = slice.$modes[mode];
           } else {
-            // TODO! decide if we want to throw here (and test if it works, by removing a value from one of the test files) - see: https://hashicorp.atlassian.net/browse/HDS-5668
-            console.error(`❌ ERROR - Found themed token without '${mode}' value:`, JSON.stringify(slice, null, 2));
+            // we want to interrupt the execution of the script if one of the expected modes is missing
+            throw new Error(`❌ ${chalk.red.bold('ERROR')} - Found themed token '{${path.join('.')}}' without '${mode}' value - BuildPath: ${buildPath} - File: ${slice.filePath} - Path: ${path.join('.')} - ${JSON.stringify(slice, null, 2)}`);
           }
         } else {
-            Object.values(slice).forEach((value) => {
+            Object.entries(slice).forEach(([key, value]) => {
               if (typeof value === 'object') {
-                replaceModes(value);
+                replaceModes(value, [...tokenPath, key]);
               }
             });
         }
         return slice;
       }
-      return replaceModes(dictionary);
+      return replaceModes(dictionary, []);
     },
   });
 }