Merge branch 'main' into fix/watch-other-css-files

Author: RobinMalfait

.gitignore

@@ -7,4 +7,4 @@ playwright-report/
 blob-report/
 playwright/.cache/
 target/
-.debug
+.debug/

CHANGELOG.md

@@ -34,6 +34,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix negated `content` rules in legacy JavaScript configuration ([#17255](https://github.com/tailwindlabs/tailwindcss/pull/17255))
 - 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))
+- Ensure the `--theme(…)` function still resolves to the CSS variables even when legacy JS plugins are enabled
 - Extract used CSS variables from `.css` files ([#17433](https://github.com/tailwindlabs/tailwindcss/pull/17433), [#17467](https://github.com/tailwindlabs/tailwindcss/pull/17467))
 
 ### Changed

packages/@tailwindcss-postcss/src/index.test.ts

@@ -1,7 +1,9 @@
 import dedent from 'dedent'
-import { unlink, writeFile } from 'node:fs/promises'
+import { mkdir, mkdtemp, unlink, writeFile } from 'node:fs/promises'
+import { tmpdir } from 'node:os'
+import path from 'path'
 import postcss from 'postcss'
-import { afterEach, beforeEach, describe, expect, test } from 'vitest'
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
 import tailwindcss from './index'
 
 // We give this file path to PostCSS for processing.
@@ -106,14 +108,21 @@ test('@apply can be used without emitting the theme in the CSS file', async () =
 })
 
 describe('processing without specifying a base path', () => {
-  let filepath = `${process.cwd()}/my-test-file.html`
-
-  beforeEach(() =>
-    writeFile(filepath, `<div class="md:[&:hover]:content-['testing_default_base_path']">`),
-  )
+  let filepath: string
+  let dir: string
+
+  beforeEach(async () => {
+    dir = await mkdtemp(path.join(tmpdir(), 'tw-postcss'))
+    await mkdir(dir, { recursive: true })
+    filepath = path.join(dir, 'my-test-file.html')
+    await writeFile(filepath, `<div class="md:[&:hover]:content-['testing_default_base_path']">`)
+  })
   afterEach(() => unlink(filepath))
 
   test('the current working directory is used by default', async () => {
+    const spy = vi.spyOn(process, 'cwd')
+    spy.mockReturnValue(dir)
+
     let processor = postcss([tailwindcss({ optimize: { minify: false } })])
 
     let result = await processor.process(`@import "tailwindcss"`, { from: inputCssFilePath() })

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