build: 🏗️ Move token builder script to separate package (#1786)

package.json

@@ -17,7 +17,7 @@
     "devsite": "yarn workspace dev dev",
     "build": "lerna run build",
     "build:react": "yarn workspace @digdir/designsystemet-react build",
-    "build:tokens": "yarn workspace @digdir/designsystemet-theme build",
+    "build:tokens": "yarn workspace @digdir/designsystemet-cli build",
     "build:css": "yarn workspace @digdir/designsystemet-css build",
     "build:storybook": "storybook build -o ./dist/storybook",
     "build:storefront": "yarn workspace storefront building",

packages/cli/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@digdir/designsystemet-cli",
+  "version": "0.0.1",
+  "description": "CLI for Designsystemet",
+  "author": "Designsystemet team",
+  "repository": "https://github.com/digdir/designsystemet",
+  "homepage": "https://github.com/digdir/designsystemet/tree/main/scripts/cli",
+  "license": "MIT",
+  "type": "module",
+  "private": true,
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "start": "esno ./src/build.ts",
+    "build": "yarn clean && yarn start -t ../../design-tokens -b Digdir Tilsynet Altinn Brreg",
+    "prepublish": "tsc",
+    "clean": "yarn workspace @digdir/designsystemet-theme clean"
+  },
+  "files": [
+    "./dist/**"
+  ],
+  "bin": {
+    "designsystemet": "./dist/build/build.js"
+  },
+  "devDependencies": {
+    "@tokens-studio/sd-transforms": "^0.9.3",
+    "@types/ramda": "^0.29.9",
+    "@types/yargs": "^17.0.32",
+    "esno": "^4.7.0",
+    "ramda": "^0.29.1",
+    "rimraf": "^5.0.5",
+    "style-dictionary": "^3.8.0",
+    "typescript": "^5.4.5",
+    "yargs": "^17.7.2"
+  }
+}

packages/theme/scripts/build.ts → packages/cli/src/build.ts

@@ -1,3 +1,4 @@
+#!/usr/bin/env node
 import path from 'path';
 
 import StyleDictionary from 'style-dictionary';
@@ -8,6 +9,7 @@ import type {
   FileHeader,
 } from 'style-dictionary';
 import { registerTransforms } from '@tokens-studio/sd-transforms';
+import yargs from 'yargs';
 
 import {
   sizePx,
@@ -18,18 +20,39 @@ import {
   calc,
   fontScaleHackFormat,
   sizeRem,
-} from './transformers';
+} from './transformers.js';
 import {
   scopedReferenceVariables,
   groupedTokens,
   setup as setupFormatters,
-} from './formatters';
+} from './formatters.js';
+
+const argv = yargs(process.argv.slice(2))
+  .options({
+    brands: {
+      type: 'array',
+      default: [],
+      describe: 'Brand files to build',
+      alias: 'b',
+    },
+    tokens: {
+      type: 'string',
+      describe: 'Location for design-tokens',
+      demandOption: true,
+      alias: 't',
+    },
+    preview: {
+      alias: 'p',
+      type: 'boolean',
+      describe: 'Generate typescript token preview files',
+    },
+  })
+  .parseSync();
 
 void registerTransforms(StyleDictionary);
 
-// File name under design-tokens/Brand
-const brands = ['Digdir', 'Tilsynet', 'Altinn', 'Brreg'] as const;
-type Brands = (typeof brands)[number];
+const pickBrands = (x: string | number): x is string => typeof x === 'string';
+type Brand = string;
 
 const prefix = 'fds';
 const basePxFontSize = 16;
@@ -42,7 +65,8 @@ const fileheader: Named<{ fileHeader: FileHeader }> = {
 };
 
 const storefrontTokensPath = path.resolve('../../apps/storefront/tokens');
-const packageTokensPath = 'brand';
+const packageTokensPath = path.resolve('../../packages/theme/brand');
+const tokensPath = argv.tokens;
 
 setupFormatters('./../../prettier.config.js');
 
