Fix --theme(…) function when legacy JS plugins are used

CHANGELOG.md

@@ -35,6 +35,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Extract special `@("@")md:…` syntax in Razor files ([#17427](https://github.com/tailwindlabs/tailwindcss/pull/17427))
 - Disallow arbitrary values with top-level braces and semicolons as well as unbalanced parentheses and brackets ([#17361](https://github.com/tailwindlabs/tailwindcss/pull/17361))
 - Extract used CSS variables from `.css` files ([#17433](https://github.com/tailwindlabs/tailwindcss/pull/17433))
+- Ensure the `--theme(…)` function still resolves to the CSS variables even when legacy JS plugins are enabled
 
 ### Changed
 

packages/tailwindcss/src/compat/apply-compat-hooks.ts

@@ -260,8 +260,13 @@ function upgradeToFullPluginSupport({
   // config files are actually being used. In the future we may want to optimize
   // this further by only doing this if plugins or config files _actually_
   // registered JS config objects.
+  let defaultResolveThemeValue = designSystem.resolveThemeValue
   designSystem.resolveThemeValue = function resolveThemeValue(path: string, forceInline?: boolean) {
-    let resolvedValue = pluginApi.theme(path, forceInline)
+    if (path[0] === '-' && path[1] === '-') {
+      return defaultResolveThemeValue(path, forceInline)
+    }
+
+    let resolvedValue = pluginApi.theme(path, undefined)
 
     if (Array.isArray(resolvedValue) && resolvedValue.length === 2) {
       // When a tuple is returned, return the first element

packages/tailwindcss/src/css-functions.test.ts

@@ -384,6 +384,48 @@ describe('--theme(…)', () => {
       `[Error: Could not resolve value for theme function: \`theme(--color-green-500)\`. Consider checking if the variable name is correct or provide a fallback value to silence this error.]`,
     )
   })
+
+  test('--theme(…) function still works as expected, even when a plugin is imported', async () => {
+    expect(
+      await compileCss(
+        css`
+          @layer base {
+            html,
+            :host {
+              font-family: --theme(--default-font-family, system-ui);
+            }
+          }
+          @layer theme {
+            @theme {
+              --font-sans: sans-serif;
+              --default-font-family: --theme(--font-sans, initial);
+            }
+          }
+          @plugin "my-plugin.js";
+        `,
+        [],
+        {
+          loadModule: async () => ({
+            module: () => {},
+            base: '/root',
+          }),
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "@layer base {
+        html, :host {
+          font-family: var(--default-font-family, system-ui);
+        }
+      }
+
+      @layer theme {
+        :root, :host {
+          --font-sans: sans-serif;
+          --default-font-family: var(--font-sans);
+        }
+      }"
+    `)
+  })
 })
 
 describe('theme(…)', () => {