feat(workflows): add a build-tokens workflow

swisspost · Jul 12, 2024 · f63acb5 · f63acb5
1 parent 099ac7a
commit f63acb5
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 8 deletions.
diff --git a/.github/workflows/build-tokens.yaml b/.github/workflows/build-tokens.yaml
@@ -3,7 +3,7 @@ on:
   pull_request:
     types: [opened, synchronize, edited, reopened]
     paths:
-      - 'packages/tokens'
+      - 'packages/tokens/**'
 
 jobs:
   build:
@@ -16,18 +16,50 @@ jobs:
       - name: Setup
         uses: ./.github/actions/setup-pnpm
 
-      - name: Install tokens & dependencies
-        run: pnpm --filter design-system-tokens... install
+      - name: Install dependencies
+        run: pnpm --filter ...design-system-tokens... install
 
       - name: Build tokens & dependencies
-        run: pnpm --filter design-system-tokens... build
+        run: pnpm --filter ...design-system-tokens... build
+
+      # TODOs:
+      # - Add changeset to the tokens package? (not sure if this should be done manually)
+      # - Build all packages which are dependant on the tokens --filter ...design-system-tokens
+      #   (styles and components for sure, maybe more)
 
       - name: Create Summary
         id: summary
         uses: actions/github-script@v7
         with:
           script: |
+            const fs = require('fs')
+            const path = require('path')
+            const inputfileNames = fs.readdirSync('packages/tokens/tokensstudio-generated')
+            const inputFiles = inputfileNames.map(fileName => ({
+              type: path.extname(fileName),
+              name: fileName,
+              content: fs.readFileSync(`packages/tokens/tokensstudio-generated/${fileName}`, 'utf8')
+            }))
+
+            const outputFileNames = fs.readdirSync('packages/tokens/dist')
+            const outputFiles = outputFileNames.map(fileName => ({
+              type: path.extname(fileName),
+              name: fileName,
+              content: fs.readFileSync(`packages/tokens/dist/${fileName}`, 'utf8')
+            }))
+
             return `# Build Tokens
+            ## Input
+            ${inputFiles.map(({ type, name, content }) => `<details>
+              <summary><code>${name}</code></summary>
+              <pre lang="${type}">${content}</pre>
+            </details>`).join('\n')}
+
+            ## Output
+            ${outputFiles.map(({ type, name, content }) => `<details>
+              <summary><code>${name}</code></summary>
+              <pre lang="${type}">${content}</pre>
+            </details>`).join('\n')}
             `
 
       - name: Output Summary

diff --git a/packages/tokens/build.js b/packages/tokens/build.js
@@ -6,7 +6,7 @@ import { promises } from 'fs';
 const SOURCE_PATH = './tokensstudio-generated/';
 const BUILD_PATH = './dist/';
 const FILE_HEADER =
-  '// Do not edit manually!\n// This file was generated on:\n// {date} by the @swisspost/design-system-tokens package build command\n\n';
+  '// Do not edit manually!\r\n// This file was generated on:\r\n// {date} by the @swisspost/design-system-tokens package build command\r\n\r\n';
 const GLOBAL_TOKEN_NAMESPACES = ['post'];
 
 registerTransforms(StyleDictionary);
@@ -84,11 +84,11 @@ StyleDictionary.registerFormat({
 
               return isCore ? `--${tokenName}: ${tokenValue};` : `'${tokenName}': ${tokenValue},`;
             })
-            .join('\n  ');
+            .join('\r\n  ');
 
           return isCore
-            ? `:root {\n  ${dataSetTokens}\n}\n`
-            : `$post-${dataSetName}: (\n  ${dataSetTokens}\n);\n`;
+            ? `:root {\r\n  ${dataSetTokens}\r\n}\r\n`
+            : `$post-${dataSetName}: (\r\n  ${dataSetTokens}\r\n);\r\n`;
         })
         .join('\n')
     );