feat(tokens): use typescript in the tokens package

packages/tokens/package.json

@@ -6,6 +6,7 @@
   "license": "Apache-2.0",
   "private": false,
   "type": "module",
+  "types": "dist/index.d.ts",
   "repository": {
     "type": "git",
     "url": "https://github.com/swisspost/design-system.git"
@@ -20,21 +21,24 @@
     "linkDirectory": true
   },
   "scripts": {
-    "build": "pnpm clean && node ./build.js && pnpm copy-files",
-    "build:verbose": "node ./build.js --verbosity=verbose",
+    "build": "pnpm clean && tsc -p . && node ./dist/build.js && pnpm copy-files",
+    "build:verbose": "pnpm clean && tsc -p . && node ./dist/build.js --verbosity=verbose && pnpm copy-files",
     "clean": "rimraf dist",
     "lint": "eslint",
     "lint:fix": "eslint --fix",
-    "copy-files": "copyfiles -f package.json README.md CONTRIBUTING.md CHANGELOG.md LICENSE dist"
+    "copy-files": "copyfiles -f package.json README.md CONTRIBUTING.md CHANGELOG.md LICENSE *.scss dist"
   },
   "devDependencies": {
     "@eslint/js": "9.18.0",
     "@tokens-studio/sd-transforms": "1.2.9",
+    "@types/node": "22.10.5",
     "copyfiles": "2.4.1",
     "eslint": "9.18.0",
     "globals": "16.0.0",
     "rimraf": "6.0.1",
-    "style-dictionary": "4.3.0"
+    "style-dictionary": "4.3.0",
+    "typescript": "5.8.3",
+    "typescript-eslint": "8.20.0"
   },
   "keywords": [
     "tokens",

packages/tokens/_build/configs/all.js → packages/tokens/src/_build/configs/all.ts

@@ -1,8 +1,8 @@
 import { fileHeader } from 'style-dictionary/utils';
 import { expandTypesMap } from '@tokens-studio/sd-transforms';
-import StyleDictionary from '../style-dictionary.js';
+import StyleDictionary from 'style-dictionary';
 import { getSetName, getSet, getTokenValue, registerConfigMethod } from '../methods.js';
-
+import { ConfigWithMeta } from '_build/types.js';
 /**
  * Registers a config getter method to generate output files for all code relevant tokens in the tokens.json.
  */
@@ -19,7 +19,11 @@ registerConfigMethod((tokenSets, { sourcePath, buildPath }) => {
       include: [`${sourcePath}_temp/source/**/*.json`],
       platforms: {
         scss: {
-          transforms: ['name/kebab', 'swisspost/scss-no-unitless-zero-values', 'swisspost/px-to-rem'],
+          transforms: [
+            'name/kebab',
+            'swisspost/scss-no-unitless-zero-values',
+            'swisspost/px-to-rem',
+          ],
           buildPath,
           expand: {
             include: ['typography'],
@@ -55,8 +59,9 @@ registerConfigMethod((tokenSets, { sourcePath, buildPath }) => {
  */
 StyleDictionary.registerFilter({
   name: 'swisspost/scss-filter',
-  filter: (token, { meta }) => {
-    return token.filePath.includes(`/output/${meta.filePath}`);
+  filter: (token, options) => {
+    const configOptions = options as ConfigWithMeta;
+    return token.filePath.includes(`/output/${configOptions.meta?.filePath}`);
   },
 });
 
@@ -75,12 +80,13 @@ StyleDictionary.registerFilter({
 StyleDictionary.registerFormat({
   name: 'swisspost/scss-format',
   format: async ({ dictionary, options, file }) => {
-    const { meta } = options;
+    const { meta } = options as ConfigWithMeta;
+
     const header = await fileHeader({ file, commentStyle: 'short' });
 
     return (
       header +
-      meta.setNames
+      meta?.setNames
         .map(setName => {
           const tokenSetName = getSetName(options, setName);
           const tokenSet = getSet(options, dictionary, setName)
@@ -92,7 +98,6 @@ StyleDictionary.registerFormat({
                 : `  ${token.name}: ${tokenValue},`;
             })
             .join('\n');
-
           return meta.layer === 'core'
             ? `:root {\n${tokenSet}\n}\n`
             : `$${tokenSetName}: (\n${tokenSet}\n);\n`;

packages/tokens/_build/configs/tailwind.js → packages/tokens/src/_build/configs/tailwind.ts

@@ -2,7 +2,7 @@ import { fileHeader } from 'style-dictionary/utils';
 import { TOKENSET_LAYERS, TOKENSET_NAMES, TOKENSET_PREFIX } from '../constants.js';
 import StyleDictionary from '../style-dictionary.js';
 import { registerConfigMethod, getTokenValue } from '../methods.js';
-
+import { TokenProperty } from '_build/types.js';
 const TAILWIND_TOKENSET_NAMES = [TOKENSET_NAMES.Utilities, TOKENSET_NAMES.Helpers];
 
 /**
@@ -60,17 +60,20 @@ StyleDictionary.registerFormat({
   name: 'swisspost/tailwind-v4-format',
   format: async ({ dictionary, options, file }) => {
     const header = await fileHeader({ file, commentStyle: 'long' }); // CSS comments
-
-    const themeVariables = dictionary.allTokens.reduce((allTokens, token) => {
-      const tokenPath = token.path.slice(token.path.indexOf(TOKENSET_PREFIX) + 1);
-
-      const cssVarName = `--${tokenPath.join('-')}`;
-
-      const tokenValue = getTokenValue(options, token);
-
-      allTokens[cssVarName] = tokenValue;
-      return allTokens;
-    }, {});
+
+    const themeVariables = dictionary.allTokens.reduce<Record<string, TokenProperty>>(
+      (allTokens, token) => {
+        const tokenPath = token.path.slice(token.path.indexOf(TOKENSET_PREFIX) + 1);
+
+        const cssVarName = `--${tokenPath.join('-')}`;
+
+        const tokenValue = getTokenValue(options, token);
+
+        allTokens[cssVarName] = tokenValue;
+        return allTokens;
+      },
+      {},
+    );
 
     const themeCSS = Object.entries(themeVariables)
       .map(([name, value]) => `  ${name}: ${value};`)

packages/tokens/_build/configs/utilities.js → packages/tokens/src/_build/configs/utilities.ts

@@ -2,39 +2,41 @@ import { fileHeader } from 'style-dictionary/utils';
 import { TOKENSET_NAMES } from '../constants.js';
 import StyleDictionary from '../style-dictionary.js';
 import { registerConfigMethod, getTokenValue } from '../methods.js';
+import { UtilityAttributes } from '_build/types.js';
 
 /**
  * Registers a config method to generate output files for utility tokens.
  */
 registerConfigMethod((tokenSets, { sourcePath, buildPath }) => {
-  const { type, layer, filePath, sets } = tokenSets.output[TOKENSET_NAMES.Utilities];
-
-  return {
-    meta: {
-      type,
-      layer,
-      filePath,
-      setNames: Object.keys(sets),
-    },
-    source: [`${sourcePath}_temp/output/${filePath}`],
-    include: [`${sourcePath}_temp/source/**/*.json`],
-    platforms: {
-      utilities: {
-        transforms: ['name/kebab'],
-        buildPath,
-        files: [
-          {
-            destination: `_utilities-formatted.scss`,
-            filter: 'swisspost/source-tokens-filter',
-            format: 'swisspost/utility-format',
-            options: {
-              outputReferences: true,
+  const { type, layer, filePath, setNames } = tokenSets.output[TOKENSET_NAMES.Utilities];
+  return [
+    {
+      meta: {
+        type,
+        layer,
+        filePath,
+        setNames: Object.keys(setNames),
+      },
+      source: [`${sourcePath}_temp/output/${filePath}`],
+      include: [`${sourcePath}_temp/source/**/*.json`],
+      platforms: {
+        utilities: {
+          transforms: ['name/kebab'],
+          buildPath,
+          files: [
+            {
+              destination: `_utilities-formatted.scss`,
+              filter: 'swisspost/source-tokens-filter',
+              format: 'swisspost/utility-format',
+              options: {
+                outputReferences: true,
+              },
             },
-          },
-        ],
+          ],
+        },
       },
     },
-  };
+  ];
 });
 
 /**
@@ -48,7 +50,7 @@ StyleDictionary.registerFormat({
     const utilityTokens = new Map();
 
     dictionary.allTokens.forEach(token => {
-      const { subitem, state } = token.attributes;
+      const { subitem, state } = token.attributes as UtilityAttributes;
 
       const previousStates = utilityTokens.get(subitem) ?? [];
       const newState = `\n  ${state}: ${getTokenValue(options, token)},`;

packages/tokens/_build/constants.js → packages/tokens/src/_build/constants.ts

@@ -36,11 +36,13 @@ export const EXPLICIT_COMPONENT_LAYER_GROUPNAMES = [
 ];
 export const EXPLICIT_FIGMAONLY_GROUPNAMES = ['figmaonly'];
 export const EXPLICIT_FIGMAONLY_SETNAMES = ['figmaonly'];
-export const TOKENSET_LAYERS = {
-  core: 'core',
-  semantic: 'semantic',
-  component: 'component',
-};
+
+export enum TOKENSET_LAYERS {
+  core = 'core',
+  component = 'component',
+  semantic = 'semantic',
+}
+
 export const TOKENSET_PREFIX = 'post';
 export const CUSTOM_FORMAT_INDENT = '  ';