From e62525226efef19e0a69d38a59690c9fa2b3c910 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 21 Sep 2022 14:31:08 +0200
Subject: [PATCH] Ignore unset values (like `null` or `undefined`) when
 resolving the classList for intellisense (#9385)

* ignored `undefined` and `null` value values for intellisense

We are not completely ignoring "all" falsey values, because then we
would get rid of `0` values (e.g.: `p-0`) which is not what we want.

* update changelog
---
 CHANGELOG.md                 |  1 +
 src/lib/setupContextUtils.js |  5 +++++
 tests/getClassList.test.js   | 35 +++++++++++++++++++++++++++++++++++
 3 files changed, 41 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5bc5953591a9..67422131aaff 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -34,6 +34,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improve data type analyses for arbitrary values ([#9320](https://github.com/tailwindlabs/tailwindcss/pull/9320))
 - Don't emit generated utilities with invalid uses of theme functions ([#9319](https://github.com/tailwindlabs/tailwindcss/pull/9319))
 - Revert change that only listened for stdin close on TTYs ([#9331](https://github.com/tailwindlabs/tailwindcss/pull/9331))
+- Ignore unset values (like `null` or `undefined`) when resolving the classList for intellisense ([#9385](https://github.com/tailwindlabs/tailwindcss/pull/9385))
 
 ## [3.1.8] - 2022-08-05
 
diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js
index 8fda594280cb..2b8c095022ec 100644
--- a/src/lib/setupContextUtils.js
+++ b/src/lib/setupContextUtils.js
@@ -838,6 +838,11 @@ function registerPlugins(plugins, context) {
         let negativeClasses = []
 
         for (let [key, value] of Object.entries(options?.values ?? {})) {
+          // Ignore undefined and null values
+          if (value == null) {
+            continue
+          }
+
           output.push(formatClass(utilName, key))
           if (options?.supportsNegativeValues && negateValue(value)) {
             negativeClasses.push(formatClass(utilName, `-${key}`))
diff --git a/tests/getClassList.test.js b/tests/getClassList.test.js
index 2f0431faea30..8fd2df6f191c 100644
--- a/tests/getClassList.test.js
+++ b/tests/getClassList.test.js
@@ -82,3 +82,38 @@ it('should not generate utilities with opacity even if safe-listed', () => {
 
   expect(classes).not.toContain('bg-red-500/50')
 })
+
+it('should not generate utilities that are set to undefined or null to so that they are removed', () => {
+  let config = {
+    theme: {
+      extend: {
+        colors: {
+          red: null,
+          green: undefined,
+          blue: {
+            100: null,
+            200: undefined,
+          },
+        },
+      },
+    },
+    safelist: [
+      {
+        pattern: /^bg-(red|green|blue)-.*$/,
+      },
+    ],
+  }
+
+  let context = createContext(resolveConfig(config))
+  let classes = context.getClassList()
+
+  expect(classes).not.toContain('bg-red-100') // Red is `null`
+
+  expect(classes).not.toContain('bg-green-100') // Green is `undefined`
+
+  expect(classes).not.toContain('bg-blue-100') // Blue.100 is `null`
+  expect(classes).not.toContain('bg-blue-200') // Blue.200 is `undefined`
+
+  expect(classes).toContain('bg-blue-50')
+  expect(classes).toContain('bg-blue-300')
+})