diff --git a/CHANGELOG.md b/CHANGELOG.md index f6f62b602..21c59534f 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/packages/tailwindcss/src/functions.test.ts b/packages/tailwindcss/src/functions.test.ts index 91d7fe6b4..6232faba7 100644 --- a/packages/tailwindcss/src/functions.test.ts +++ b/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; }" `) }) diff --git a/packages/tailwindcss/src/functions.ts b/packages/tailwindcss/src/functions.ts index 6304858fc..5938b8497 100644 --- a/packages/tailwindcss/src/functions.ts +++ b/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 }