Allow modifiers to be a config object

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

Hide file tree

Showing 3 changed files with 78 additions and 9 deletions.
diff --git a/src/util/pluginUtils.js b/src/util/pluginUtils.js
@@ -230,7 +230,9 @@ export function coerceValue(types, modifier, options, tailwindConfig) {
  * @returns {Iterator<[value: string, type: string, modifier: string | null]>}
  */
 export function* getMatchingTypes(types, rawModifier, options, tailwindConfig) {
-  let canUseUtilityModifier = options.modifiers === true
+  let canUseUtilityModifier = options.modifiers != null && (
+    options.modifiers === 'any' || typeof options.modifiers === 'object'
+  )
 
   let [modifier, utilityModifier] = canUseUtilityModifier
     ? splitUtilityModifier(rawModifier)
@@ -243,6 +245,15 @@ export function* getMatchingTypes(types, rawModifier, options, tailwindConfig) {
   // Check the full value first
   // TODO: Move to asValue… somehow
   if (utilityModifier !== undefined) {
+    if (typeof options.modifiers === 'object') {
+      let configValue = options.modifiers?.[utilityModifier] ?? null
+      if (configValue !== null) {
+        utilityModifier = configValue
+      } else if (isArbitraryValue(utilityModifier)) {
+        utilityModifier = utilityModifier.slice(1, -1)
+      }
+    }
+
     let result = asValue(rawModifier, options, { rawModifier, utilityModifier, tailwindConfig })
     if (result !== undefined) {
       yield [result, 'any', null]

diff --git a/tests/match-utilities.test.js b/tests/match-utilities.test.js
@@ -8,8 +8,9 @@ test('match utilities with modifiers', async () => {
       },
     ],
     corePlugins: { preflight: false },
+
     plugins: [
-      ({ matchUtilities }) => {
+      ({ matchUtilities, theme }) => {
         matchUtilities(
           {
             test: (value, { modifier }) => ({
@@ -24,7 +25,7 @@ test('match utilities with modifiers', async () => {
               '2': 'two',
               '1/foo': 'onefoo',
             },
-            modifiers: true,
+            modifiers: 'any',
           }
         )
       },
@@ -58,3 +59,60 @@ test('match utilities with modifiers', async () => {
     }
   `)
 })
+
+test('match utilities with modifiers in the config', async () => {
+  let config = {
+    content: [
+      {
+        raw: html`<div class="test test/foo test-1/foo test/[bar] test-1/[bar]"></div> `,
+      },
+    ],
+    corePlugins: { preflight: false },
+
+    plugins: [
+      ({ matchUtilities, theme }) => {
+        matchUtilities(
+          {
+            test: (value, { modifier }) => ({
+              color: `${value}_${modifier}`,
+            }),
+          },
+          {
+            values: {
+              DEFAULT: 'default',
+              bar: 'bar',
+              '1': 'one',
+            },
+            modifiers: {
+              foo: 'mewtwo',
+            },
+          }
+        )
+      },
+    ],
+  }
+
+  let input = css`
+    @tailwind utilities;
+  `
+
+  let result = await run(input, config)
+
+  expect(result.css).toMatchFormattedCss(css`
+    .test {
+      color: default_null;
+    }
+    .test\/foo {
+      color: default_mewtwo;
+    }
+    .test-1\/foo {
+      color: one_mewtwo;
+    }
+    .test\/\[bar\] {
+      color: default_bar;
+    }
+    .test-1\/\[bar\] {
+      color: one_bar;
+    }
+  `)
+})
diff --git a/types/config.d.ts b/types/config.d.ts
@@ -263,17 +263,17 @@ export interface PluginAPI {
     }>
   ): void
   // for registering new dynamic utility styles
-  matchUtilities<T = string>(
+  matchUtilities<T = string, U = string>(
     utilities: KeyValuePair<
       string,
-      (value: T | string, extra: { modifier: string | null }) => CSSRuleObject
+      (value: T | string, extra: { modifier: U | string | null }) => CSSRuleObject
     >,
     options?: Partial<{
       respectPrefix: boolean
       respectImportant: boolean
       type: ValueType | ValueType[]
       values: KeyValuePair<string, T>
-      modifiers: false | true
+      modifiers: 'any' | KeyValuePair<string, U>
       supportsNegativeValues: boolean
     }>
   ): void
@@ -286,17 +286,17 @@ export interface PluginAPI {
     }>
   ): void
   // for registering new dynamic component styles
-  matchComponents<T = string>(
+  matchComponents<T = string, U = string>(
     components: KeyValuePair<
       string,
-      (value: T | string, extra: { modifier: string | null }) => CSSRuleObject
+      (value: T | string, extra: { modifier: U | string | null }) => CSSRuleObject
     >,
     options?: Partial<{
       respectPrefix: boolean
       respectImportant: boolean
       type: ValueType | ValueType[]
       values: KeyValuePair<string, T>
-      modifiers: false | true
+      modifiers: 'any' | KeyValuePair<string, U>
       supportsNegativeValues: boolean
     }>
   ): void