Add matchUtilities helper, migrate backgroundOpacity

Author: adamwathan

src/corePlugins/backgroundColor.js

@@ -4,28 +4,25 @@ const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').
 const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable').default
 const toColorValue = require('tailwindcss/lib/util/toColorValue').default
 const { asColor } = require('../pluginUtils')
-const { newFormat } = require('../pluginUtils')
 
-module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
+module.exports = function ({ matchUtilities, jit: { theme } }) {
   let colorPalette = flattenColorPalette(theme.backgroundColor)
 
-  addUtilities({
-    bg: [
-      newFormat((modifier, { theme }) => {
-        let value = asColor(modifier, colorPalette)
+  matchUtilities({
+    bg: (modifier, { theme }) => {
+      let value = asColor(modifier, colorPalette)
 
-        if (value === undefined) {
-          return []
-        }
+      if (value === undefined) {
+        return []
+      }
 
-        return {
-          [nameClass('bg', modifier)]: withAlphaVariable({
-            color: value,
-            property: 'background-color',
-            variable: '--tw-bg-opacity',
-          }),
-        }
-      }),
-    ],
+      return {
+        [nameClass('bg', modifier)]: withAlphaVariable({
+          color: value,
+          property: 'background-color',
+          variable: '--tw-bg-opacity',
+        }),
+      }
+    },
   })
 }

src/corePlugins/backgroundImage.js

@@ -1,18 +1,15 @@
 const nameClass = require('tailwindcss/lib/util/nameClass').default
-const { newFormat } = require('../pluginUtils')
 
-module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
-  addUtilities({
-    bg: [
-      newFormat((modifier, { theme }) => {
-        let value = theme.backgroundImage[modifier]
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    bg: (modifier, { theme }) => {
+      let value = theme.backgroundImage[modifier]
 
-        if (value === undefined) {
-          return []
-        }
+      if (value === undefined) {
+        return []
+      }
 
-        return { [nameClass('bg', modifier)]: { 'background-image': value } }
-      }),
-    ],
+      return { [nameClass('bg', modifier)]: { 'background-image': value } }
+    },
   })
 }

src/corePlugins/backgroundOpacity.js

@@ -2,20 +2,18 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default
 const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
 const { asValue } = require('../pluginUtils')
 
-module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
+module.exports = function ({ matchUtilities, jit: { theme, addVariant, e } }) {
   let transformValue = transformThemeValue('backgroundOpacity')
 
-  addUtilities({
-    'bg-opacity': [
-      (modifier, { theme }) => {
-        let value = asValue(modifier, theme.backgroundOpacity)
+  matchUtilities({
+    'bg-opacity': (modifier, { theme }) => {
+      let value = asValue(modifier, theme.backgroundOpacity)
 
-        if (value === undefined) {
-          return []
-        }
+      if (value === undefined) {
+        return []
+      }
 
-        return [[nameClass('bg-opacity', modifier), { '--tw-bg-opacity': value }]]
-      },
-    ],
+      return { [nameClass('bg-opacity', modifier)]: { '--tw-bg-opacity': value } }
+    },
   })
 }

src/lib/setupContext.js

@@ -342,6 +342,22 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
     return prefixSelector(tailwindConfig.prefix, selector)
   }
 
+  function addUtilities(utilities) {
+    let offset = offsets.utilities++
+
+    for (let identifier in utilities) {
+      let value = [].concat(utilities[identifier])
+
+      let withOffsets = value.map((rule) => [{ sort: offset, layer: 'utilities' }, rule])
+
+      if (!context.candidateRuleMap.has(identifier)) {
+        context.candidateRuleMap.set(identifier, [])
+      }
+
+      context.candidateRuleMap.get(identifier).push(...withOffsets)
+    }
+  }
+
   return {
     // Classic plugin API
     addVariant(variantName, applyThisVariant, options = {}) {
@@ -430,6 +446,16 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
         context.candidateRuleMap.get(identifier).push([{ sort: offset, layer: 'utilities' }, rule])
       }
     },
+    matchUtilities: function (utilities) {
+      utilities = Object.fromEntries(
+        Object.entries(utilities).map(([key, value]) => {
+          value.format = 'new'
+          return [key, value]
+        })
+      )
+
+      addUtilities(utilities)
+    },
     // ---
     jit: {
       e: escapeClassName,
@@ -454,21 +480,7 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
           context.candidateRuleMap.get(identifier).push(...withOffsets)
         }
       },
-      addUtilities(utilities) {
-        let offset = offsets.utilities++
-
-        for (let identifier in utilities) {
-          let value = [].concat(utilities[identifier])
-
-          let withOffsets = value.map((rule) => [{ sort: offset, layer: 'utilities' }, rule])
-
-          if (!context.candidateRuleMap.has(identifier)) {
-            context.candidateRuleMap.set(identifier, [])
-          }
-
-          context.candidateRuleMap.get(identifier).push(...withOffsets)
-        }
-      },
+      addUtilities,
     },
   }
 }