From 262e99e5a9e85ab87cad11879afa42b7532ddc15 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Wed, 4 Sep 2024 15:03:46 -0400
Subject: [PATCH] Support arrays in JS config values (#14343)

This PR fixes a small bug where theme values could not be defined as
arrays in JS config files, for example:

```js
export default {
  theme: {
    fontFamily: {
      sans: ['Inter', 'system-ui', 'sans-serif'],
    },
  },
}
```

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
---
 CHANGELOG.md                                           |  1 +
 .../src/compat/apply-config-to-theme.test.ts           | 10 ++++++++++
 .../tailwindcss/src/compat/apply-config-to-theme.ts    |  5 +++++
 3 files changed, 16 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8c6bf3eb1..99ddae217 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ensure theme values overridden with `reference` values don't generate stale CSS variables ([#14327](https://github.com/tailwindlabs/tailwindcss/pull/14327))
 - Don’t suggest named opacity modifiers in intellisense ([#14339](https://github.com/tailwindlabs/tailwindcss/pull/14339))
 - Fix a crash with older Node.js versions ([#14342](https://github.com/tailwindlabs/tailwindcss/pull/14342))
+- Support defining theme values as arrays of strings in JS config files ([#14343](https://github.com/tailwindlabs/tailwindcss/pull/14343))
 
 ## [4.0.0-alpha.21] - 2024-09-02
 
diff --git a/packages/tailwindcss/src/compat/apply-config-to-theme.test.ts b/packages/tailwindcss/src/compat/apply-config-to-theme.test.ts
index 6627fd868..65066ee07 100644
--- a/packages/tailwindcss/src/compat/apply-config-to-theme.test.ts
+++ b/packages/tailwindcss/src/compat/apply-config-to-theme.test.ts
@@ -18,6 +18,11 @@ test('Config values can be merged into the theme', ({ expect }) => {
             },
           },
 
+          fontFamily: {
+            sans: ['Inter', 'system-ui', 'sans-serif'],
+            mono: ['Potato Mono', { fontVariationSettings: '"XHGT" 0.7' }],
+          },
+
           fontSize: {
             sm: '0.875rem',
             base: [
@@ -34,6 +39,11 @@ test('Config values can be merged into the theme', ({ expect }) => {
 
   expect(theme.resolve('primary', ['--color'])).toEqual('#c0ffee')
   expect(theme.resolve('red-500', ['--color'])).toEqual('red')
+  expect(theme.resolve('sans', ['--font-family'])).toEqual('Inter, system-ui, sans-serif')
+  expect(theme.resolveWith('mono', ['--font-family'], ['--font-variation-settings'])).toEqual([
+    'Potato Mono',
+    { '--font-variation-settings': '"XHGT" 0.7' },
+  ])
   expect(theme.resolve('sm', ['--font-size'])).toEqual('0.875rem')
   expect(theme.resolve('base', ['--font-size'])).toEqual('1rem')
   expect(theme.resolveWith('base', ['--font-size'], ['--line-height'])).toEqual([
diff --git a/packages/tailwindcss/src/compat/apply-config-to-theme.ts b/packages/tailwindcss/src/compat/apply-config-to-theme.ts
index 325c37118..b3a24193e 100644
--- a/packages/tailwindcss/src/compat/apply-config-to-theme.ts
+++ b/packages/tailwindcss/src/compat/apply-config-to-theme.ts
@@ -37,6 +37,11 @@ function themeableValues(config: ResolvedConfig['theme']): [string[], unknown][]
 
       return WalkAction.Skip
     }
+
+    if (Array.isArray(value) && value.every((v) => typeof v === 'string')) {
+      toAdd.push([path, value.join(', ')])
+      return WalkAction.Skip
+    }
   })
 
   return toAdd