@@ -65,8 +89,6 @@ StyleDictionary.registerTransformGroup({
   transforms: [
     'ts/resolveMath',
     nameKebab.name,
-    // fluidFontSize.name,
-    // calc.name,
     typographyShorthand.name,
     'ts/size/lineheight',
     sizeRem.name,
@@ -76,9 +98,7 @@ StyleDictionary.registerTransformGroup({
   ],
 });
 
-const baseConfig = (brand: Brands): Partial<Config> => {
-  const tokensPath = '../../design-tokens';
-
+const baseConfig = (brand: Brand): Partial<Config> => {
   return {
     include: [
       `${tokensPath}/Brand/${brand}.json`,
@@ -91,7 +111,7 @@ const baseConfig = (brand: Brands): Partial<Config> => {
 const excludeSource = (token: TransformedToken) =>
   !token.filePath.includes('Core.json');
 
-const getTokensPackageConfig = (brand: Brands, targetFolder = ''): Config => {
+const getTokensPackageConfig = (brand: Brand, targetFolder = ''): Config => {
   const destinationPath = `${targetFolder}/${brand.toLowerCase()}`;
 
   return {
@@ -131,7 +151,7 @@ const getTokensPackageConfig = (brand: Brands, targetFolder = ''): Config => {
   };
 };
 
-const getStorefrontConfig = (brand: Brands, targetFolder = ''): Config => {
+const getStorefrontConfig = (brand: Brand, targetFolder = ''): Config => {
   const destinationPath = `${targetFolder}/${brand.toLowerCase()}`;
 
   return {
@@ -167,22 +187,28 @@ const getStorefrontConfig = (brand: Brands, targetFolder = ''): Config => {
   };
 };
 
-console.log('🏗️  Started building package tokens…');
+const brands = argv.brands.filter(pickBrands) as string[];
 
-brands.map((brand) => {
-  console.log('\n---------------------------------------');
+if (brands.length > 0) {
+  console.log('➡️  Recieved following brands: ', brands);
 
-  console.log(`\n👷 Processing ${brand}`);
+  console.log('🏗️  Start building CSS tokens');
 
-  const tokensPackageSD = StyleDictionary.extend(
-    getTokensPackageConfig(brand, packageTokensPath),
-  );
+  brands.map((brand) => {
+    console.log('\n---------------------------------------');
 
-  tokensPackageSD.buildAllPlatforms();
-});
+    console.log(`\n👷 Processing ${brand}`);
 
-console.log('\n---------------------------------------');
-console.log('\n🏁 Finished building package tokens!');
+    const tokensPackageSD = StyleDictionary.extend(
+      getTokensPackageConfig(brand, packageTokensPath),
+    );
+
+    tokensPackageSD.buildAllPlatforms();
+  });
+
+  console.log('\n---------------------------------------');
+  console.log('\n🏁 Finished building package tokens!');
+}
 
 console.log('\n=======================================');
 console.log('\n🏗️  Started building storefront tokens…');

packages/theme/scripts/transformers.ts → packages/cli/src/transformers.ts

@@ -7,7 +7,7 @@ import type {
 } from 'style-dictionary';
 import { transformDimension } from '@tokens-studio/sd-transforms';
 
-import { noCase } from './noCase';
+import { noCase } from './noCase.js';
 
 export const sizePx: Named<Transform> = {
   name: 'fds/size/px',

packages/cli/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist/build",
+    "declarationDir": "./dist/types",
+    "composite": false,
+    "allowSyntheticDefaultImports": true,
+    "emitDeclarationOnly": false,
+    "noEmit": false,
+    "target": "esnext",
+    "module": "esnext",
+    "esModuleInterop": true,
+    "moduleResolution": "node"
+  },
+  "rootDir": "./src",
+  "include": ["./src/", "./declarations.d.ts"]
+}

packages/theme/package.json

@@ -15,15 +15,9 @@
     "access": "public"
   },
   "scripts": {
-    "build": "yarn run clean && esno ./scripts/build.ts",
     "clean": "rimraf brand"
   },
   "devDependencies": {
-    "@tokens-studio/sd-transforms": "^0.9.3",
-    "@types/ramda": "^0.29.9",
-    "esno": "^4.7.0",
-    "ramda": "^0.29.1",
-    "rimraf": "^5.0.5",
-    "style-dictionary": "^3.8.0"
+    "rimraf": "^5.0.5"
   }
 }

yarn.lock

@@ -2583,6 +2583,24 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@digdir/designsystemet-cli@workspace:packages/cli":
+  version: 0.0.0-use.local
+  resolution: "@digdir/designsystemet-cli@workspace:packages/cli"
+  dependencies:
+    "@tokens-studio/sd-transforms": "npm:^0.9.3"
+    "@types/ramda": "npm:^0.29.9"
+    "@types/yargs": "npm:^17.0.32"
+    esno: "npm:^4.7.0"
+    ramda: "npm:^0.29.1"
+    rimraf: "npm:^5.0.5"
+    style-dictionary: "npm:^3.8.0"
+    typescript: "npm:^5.4.5"
+    yargs: "npm:^17.7.2"
+  bin:
+    designsystemet: ./dist/build/build.js
+  languageName: unknown
+  linkType: soft
+
 "@digdir/designsystemet-css@npm:0.2.3":
   version: 0.2.3
   resolution: "@digdir/designsystemet-css@npm:0.2.3"
@@ -2653,12 +2671,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@digdir/designsystemet-theme@workspace:packages/theme"
   dependencies:
-    "@tokens-studio/sd-transforms": "npm:^0.9.3"
-    "@types/ramda": "npm:^0.29.9"
-    esno: "npm:^4.7.0"
-    ramda: "npm:^0.29.1"
     rimraf: "npm:^5.0.5"
-    style-dictionary: "npm:^3.8.0"
   languageName: unknown
   linkType: soft
 
@@ -6061,6 +6074,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/yargs-parser@npm:*":
+  version: 21.0.3
+  resolution: "@types/yargs-parser@npm:21.0.3"
+  checksum: a794eb750e8ebc6273a51b12a0002de41343ffe46befef460bdbb57262d187fdf608bc6615b7b11c462c63c3ceb70abe2564c8dd8ee0f7628f38a314f74a9b9b
+  languageName: node
+  linkType: hard
+
+"@types/yargs@npm:^17.0.32":
+  version: 17.0.32
+  resolution: "@types/yargs@npm:17.0.32"
+  dependencies:
+    "@types/yargs-parser": "npm:*"
+  checksum: 1e2b2673847011ce43607df690d392f137d95a2d6ea85aa319403eadda2ef4277365efd4982354d8843f2611ef3846c88599660aaeb537fa9ccddae83c2a89de
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/eslint-plugin@npm:6.15.0":
   version: 6.15.0
   resolution: "@typescript-eslint/eslint-plugin@npm:6.15.0"
@@ -20778,6 +20807,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript@npm:^5.4.5":
+  version: 5.4.5
+  resolution: "typescript@npm:5.4.5"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: d04a9e27e6d83861f2126665aa8d84847e8ebabcea9125b9ebc30370b98cb38b5dff2508d74e2326a744938191a83a69aa9fddab41f193ffa43eabfdf3f190a5
+  languageName: node
+  linkType: hard
+
 "typescript@patch:typescript@npm%3A>=3 < 6#optional!builtin<compat/typescript>":
   version: 5.2.2
   resolution: "typescript@patch:typescript@npm%3A5.2.2#optional!builtin<compat/typescript>::version=5.2.2&hash=f3b441"
@@ -20798,6 +20837,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript@patch:typescript@npm%3A^5.4.5#optional!builtin<compat/typescript>":
+  version: 5.4.5
+  resolution: "typescript@patch:typescript@npm%3A5.4.5#optional!builtin<compat/typescript>::version=5.4.5&hash=e012d7"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 584be8bac7112ad49a9eb9992f71d542b1ff2fafb5bb315e1c196145e8feab589f1d7223cfb2d5df6770789582e6918f8287d1f2f89911b38eb80e29c560ad00
+  languageName: node
+  linkType: hard
+
 "ufo@npm:^1.3.2":
   version: 1.5.3
   resolution: "ufo@npm:1.5.3"
@@ -21966,7 +22015,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yargs@npm:17.7.2, yargs@npm:^17.0.0, yargs@npm:^17.6.2":
+"yargs@npm:17.7.2, yargs@npm:^17.0.0, yargs@npm:^17.6.2, yargs@npm:^17.7.2":
   version: 17.7.2
   resolution: "yargs@npm:17.7.2"
   dependencies: