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

Closes #17346

This PR fixes an issue that caused the `--theme(…)` function to behave
differently after a legacy JS plugin or config was configured. The issue
was that the compatibility layer would patch the theme value resolver to
always inline the value. This, however, is only expected to happen if
the path does not look like a CSS variable in which case this legacy
code path should not be run.

To fix this, I'm now keeping a reference to the regular theme resolution
function and call into it if the path starts with `--`.

## Test plan

- Tested with the repro in #17346 by adding pnpm overrides and confirmed
that this fixes the issue
- Added a unit test to the `--theme(…)` resolution tests

Author: philipp-spiess

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(…)', () => {