Add types to tailwind-tokens

oxidecomputer · Dec 5, 2024 · 5170ecc · 5170ecc
1 parent eb02cac
commit 5170ecc
Showing 1 changed file with 12 additions and 11 deletions.
diff --git 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',
     })
   }