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,7 +21,7 @@
     "linkDirectory": true
   },
   "scripts": {
-    "build": "pnpm clean && node ./build.js && pnpm copy-files",
+    "build": "pnpm clean && tsc -p . && node ./dist/build.js && pnpm copy-files",
     "build:verbose": "node ./build.js --verbosity=verbose",
     "clean": "rimraf dist",
     "lint": "eslint",
@@ -30,11 +31,14 @@
   "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, { type Config } from 'style-dictionary';
 import { getSetName, getSet, getTokenValue, registerConfigMethod } from '../methods.js';
-
+import { LocalOptions } from 'style-dictionary/types';
 /**
  * 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 Config & LocalOptions;
+    return token.filePath.includes(`/output/${configOptions.meta.filePath}`);
   },
 });
 
@@ -81,7 +86,7 @@ StyleDictionary.registerFormat({
     return (
       header +
       meta.setNames
-        .map(setName => {
+        .map((setName: string) => {
           const tokenSetName = getSetName(options, setName);
           const tokenSet = getSet(options, dictionary, setName)
             .map(token => {

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

@@ -8,7 +8,7 @@ import { TOKENSET_NAMES } from '../constants.js';
 registerConfigMethod((tokenSets, { sourcePath, buildPath }) => {
   const paletteSet = tokenSets.output[TOKENSET_NAMES.Palettes];
 
-  if (!paletteSet) return;
+  if (!paletteSet) return [];
 
   const { type, layer, filePath, sets } = paletteSet;
 

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

@@ -65,7 +65,7 @@ StyleDictionary.registerFormat({
       const tokenObj = token.path
         .slice(token.path.indexOf(TOKENSET_PREFIX) + 1)
         .reverse()
-        .reduce((res, p) => ({ [p]: res }), getTokenValue(options, token));
+        .reduce((res, p) => ({ [p]: res }), getTokenValue(options, token)) as object;
 
       return objectDeepmerge(allTokens, tokenObj);
     }, {});

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

@@ -8,33 +8,34 @@ import { registerConfigMethod, getTokenValue } from '../methods.js';
  */
 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,
+  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,
+              },
             },
-          },
-        ],
+          ],
+        },
       },
     },
-  };
+  ];
 });
 
 /**
@@ -48,7 +49,7 @@ StyleDictionary.registerFormat({
     const utilityTokens = new Map();
 
     dictionary.allTokens.forEach(token => {
-      const { subitem, state } = token.attributes;
+      const { subitem, state } = token.attributes || {};
 
       const previousStates = utilityTokens.get(subitem) ?? [];
       const newState = `\n  ${state}: ${getTokenValue(options, token)},`;

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

@@ -35,11 +35,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',
-};
+  semantic: 'semantic',
+} as const;
+
 export const TOKENSET_PREFIX = 'post';
 export const CUSTOM_FORMAT_INDENT = '  ';