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`
`, + }, + ], + 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( 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( 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