From a64e209888ae8ce8e85cb52c85a5aa52b61b096d Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Mon, 14 Oct 2024 13:57:02 +0200
Subject: [PATCH] Warn on use of plugin parameters as function (#14661)

Quick follow-up to #14659 base don @thecrypticace's idea:

- This behavior is no longer added to the types of the Plugin API to be
consistent with v3
- When the plugin argument is used as a function, we now warn the first
time
---
 .../src/compat/config/resolve-config.test.ts  | 14 +++++++---
 .../src/compat/config/resolve-config.ts       | 26 ++++++++++++++-----
 2 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/packages/tailwindcss/src/compat/config/resolve-config.test.ts b/packages/tailwindcss/src/compat/config/resolve-config.test.ts
index ebe455059..5078679e1 100644
--- a/packages/tailwindcss/src/compat/config/resolve-config.test.ts
+++ b/packages/tailwindcss/src/compat/config/resolve-config.test.ts
@@ -1,4 +1,4 @@
-import { expect, test } from 'vitest'
+import { expect, test, vi } from 'vitest'
 import { buildDesignSystem } from '../../design-system'
 import { Theme } from '../../theme'
 import { resolveConfig } from './resolve-config'
@@ -172,7 +172,12 @@ test('theme keys can reference other theme keys using the theme function regardl
   })
 })
 
-test('theme keys can read from the CSS theme', () => {
+test('theme keys can read from the CSS theme', ({ onTestFinished }) => {
+  let warn = vi.spyOn(console, 'warn').mockImplementation(() => undefined)
+  onTestFinished(() => {
+    warn.mockReset()
+  })
+
   let theme = new Theme()
   theme.add('--color-green', 'green')
 
@@ -202,7 +207,7 @@ test('theme keys can read from the CSS theme', () => {
             // Gives access to the colors object directly
             primary: colors.green,
           }),
-          transitionColor: (theme) => ({
+          transitionColor: (theme: any) => ({
             // The parameter object is also the theme function
             ...theme('colors'),
           }),
@@ -247,4 +252,7 @@ test('theme keys can read from the CSS theme', () => {
       },
     },
   })
+  expect(warn).toHaveBeenCalledWith(
+    'Using the plugin object parameter as the theme function is deprecated. Please use the `theme` property instead.',
+  )
 })
diff --git a/packages/tailwindcss/src/compat/config/resolve-config.ts b/packages/tailwindcss/src/compat/config/resolve-config.ts
index b0d78de2e..aad25ba7b 100644
--- a/packages/tailwindcss/src/compat/config/resolve-config.ts
+++ b/packages/tailwindcss/src/compat/config/resolve-config.ts
@@ -116,9 +116,8 @@ export function mergeThemeExtension(
   return undefined
 }
 
-type ThemeFunction = (keypath: string, defaultValue?: any) => any
-export type PluginUtils = ThemeFunction & {
-  theme: ThemeFunction
+export type PluginUtils = {
+  theme: (keypath: string, defaultValue?: any) => any
   colors: typeof colors
 }
 
@@ -176,12 +175,25 @@ function extractConfigs(ctx: ResolutionContext, { config, base, path }: ConfigFi
   ctx.configs.push(config)
 }
 
+let didWarnAboutUsingObjectArgumentAsThemeFn = false
+
 function mergeTheme(ctx: ResolutionContext) {
   let themeFn = createThemeFn(ctx.design, () => ctx.theme, resolveValue)
-  let theme = Object.assign(themeFn, {
-    theme: themeFn,
-    colors,
-  })
+  let theme = Object.assign(
+    (path: string, defaultValue?: any) => {
+      if (!didWarnAboutUsingObjectArgumentAsThemeFn) {
+        didWarnAboutUsingObjectArgumentAsThemeFn = true
+        console.warn(
+          'Using the plugin object parameter as the theme function is deprecated. Please use the `theme` property instead.',
+        )
+      }
+      return themeFn(path, defaultValue)
+    },
+    {
+      theme: themeFn,
+      colors,
+    },
+  )
 
   function resolveValue(value: ThemeValue | null | undefined): ResolvedThemeValue {
     if (typeof value === 'function') {