Update types for variants

ankarhem · Oct 22, 2024 · aea15f9 · aea15f9
1 parent 861879f
commit aea15f9
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 10 deletions.
diff --git a/src/Theme.ts b/src/Theme.ts
@@ -20,7 +20,7 @@ import { camelToKebab } from "./utils/camelToKebab";
  *
  * TODO: consider exposing a user-facing API for configuring this themePropertiesConfig; users could create their own ThemeProperty sub-classes (like ColorProperty) to write their own value conversion logic.. would make tailwind-easy-theme incredibly flexible -- like more of a low-level theming framework
  */
-const themePropertiesConfig: InternalThemePropertiesConfig = {
+const themePropertiesConfig: InternalThemePropertiesConfig<ThemeProps> = {
   colors: {
     prefix: "",
     type: ColorProperty,
@@ -85,7 +85,7 @@ const themePropertiesConfig: InternalThemePropertiesConfig = {
     prefix: "stroke",
     type: ColorProperty,
   },
-};
+} as const;
 
 export class Theme<T extends ThemeProps = ThemeProps> {
   private userPrefix: string | undefined;
@@ -115,9 +115,12 @@ export class Theme<T extends ThemeProps = ThemeProps> {
       let Property = ThemeProperty;
 
       if (propertyKey in themePropertiesConfig) {
-        const config = themePropertiesConfig[propertyKey];
-        prefix = config.prefix ?? prefix;
-        Property = config.type ?? Property;
+        const config =
+          themePropertiesConfig[
+            propertyKey as keyof typeof themePropertiesConfig
+          ];
+        prefix = config?.prefix ?? prefix;
+        Property = config?.type ?? Property;
       }
 
       prefix = userPrefix ? `${userPrefix}-${prefix}` : prefix;

diff --git a/src/types.ts b/src/types.ts
@@ -39,10 +39,34 @@ export type ThemePropertyConfig = Record<
   string,
   FlatThemePropertyConfig | string
 >;
-export type PartialThemePropertyConfig<
-  PrimaryTheme extends ThemePropertyConfig
+
+type HexCode = string | undefined;
+
+type RecursiveOptionalKeyValuePair<
+  K extends string | number | symbol,
+  V extends string | object
 > = {
-  [K in keyof PrimaryTheme]?: Partial<PrimaryTheme[K]>;
+  [Key in K]?: V extends string
+    ? HexCode
+    : V extends object
+    ? V[keyof V] extends string | object
+      ? RecursiveOptionalKeyValuePair<keyof V, V[keyof V]>
+      : never
+    : never;
+};
+
+export type PartialThemePropertyConfig<PrimaryTheme extends ThemeProps> = {
+  [K in keyof PrimaryTheme]?: PrimaryTheme[K] extends infer PrimaryThemeKey
+    ? {
+        [Key in keyof PrimaryThemeKey]?: PrimaryThemeKey[Key] extends infer Value
+          ? Value extends object
+            ? Value[keyof Value] extends string | object
+              ? RecursiveOptionalKeyValuePair<keyof Value, Value[keyof Value]>
+              : never
+            : HexCode
+          : never;
+      }
+    : never;
 };
 
 export type ThemePropertyOptions = {
@@ -52,8 +76,8 @@ export type ThemePropertyOptions = {
 // Constructor signature for classes extending ThemeProperty
 export type ThemePropertyConstructor = new (...args: any[]) => ThemeProperty;
 
-export type InternalThemePropertiesConfig = {
-  [P: keyof ThemeConfig]: {
+export type InternalThemePropertiesConfig<T extends ThemeProps> = {
+  [P in keyof T]?: {
     prefix: string;
     type: ThemePropertyConstructor;
   };