From f97a87ac7daeb33d409fbd295537f49ea8f4b1cb Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Sun, 4 Apr 2021 18:40:17 -0400
Subject: [PATCH] Optimize filter plugins for JIT + add arbitrary value support

Except for drop-shadow, will add that once we can think it through a bit.
---
 jit/tests/arbitrary-values.test.css  | 51 ++++++++++++++++++++++++++++
 jit/tests/arbitrary-values.test.html | 17 ++++++++++
 jit/tests/arbitrary-values.test.js   |  1 +
 src/plugins/backdropBlur.js          | 44 ++++++++++++++++--------
 src/plugins/backdropBrightness.js    | 46 +++++++++++++++++--------
 src/plugins/backdropContrast.js      | 46 +++++++++++++++++--------
 src/plugins/backdropGrayscale.js     | 46 +++++++++++++++++--------
 src/plugins/backdropHueRotate.js     | 46 +++++++++++++++++--------
 src/plugins/backdropInvert.js        | 46 +++++++++++++++++--------
 src/plugins/backdropOpacity.js       | 46 +++++++++++++++++--------
 src/plugins/backdropSaturate.js      | 46 +++++++++++++++++--------
 src/plugins/backdropSepia.js         | 46 +++++++++++++++++--------
 src/plugins/blur.js                  | 42 +++++++++++++++--------
 src/plugins/brightness.js            | 44 ++++++++++++++++--------
 src/plugins/contrast.js              | 44 ++++++++++++++++--------
 src/plugins/grayscale.js             | 44 ++++++++++++++++--------
 src/plugins/hueRotate.js             | 44 ++++++++++++++++--------
 src/plugins/invert.js                | 44 ++++++++++++++++--------
 src/plugins/saturate.js              | 44 ++++++++++++++++--------
 src/plugins/sepia.js                 | 44 ++++++++++++++++--------
 20 files changed, 593 insertions(+), 238 deletions(-)

diff --git a/jit/tests/arbitrary-values.test.css b/jit/tests/arbitrary-values.test.css
index fe9ffd5605de..511985d276b2 100644
--- a/jit/tests/arbitrary-values.test.css
+++ b/jit/tests/arbitrary-values.test.css
@@ -136,6 +136,57 @@
 .text-\[2\.23rem\] {
   font-size: 2.23rem;
 }
+.blur-\[15px\] {
+  --tw-blur: blur(15px);
+}
+.brightness-\[300\%\] {
+  --tw-brightness: brightness(300%);
+}
+.contrast-\[2\.4\] {
+  --tw-contrast: contrast(2.4);
+}
+.grayscale-\[0\.55\] {
+  --tw-grayscale: grayscale(0.55);
+}
+.hue-rotate-\[0\.8turn\] {
+  --tw-hue-rotate: hue-rotate(0.8turn);
+}
+.invert-\[0\.75\] {
+  --tw-invert: invert(0.75);
+}
+.saturate-\[180\%\] {
+  --tw-saturate: saturate(180%);
+}
+.sepia-\[0\.2\] {
+  --tw-sepia: sepia(0.2);
+}
+.backdrop-blur-\[11px\] {
+  --tw-backdrop-blur: blur(11px);
+}
+.backdrop-brightness-\[1\.23\] {
+  --tw-backdrop-brightness: brightness(1.23);
+}
+.backdrop-contrast-\[0\.87\] {
+  --tw-backdrop-contrast: contrast(0.87);
+}
+.backdrop-grayscale-\[0\.42\] {
+  --tw-backdrop-grayscale: grayscale(0.42);
+}
+.backdrop-hue-rotate-\[1\.57rad\] {
+  --tw-backdrop-hue-rotate: hue-rotate(1.57rad);
+}
+.backdrop-invert-\[0\.66\] {
+  --tw-backdrop-invert: invert(0.66);
+}
+.backdrop-opacity-\[22\%\] {
+  --tw-backdrop-opacity: opacity(22%);
+}
+.backdrop-saturate-\[144\%\] {
+  --tw-backdrop-saturate: saturate(144%);
+}
+.backdrop-sepia-\[0\.38\] {
+  --tw-backdrop-sepia: sepia(0.38);
+}
 .duration-\[2s\] {
   transition-duration: 2s;
 }
diff --git a/jit/tests/arbitrary-values.test.html b/jit/tests/arbitrary-values.test.html
index 315d533d61d2..6a93e80c974a 100644
--- a/jit/tests/arbitrary-values.test.html
+++ b/jit/tests/arbitrary-values.test.html
@@ -43,5 +43,22 @@
     <div class="duration-[var(--app-duration)]"></div>
     <div class="p-[var(--app-padding)]"></div>
     <div class="inset-[11px]"></div>
