ensure --theme(…) can only be used with CSS variables

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

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

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)