Fix issues with the CSS theme() function (#14262)

While working on #14257, we noticed two issues with the CSS `theme()`
function:

1. In V3 it's possible to set arrays inside the theme object. An example
for this is the default font families as defined here:
https://github.com/tailwindlabs/tailwindcss/blob/main/stubs/config.full.js#L303-L311.
We now properly join these arrays that are not tuples.
2. We noticed that in the case where there are no modifiers, the
fallback values for the CSS `theme()` function had the first word
removed. A regression test for this was added.

Author: philipp-spiess

CHANGELOG.md

@@ -11,6 +11,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Bring back type exports for the cjs build of `@tailwindcss/postcss`. ([#14256](https://github.com/tailwindlabs/tailwindcss/pull/14256))
 - Correctly merge tuple values when using the plugin API ([#14260](https://github.com/tailwindlabs/tailwindcss/pull/14260))
+- Handle arrays in the CSS `theme()` function when using plugins ([#14262](https://github.com/tailwindlabs/tailwindcss/pull/14262))
+- Fix fallback values when using the CSS `theme()` function ([#14262](https://github.com/tailwindlabs/tailwindcss/pull/14262))
 
 ## [4.0.0-alpha.20] - 2024-08-23
 

packages/tailwindcss/src/functions.test.ts

@@ -335,16 +335,16 @@ describe('theme function', () => {
         `)
       })
 
-      test('theme(fontFamily.sans, Helvetica Neue, Helvetica, sans-serif)', async () => {
+      test('theme(fontFamily.unknown, Helvetica Neue, Helvetica, sans-serif)', async () => {
         expect(
           await compileCss(css`
             .fam {
-              font-family: theme(fontFamily.sans, Helvetica Neue, Helvetica, sans-serif);
+              font-family: theme(fontFamily.unknown, Helvetica Neue, Helvetica, sans-serif);
             }
           `),
         ).toMatchInlineSnapshot(`
           ".fam {
-            font-family: Neue, Helvetica, sans-serif;
+            font-family: Helvetica Neue, Helvetica, sans-serif;
           }"
         `)
       })

packages/tailwindcss/src/functions.ts

@@ -59,11 +59,11 @@ export function substituteFunctionsInValue(value: string, pluginApi: PluginAPI):
           break
         }
         path += node.nodes[i].value
-        skipUntilIndex = i
+        skipUntilIndex = i + 1
       }
 
       path = eventuallyUnquote(path)
-      let fallbackValues = node.nodes.slice(skipUntilIndex + 2)
+      let fallbackValues = node.nodes.slice(skipUntilIndex + 1)
 
       replaceWith(cssThemeFn(pluginApi, path, fallbackValues))
     }
@@ -90,11 +90,13 @@ function cssThemeFn(
   let resolvedValue: string | null = null
   let themeValue = pluginApi.theme(path)
 
-  if (Array.isArray(themeValue)) {
+  if (Array.isArray(themeValue) && themeValue.length === 2) {
     // When a tuple is returned, return the first element
     resolvedValue = themeValue[0]
     // We otherwise only ignore string values here, objects (and namespace maps)
     // are treated as non-resolved values for the CSS `theme()` function.
+  } else if (Array.isArray(themeValue)) {
+    resolvedValue = themeValue.join(', ')
   } else if (typeof themeValue === 'string') {
     resolvedValue = themeValue
   }