Make sure we can return null from matchUtilities to omit rules

tailwindlabs · Oct 13, 2022 · 895b672 · 895b672
1 parent 1ca6fe7
commit 895b672
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 2 deletions.
diff --git 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
@@ -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