Don’t break the build when encountering candidates with invalid `them…

…e()` calls

Co-authored-by: Adam Wathan <adam.wathan@gmail.com>

packages/tailwindcss/src/compile.ts

@@ -1,5 +1,6 @@
 import { decl, rule, walk, WalkAction, type AstNode, type Rule } from './ast'
 import { type Candidate, type Variant } from './candidate'
+import { substituteFunctions } from './css-functions'
 import { type DesignSystem } from './design-system'
 import GLOBAL_PROPERTY_ORDER from './property-order'
 import { asColor, type Utility } from './utilities'
@@ -40,6 +41,22 @@ export function compileCandidates(
       let rules = designSystem.compileAstNodes(candidate)
       if (rules.length === 0) continue
 
+      // Arbitrary values (`text-[theme(--color-red-500)]`) and arbitrary
+      // properties (`[--my-var:theme(--color-red-500)]`) can contain function
+      // calls so we need evaluate any functions we find there that weren't in
+      // the source CSS.
+      try {
+        substituteFunctions(
+          rules.map(({ node }) => node),
+          designSystem.resolveThemeValue,
+        )
+      } catch (err) {
+        // If substitution fails then the candidate likely contains a call to
+        // `theme()` that is invalid which may be because of incorrect usage,
+        // invalid arguments, or a theme key that does not exist.
+        continue
+      }
+
       found = true
 
       for (let { node, propertySort } of rules) {

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

@@ -606,6 +606,17 @@ describe('theme function', () => {
         }"
       `)
     })
+
+    test('values that dont exist dont produce candidates', async () => {
+      expect(
+        await compileCss(
+          css`
+            @tailwind utilities;
+          `,
+          ['rounded-[theme(i.do.not.exist)]', 'rounded-[theme(--i-do-not-exist)]'],
+        ),
+      ).toEqual('')
+    })
   })
 
   describe('in @media queries', () => {

packages/tailwindcss/src/index.ts

@@ -385,12 +385,6 @@ export async function compile(
           return compiledCss
         }
 
-        // Arbitrary values (`text-[theme(--color-red-500)]`) and arbitrary
-        // properties (`[--my-var:theme(--color-red-500)]`) can contain function
-        // calls so we need evaluate any functions we find there that weren't in
-        // the source CSS.
-        substituteFunctions(newNodes, designSystem.resolveThemeValue)
-
         previousAstNodeCount = newNodes.length
 
         tailwindUtilitiesNode.nodes = newNodes