From 36694377ef0847754ed2a63a4fdbb7448d0d279f Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Thu, 9 Jan 2025 17:15:26 +0100
Subject: [PATCH] =?UTF-8?q?ensure=20`--theme(=E2=80=A6)`=20can=20only=20be?=
 =?UTF-8?q?=20used=20with=20CSS=20variables?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Let's not allow old dot-notation, `--theme(colors.red.500)` should
error. Even though we can make it works, we want to nudge people in
using the new/modern syntax.
---
 packages/tailwindcss/src/css-functions.test.ts | 15 ++++++++++++++-
 packages/tailwindcss/src/css-functions.ts      | 10 +++++++++-
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/packages/tailwindcss/src/css-functions.test.ts b/packages/tailwindcss/src/css-functions.test.ts
index bca419c3a40a..c91f5fee7787 100644
--- a/packages/tailwindcss/src/css-functions.test.ts
+++ b/packages/tailwindcss/src/css-functions.test.ts
@@ -146,7 +146,7 @@ describe('--spacing(…)', () => {
 })
 
 describe('--theme(…)', () => {
-  test('theme(--color-red-500)', async () => {
+  test('--theme(--color-red-500)', async () => {
     expect(
       await compileCss(css`
         @theme {
@@ -166,6 +166,19 @@ describe('--theme(…)', () => {
       }"
     `)
   })
+
+  test('--theme(…) can only be used with CSS variables from your theme', async () => {
+    expect(() =>
+      compileCss(css`
+        @theme {
+          --color-red-500: #f00;
+        }
+        .red {
+          color: --theme(colors.red.500);
+        }
+      `),
+    ).rejects.toThrowErrorMatchingInlineSnapshot(`[Error: The --theme(…) function can only be used with CSS variables from your theme.]`)
+  })
 })
 
 describe('theme(…)', () => {
diff --git a/packages/tailwindcss/src/css-functions.ts b/packages/tailwindcss/src/css-functions.ts
index ecd546e7ad8d..bb27658c5929 100644
--- a/packages/tailwindcss/src/css-functions.ts
+++ b/packages/tailwindcss/src/css-functions.ts
@@ -9,7 +9,7 @@ const functions: Record<string, (designSystem: DesignSystem, ...args: string[])
   '--alpha': alpha,
   '--spacing': spacing,
   '--theme': theme,
-  theme,
+  theme: legacyTheme,
 }
 
 function alpha(_designSystem: DesignSystem, value: string, alpha: string, ...rest: string[]) {
@@ -50,6 +50,14 @@ function spacing(designSystem: DesignSystem, value: string, ...rest: string[]) {
 }
 
 function theme(designSystem: DesignSystem, path: string, ...fallback: string[]) {
+  if (!path.startsWith('--')) {
+    throw new Error(`The --theme(…) function can only be used with CSS variables from your theme.`)
+  }
+
+  return legacyTheme(designSystem, path, ...fallback)
+}
+
+function legacyTheme(designSystem: DesignSystem, path: string, ...fallback: string[]) {
   path = eventuallyUnquote(path)
 
   let resolvedValue = designSystem.resolveThemeValue(path)