Add formatter to design-tokens

.github/workflows/test_design_tokens_build.yaml

@@ -35,6 +35,10 @@ jobs:
         run: npm install
         working-directory: ./packages/design-tokens
 
+      - name: Prettier format check
+        run: npm run format:check
+        working-directory: ./packages/design-tokens
+
       - name: Run test suite with npm script
         run: npm run test
         working-directory: ./packages/design-tokens

packages/design-tokens/build-output.js

@@ -239,14 +239,13 @@ const sd = new StyleDictionary({
         {
           destination: "variables.scss",
           format: "scss/map-deep",
-          filter: (t) => (
+          filter: (t) =>
             /* strip metadata */
-            !(['$themes', '$metadata'].includes(t))
-          ),
+            !["$themes", "$metadata"].includes(t),
           options: {
-            "mapName": "bcds",
-            "themeable": false
-          }
+            mapName: "bcds",
+            themeable: false,
+          },
         },
       ],
     },
@@ -264,14 +263,13 @@ const sd = new StyleDictionary({
         {
           destination: "variables.scss",
           format: "scss/map-deep",
-          filter: (t) => (
+          filter: (t) =>
             /* strip metadata */
-            !(['$themes', '$metadata'].includes(t))
-          ),
+            !["$themes", "$metadata"].includes(t),
           options: {
-            "mapName": "bcds",
-            "themeable": false
-          }
+            mapName: "bcds",
+            themeable: false,
+          },
         },
       ],
     },

packages/design-tokens/build-output.test.js

@@ -19,7 +19,7 @@ test("build-output.js should complete without errors", async () => {
           }
           console.log("build-output.js executed successfully:", stdout);
           resolve();
-        },
+        }
       );
     });
     assert.ok(true);
@@ -107,7 +107,7 @@ test("theme.blue.100 should be present in all output files", async () => {
     const fileContent = readFileSync(filePath, "utf-8");
     assert.ok(
       fileContent.includes(token),
-      `Expected token "${token}" to be present in file ${file}`,
+      `Expected token "${token}" to be present in file ${file}`
     );
   }
 });

packages/design-tokens/package.json

@@ -11,7 +11,9 @@
     "build": "./run-build.sh",
     "prepare-npm-package": "./run-prepare-npm-package.sh",
     "publish-npm-package": "./run-publish-npm-package.sh",
-    "test": "node --test build-output.test.js"
+    "test": "node --test build-output.test.js",
+    "format:check": "npx prettier . --check",
+    "format": "npx prettier . --write"
   },
   "type": "module",
   "keywords": [
@@ -30,5 +32,8 @@
   "dependencies": {
     "@tokens-studio/sd-transforms": "2.0.3",
     "style-dictionary": "5.2.0"
+  },
+  "devDependencies": {
+    "prettier": "3.8.4"
   }
 }

packages/design-tokens/prettier.config.js

@@ -0,0 +1,21 @@
+// prettier.config.js
+
+/**
+ * @see https://prettier.io/docs/configuration
+ * @type {import("prettier").Config}
+ */
+const config = {
+  // https://prettier.io/docs/options#trailing-commas
+  trailingComma: "es5",
+
+  // https://prettier.io/docs/options#tab-width
+  tabWidth: 2,
+
+  // https://prettier.io/docs/options#semicolons
+  semi: true,
+
+  // https://prettier.io/docs/options#quotes
+  singleQuote: false,
+};
+
+export default config;