From f97a87ac7daeb33d409fbd295537f49ea8f4b1cb Mon Sep 17 00:00:00 2001 From: Adam Wathan 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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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')) + } } }