+    <div class="blur-[15px]"></div>
+    <div class="brightness-[300%]"></div>
+    <div class="contrast-[2.4]"></div>
+    <div class="grayscale-[0.55]"></div>
+    <div class="hue-rotate-[0.8turn]"></div>
+    <div class="invert-[0.75]"></div>
+    <div class="saturate-[180%]"></div>
+    <div class="sepia-[0.2]"></div>
+    <div class="backdrop-blur-[11px]"></div>
+    <div class="backdrop-brightness-[1.23]"></div>
+    <div class="backdrop-contrast-[0.87]"></div>
+    <div class="backdrop-grayscale-[0.42]"></div>
+    <div class="backdrop-hue-rotate-[1.57rad]"></div>
+    <div class="backdrop-invert-[0.66]"></div>
+    <div class="backdrop-opacity-[22%]"></div>
+    <div class="backdrop-saturate-[144%]"></div>
+    <div class="backdrop-sepia-[0.38]"></div>
   </body>
 </html>
diff --git a/jit/tests/arbitrary-values.test.js b/jit/tests/arbitrary-values.test.js
index bb3da9c65529..ad5683ce3c33 100644
--- a/jit/tests/arbitrary-values.test.js
+++ b/jit/tests/arbitrary-values.test.js
@@ -9,6 +9,7 @@ function run(input, config = {}) {
 
 test('arbitrary values', () => {
   let config = {
+    mode: 'jit',
     purge: [path.resolve(__dirname, './arbitrary-values.test.html')],
     corePlugins: { preflight: false },
     theme: {},
diff --git a/src/plugins/backdropBlur.js b/src/plugins/backdropBlur.js
index e251a7da2cc1..8872a9d3d292 100644
--- a/src/plugins/backdropBlur.js
+++ b/src/plugins/backdropBlur.js
@@ -1,21 +1,37 @@
 import _ from 'lodash'
-import nameClass from '../util/nameClass'
+const { asValue, nameClass } = require('../../jit/pluginUtils')
 
 export default function () {
-  return function ({ addUtilities, theme, variants }) {
-    const utilities = _.fromPairs(
-      _.map(theme('backdropBlur'), (value, modifier) => {
-        return [
-          nameClass('backdrop-blur', modifier),
-          {
-            '--tw-backdrop-blur': Array.isArray(value)
-              ? value.map((v) => `blur(${v})`).join(' ')
-              : `blur(${value})`,
-          },
-        ]
+  return function ({ config, matchUtilities, addUtilities, theme, variants }) {
+    if (config('mode') === 'jit') {
+      matchUtilities({
+        'backdrop-blur': (modifier, { theme }) => {
+          let value = asValue(modifier, theme.backdropBlur)
+
+          if (value === undefined) {
+            return []
+          }
+
+          return {
+            [nameClass('backdrop-blur', modifier)]: { '--tw-backdrop-blur': `blur(${value})` },
+          }
+        },
       })
-    )
+    } else {
+      const utilities = _.fromPairs(
+        _.map(theme('backdropBlur'), (value, modifier) => {
+          return [
+            nameClass('backdrop-blur', modifier),
+            {
+              '--tw-backdrop-blur': Array.isArray(value)
+                ? value.map((v) => `blur(${v})`).join(' ')
+                : `blur(${value})`,
+            },
+          ]
+        })
+      )
 
-    addUtilities(utilities, variants('backdopBlur'))
+      addUtilities(utilities, variants('backdopBlur'))
+    }
   }
 }
diff --git a/src/plugins/backdropBrightness.js b/src/plugins/backdropBrightness.js
index de5ce571ed07..e7e4cc792b91 100644
--- a/src/plugins/backdropBrightness.js
+++ b/src/plugins/backdropBrightness.js
@@ -1,21 +1,39 @@
 import _ from 'lodash'
-import nameClass from '../util/nameClass'
+const { asValue, nameClass } = require('../../jit/pluginUtils')
 
 export default function () {
-  return function ({ addUtilities, theme, variants }) {
-    const utilities = _.fromPairs(
-      _.map(theme('backdropBrightness'), (value, modifier) => {
-        return [
-          nameClass('backdrop-brightness', modifier),
-          {
-            '--tw-backdrop-brightness': Array.isArray(value)
-              ? value.map((v) => `brightness(${v})`).join(' ')
-              : `brightness(${value})`,
-          },
-        ]
+  return function ({ config, matchUtilities, addUtilities, theme, variants }) {
+    if (config('mode') === 'jit') {
+      matchUtilities({
+        'backdrop-brightness': (modifier, { theme }) => {
+          let value = asValue(modifier, theme.backdropBrightness)
+
+          if (value === undefined) {
+            return []
+          }
+
+          return {
+            [nameClass('backdrop-brightness', modifier)]: {
+              '--tw-backdrop-brightness': `brightness(${value})`,
+            },
+          }
+        },
       })
-    )
+    } else {
+      const utilities = _.fromPairs(
+        _.map(theme('backdropBrightness'), (value, modifier) => {
+          return [
+            nameClass('backdrop-brightness', modifier),
+            {
+              '--tw-backdrop-brightness': Array.isArray(value)
+                ? value.map((v) => `brightness(${v})`).join(' ')
+                : `brightness(${value})`,
+            },
+          ]
+        })
+      )
 
-    addUtilities(utilities, variants('backdropBrightness'))
+      addUtilities(utilities, variants('backdropBrightness'))
+    }
   }
 }
diff --git a/src/plugins/backdropContrast.js b/src/plugins/backdropContrast.js
index 078807df0cad..5eeb0cf0321e 100644
--- a/src/plugins/backdropContrast.js
+++ b/src/plugins/backdropContrast.js
@@ -1,21 +1,39 @@
 import _ from 'lodash'
-import nameClass from '../util/nameClass'
+const { asValue, nameClass } = require('../../jit/pluginUtils')
 
 export default function () {
-  return function ({ addUtilities, theme, variants }) {
-    const utilities = _.fromPairs(
-      _.map(theme('backdropContrast'), (value, modifier) => {
-        return [
-          nameClass('backdrop-contrast', modifier),
-          {
-            '--tw-backdrop-contrast': Array.isArray(value)
-              ? value.map((v) => `contrast(${v})`).join(' ')
-              : `contrast(${value})`,
-          },
-        ]
+  return function ({ config, matchUtilities, addUtilities, theme, variants }) {
+    if (config('mode') === 'jit') {
+      matchUtilities({
+        'backdrop-contrast': (modifier, { theme }) => {
+          let value = asValue(modifier, theme.backdropContrast)
+
+          if (value === undefined) {
+            return []
+          }
+
+          return {
+            [nameClass('backdrop-contrast', modifier)]: {
+              '--tw-backdrop-contrast': `contrast(${value})`,
+            },
+          }
+        },
       })
-    )
+    } else {
+      const utilities = _.fromPairs(
+        _.map(theme('backdropContrast'), (value, modifier) => {
+          return [
+            nameClass('backdrop-contrast', modifier),
+            {
+              '--tw-backdrop-contrast': Array.isArray(value)
+                ? value.map((v) => `contrast(${v})`).join(' ')
+                : `contrast(${value})`,
+            },
+          ]
+        })
+      )
 
-    addUtilities(utilities, variants('backdropContrast'))
+      addUtilities(utilities, variants('backdropContrast'))
+    }
   }
 }
diff --git a/src/plugins/backdropGrayscale.js b/src/plugins/backdropGrayscale.js
index a465843cbfa4..6efa696ba956 100644
--- a/src/plugins/backdropGrayscale.js
+++ b/src/plugins/backdropGrayscale.js
@@ -1,21 +1,39 @@
 import _ from 'lodash'
-import nameClass from '../util/nameClass'
+const { asValue, nameClass } = require('../../jit/pluginUtils')
 
 export default function () {
-  return function ({ addUtilities, theme, variants }) {
-    const utilities = _.fromPairs(
-      _.map(theme('backdropGrayscale'), (value, modifier) => {
-        return [
-          nameClass('backdrop-grayscale', modifier),
-          {
-            '--tw-backdrop-grayscale': Array.isArray(value)
-              ? value.map((v) => `grayscale(${v})`).join(' ')
-              : `grayscale(${value})`,
-          },
-        ]
+  return function ({ config, matchUtilities, addUtilities, theme, variants }) {
+    if (config('mode') === 'jit') {
+      matchUtilities({
+        'backdrop-grayscale': (modifier, { theme }) => {
+          let value = asValue(modifier, theme.backdropGrayscale)
+
+          if (value === undefined) {
+            return []
+          }
+
+          return {
+            [nameClass('backdrop-grayscale', modifier)]: {
+              '--tw-backdrop-grayscale': `grayscale(${value})`,
+            },
+          }
+        },
       })
-    )
+    } else {
+      const utilities = _.fromPairs(
+        _.map(theme('backdropGrayscale'), (value, modifier) => {
+          return [
+            nameClass('backdrop-grayscale', modifier),
+            {
+              '--tw-backdrop-grayscale': Array.isArray(value)
+                ? value.map((v) => `grayscale(${v})`).join(' ')
+                : `grayscale(${value})`,
+            },
+          ]
+        })
+      )
 
-    addUtilities(utilities, variants('backdropGrayscale'))
+      addUtilities(utilities, variants('backdropGrayscale'))
+    }
   }
 }
diff --git a/src/plugins/backdropHueRotate.js b/src/plugins/backdropHueRotate.js
index c617e846c03e..31cedb700c2a 100644
--- a/src/plugins/backdropHueRotate.js
+++ b/src/plugins/backdropHueRotate.js
@@ -1,21 +1,39 @@
 import _ from 'lodash'
-import nameClass from '../util/nameClass'
+const { asValue, nameClass } = require('../../jit/pluginUtils')
 
 export default function () {
-  return function ({ addUtilities, theme, variants }) {
-    const utilities = _.fromPairs(
-      _.map(theme('backdropHueRotate'), (value, modifier) => {
-        return [
-          nameClass('backdrop-hue-rotate', modifier),
-          {
-            '--tw-backdrop-hue-rotate': Array.isArray(value)
-              ? value.map((v) => `hue-rotate(${v})`).join(' ')
-              : `hue-rotate(${value})`,
-          },
-        ]
+  return function ({ config, matchUtilities, addUtilities, theme, variants }) {
+    if (config('mode') === 'jit') {
+      matchUtilities({
+        'backdrop-hue-rotate': (modifier, { theme }) => {
+          let value = asValue(modifier, theme.backdropHueRotate)
+
+          if (value === undefined) {
+            return []
+          }
+
+          return {
+            [nameClass('backdrop-hue-rotate', modifier)]: {
+              '--tw-backdrop-hue-rotate': `hue-rotate(${value})`,
+            },
+          }
+        },
       })
-    )
+    } else {
+      const utilities = _.fromPairs(
+        _.map(theme('backdropHueRotate'), (value, modifier) => {
+          return [
+            nameClass('backdrop-hue-rotate', modifier),
+            {
+              '--tw-backdrop-hue-rotate': Array.isArray(value)
+                ? value.map((v) => `hue-rotate(${v})`).join(' ')
+                : `hue-rotate(${value})`,
+            },
+          ]
+        })
+      )
 
-    addUtilities(utilities, variants('backdropHueRotate'))
+      addUtilities(utilities, variants('backdropHueRotate'))
+    }
   }
 }
diff --git a/src/plugins/backdropInvert.js b/src/plugins/backdropInvert.js
index 3c31a7c724c6..2055216a39b0 100644
--- a/src/plugins/backdropInvert.js
+++ b/src/plugins/backdropInvert.js
@@ -1,21 +1,39 @@
 import _ from 'lodash'
-import nameClass from '../util/nameClass'
+const { asValue, nameClass } = require('../../jit/pluginUtils')
 
 export default function () {
-  return function ({ addUtilities, theme, variants }) {
-    const utilities = _.fromPairs(
-      _.map(theme('backdropInvert'), (value, modifier) => {
-        return [
-          nameClass('backdrop-invert', modifier),
-          {
-            '--tw-backdrop-invert': Array.isArray(value)
-              ? value.map((v) => `invert(${v})`).join(' ')
-              : `invert(${value})`,
-          },
-        ]
+  return function ({ config, matchUtilities, addUtilities, theme, variants }) {
+    if (config('mode') === 'jit') {
+      matchUtilities({
+        'backdrop-invert': (modifier, { theme }) => {
+          let value = asValue(modifier, theme.backdropInvert)
+
+          if (value === undefined) {
+            return []
+          }
+
+          return {
+            [nameClass('backdrop-invert', modifier)]: {
+              '--tw-backdrop-invert': `invert(${value})`,
+            },
+          }
+        },
       })
-    )
+    } else {
+      const utilities = _.fromPairs(
+        _.map(theme('backdropInvert'), (value, modifier) => {
+          return [
+            nameClass('backdrop-invert', modifier),
+            {
+              '--tw-backdrop-invert': Array.isArray(value)
+                ? value.map((v) => `invert(${v})`).join(' ')
+                : `invert(${value})`,
+            },
+          ]
+        })
+      )
 
-    addUtilities(utilities, variants('backdropInvert'))
+      addUtilities(utilities, variants('backdropInvert'))
+    }
   }
 }
diff --git a/src/plugins/backdropOpacity.js b/src/plugins/backdropOpacity.js
index bcb57b940c38..0abdfaba6cc3 100644
--- a/src/plugins/backdropOpacity.js
+++ b/src/plugins/backdropOpacity.js
@@ -1,21 +1,39 @@
 import _ from 'lodash'
-import nameClass from '../util/nameClass'
+const { asValue, nameClass } = require('../../jit/pluginUtils')
 
 export default function () {
-  return function ({ addUtilities, theme, variants }) {
-    const utilities = _.fromPairs(
-      _.map(theme('backdropOpacity'), (value, modifier) => {
-        return [
-          nameClass('backdrop-opacity', modifier),
-          {
-            '--tw-backdrop-opacity': Array.isArray(value)
-              ? value.map((v) => `opacity(${v})`).join(' ')
-              : `opacity(${value})`,
-          },
-        ]
+  return function ({ config, matchUtilities, addUtilities, theme, variants }) {
+    if (config('mode') === 'jit') {
+      matchUtilities({
+        'backdrop-opacity': (modifier, { theme }) => {
+          let value = asValue(modifier, theme.backdropOpacity)
+
+          if (value === undefined) {
+            return []
+          }
+
+          return {
+            [nameClass('backdrop-opacity', modifier)]: {
+              '--tw-backdrop-opacity': `opacity(${value})`,
+            },
+          }
+        },
       })
-    )
+    } else {
+      const utilities = _.fromPairs(
+        _.map(theme('backdropOpacity'), (value, modifier) => {
+          return [
+            nameClass('backdrop-opacity', modifier),
+            {
+              '--tw-backdrop-opacity': Array.isArray(value)
+                ? value.map((v) => `opacity(${v})`).join(' ')
+                : `opacity(${value})`,
+            },
+          ]
+        })
+      )
 
-    addUtilities(utilities, variants('backdropOpacity'))
+      addUtilities(utilities, variants('backdropOpacity'))
+    }
   }
 }
diff --git a/src/plugins/backdropSaturate.js b/src/plugins/backdropSaturate.js
index 4fc3f7d80744..2f124f55d8fa 100644
--- a/src/plugins/backdropSaturate.js
+++ b/src/plugins/backdropSaturate.js
@@ -1,21 +1,39 @@
 import _ from 'lodash'
-import nameClass from '../util/nameClass'
+const { asValue, nameClass } = require('../../jit/pluginUtils')
 
 export default function () {
-  return function ({ addUtilities, theme, variants }) {
-    const utilities = _.fromPairs(
-      _.map(theme('backdropSaturate'), (value, modifier) => {
-        return [
-          nameClass('backdrop-saturate', modifier),
-          {
-            '--tw-backdrop-saturate': Array.isArray(value)
-              ? value.map((v) => `saturate(${v})`).join(' ')
-              : `saturate(${value})`,
-          },
-        ]
+  return function ({ config, matchUtilities, addUtilities, theme, variants }) {
+    if (config('mode') === 'jit') {
+      matchUtilities({
+        'backdrop-saturate': (modifier, { theme }) => {
+          let value = asValue(modifier, theme.backdropSaturate)
+
+          if (value === undefined) {
+            return []
+          }
+
+          return {
+            [nameClass('backdrop-saturate', modifier)]: {
+              '--tw-backdrop-saturate': `saturate(${value})`,
+            },
+          }
+        },
       })
-    )
+    } else {
+      const utilities = _.fromPairs(
+        _.map(theme('backdropSaturate'), (value, modifier) => {
+          return [
+            nameClass('backdrop-saturate', modifier),
+            {
+              '--tw-backdrop-saturate': Array.isArray(value)
+                ? value.map((v) => `saturate(${v})`).join(' ')
+                : `saturate(${value})`,
+            },
+          ]
+        })
+      )
 
-    addUtilities(utilities, variants('backdropSaturate'))
+      addUtilities(utilities, variants('backdropSaturate'))
+    }
   }
 }
diff --git a/src/plugins/backdropSepia.js b/src/plugins/backdropSepia.js
index 312fcdd7f92b..a1282365c3a4 100644
--- a/src/plugins/backdropSepia.js
+++ b/src/plugins/backdropSepia.js
@@ -1,21 +1,39 @@
 import _ from 'lodash'
-import nameClass from '../util/nameClass'
+const { asValue, nameClass } = require('../../jit/pluginUtils')
 
 export default function () {
-  return function ({ addUtilities, theme, variants }) {
-    const utilities = _.fromPairs(
-      _.map(theme('backdropSepia'), (value, modifier) => {
-        return [
-          nameClass('backdrop-sepia', modifier),
-          {
-            '--tw-backdrop-sepia': Array.isArray(value)
-              ? value.map((v) => `sepia(${v})`).join(' ')
-              : `sepia(${value})`,
-          },
-        ]
+  return function ({ config, matchUtilities, addUtilities, theme, variants }) {
+    if (config('mode') === 'jit') {
+      matchUtilities({
+        'backdrop-sepia': (modifier, { theme }) => {
+          let value = asValue(modifier, theme.backdropSepia)
+
+          if (value === undefined) {
+            return []
+          }
+
+          return {
+            [nameClass('backdrop-sepia', modifier)]: {
+              '--tw-backdrop-sepia': `sepia(${value})`,
+            },
+          }
+        },
       })
-    )
+    } else {
+      const utilities = _.fromPairs(
+        _.map(theme('backdropSepia'), (value, modifier) => {
+          return [
+            nameClass('backdrop-sepia', modifier),
+            {
+              '--tw-backdrop-sepia': Array.isArray(value)
+                ? value.map((v) => `sepia(${v})`).join(' ')
+                : `sepia(${value})`,
+            },
+          ]
+        })
+      )
 
-    addUtilities(utilities, variants('backdropSepia'))
+      addUtilities(utilities, variants('backdropSepia'))
+    }
   }
 }
diff --git a/src/plugins/blur.js b/src/plugins/blur.js
index f0a77e71d47a..4b293ae1d799 100644
--- a/src/plugins/blur.js
+++ b/src/plugins/blur.js
@@ -1,21 +1,35 @@
 import _ from 'lodash'
-import nameClass from '../util/nameClass'
+const { asValue, nameClass } = require('../../jit/pluginUtils')
 
 export default function () {
-  return function ({ addUtilities, theme, variants }) {
-    const utilities = _.fromPairs(
-      _.map(theme('blur'), (value, modifier) => {
-        return [
-          nameClass('blur', modifier),
-          {
-            '--tw-blur': Array.isArray(value)
-              ? value.map((v) => `blur(${v})`).join(' ')
-              : `blur(${value})`,
-          },
-        ]
+  return function ({ config, matchUtilities, addUtilities, theme, variants }) {
+    if (config('mode') === 'jit') {
+      matchUtilities({
+        blur: (modifier, { theme }) => {
+          let value = asValue(modifier, theme.blur)
+
+          if (value === undefined) {
+            return []
+          }
+
+          return { [nameClass('blur', modifier)]: { '--tw-blur': `blur(${value})` } }
+        },
       })
-    )
+    } else {
+      const utilities = _.fromPairs(
+        _.map(theme('blur'), (value, modifier) => {
+          return [
+            nameClass('blur', modifier),
+            {
+              '--tw-blur': Array.isArray(value)
+                ? value.map((v) => `blur(${v})`).join(' ')
+                : `blur(${value})`,
+            },
+          ]
+        })
+      )
 
-    addUtilities(utilities, variants('blur'))
+      addUtilities(utilities, variants('blur'))
+    }
   }
 }
diff --git a/src/plugins/brightness.js b/src/plugins/brightness.js
index 25fb5a5b5488..0b632da99974 100644
--- a/src/plugins/brightness.js
+++ b/src/plugins/brightness.js
@@ -1,21 +1,37 @@
 import _ from 'lodash'
-import nameClass from '../util/nameClass'
+const { asValue, nameClass } = require('../../jit/pluginUtils')
 
 export default function () {
-  return function ({ addUtilities, theme, variants }) {
-    const utilities = _.fromPairs(
-      _.map(theme('brightness'), (value, modifier) => {
-        return [
-          nameClass('brightness', modifier),
-          {
-            '--tw-brightness': Array.isArray(value)
-              ? value.map((v) => `brightness(${v})`).join(' ')
-              : `brightness(${value})`,
-          },
-        ]
+  return function ({ config, matchUtilities, addUtilities, theme, variants }) {
+    if (config('mode') === 'jit') {
+      matchUtilities({
+        brightness: (modifier, { theme }) => {
+          let value = asValue(modifier, theme.brightness)
+
+          if (value === undefined) {
+            return []
+          }
+
+          return {
+            [nameClass('brightness', modifier)]: { '--tw-brightness': `brightness(${value})` },
+          }
+        },
       })
-    )
+    } else {
+      const utilities = _.fromPairs(
+        _.map(theme('brightness'), (value, modifier) => {
+          return [
+            nameClass('brightness', modifier),
+            {
+              '--tw-brightness': Array.isArray(value)
+                ? value.map((v) => `brightness(${v})`).join(' ')
+                : `brightness(${value})`,
+            },
+          ]
+        })
+      )
 
-    addUtilities(utilities, variants('brightness'))
+      addUtilities(utilities, variants('brightness'))
+    }
   }
 }
diff --git a/src/plugins/contrast.js b/src/plugins/contrast.js
index 9d60283b9351..7593f98512c3 100644
--- a/src/plugins/contrast.js
+++ b/src/plugins/contrast.js
@@ -1,21 +1,37 @@
 import _ from 'lodash'
-import nameClass from '../util/nameClass'
+const { asValue, nameClass } = require('../../jit/pluginUtils')
 
 export default function () {
-  return function ({ addUtilities, theme, variants }) {
-    const utilities = _.fromPairs(
-      _.map(theme('contrast'), (value, modifier) => {
-        return [
-          nameClass('contrast', modifier),
-          {
-            '--tw-contrast': Array.isArray(value)
-              ? value.map((v) => `contrast(${v})`).join(' ')
-              : `contrast(${value})`,
-          },
-        ]
+  return function ({ config, matchUtilities, addUtilities, theme, variants }) {
+    if (config('mode') === 'jit') {
+      matchUtilities({
+        contrast: (modifier, { theme }) => {
+          let value = asValue(modifier, theme.contrast)
+
+          if (value === undefined) {
+            return []
+          }
+
+          return {
+            [nameClass('contrast', modifier)]: { '--tw-contrast': `contrast(${value})` },
+          }
+        },
       })
-    )
+    } else {
+      const utilities = _.fromPairs(
+        _.map(theme('contrast'), (value, modifier) => {
+          return [
+            nameClass('contrast', modifier),
+            {
+              '--tw-contrast': Array.isArray(value)
+                ? value.map((v) => `contrast(${v})`).join(' ')
+                : `contrast(${value})`,
+            },
+          ]
+        })
+      )
 
-    addUtilities(utilities, variants('contrast'))
+      addUtilities(utilities, variants('contrast'))
+    }
   }
 }
diff --git a/src/plugins/grayscale.js b/src/plugins/grayscale.js
index 6b33b4ce2c0e..3250d6c4ac33 100644
--- a/src/plugins/grayscale.js
+++ b/src/plugins/grayscale.js
@@ -1,21 +1,37 @@
 import _ from 'lodash'
-import nameClass from '../util/nameClass'
+const { asValue, nameClass } = require('../../jit/pluginUtils')
 
 export default function () {
-  return function ({ addUtilities, theme, variants }) {
-    const utilities = _.fromPairs(
-      _.map(theme('grayscale'), (value, modifier) => {
-        return [
-          nameClass('grayscale', modifier),
-          {
-            '--tw-grayscale': Array.isArray(value)
-              ? value.map((v) => `grayscale(${v})`).join(' ')
-              : `grayscale(${value})`,
-          },
-        ]
+  return function ({ config, matchUtilities, addUtilities, theme, variants }) {
+    if (config('mode') === 'jit') {
+      matchUtilities({
+        grayscale: (modifier, { theme }) => {
+          let value = asValue(modifier, theme.grayscale)
+
+          if (value === undefined) {
+            return []
+          }
+
+          return {
+            [nameClass('grayscale', modifier)]: { '--tw-grayscale': `grayscale(${value})` },
+          }
+        },
       })
-    )
+    } else {
+      const utilities = _.fromPairs(
+        _.map(theme('grayscale'), (value, modifier) => {
+          return [
+            nameClass('grayscale', modifier),
+            {
+              '--tw-grayscale': Array.isArray(value)
+                ? value.map((v) => `grayscale(${v})`).join(' ')
+                : `grayscale(${value})`,
+            },
+          ]
+        })
+      )
 
-    addUtilities(utilities, variants('grayscale'))
+      addUtilities(utilities, variants('grayscale'))
+    }
   }
 }
diff --git a/src/plugins/hueRotate.js b/src/plugins/hueRotate.js
index c86b0f82711c..8dff3f6bf3fb 100644
--- a/src/plugins/hueRotate.js
+++ b/src/plugins/hueRotate.js
@@ -1,21 +1,37 @@
 import _ from 'lodash'
-import nameClass from '../util/nameClass'
+const { asValue, nameClass } = require('../../jit/pluginUtils')
 
 export default function () {
-  return function ({ addUtilities, theme, variants }) {
-    const utilities = _.fromPairs(
-      _.map(theme('hueRotate'), (value, modifier) => {
-        return [
-          nameClass('hue-rotate', modifier),
-          {
-            '--tw-hue-rotate': Array.isArray(value)
-              ? value.map((v) => `hue-rotate(${v})`).join(' ')
-              : `hue-rotate(${value})`,
-          },
-        ]
+  return function ({ config, matchUtilities, addUtilities, theme, variants }) {
+    if (config('mode') === 'jit') {
+      matchUtilities({
+        'hue-rotate': (modifier, { theme }) => {
+          let value = asValue(modifier, theme.hueRotate)
+
+          if (value === undefined) {
+            return []
+          }
+
+          return {
+            [nameClass('hue-rotate', modifier)]: { '--tw-hue-rotate': `hue-rotate(${value})` },
+          }
+        },
       })
-    )
+    } else {
+      const utilities = _.fromPairs(
+        _.map(theme('hueRotate'), (value, modifier) => {
+          return [
+            nameClass('hue-rotate', modifier),
+            {
+              '--tw-hue-rotate': Array.isArray(value)
+                ? value.map((v) => `hue-rotate(${v})`).join(' ')
+                : `hue-rotate(${value})`,
+            },
+          ]
+        })
+      )
 
-    addUtilities(utilities, variants('hueRotate'))
+      addUtilities(utilities, variants('hueRotate'))
+    }
   }
 }
diff --git a/src/plugins/invert.js b/src/plugins/invert.js
index 63b1d36eae58..9a313fd1e9a5 100644
--- a/src/plugins/invert.js
+++ b/src/plugins/invert.js
@@ -1,21 +1,37 @@
 import _ from 'lodash'
-import nameClass from '../util/nameClass'
+const { asValue, nameClass } = require('../../jit/pluginUtils')
 
 export default function () {
-  return function ({ addUtilities, theme, variants }) {
-    const utilities = _.fromPairs(
-      _.map(theme('invert'), (value, modifier) => {
-        return [
-          nameClass('invert', modifier),
-          {
-            '--tw-invert': Array.isArray(value)
-              ? value.map((v) => `invert(${v})`).join(' ')
-              : `invert(${value})`,
-          },
-        ]
+  return function ({ config, matchUtilities, addUtilities, theme, variants }) {
+    if (config('mode') === 'jit') {
+      matchUtilities({
+        invert: (modifier, { theme }) => {
+          let value = asValue(modifier, theme.invert)
+
+          if (value === undefined) {
+            return []
+          }
+
+          return {
+            [nameClass('invert', modifier)]: { '--tw-invert': `invert(${value})` },
+          }
+        },
       })
-    )
+    } else {
+      const utilities = _.fromPairs(
+        _.map(theme('invert'), (value, modifier) => {
+          return [
+            nameClass('invert', modifier),
+            {
+              '--tw-invert': Array.isArray(value)
+                ? value.map((v) => `invert(${v})`).join(' ')
+                : `invert(${value})`,
+            },
+          ]
+        })
+      )
 
-    addUtilities(utilities, variants('invert'))
+      addUtilities(utilities, variants('invert'))
+    }
   }
 }
diff --git a/src/plugins/saturate.js b/src/plugins/saturate.js
index 228800fe98d0..b1a2d8eb8913 100644
--- a/src/plugins/saturate.js
+++ b/src/plugins/saturate.js
@@ -1,21 +1,37 @@
 import _ from 'lodash'
-import nameClass from '../util/nameClass'
+const { asValue, nameClass } = require('../../jit/pluginUtils')
 
 export default function () {
-  return function ({ addUtilities, theme, variants }) {
-    const utilities = _.fromPairs(
-      _.map(theme('saturate'), (value, modifier) => {
-        return [
-          nameClass('saturate', modifier),
-          {
-            '--tw-saturate': Array.isArray(value)
-              ? value.map((v) => `saturate(${v})`).join(' ')
-              : `saturate(${value})`,
-          },
-        ]
+  return function ({ config, matchUtilities, addUtilities, theme, variants }) {
+    if (config('mode') === 'jit') {
+      matchUtilities({
+        saturate: (modifier, { theme }) => {
+          let value = asValue(modifier, theme.saturate)
+
+          if (value === undefined) {
+            return []
+          }
+
+          return {
+            [nameClass('saturate', modifier)]: { '--tw-saturate': `saturate(${value})` },
+          }
+        },
       })
-    )
+    } else {
+      const utilities = _.fromPairs(
+        _.map(theme('saturate'), (value, modifier) => {
+          return [
+            nameClass('saturate', modifier),
+            {
+              '--tw-saturate': Array.isArray(value)
+                ? value.map((v) => `saturate(${v})`).join(' ')
+                : `saturate(${value})`,
+            },
+          ]
+        })
+      )
 
-    addUtilities(utilities, variants('saturate'))
+      addUtilities(utilities, variants('saturate'))
+    }
   }
 }
diff --git a/src/plugins/sepia.js b/src/plugins/sepia.js
index e38ffb2ac409..eb7446e5b107 100644
--- a/src/plugins/sepia.js
+++ b/src/plugins/sepia.js
@@ -1,21 +1,37 @@
 import _ from 'lodash'
-import nameClass from '../util/nameClass'
+const { asValue, nameClass } = require('../../jit/pluginUtils')
 
 export default function () {
-  return function ({ addUtilities, theme, variants }) {
-    const utilities = _.fromPairs(
-      _.map(theme('sepia'), (value, modifier) => {
-        return [
-          nameClass('sepia', modifier),
-          {
-            '--tw-sepia': Array.isArray(value)
-              ? value.map((v) => `sepia(${v})`).join(' ')
-              : `sepia(${value})`,
-          },
-        ]
+  return function ({ config, matchUtilities, addUtilities, theme, variants }) {
+    if (config('mode') === 'jit') {
+      matchUtilities({
+        sepia: (modifier, { theme }) => {
+          let value = asValue(modifier, theme.sepia)
+
+          if (value === undefined) {
+            return []
+          }
+
+          return {
+            [nameClass('sepia', modifier)]: { '--tw-sepia': `sepia(${value})` },
+          }
+        },
       })
-    )
+    } else {
+      const utilities = _.fromPairs(
+        _.map(theme('sepia'), (value, modifier) => {
+          return [
+            nameClass('sepia', modifier),
+            {
+              '--tw-sepia': Array.isArray(value)
+                ? value.map((v) => `sepia(${v})`).join(' ')
+                : `sepia(${value})`,
+            },
+          ]
+        })
+      )
 
-    addUtilities(utilities, variants('sepia'))
+      addUtilities(utilities, variants('sepia'))
+    }
   }
 }