Update plugins to new return signature

src/corePlugins/animation.js

@@ -1,25 +1,25 @@
 const nameClass = require('tailwindcss/lib/util/nameClass').default
 const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
 const parseAnimationValue = require('tailwindcss/lib/util/parseAnimationValue').default
+const { newFormat } = require('../pluginUtils')
 
-module.exports = function ({ jit: { theme, addUtilities } }) {
+module.exports = function ({ matchUtilities, jit: { theme } }) {
   let keyframes = Object.fromEntries(
     Object.entries(theme.keyframes).map(([key, value]) => {
       return [
         key,
         [
-          `@keyframes ${key}`,
-          Object.entries(value).map(([key, value]) => {
-            return [key, value]
-          }),
+          {
+            [`@keyframes ${key}`]: value,
+          },
+          { respectVariants: false },
         ],
-        { respectVariants: false },
       ]
     })
   )
 
   let transformValue = transformThemeValue('animation')
-  addUtilities({
+  matchUtilities({
     animate: [
       (modifier, { theme }) => {
         let value = transformValue(theme.animation[modifier])
@@ -30,7 +30,10 @@ module.exports = function ({ jit: { theme, addUtilities } }) {
 
         let { name: animationName } = parseAnimationValue(value)
 
-        return [keyframes[animationName], [nameClass('animate', modifier), { animation: value }]]
+        return [
+          keyframes[animationName],
+          { [nameClass('animate', modifier)]: { animation: value } },
+        ]
       },
     ],
   })

src/corePlugins/backgroundColor.js

@@ -5,29 +5,24 @@ const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable').defa
 const toColorValue = require('tailwindcss/lib/util/toColorValue').default
 const { asColor } = require('../pluginUtils')
 
-module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
+module.exports = function ({ matchUtilities, jit: { theme } }) {
   let colorPalette = flattenColorPalette(theme.backgroundColor)
 
-  addUtilities({
-    bg: [
-      (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,17 +1,15 @@
 const nameClass = require('tailwindcss/lib/util/nameClass').default
 
-module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
-  addUtilities({
-    bg: [
-      (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

@@ -1,21 +1,16 @@
 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 } }) {
-  let transformValue = transformThemeValue('backgroundOpacity')
+module.exports = function ({ matchUtilities, jit: { theme, addVariant, e } }) {
+  matchUtilities({
+    'bg-opacity': (modifier, { theme }) => {
+      let value = asValue(modifier, theme.backgroundOpacity)
 
-  addUtilities({
-    '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/corePlugins/backgroundPosition.js

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

src/corePlugins/backgroundSize.js

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

src/corePlugins/borderColor.js

@@ -1,37 +1,31 @@
 const nameClass = require('tailwindcss/lib/util/nameClass').default
-const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
 const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default
 const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable').default
 const toColorValue = require('tailwindcss/lib/util/toColorValue').default
 const { asColor } = require('../pluginUtils')
 
-module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
+module.exports = function ({ matchUtilities, jit: { theme } }) {
   let colorPalette = flattenColorPalette(theme.borderColor)
 
-  addUtilities({
-    border: [
-      (modifier, { theme }) => {
-        if (modifier === 'DEFAULT') {
-          return []
-        }
+  matchUtilities({
+    border: (modifier, { theme }) => {
+      if (modifier === 'DEFAULT') {
+        return []
+      }
 
-        let value = asColor(modifier, colorPalette)
+      let value = asColor(modifier, colorPalette)
 
-        if (value === undefined) {
-          return []
-        }
+      if (value === undefined) {
+        return []
+      }
 
-        return [
-          [
-            nameClass('border', modifier),
-            withAlphaVariable({
-              color: colorPalette[modifier],
-              property: 'border-color',
-              variable: '--tw-border-opacity',
-            }),
-          ],
-        ]
-      },
-    ],
+      return {
+        [nameClass('border', modifier)]: withAlphaVariable({
+          color: colorPalette[modifier],
+          property: 'border-color',
+          variable: '--tw-border-opacity',
+        }),
+      }
+    },
   })
 }

src/corePlugins/borderOpacity.js

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