Optimize filter plugins for JIT + add arbitrary value support

Except for drop-shadow, will add that once we can think it through a bit.
tailwindlabs · Apr 4, 2021 · 0ada829 · 0ada829
1 parent 0d20ad4
commit 0ada829
Show file tree

Hide file tree

Showing 20 changed files with 593 additions and 238 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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'))
+    }
   }
 }