Callback in theme properties is also the theme function

Author: philipp-spiess

packages/tailwindcss/src/compat/config/resolve-config.test.ts

@@ -202,6 +202,10 @@ test('theme keys can read from the CSS theme', () => {
             // Gives access to the colors object directly
             primary: colors.green,
           }),
+          transitionColor: (theme) => ({
+            // The parameter object is also the theme function
+            ...theme('colors'),
+          }),
         },
       },
       base: '/root',
@@ -237,6 +241,10 @@ test('theme keys can read from the CSS theme', () => {
           '950': '#052e16',
         },
       },
+      transitionColor: {
+        red: 'red',
+        green: 'green',
+      },
     },
   })
 })

packages/tailwindcss/src/compat/config/resolve-config.ts

@@ -116,8 +116,9 @@ export function mergeThemeExtension(
   return undefined
 }
 
-export interface PluginUtils {
-  theme(keypath: string, defaultValue?: any): any
+type ThemeFunction = (keypath: string, defaultValue?: any) => any
+export type PluginUtils = ThemeFunction & {
+  theme: ThemeFunction
   colors: typeof colors
 }
 
@@ -176,14 +177,16 @@ function extractConfigs(ctx: ResolutionContext, { config, base, path }: ConfigFi
 }
 
 function mergeTheme(ctx: ResolutionContext) {
+  let theme = createThemeFn(ctx.design, () => ctx.theme, resolveValue)
   let api: PluginUtils = {
-    theme: createThemeFn(ctx.design, () => ctx.theme, resolveValue),
+    theme,
     colors,
   }
+  Object.assign(theme, api)
 
   function resolveValue(value: ThemeValue | null | undefined): ResolvedThemeValue {
     if (typeof value === 'function') {
-      return value(api) ?? null
+      return value(theme) ?? null
     }
 
     return value ?? null