From 5170ecc1aecf9f25e48a6d19f038747f72d1a614 Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <hello@benleonard.co.uk>
Date: Thu, 5 Dec 2024 17:25:29 +0000
Subject: [PATCH] Add types to `tailwind-tokens`

---
 scripts/convert-tokens.ts | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/scripts/convert-tokens.ts b/scripts/convert-tokens.ts
index 5b4b8ad..8778fd2 100644
--- a/scripts/convert-tokens.ts
+++ b/scripts/convert-tokens.ts
@@ -260,7 +260,9 @@ StyleDictionary.registerFormat({
     return `
 			/* THIS FILE IS AUTOGENERATED, DO NOT EDIT */
 
-			export const textUtilities = {
+			type CSSProperties = Record<string, string | number | Record<string, string | number>>
+
+      export const textUtilities: Record<string, CSSProperties> = {
 				${typeStyles.map(
           (prop) => `
 					'.text-${formatFontClass(prop.name)}': {
@@ -278,22 +280,21 @@ StyleDictionary.registerFormat({
         )}
 			}
 
-			export const colorUtilities = {
+			export const colorUtilities: Record<string, CSSProperties> = {
         ${colorUtilities}
       }
 
-      export const elevationUtilities = {
-        ${boxShadow
-          .map(
-            ({ name }, index) =>
-              `'.elevation-${index}': {
+      export const elevationUtilities: Record<string, CSSProperties> = {        ${boxShadow
+        .map(
+          ({ name }, index) =>
+            `'.elevation-${index}': {
                 'box-shadow': 'var(--${name})',
               }`,
-          )
-          .join(',\n')}
+        )
+        .join(',\n')}
       }
 
-			export const borderRadiusTokens = {
+      export const borderRadiusTokens: Record<string, string> = {
         ${borderRadius
           .map(
             ({ name }) =>
@@ -400,7 +401,7 @@ const makeConfig = (theme: typeof THEMES[number]) => {
   if (theme === 'main') {
     config.platforms.web.files?.push({
       filter: 'unused-theme-tokens',
-      destination: `tailwind-tokens.js`,
+      destination: `tailwind-tokens.ts`,
       format: 'tailwind',
     })
   }