Remove need for filter and backdrop-filter toggles (#4611)

tailwindlabs · Jun 10, 2021 · 34d0551 · 34d0551
1 parent f4799a3
commit 34d0551
Show file tree

Hide file tree

Showing 45 changed files with 524 additions and 350 deletions.
diff --git a/src/corePlugins.js b/src/corePlugins.js
@@ -19,6 +19,8 @@ export default function ({ corePlugins: corePluginConfig }) {
 
   pluginOrder = configurePlugins(corePluginConfig, pluginOrder)
   pluginOrder = move(pluginOrder, 'transform', 'transformOrigin')
+  pluginOrder = move(pluginOrder, 'filter', 'blur')
+  pluginOrder = move(pluginOrder, 'backdropFilter', 'backdropBlur')
 
   return pluginOrder.map((pluginName) => {
     return plugins[pluginName]()

diff --git a/src/plugins/backdropBlur.js b/src/plugins/backdropBlur.js
@@ -1,9 +1,12 @@
 export default function () {
-  return function ({ matchUtilities, theme, variants }) {
+  return function ({ config, matchUtilities, theme, variants }) {
     matchUtilities(
       {
         'backdrop-blur': (value) => {
-          return { '--tw-backdrop-blur': `blur(${value})` }
+          return {
+            '--tw-backdrop-blur': `blur(${value})`,
+            ...(config('mode') === 'jit' ? { 'backdrop-filter': 'var(--tw-backdrop-filter)' } : {}),
+          }
         },
       },
       {

diff --git a/src/plugins/backdropBrightness.js b/src/plugins/backdropBrightness.js
@@ -1,10 +1,11 @@
 export default function () {
-  return function ({ matchUtilities, theme, variants }) {
+  return function ({ config, matchUtilities, theme, variants }) {
     matchUtilities(
       {
         'backdrop-brightness': (value) => {
           return {
             '--tw-backdrop-brightness': `brightness(${value})`,
+            ...(config('mode') === 'jit' ? { 'backdrop-filter': 'var(--tw-backdrop-filter)' } : {}),
           }
         },
       },

diff --git a/src/plugins/backdropContrast.js b/src/plugins/backdropContrast.js
@@ -1,9 +1,12 @@
 export default function () {
-  return function ({ matchUtilities, theme, variants }) {
+  return function ({ config, matchUtilities, theme, variants }) {
     matchUtilities(
       {
         'backdrop-contrast': (value) => {
-          return { '--tw-backdrop-contrast': `contrast(${value})` }
+          return {
+            '--tw-backdrop-contrast': `contrast(${value})`,
+            ...(config('mode') === 'jit' ? { 'backdrop-filter': 'var(--tw-backdrop-filter)' } : {}),
+          }
         },
       },
       {

diff --git a/src/plugins/backdropFilter.js b/src/plugins/backdropFilter.js
@@ -1,8 +1,8 @@
 export default function () {
-  return function ({ addUtilities, variants }) {
-    addUtilities(
-      {
-        '.backdrop-filter': {
+  return function ({ config, addBase, addUtilities, variants }) {
+    if (config('mode') === 'jit') {
+      addBase({
+        '*': {
           '--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)',
           '--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
           '--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
@@ -12,7 +12,7 @@ export default function () {
           '--tw-backdrop-opacity': 'var(--tw-empty,/*!*/ /*!*/)',
           '--tw-backdrop-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
           '--tw-backdrop-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
-          'backdrop-filter': [
+          '--tw-backdrop-filter': [
             'var(--tw-backdrop-blur)',
             'var(--tw-backdrop-brightness)',
             'var(--tw-backdrop-contrast)',
@@ -24,9 +24,42 @@ export default function () {
             'var(--tw-backdrop-sepia)',
           ].join(' '),
         },
-        '.backdrop-filter-none': { 'backdrop-filter': 'none' },
-      },
-      variants('backdropFilter')
-    )
+      })
+      addUtilities(
+        {
+          '.backdrop-filter-none': { 'backdrop-filter': 'none' },
+        },
+        variants('backdropFilter')
+      )
+    } else {
+      addUtilities(
+        {
+          '.backdrop-filter': {
+            '--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-backdrop-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-backdrop-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-backdrop-invert': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-backdrop-opacity': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-backdrop-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-backdrop-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
+            'backdrop-filter': [
+              'var(--tw-backdrop-blur)',
+              'var(--tw-backdrop-brightness)',
+              'var(--tw-backdrop-contrast)',
+              'var(--tw-backdrop-grayscale)',
+              'var(--tw-backdrop-hue-rotate)',
+              'var(--tw-backdrop-invert)',
+              'var(--tw-backdrop-opacity)',
+              'var(--tw-backdrop-saturate)',
+              'var(--tw-backdrop-sepia)',
+            ].join(' '),
+          },
+          '.backdrop-filter-none': { 'backdrop-filter': 'none' },
+        },
+        variants('backdropFilter')
+      )
+    }
   }
 }
diff --git a/src/plugins/backdropGrayscale.js b/src/plugins/backdropGrayscale.js
@@ -1,10 +1,11 @@
 export default function () {
-  return function ({ matchUtilities, theme, variants }) {
+  return function ({ config, matchUtilities, theme, variants }) {
     matchUtilities(
       {
         'backdrop-grayscale': (value) => {
           return {
             '--tw-backdrop-grayscale': `grayscale(${value})`,
+            ...(config('mode') === 'jit' ? { 'backdrop-filter': 'var(--tw-backdrop-filter)' } : {}),
           }
         },
       },

diff --git a/src/plugins/backdropHueRotate.js b/src/plugins/backdropHueRotate.js
@@ -1,9 +1,12 @@
 export default function () {
-  return function ({ matchUtilities, theme, variants }) {
+  return function ({ config, matchUtilities, theme, variants }) {
     matchUtilities(
       {
         'backdrop-hue-rotate': (value) => {
-          return { '--tw-backdrop-hue-rotate': `hue-rotate(${value})` }
+          return {
+            '--tw-backdrop-hue-rotate': `hue-rotate(${value})`,
+            ...(config('mode') === 'jit' ? { 'backdrop-filter': 'var(--tw-backdrop-filter)' } : {}),
+          }
         },
       },
       {

diff --git a/src/plugins/backdropInvert.js b/src/plugins/backdropInvert.js
@@ -1,9 +1,12 @@
 export default function () {
-  return function ({ matchUtilities, theme, variants }) {
+  return function ({ config, matchUtilities, theme, variants }) {
     matchUtilities(
       {
         'backdrop-invert': (value) => {
-          return { '--tw-backdrop-invert': `invert(${value})` }
+          return {
+            '--tw-backdrop-invert': `invert(${value})`,
+            ...(config('mode') === 'jit' ? { 'backdrop-filter': 'var(--tw-backdrop-filter)' } : {}),
+          }
         },
       },
       {

diff --git a/src/plugins/backdropOpacity.js b/src/plugins/backdropOpacity.js
@@ -1,9 +1,12 @@
 export default function () {
-  return function ({ matchUtilities, theme, variants }) {
+  return function ({ config, matchUtilities, theme, variants }) {
     matchUtilities(
       {
         'backdrop-opacity': (value) => {
-          return { '--tw-backdrop-opacity': `opacity(${value})` }
+          return {
+            '--tw-backdrop-opacity': `opacity(${value})`,
+            ...(config('mode') === 'jit' ? { 'backdrop-filter': 'var(--tw-backdrop-filter)' } : {}),
+          }
         },
       },
       {

diff --git a/src/plugins/backdropSaturate.js b/src/plugins/backdropSaturate.js
@@ -1,9 +1,12 @@
 export default function () {
-  return function ({ matchUtilities, theme, variants }) {
+  return function ({ config, matchUtilities, theme, variants }) {
     matchUtilities(
       {
         'backdrop-saturate': (value) => {
-          return { '--tw-backdrop-saturate': `saturate(${value})` }
+          return {
+            '--tw-backdrop-saturate': `saturate(${value})`,
+            ...(config('mode') === 'jit' ? { 'backdrop-filter': 'var(--tw-backdrop-filter)' } : {}),
+          }
         },
       },
       {

diff --git a/src/plugins/backdropSepia.js b/src/plugins/backdropSepia.js
@@ -1,9 +1,12 @@
 export default function () {
-  return function ({ matchUtilities, theme, variants }) {
+  return function ({ config, matchUtilities, theme, variants }) {
     matchUtilities(
       {
         'backdrop-sepia': (value) => {
-          return { '--tw-backdrop-sepia': `sepia(${value})` }
+          return {
+            '--tw-backdrop-sepia': `sepia(${value})`,
+            ...(config('mode') === 'jit' ? { 'backdrop-filter': 'var(--tw-backdrop-filter)' } : {}),
+          }
         },
       },
       {

diff --git a/src/plugins/blur.js b/src/plugins/blur.js
@@ -1,9 +1,12 @@
 export default function () {
-  return function ({ matchUtilities, theme, variants }) {
+  return function ({ config, matchUtilities, theme, variants }) {
     matchUtilities(
       {
         blur: (value) => {
-          return { '--tw-blur': `blur(${value})` }
+          return {
+            '--tw-blur': `blur(${value})`,
+            ...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
+          }
         },
       },
       {

diff --git a/src/plugins/brightness.js b/src/plugins/brightness.js
@@ -1,9 +1,12 @@
 export default function () {
-  return function ({ matchUtilities, theme, variants }) {
+  return function ({ config, matchUtilities, theme, variants }) {
     matchUtilities(
       {
         brightness: (value) => {
-          return { '--tw-brightness': `brightness(${value})` }
+          return {
+            '--tw-brightness': `brightness(${value})`,
+            ...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
+          }
         },
       },
       {

diff --git a/src/plugins/contrast.js b/src/plugins/contrast.js
@@ -1,9 +1,12 @@
 export default function () {
-  return function ({ matchUtilities, theme, variants }) {
+  return function ({ config, matchUtilities, theme, variants }) {
     matchUtilities(
       {
         contrast: (value) => {
-          return { '--tw-contrast': `contrast(${value})` }
+          return {
+            '--tw-contrast': `contrast(${value})`,
+            ...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
+          }
         },
       },
       { values: theme('contrast'), variants: variants('contrast'), type: 'any' }

diff --git a/src/plugins/dropShadow.js b/src/plugins/dropShadow.js
@@ -2,7 +2,7 @@ import _ from 'lodash'
 import nameClass from '../util/nameClass'
 
 export default function () {
-  return function ({ addUtilities, theme, variants }) {
+  return function ({ config, addUtilities, theme, variants }) {
     const utilities = _.fromPairs(
       _.map(theme('dropShadow'), (value, modifier) => {
         return [
@@ -11,6 +11,7 @@ export default function () {
             '--tw-drop-shadow': Array.isArray(value)
               ? value.map((v) => `drop-shadow(${v})`).join(' ')
               : `drop-shadow(${value})`,
+            ...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
           },
         ]
       })

diff --git a/src/plugins/filter.js b/src/plugins/filter.js
@@ -1,8 +1,8 @@
 export default function () {
-  return function ({ addUtilities, variants }) {
-    addUtilities(
-      {
-        '.filter': {
+  return function ({ config, addBase, addUtilities, variants }) {
+    if (config('mode') === 'jit') {
+      addBase({
+        '*': {
           '--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)',
           '--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
           '--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
@@ -12,7 +12,7 @@ export default function () {
           '--tw-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
           '--tw-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
           '--tw-drop-shadow': 'var(--tw-empty,/*!*/ /*!*/)',
-          filter: [
+          '--tw-filter': [
             'var(--tw-blur)',
             'var(--tw-brightness)',
             'var(--tw-contrast)',
@@ -24,9 +24,42 @@ export default function () {
             'var(--tw-drop-shadow)',
           ].join(' '),
         },
-        '.filter-none': { filter: 'none' },
-      },
-      variants('filter')
-    )
+      })
+      addUtilities(
+        {
+          '.filter-none': { filter: 'none' },
+        },
+        variants('filter')
+      )
+    } else {
+      addUtilities(
+        {
+          '.filter': {
+            '--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-invert': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-drop-shadow': 'var(--tw-empty,/*!*/ /*!*/)',
+            filter: [
+              'var(--tw-blur)',
+              'var(--tw-brightness)',
+              'var(--tw-contrast)',
+              'var(--tw-grayscale)',
+              'var(--tw-hue-rotate)',
+              'var(--tw-invert)',
+              'var(--tw-saturate)',
+              'var(--tw-sepia)',
+              'var(--tw-drop-shadow)',
+            ].join(' '),
+          },
+          '.filter-none': { filter: 'none' },
+        },
+        variants('filter')
+      )
+    }
   }
 }
diff --git a/src/plugins/grayscale.js b/src/plugins/grayscale.js
@@ -1,9 +1,12 @@
 export default function () {
-  return function ({ matchUtilities, theme, variants }) {
+  return function ({ config, matchUtilities, theme, variants }) {
     matchUtilities(
       {
         grayscale: (value) => {
-          return { '--tw-grayscale': `grayscale(${value})` }
+          return {
+            '--tw-grayscale': `grayscale(${value})`,
+            ...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
+          }
         },
       },
       {

diff --git a/src/plugins/hueRotate.js b/src/plugins/hueRotate.js
@@ -1,9 +1,12 @@
 export default function () {
-  return function ({ matchUtilities, theme, variants }) {
+  return function ({ config, matchUtilities, theme, variants }) {
     matchUtilities(
       {
         'hue-rotate': (value) => {
-          return { '--tw-hue-rotate': `hue-rotate(${value})` }
+          return {
+            '--tw-hue-rotate': `hue-rotate(${value})`,
+            ...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
+          }
         },
       },
       {

diff --git a/src/plugins/index.js b/src/plugins/index.js
@@ -136,7 +136,6 @@ export { default as ringOpacity } from './ringOpacity'
 export { default as ringOffsetWidth } from './ringOffsetWidth'
 export { default as ringOffsetColor } from './ringOffsetColor'
 
-export { default as filter } from './filter'
 export { default as blur } from './blur'
 export { default as brightness } from './brightness'
 export { default as contrast } from './contrast'
@@ -146,8 +145,8 @@ export { default as hueRotate } from './hueRotate'
 export { default as invert } from './invert'
 export { default as saturate } from './saturate'
 export { default as sepia } from './sepia'
+export { default as filter } from './filter'
 
-export { default as backdropFilter } from './backdropFilter'
 export { default as backdropBlur } from './backdropBlur'
 export { default as backdropBrightness } from './backdropBrightness'
 export { default as backdropContrast } from './backdropContrast'
@@ -157,6 +156,7 @@ export { default as backdropInvert } from './backdropInvert'
 export { default as backdropOpacity } from './backdropOpacity'
 export { default as backdropSaturate } from './backdropSaturate'
 export { default as backdropSepia } from './backdropSepia'
+export { default as backdropFilter } from './backdropFilter'
 
 export { default as transitionProperty } from './transitionProperty'
 export { default as transitionDelay } from './transitionDelay'