From 895b672fa590e4ae20ff0a2f60fb841b9bd8f409 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Thu, 13 Oct 2022 11:14:40 -0400
Subject: [PATCH] Make sure we can return null from matchUtilities to omit
 rules

---
 tests/match-utilities.test.js | 46 +++++++++++++++++++++++++++++++++++
 types/config.d.ts             |  4 +--
 2 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/tests/match-utilities.test.js b/tests/match-utilities.test.js
index 35066d51d538..ac3dcedcd402 100644
--- a/tests/match-utilities.test.js
+++ b/tests/match-utilities.test.js
@@ -116,3 +116,49 @@ test('match utilities with modifiers in the config', async () => {
     }
   `)
 })
+
+test('match utilities can omit utilities by returning null', async () => {
+  let config = {
+    content: [
+      {
+        raw: html`<div class="test test/good test/bad"></div> `,
+      },
+    ],
+    corePlugins: { preflight: false },
+
+    plugins: [
+      ({ matchUtilities, theme }) => {
+        matchUtilities(
+          {
+            test: (value, { modifier }) => (modifier === 'bad' ? null : {
+              color: `${value}_${modifier}`,
+            }),
+          },
+          {
+            values: {
+              DEFAULT: 'default',
+              bar: 'bar',
+              '1': 'one',
+            },
+            modifiers: 'any',
+          }
+        )
+      },
+    ],
+  }
+
+  let input = css`
+    @tailwind utilities;
+  `
+
+  let result = await run(input, config)
+
+  expect(result.css).toMatchFormattedCss(css`
+    .test {
+      color: default_null;
+    }
+    .test\/good {
+      color: default_good;
+    }
+  `)
+})
diff --git a/types/config.d.ts b/types/config.d.ts
index cf9e91427d53..0df3620611c9 100644
--- a/types/config.d.ts
+++ b/types/config.d.ts
@@ -266,7 +266,7 @@ export interface PluginAPI {
   matchUtilities<T = string, U = string>(
     utilities: KeyValuePair<
       string,
-      (value: T | string, extra: { modifier: U | string | null }) => CSSRuleObject
+      (value: T | string, extra: { modifier: U | string | null }) => CSSRuleObject | null
     >,
     options?: Partial<{
       respectPrefix: boolean
@@ -289,7 +289,7 @@ export interface PluginAPI {
   matchComponents<T = string, U = string>(
     components: KeyValuePair<
       string,
-      (value: T | string, extra: { modifier: U | string | null }) => CSSRuleObject
+      (value: T | string, extra: { modifier: U | string | null }) => CSSRuleObject | null
     >,
     options?: Partial<{
       respectPrefix: boolean