Ignore unset values (like null or undefined) when resolving the classList for intellisense

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
 

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}`))

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')
+})