Don't crash when setting JS theme value to null'

Author: philipp-spiess

packages/tailwindcss/src/compat/apply-config-to-theme.test.ts

@@ -4,6 +4,8 @@ import { Theme, ThemeOptions } from '../theme'
 import { applyConfigToTheme, keyPathToCssProperty } from './apply-config-to-theme'
 import { resolveConfig } from './config/resolve-config'
 
+const css = String.raw
+
 test('config values can be merged into the theme', () => {
   let theme = new Theme()
   let design = buildDesignSystem(theme)
@@ -223,3 +225,39 @@ test('converts opacity modifiers from decimal to percentage values', () => {
   expect(theme.resolve('20', ['--opacity'])).toEqual('20%')
   expect(theme.resolve('25', ['--opacity'])).toEqual('25%')
 })
+
+test('handles setting theme keys to null', async () => {
+  let theme = new Theme()
+  let design = buildDesignSystem(theme)
+
+  theme.add('--color-blue-400', 'blue', ThemeOptions.DEFAULT)
+  theme.add('--color-blue-500', '#3b82f6')
+  theme.add('--color-red-400', 'red', ThemeOptions.DEFAULT)
+  theme.add('--color-red-500', '#ef4444')
+
+  let { resolvedConfig, replacedThemeKeys } = resolveConfig(design, [
+    {
+      config: {
+        theme: {
+          extend: {
+            colors: {
+              blue: null,
+            },
+          },
+        },
+      },
+      base: '/root',
+      reference: false,
+    },
+  ])
+  applyConfigToTheme(design, resolvedConfig, replacedThemeKeys)
+
+  expect(theme.namespace('--color')).toMatchInlineSnapshot(`
+    Map {
+      "blue-400" => "blue",
+      "blue-500" => "#3b82f6",
+      "red-400" => "red",
+      "red-500" => "#ef4444",
+    }
+  `)
+})

packages/tailwindcss/src/compat/config.test.ts

@@ -1628,3 +1628,54 @@ test('old theme values are merged with their renamed counterparts in the CSS the
 
   expect(didCallPluginFn).toHaveBeenCalled()
 })
+
+test('handles setting theme keys to null', async () => {
+  let compiler = await compile(
+    css`
+      @theme default {
+        --color-red-50: oklch(0.971 0.013 17.38);
+        --color-red-100: oklch(0.936 0.032 17.717);
+      }
+      @config "./my-config.js";
+      @tailwind utilities;
+      @theme {
+        --color-red-100: oklch(0.936 0.032 17.717);
+        --color-red-200: oklch(0.885 0.062 18.334);
+      }
+    `,
+    {
+      loadModule: async () => {
+        return {
+          module: {
+            theme: {
+              extend: {
+                colors: {
+                  red: null,
+                },
+              },
+            },
+          },
+          base: '/root',
+        }
+      },
+    },
+  )
+
+  expect(compiler.build(['bg-red-50', 'bg-red-100', 'bg-red-200'])).toMatchInlineSnapshot(`
+    ":root, :host {
+      --color-red-50: oklch(0.971 0.013 17.38);
+      --color-red-100: oklch(0.936 0.032 17.717);
+      --color-red-200: oklch(0.885 0.062 18.334);
+    }
+    .bg-red-50 {
+      background-color: var(--color-red-50);
+    }
+    .bg-red-100 {
+      background-color: var(--color-red-100);
+    }
+    .bg-red-200 {
+      background-color: var(--color-red-200);
+    }
+    "
+  `)
+})

packages/tailwindcss/src/compat/config/resolve-config.test.ts

@@ -254,3 +254,48 @@ test('theme keys can read from the CSS theme', () => {
     new Set(['colors', 'accentColor', 'placeholderColor', 'caretColor', 'transitionColor']),
   )
 })
+
+test('handles null as theme values', () => {
+  let theme = new Theme()
+  theme.add('--color-red-50', 'red')
+  theme.add('--color-red-100', 'red')
+
+  let design = buildDesignSystem(theme)
+
+  let { resolvedConfig, replacedThemeKeys } = resolveConfig(design, [
+    {
+      config: {
+        theme: {
+          colors: ({ theme }) => ({
+            // Reads from the --color-* namespace
+            ...theme('color'),
+          }),
+        },
+      },
+      base: '/root',
+      reference: false,
+    },
+    {
+      config: {
+        theme: {
+          extend: {
+            colors: {
+              red: null,
+            },
+          },
+        },
+      },
+      base: '/root',
+      reference: false,
+    },
+  ])
+
+  expect(resolvedConfig).toMatchObject({
+    theme: {
+      colors: {
+        red: null,
+      },
+    },
+  })
+  expect(replacedThemeKeys).toEqual(new Set(['colors']))
+})

packages/tailwindcss/src/compat/plugin-functions.ts

@@ -224,7 +224,7 @@ function get(obj: any, path: string[]) {
     let key = path[i]
 
     // The key does not exist so concatenate it with the next key
-    if (obj[key] === undefined) {
+    if (obj?.[key] === undefined) {
       if (path[i + 1] === undefined) {
         return undefined
       }