From 219337a109b8292b1e102e228cb7ad4b6a68079a Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 5 Mar 2021 16:27:29 -0500 Subject: [PATCH 01/13] WIP --- src/corePlugins/boxShadow.js | 22 +++++++--------- src/corePlugins/textAlign.js | 14 ---------- src/lib/generateRules.js | 51 +++++++++++++++++++++++++++--------- src/lib/setupContext.js | 1 + src/pluginUtils.js | 12 ++++++++- 5 files changed, 61 insertions(+), 39 deletions(-) diff --git a/src/corePlugins/boxShadow.js b/src/corePlugins/boxShadow.js index 74af50c..cba079e 100644 --- a/src/corePlugins/boxShadow.js +++ b/src/corePlugins/boxShadow.js @@ -1,18 +1,17 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default +const { newFormat } = require('../pluginUtils') -let shadowReset = [ - '*', - { +let shadowReset = { + '*': { '--tw-shadow': '0 0 #0000', }, - { respectVariants: false }, -] +} module.exports = function ({ jit: { theme, addUtilities } }) { addUtilities({ shadow: [ - (modifier, { theme }) => { + newFormat((modifier, { theme }) => { modifier = modifier === '' ? 'DEFAULT' : modifier let transformValue = transformThemeValue('boxShadow') @@ -23,10 +22,9 @@ module.exports = function ({ jit: { theme, addUtilities } }) { } return [ - shadowReset, - [ - nameClass('shadow', modifier), - { + [shadowReset, { respectVariants: false }], + { + [nameClass('shadow', modifier)]: { '--tw-shadow': value === 'none' ? '0 0 #0000' : value, 'box-shadow': [ `var(--tw-ring-offset-shadow, 0 0 #0000)`, @@ -34,9 +32,9 @@ module.exports = function ({ jit: { theme, addUtilities } }) { `var(--tw-shadow)`, ].join(', '), }, - ], + }, ] - }, + }), ], }) } diff --git a/src/corePlugins/textAlign.js b/src/corePlugins/textAlign.js index e04eb41..880e5d6 100644 --- a/src/corePlugins/textAlign.js +++ b/src/corePlugins/textAlign.js @@ -6,17 +6,3 @@ module.exports = createSimpleStaticUtilityPlugin({ '.text-right': { 'text-align': 'right' }, '.text-justify': { 'text-align': 'justify' }, }) - -// export default function () { -// return function ({ addUtilities, variants }) { -// addUtilities( -// { -// '.text-left': { 'text-align': 'left' }, -// '.text-center': { 'text-align': 'center' }, -// '.text-right': { 'text-align': 'right' }, -// '.text-justify': { 'text-align': 'justify' }, -// }, -// variants('textAlign') -// ) -// } -// } diff --git a/src/lib/generateRules.js b/src/lib/generateRules.js index 2b8b1a9..7c49f51 100644 --- a/src/lib/generateRules.js +++ b/src/lib/generateRules.js @@ -1,5 +1,6 @@ const postcss = require('postcss') -const { toPostCssNode } = require('./utils') +const { default: parseObjectStyles } = require('tailwindcss/lib/util/parseObjectStyles') +const { toPostCssNode, isPlainObject } = require('./utils') // Generate match permutations for a class candidate, like: // ['ring-offset-blue', '100'] @@ -61,6 +62,25 @@ function applyVariant(variant, matches, { variantMap }) { return [] } +function parseRules(rule, cache, options = {}) { + // PostCSS node + if (!isPlainObject(rule) && !Array.isArray(rule)) { + return [[rule], options] + } + + // Tuple + if (Array.isArray(rule)) { + return parseRules(rule[0], cache, rule[1]) + } + + // Simple object + if (!cache.has(rule)) { + cache.set(rule, parseObjectStyles(rule)) + } + + return [cache.get(rule), options] +} + function generateRules(tailwindConfig, candidates, context) { let { candidateRuleMap, classCache, notClassCache, postCssNodeCache } = context let allRules = [] @@ -112,21 +132,28 @@ function generateRules(tailwindConfig, candidates, context) { for (let [sort, plugin] of plugins) { if (typeof plugin === 'function') { - for (let result of plugin(modifier, pluginHelpers)) { - let options = {} - if (Array.isArray(result)) { - ;[, , options = {}] = result - result = toPostCssNode(result, context.postCssNodeCache) + for (let ruleSet of plugin(modifier, pluginHelpers)) { + if (plugin.format !== 'new') { + let options = {} + if (Array.isArray(ruleSet)) { + ;[, , options = {}] = ruleSet + ruleSet = toPostCssNode(ruleSet, context.postCssNodeCache) + } + matches.push([{ ...sort, options }, ruleSet]) + continue + } + + let [rules, options] = parseRules(ruleSet, context.newPostCssNodeCache) + for (let rule of rules) { + matches.push([{ ...sort, options }, rule]) } - matches.push([{ ...sort, options }, result]) } } else { - let options = {} - if (Array.isArray(plugin)) { - ;[, , options = {}] = plugin - plugin = toPostCssNode(plugin, context.postCssNodeCache) + let ruleSet = plugin + let [rules, options] = parseRules(ruleSet, context.newPostCssNodeCache) + for (let rule of rules) { + matches.push([{ ...sort, options }, rule]) } - matches.push([{ ...sort, options }, plugin]) } } diff --git a/src/lib/setupContext.js b/src/lib/setupContext.js index eda3cc9..16b1b7d 100644 --- a/src/lib/setupContext.js +++ b/src/lib/setupContext.js @@ -576,6 +576,7 @@ function setupContext(configOrPath) { classCache: new Map(), notClassCache: new Set(), postCssNodeCache: new Map(), + newPostCssNodeCache: new Map(), candidateRuleMap: new Map(), configPath: userConfigPath, sourcePath: sourcePath, diff --git a/src/pluginUtils.js b/src/pluginUtils.js index 081d114..771b4c3 100644 --- a/src/pluginUtils.js +++ b/src/pluginUtils.js @@ -120,6 +120,11 @@ function asUnit(modifier, units, lookup = {}) { }) } +function newFormat(plugin) { + plugin.format = 'new' + return plugin +} + module.exports = { updateAllClasses, updateLastClasses, @@ -130,7 +135,8 @@ module.exports = { return function ({ jit: { addUtilities } }) { addUtilities( Object.entries(styles).reduce((newStyles, [selector, rules]) => { - newStyles[selector.slice(1)] = [[selector, rules]] + let result = { [selector]: rules } + newStyles[selector.slice(1)] = [result] return newStyles }, {}) ) @@ -187,4 +193,8 @@ module.exports = { lookup ) }, + newFormat(plugin) { + plugin.format = 'new' + return plugin + }, } From 5537c70d93791aaa7dc8199f0f48c41a03270ff7 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 5 Mar 2021 16:31:50 -0500 Subject: [PATCH 02/13] Fix font variant numeric plugin --- src/corePlugins/fontVariantNumeric.js | 47 +++++++++++++-------------- 1 file changed, 23 insertions(+), 24 deletions(-) diff --git a/src/corePlugins/fontVariantNumeric.js b/src/corePlugins/fontVariantNumeric.js index 61635bd..d17cea4 100644 --- a/src/corePlugins/fontVariantNumeric.js +++ b/src/corePlugins/fontVariantNumeric.js @@ -1,6 +1,5 @@ -let fontVariantBaseStyles = [ - '.ordinal, .slashed-zero, .lining-nums, .oldstyle-nums, .proportional-nums, .tabular-nums, .diagonal-fractions, .stacked-fractions', - { +let fontVariantBaseStyles = { + '.ordinal, .slashed-zero, .lining-nums, .oldstyle-nums, .proportional-nums, .tabular-nums, .diagonal-fractions, .stacked-fractions': { '--tw-ordinal': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-slashed-zero': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-numeric-figure': 'var(--tw-empty,/*!*/ /*!*/)', @@ -9,32 +8,32 @@ let fontVariantBaseStyles = [ 'font-variant-numeric': 'var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)', }, -] +} module.exports = function ({ jit: { addUtilities } }) { addUtilities({ - 'normal-nums': [fontVariantBaseStyles], - ordinal: [fontVariantBaseStyles], - 'slashed-zero': [fontVariantBaseStyles], - 'lining-nums': [fontVariantBaseStyles], - 'oldstyle-nums': [fontVariantBaseStyles], - 'proportional-nums': [fontVariantBaseStyles], - 'tabular-nums': [fontVariantBaseStyles], - 'diagonal-fractions': [fontVariantBaseStyles], - 'stacked-fractions': [fontVariantBaseStyles], + 'normal-nums': fontVariantBaseStyles, + ordinal: fontVariantBaseStyles, + 'slashed-zero': fontVariantBaseStyles, + 'lining-nums': fontVariantBaseStyles, + 'oldstyle-nums': fontVariantBaseStyles, + 'proportional-nums': fontVariantBaseStyles, + 'tabular-nums': fontVariantBaseStyles, + 'diagonal-fractions': fontVariantBaseStyles, + 'stacked-fractions': fontVariantBaseStyles, }) addUtilities({ - 'normal-nums': [['.normal-nums', { 'font-variant-numeric': 'normal' }]], - ordinal: [['.ordinal', { '--tw-ordinal': 'ordinal' }]], - 'slashed-zero': [['.slashed-zero', { '--tw-slashed-zero': 'slashed-zero' }]], - 'lining-nums': [['.lining-nums', { '--tw-numeric-figure': 'lining-nums' }]], - 'oldstyle-nums': [['.oldstyle-nums', { '--tw-numeric-figure': 'oldstyle-nums' }]], - 'proportional-nums': [['.proportional-nums', { '--tw-numeric-spacing': 'proportional-nums' }]], - 'tabular-nums': [['.tabular-nums', { '--tw-numeric-spacing': 'tabular-nums' }]], - 'diagonal-fractions': [ - ['.diagonal-fractions', { '--tw-numeric-fraction': 'diagonal-fractions' }], - ], - 'stacked-fractions': [['.stacked-fractions', { '--tw-numeric-fraction': 'stacked-fractions' }]], + 'normal-nums': { '.normal-nums': { 'font-variant-numeric': 'normal' } }, + ordinal: { '.ordinal': { '--tw-ordinal': 'ordinal' } }, + 'slashed-zero': { '.slashed-zero': { '--tw-slashed-zero': 'slashed-zero' } }, + 'lining-nums': { '.lining-nums': { '--tw-numeric-figure': 'lining-nums' } }, + 'oldstyle-nums': { '.oldstyle-nums': { '--tw-numeric-figure': 'oldstyle-nums' } }, + 'proportional-nums': { '.proportional-nums': { '--tw-numeric-spacing': 'proportional-nums' } }, + 'tabular-nums': { '.tabular-nums': { '--tw-numeric-spacing': 'tabular-nums' } }, + 'diagonal-fractions': { + '.diagonal-fractions': { '--tw-numeric-fraction': 'diagonal-fractions' }, + }, + 'stacked-fractions': { '.stacked-fractions': { '--tw-numeric-fraction': 'stacked-fractions' } }, }) } From d379770e86cec19c2866e2a2e7d34eea1db20a88 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 5 Mar 2021 16:38:05 -0500 Subject: [PATCH 03/13] Update static addUtilities calls --- src/corePlugins/divideWidth.js | 26 ++++++++++---------------- src/corePlugins/ringWidth.js | 13 +++++-------- src/corePlugins/space.js | 26 ++++++++++---------------- 3 files changed, 25 insertions(+), 40 deletions(-) diff --git a/src/corePlugins/divideWidth.js b/src/corePlugins/divideWidth.js index fa5f9f8..eb58630 100644 --- a/src/corePlugins/divideWidth.js +++ b/src/corePlugins/divideWidth.js @@ -46,21 +46,15 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { }) addUtilities({ - 'divide-y-reverse': [ - [ - '.divide-y-reverse > :not([hidden]) ~ :not([hidden])', - { - '--tw-divide-y-reverse': '1', - }, - ], - ], - 'divide-x-reverse': [ - [ - '.divide-x-reverse > :not([hidden]) ~ :not([hidden])', - { - '--tw-divide-x-reverse': '1', - }, - ], - ], + 'divide-y-reverse': { + '.divide-y-reverse > :not([hidden]) ~ :not([hidden])': { + '--tw-divide-y-reverse': '1', + }, + }, + 'divide-x-reverse': { + '.divide-x-reverse > :not([hidden]) ~ :not([hidden])': { + '--tw-divide-x-reverse': '1', + }, + }, }) } diff --git a/src/corePlugins/ringWidth.js b/src/corePlugins/ringWidth.js index 337f439..7cdf1c0 100644 --- a/src/corePlugins/ringWidth.js +++ b/src/corePlugins/ringWidth.js @@ -61,13 +61,10 @@ module.exports = function ({ jit: { theme, addUtilities } }) { }) addUtilities({ - 'ring-inset': [ - [ - '.ring-inset', - { - '--tw-ring-inset': 'inset', - }, - ], - ], + 'ring-inset': { + '.ring-inset': { + '--tw-ring-inset': 'inset', + }, + }, }) } diff --git a/src/corePlugins/space.js b/src/corePlugins/space.js index e1a2062..b653383 100644 --- a/src/corePlugins/space.js +++ b/src/corePlugins/space.js @@ -47,21 +47,15 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { }) addUtilities({ - 'space-y-reverse': [ - [ - '.space-y-reverse > :not([hidden]) ~ :not([hidden])', - { - '--tw-space-y-reverse': '1', - }, - ], - ], - 'space-x-reverse': [ - [ - '.space-x-reverse > :not([hidden]) ~ :not([hidden])', - { - '--tw-space-x-reverse': '1', - }, - ], - ], + 'space-y-reverse': { + '.space-y-reverse > :not([hidden]) ~ :not([hidden])': { + '--tw-space-y-reverse': '1', + }, + }, + 'space-x-reverse': { + '.space-x-reverse > :not([hidden]) ~ :not([hidden])': { + '--tw-space-x-reverse': '1', + }, + }, }) } From bc2d79f97f05baed691ff30bc8c70ba5edda51b1 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 5 Mar 2021 16:38:22 -0500 Subject: [PATCH 04/13] Support returning object, update opacity plugin --- src/corePlugins/opacity.js | 7 ++++--- src/lib/generateRules.js | 2 +- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/corePlugins/opacity.js b/src/corePlugins/opacity.js index 54044db..2dc5f95 100644 --- a/src/corePlugins/opacity.js +++ b/src/corePlugins/opacity.js @@ -1,16 +1,17 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const { asValue } = require('../pluginUtils') +const { newFormat } = require('../pluginUtils') module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { addUtilities({ - opacity: (modifier, { theme }) => { + opacity: newFormat((modifier, { theme }) => { let value = asValue(modifier, theme.opacity) if (value === undefined) { return [] } - return [[nameClass('opacity', modifier), { opacity: value }]] - }, + return { [nameClass('opacity', modifier)]: { opacity: value } } + }), }) } diff --git a/src/lib/generateRules.js b/src/lib/generateRules.js index 7c49f51..3bffb93 100644 --- a/src/lib/generateRules.js +++ b/src/lib/generateRules.js @@ -132,7 +132,7 @@ function generateRules(tailwindConfig, candidates, context) { for (let [sort, plugin] of plugins) { if (typeof plugin === 'function') { - for (let ruleSet of plugin(modifier, pluginHelpers)) { + for (let ruleSet of [].concat(plugin(modifier, pluginHelpers))) { if (plugin.format !== 'new') { let options = {} if (Array.isArray(ruleSet)) { From 9bcfee33ffcf2c9c7998a7761dec1178f82b5f42 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 5 Mar 2021 16:43:26 -0500 Subject: [PATCH 05/13] Move animation plugin to new format --- src/corePlugins/animation.js | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/src/corePlugins/animation.js b/src/corePlugins/animation.js index 86ca541..777565b 100644 --- a/src/corePlugins/animation.js +++ b/src/corePlugins/animation.js @@ -1,6 +1,7 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default const parseAnimationValue = require('tailwindcss/lib/util/parseAnimationValue').default +const { newFormat } = require('../pluginUtils') module.exports = function ({ jit: { theme, addUtilities } }) { let keyframes = Object.fromEntries( @@ -8,12 +9,11 @@ module.exports = function ({ jit: { theme, addUtilities } }) { return [ key, [ - `@keyframes ${key}`, - Object.entries(value).map(([key, value]) => { - return [key, value] - }), + { + [`@keyframes ${key}`]: value, + }, + { respectVariants: false }, ], - { respectVariants: false }, ] }) ) @@ -21,7 +21,7 @@ module.exports = function ({ jit: { theme, addUtilities } }) { let transformValue = transformThemeValue('animation') addUtilities({ animate: [ - (modifier, { theme }) => { + newFormat((modifier, { theme }) => { let value = transformValue(theme.animation[modifier]) if (modifier === '' || value === undefined) { @@ -30,8 +30,11 @@ module.exports = function ({ jit: { theme, addUtilities } }) { let { name: animationName } = parseAnimationValue(value) - return [keyframes[animationName], [nameClass('animate', modifier), { animation: value }]] - }, + return [ + keyframes[animationName], + { [nameClass('animate', modifier)]: { animation: value } }, + ] + }), ], }) } From 8e5f86f9dd86f8176b44341072747a11b33478c8 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 5 Mar 2021 16:44:28 -0500 Subject: [PATCH 06/13] Migrate backgroundColor to new format --- src/corePlugins/backgroundColor.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/corePlugins/backgroundColor.js b/src/corePlugins/backgroundColor.js index 87db759..050b823 100644 --- a/src/corePlugins/backgroundColor.js +++ b/src/corePlugins/backgroundColor.js @@ -4,13 +4,14 @@ const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette'). const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable').default const toColorValue = require('tailwindcss/lib/util/toColorValue').default const { asColor } = require('../pluginUtils') +const { newFormat } = require('../pluginUtils') module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { let colorPalette = flattenColorPalette(theme.backgroundColor) addUtilities({ bg: [ - (modifier, { theme }) => { + newFormat((modifier, { theme }) => { let value = asColor(modifier, colorPalette) if (value === undefined) { @@ -18,16 +19,15 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { } return [ - [ - nameClass('bg', modifier), - withAlphaVariable({ + { + [nameClass('bg', modifier)]: withAlphaVariable({ color: value, property: 'background-color', variable: '--tw-bg-opacity', }), - ], + }, ] - }, + }), ], }) } From ec4d95243197ed8ac53eedd340d28206a4410724 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 5 Mar 2021 16:46:04 -0500 Subject: [PATCH 07/13] Migrate backgroundImage --- src/corePlugins/backgroundColor.js | 16 +++++++--------- src/corePlugins/backgroundImage.js | 7 ++++--- 2 files changed, 11 insertions(+), 12 deletions(-) diff --git a/src/corePlugins/backgroundColor.js b/src/corePlugins/backgroundColor.js index 050b823..241ccae 100644 --- a/src/corePlugins/backgroundColor.js +++ b/src/corePlugins/backgroundColor.js @@ -18,15 +18,13 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { return [] } - return [ - { - [nameClass('bg', modifier)]: withAlphaVariable({ - color: value, - property: 'background-color', - variable: '--tw-bg-opacity', - }), - }, - ] + return { + [nameClass('bg', modifier)]: withAlphaVariable({ + color: value, + property: 'background-color', + variable: '--tw-bg-opacity', + }), + } }), ], }) diff --git a/src/corePlugins/backgroundImage.js b/src/corePlugins/backgroundImage.js index 9673baf..4a0b03f 100644 --- a/src/corePlugins/backgroundImage.js +++ b/src/corePlugins/backgroundImage.js @@ -1,17 +1,18 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default +const { newFormat } = require('../pluginUtils') module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { addUtilities({ bg: [ - (modifier, { theme }) => { + newFormat((modifier, { theme }) => { let value = theme.backgroundImage[modifier] if (value === undefined) { return [] } - return [[nameClass('bg', modifier), { 'background-image': value }]] - }, + return { [nameClass('bg', modifier)]: { 'background-image': value } } + }), ], }) } From 157e0beac503613a9aa7b06ca618d2629a6dc435 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 5 Mar 2021 16:54:33 -0500 Subject: [PATCH 08/13] Add matchUtilities helper, migrate backgroundOpacity --- src/corePlugins/backgroundColor.js | 33 ++++++++++------------ src/corePlugins/backgroundImage.js | 21 ++++++-------- src/corePlugins/backgroundOpacity.js | 20 ++++++------- src/lib/setupContext.js | 42 ++++++++++++++++++---------- 4 files changed, 60 insertions(+), 56 deletions(-) diff --git a/src/corePlugins/backgroundColor.js b/src/corePlugins/backgroundColor.js index 241ccae..72acf44 100644 --- a/src/corePlugins/backgroundColor.js +++ b/src/corePlugins/backgroundColor.js @@ -4,28 +4,25 @@ const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette'). const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable').default const toColorValue = require('tailwindcss/lib/util/toColorValue').default const { asColor } = require('../pluginUtils') -const { newFormat } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { +module.exports = function ({ matchUtilities, jit: { theme } }) { let colorPalette = flattenColorPalette(theme.backgroundColor) - addUtilities({ - bg: [ - newFormat((modifier, { theme }) => { - let value = asColor(modifier, colorPalette) + matchUtilities({ + bg: (modifier, { theme }) => { + let value = asColor(modifier, colorPalette) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return { - [nameClass('bg', modifier)]: withAlphaVariable({ - color: value, - property: 'background-color', - variable: '--tw-bg-opacity', - }), - } - }), - ], + return { + [nameClass('bg', modifier)]: withAlphaVariable({ + color: value, + property: 'background-color', + variable: '--tw-bg-opacity', + }), + } + }, }) } diff --git a/src/corePlugins/backgroundImage.js b/src/corePlugins/backgroundImage.js index 4a0b03f..9279e7a 100644 --- a/src/corePlugins/backgroundImage.js +++ b/src/corePlugins/backgroundImage.js @@ -1,18 +1,15 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default -const { newFormat } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - bg: [ - newFormat((modifier, { theme }) => { - let value = theme.backgroundImage[modifier] +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + bg: (modifier, { theme }) => { + let value = theme.backgroundImage[modifier] - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return { [nameClass('bg', modifier)]: { 'background-image': value } } - }), - ], + return { [nameClass('bg', modifier)]: { 'background-image': value } } + }, }) } diff --git a/src/corePlugins/backgroundOpacity.js b/src/corePlugins/backgroundOpacity.js index bf72952..77df7df 100644 --- a/src/corePlugins/backgroundOpacity.js +++ b/src/corePlugins/backgroundOpacity.js @@ -2,20 +2,18 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default const { asValue } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { +module.exports = function ({ matchUtilities, jit: { theme, addVariant, e } }) { let transformValue = transformThemeValue('backgroundOpacity') - addUtilities({ - 'bg-opacity': [ - (modifier, { theme }) => { - let value = asValue(modifier, theme.backgroundOpacity) + matchUtilities({ + 'bg-opacity': (modifier, { theme }) => { + let value = asValue(modifier, theme.backgroundOpacity) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('bg-opacity', modifier), { '--tw-bg-opacity': value }]] - }, - ], + return { [nameClass('bg-opacity', modifier)]: { '--tw-bg-opacity': value } } + }, }) } diff --git a/src/lib/setupContext.js b/src/lib/setupContext.js index 16b1b7d..84110f5 100644 --- a/src/lib/setupContext.js +++ b/src/lib/setupContext.js @@ -342,6 +342,22 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs return prefixSelector(tailwindConfig.prefix, selector) } + function addUtilities(utilities) { + let offset = offsets.utilities++ + + for (let identifier in utilities) { + let value = [].concat(utilities[identifier]) + + let withOffsets = value.map((rule) => [{ sort: offset, layer: 'utilities' }, rule]) + + if (!context.candidateRuleMap.has(identifier)) { + context.candidateRuleMap.set(identifier, []) + } + + context.candidateRuleMap.get(identifier).push(...withOffsets) + } + } + return { // Classic plugin API addVariant(variantName, applyThisVariant, options = {}) { @@ -430,6 +446,16 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs context.candidateRuleMap.get(identifier).push([{ sort: offset, layer: 'utilities' }, rule]) } }, + matchUtilities: function (utilities) { + utilities = Object.fromEntries( + Object.entries(utilities).map(([key, value]) => { + value.format = 'new' + return [key, value] + }) + ) + + addUtilities(utilities) + }, // --- jit: { e: escapeClassName, @@ -454,21 +480,7 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs context.candidateRuleMap.get(identifier).push(...withOffsets) } }, - addUtilities(utilities) { - let offset = offsets.utilities++ - - for (let identifier in utilities) { - let value = [].concat(utilities[identifier]) - - let withOffsets = value.map((rule) => [{ sort: offset, layer: 'utilities' }, rule]) - - if (!context.candidateRuleMap.has(identifier)) { - context.candidateRuleMap.set(identifier, []) - } - - context.candidateRuleMap.get(identifier).push(...withOffsets) - } - }, + addUtilities, }, } } From 0033b6ff69047e98f7d4ee9d747e288341dafc7c Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 5 Mar 2021 16:55:10 -0500 Subject: [PATCH 09/13] Migrate backgroundPosition --- src/corePlugins/backgroundPosition.js | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/src/corePlugins/backgroundPosition.js b/src/corePlugins/backgroundPosition.js index 76f4d5d..bbb33ba 100644 --- a/src/corePlugins/backgroundPosition.js +++ b/src/corePlugins/backgroundPosition.js @@ -1,18 +1,16 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - bg: [ - (modifier, { theme }) => { - let value = theme.backgroundPosition[modifier] +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + bg: (modifier, { theme }) => { + let value = theme.backgroundPosition[modifier] - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('bg', modifier), { 'background-position': value }]] - }, - ], + return { [nameClass('bg', modifier)]: { 'background-position': value } } + }, }) } From c7c89d1a53ba1a9b42a4a8c6862da027d462fba1 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 5 Mar 2021 16:56:25 -0500 Subject: [PATCH 10/13] Migrate backgroundSize --- src/corePlugins/backgroundSize.js | 23 +++++++++-------------- 1 file changed, 9 insertions(+), 14 deletions(-) diff --git a/src/corePlugins/backgroundSize.js b/src/corePlugins/backgroundSize.js index b6c34c6..27129d3 100644 --- a/src/corePlugins/backgroundSize.js +++ b/src/corePlugins/backgroundSize.js @@ -1,20 +1,15 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - bg: [ - (modifier, { theme }) => { - if ( - modifier === undefined || - modifier === '' || - theme.backgroundSize[modifier] === undefined - ) { - return [] - } +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + bg: (modifier, { theme }) => { + let value = theme.backgroundSize[modifier] + if (value === undefined) { + return [] + } - return [[nameClass('bg', modifier), { 'background-size': theme.backgroundSize[modifier] }]] - }, - ], + return { [nameClass('bg', modifier)]: { 'background-size': value } } + }, }) } From 50c89fda780ea9b7fe1e4d39125a92a0dd89ef82 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 5 Mar 2021 16:58:13 -0500 Subject: [PATCH 11/13] Migrate borderColor --- src/corePlugins/borderColor.js | 41 +++++++++++++++------------------- 1 file changed, 18 insertions(+), 23 deletions(-) diff --git a/src/corePlugins/borderColor.js b/src/corePlugins/borderColor.js index d893d86..5f74464 100644 --- a/src/corePlugins/borderColor.js +++ b/src/corePlugins/borderColor.js @@ -5,33 +5,28 @@ const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable').defa const toColorValue = require('tailwindcss/lib/util/toColorValue').default const { asColor } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { +module.exports = function ({ matchUtilities, jit: { theme } }) { let colorPalette = flattenColorPalette(theme.borderColor) - addUtilities({ - border: [ - (modifier, { theme }) => { - if (modifier === 'DEFAULT') { - return [] - } + matchUtilities({ + border: (modifier, { theme }) => { + if (modifier === 'DEFAULT') { + return [] + } - let value = asColor(modifier, colorPalette) + let value = asColor(modifier, colorPalette) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [ - [ - nameClass('border', modifier), - withAlphaVariable({ - color: colorPalette[modifier], - property: 'border-color', - variable: '--tw-border-opacity', - }), - ], - ] - }, - ], + return { + [nameClass('border', modifier)]: withAlphaVariable({ + color: colorPalette[modifier], + property: 'border-color', + variable: '--tw-border-opacity', + }), + } + }, }) } From ed83084e95ac739707084072d9b6656a699806f4 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 5 Mar 2021 19:36:48 -0500 Subject: [PATCH 12/13] Refactor remaining plugins to new API --- src/corePlugins/backgroundOpacity.js | 3 - src/corePlugins/backgroundPosition.js | 1 - src/corePlugins/backgroundSize.js | 2 +- src/corePlugins/borderColor.js | 1 - src/corePlugins/borderOpacity.js | 20 +- src/corePlugins/borderRadius.js | 228 +++++++++----------- src/corePlugins/borderWidth.js | 102 ++++----- src/corePlugins/boxShadow.js | 47 ++-- src/corePlugins/cursor.js | 21 +- src/corePlugins/divideColor.js | 36 ++-- src/corePlugins/divideOpacity.js | 30 ++- src/corePlugins/divideWidth.js | 78 +++---- src/corePlugins/fill.js | 21 +- src/corePlugins/flex.js | 20 +- src/corePlugins/flexGrow.js | 20 +- src/corePlugins/flexShrink.js | 20 +- src/corePlugins/fontFamily.js | 22 +- src/corePlugins/fontSize.js | 83 ++++--- src/corePlugins/fontWeight.js | 19 +- src/corePlugins/gap.js | 54 +++-- src/corePlugins/gradientColorStops.js | 101 ++++----- src/corePlugins/gridAutoColumns.js | 20 +- src/corePlugins/gridAutoRows.js | 20 +- src/corePlugins/gridColumn.js | 18 +- src/corePlugins/gridColumnEnd.js | 22 +- src/corePlugins/gridColumnStart.js | 22 +- src/corePlugins/gridRow.js | 20 +- src/corePlugins/gridRowEnd.js | 22 +- src/corePlugins/gridRowStart.js | 22 +- src/corePlugins/gridTemplateColumns.js | 20 +- src/corePlugins/gridTemplateRows.js | 20 +- src/corePlugins/height.js | 21 +- src/corePlugins/inset.js | 124 +++++------ src/corePlugins/letterSpacing.js | 20 +- src/corePlugins/lineHeight.js | 20 +- src/corePlugins/listStyleType.js | 18 +- src/corePlugins/margin.js | 121 +++++------ src/corePlugins/maxHeight.js | 20 +- src/corePlugins/maxWidth.js | 20 +- src/corePlugins/minHeight.js | 20 +- src/corePlugins/minWidth.js | 20 +- src/corePlugins/objectPosition.js | 22 +- src/corePlugins/opacity.js | 9 +- src/corePlugins/order.js | 20 +- src/corePlugins/outline.js | 37 ++-- src/corePlugins/padding.js | 120 +++++------ src/corePlugins/placeholderColor.js | 36 ++-- src/corePlugins/placeholderOpacity.js | 30 ++- src/corePlugins/ringColor.js | 35 ++- src/corePlugins/ringOffsetColor.js | 31 ++- src/corePlugins/ringOffsetWidth.js | 31 ++- src/corePlugins/ringOpacity.js | 31 ++- src/corePlugins/ringWidth.js | 66 +++--- src/corePlugins/rotate.js | 20 +- src/corePlugins/scale.js | 54 +++-- src/corePlugins/skew.js | 36 ++-- src/corePlugins/space.js | 78 +++---- src/corePlugins/stroke.js | 21 +- src/corePlugins/strokeWidth.js | 20 +- src/corePlugins/textColor.js | 36 ++-- src/corePlugins/textOpacity.js | 20 +- src/corePlugins/transformOrigin.js | 23 +- src/corePlugins/transitionDelay.js | 25 ++- src/corePlugins/transitionDuration.js | 26 +-- src/corePlugins/transitionProperty.js | 45 ++-- src/corePlugins/transitionTimingFunction.js | 26 +-- src/corePlugins/translate.js | 37 ++-- src/corePlugins/width.js | 21 +- src/corePlugins/zIndex.js | 21 +- 69 files changed, 1106 insertions(+), 1410 deletions(-) diff --git a/src/corePlugins/backgroundOpacity.js b/src/corePlugins/backgroundOpacity.js index 77df7df..5103766 100644 --- a/src/corePlugins/backgroundOpacity.js +++ b/src/corePlugins/backgroundOpacity.js @@ -1,10 +1,7 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default -const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default const { asValue } = require('../pluginUtils') module.exports = function ({ matchUtilities, jit: { theme, addVariant, e } }) { - let transformValue = transformThemeValue('backgroundOpacity') - matchUtilities({ 'bg-opacity': (modifier, { theme }) => { let value = asValue(modifier, theme.backgroundOpacity) diff --git a/src/corePlugins/backgroundPosition.js b/src/corePlugins/backgroundPosition.js index bbb33ba..c5f6035 100644 --- a/src/corePlugins/backgroundPosition.js +++ b/src/corePlugins/backgroundPosition.js @@ -1,5 +1,4 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default -const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default module.exports = function ({ matchUtilities, jit: { theme } }) { matchUtilities({ diff --git a/src/corePlugins/backgroundSize.js b/src/corePlugins/backgroundSize.js index 27129d3..9211eb3 100644 --- a/src/corePlugins/backgroundSize.js +++ b/src/corePlugins/backgroundSize.js @@ -1,10 +1,10 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default -const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default module.exports = function ({ matchUtilities, jit: { theme } }) { matchUtilities({ bg: (modifier, { theme }) => { let value = theme.backgroundSize[modifier] + if (value === undefined) { return [] } diff --git a/src/corePlugins/borderColor.js b/src/corePlugins/borderColor.js index 5f74464..683f54d 100644 --- a/src/corePlugins/borderColor.js +++ b/src/corePlugins/borderColor.js @@ -1,5 +1,4 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default -const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable').default const toColorValue = require('tailwindcss/lib/util/toColorValue').default diff --git a/src/corePlugins/borderOpacity.js b/src/corePlugins/borderOpacity.js index fbd6f73..cbd6c03 100644 --- a/src/corePlugins/borderOpacity.js +++ b/src/corePlugins/borderOpacity.js @@ -1,18 +1,16 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const { asValue } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - 'border-opacity': [ - (modifier, { theme }) => { - let value = asValue(modifier, theme.borderOpacity) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + 'border-opacity': (modifier, { theme }) => { + let value = asValue(modifier, theme.borderOpacity) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('border-opacity', modifier), { '--tw-border-opacity': value }]] - }, - ], + return { [nameClass('border-opacity', modifier)]: { '--tw-border-opacity': value } } + }, }) } diff --git a/src/corePlugins/borderRadius.js b/src/corePlugins/borderRadius.js index a79376e..9109db0 100644 --- a/src/corePlugins/borderRadius.js +++ b/src/corePlugins/borderRadius.js @@ -1,130 +1,112 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const { asLength } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - rounded: [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['borderRadius']) - - if (value === undefined) { - return [] - } - - return [[nameClass('rounded', modifier), { 'border-radius': value }]] - }, - ], +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + rounded: (modifier, { theme }) => { + let value = asLength(modifier, theme['borderRadius']) + + if (value === undefined) { + return [] + } + + return { [nameClass('rounded', modifier)]: { 'border-radius': value } } + }, }) - addUtilities({ - 'rounded-t': [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['borderRadius']) - - if (value === undefined) { - return [] - } - - return [ - [ - nameClass('rounded-t', modifier), - { 'border-top-left-radius': value, 'border-top-right-radius': value }, - ], - ] - }, - ], - 'rounded-r': [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['borderRadius']) - - if (value === undefined) { - return [] - } - - return [ - [ - nameClass('rounded-r', modifier), - { 'border-top-right-radius': value, 'border-bottom-right-radius': value }, - ], - ] - }, - ], - 'rounded-b': [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['borderRadius']) - - if (value === undefined) { - return [] - } - - return [ - [ - nameClass('rounded-b', modifier), - { 'border-bottom-right-radius': value, 'border-bottom-left-radius': value }, - ], - ] - }, - ], - 'rounded-l': [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['borderRadius']) - - if (value === undefined) { - return [] - } - - return [ - [ - nameClass('rounded-l', modifier), - { 'border-top-left-radius': value, 'border-bottom-left-radius': value }, - ], - ] - }, - ], + matchUtilities({ + 'rounded-t': (modifier, { theme }) => { + let value = asLength(modifier, theme['borderRadius']) + + if (value === undefined) { + return [] + } + + return { + [nameClass('rounded-t', modifier)]: { + 'border-top-left-radius': value, + 'border-top-right-radius': value, + }, + } + }, + 'rounded-r': (modifier, { theme }) => { + let value = asLength(modifier, theme['borderRadius']) + + if (value === undefined) { + return [] + } + + return { + [nameClass('rounded-r', modifier)]: { + 'border-top-right-radius': value, + 'border-bottom-right-radius': value, + }, + } + }, + 'rounded-b': (modifier, { theme }) => { + let value = asLength(modifier, theme['borderRadius']) + + if (value === undefined) { + return [] + } + + return { + [nameClass('rounded-b', modifier)]: { + 'border-bottom-right-radius': value, + 'border-bottom-left-radius': value, + }, + } + }, + 'rounded-l': (modifier, { theme }) => { + let value = asLength(modifier, theme['borderRadius']) + + if (value === undefined) { + return [] + } + + return { + [nameClass('rounded-l', modifier)]: { + 'border-top-left-radius': value, + 'border-bottom-left-radius': value, + }, + } + }, }) - addUtilities({ - 'rounded-tl': [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['borderRadius']) - - if (value === undefined) { - return [] - } - - return [[nameClass('rounded-tl', modifier), { 'border-top-left-radius': value }]] - }, - ], - 'rounded-tr': [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['borderRadius']) - - if (value === undefined) { - return [] - } - - return [[nameClass('rounded-tr', modifier), { 'border-top-right-radius': value }]] - }, - ], - 'rounded-br': [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['borderRadius']) - - if (value === undefined) { - return [] - } - - return [[nameClass('rounded-br', modifier), { 'border-bottom-right-radius': value }]] - }, - ], - 'rounded-bl': [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['borderRadius']) - - if (value === undefined) { - return [] - } - - return [[nameClass('rounded-bl', modifier), { 'border-bottom-left-radius': value }]] - }, - ], + matchUtilities({ + 'rounded-tl': (modifier, { theme }) => { + let value = asLength(modifier, theme['borderRadius']) + + if (value === undefined) { + return [] + } + + return { [nameClass('rounded-tl', modifier)]: { 'border-top-left-radius': value } } + }, + 'rounded-tr': (modifier, { theme }) => { + let value = asLength(modifier, theme['borderRadius']) + + if (value === undefined) { + return [] + } + + return { [nameClass('rounded-tr', modifier)]: { 'border-top-right-radius': value } } + }, + 'rounded-br': (modifier, { theme }) => { + let value = asLength(modifier, theme['borderRadius']) + + if (value === undefined) { + return [] + } + + return { [nameClass('rounded-br', modifier)]: { 'border-bottom-right-radius': value } } + }, + 'rounded-bl': (modifier, { theme }) => { + let value = asLength(modifier, theme['borderRadius']) + + if (value === undefined) { + return [] + } + + return { [nameClass('rounded-bl', modifier)]: { 'border-bottom-left-radius': value } } + }, }) } diff --git a/src/corePlugins/borderWidth.js b/src/corePlugins/borderWidth.js index 5ef30d9..7d8b43c 100644 --- a/src/corePlugins/borderWidth.js +++ b/src/corePlugins/borderWidth.js @@ -1,64 +1,54 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const { asLength } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - border: [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['borderWidth']) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + border: (modifier, { theme }) => { + let value = asLength(modifier, theme['borderWidth']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('border', modifier), { 'border-width': value }]] - }, - ], + return { [nameClass('border', modifier)]: { 'border-width': value } } + }, }) - addUtilities({ - 'border-t': [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['borderWidth']) - - if (value === undefined) { - return [] - } - - return [[nameClass('border-t', modifier), { 'border-top-width': value }]] - }, - ], - 'border-r': [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['borderWidth']) - - if (value === undefined) { - return [] - } - - return [[nameClass('border-r', modifier), { 'border-right-width': value }]] - }, - ], - 'border-b': [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['borderWidth']) - - if (value === undefined) { - return [] - } - - return [[nameClass('border-b', modifier), { 'border-bottom-width': value }]] - }, - ], - 'border-l': [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['borderWidth']) - - if (value === undefined) { - return [] - } - - return [[nameClass('border-l', modifier), { 'border-left-width': value }]] - }, - ], + matchUtilities({ + 'border-t': (modifier, { theme }) => { + let value = asLength(modifier, theme['borderWidth']) + + if (value === undefined) { + return [] + } + + return { [nameClass('border-t', modifier)]: { 'border-top-width': value } } + }, + 'border-r': (modifier, { theme }) => { + let value = asLength(modifier, theme['borderWidth']) + + if (value === undefined) { + return [] + } + + return { [nameClass('border-r', modifier)]: { 'border-right-width': value } } + }, + 'border-b': (modifier, { theme }) => { + let value = asLength(modifier, theme['borderWidth']) + + if (value === undefined) { + return [] + } + + return { [nameClass('border-b', modifier)]: { 'border-bottom-width': value } } + }, + 'border-l': (modifier, { theme }) => { + let value = asLength(modifier, theme['borderWidth']) + + if (value === undefined) { + return [] + } + + return { [nameClass('border-l', modifier)]: { 'border-left-width': value } } + }, }) } diff --git a/src/corePlugins/boxShadow.js b/src/corePlugins/boxShadow.js index cba079e..5cd5c9c 100644 --- a/src/corePlugins/boxShadow.js +++ b/src/corePlugins/boxShadow.js @@ -1,40 +1,37 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default -const { newFormat } = require('../pluginUtils') +let transformValue = transformThemeValue('boxShadow') let shadowReset = { '*': { '--tw-shadow': '0 0 #0000', }, } -module.exports = function ({ jit: { theme, addUtilities } }) { - addUtilities({ - shadow: [ - newFormat((modifier, { theme }) => { - modifier = modifier === '' ? 'DEFAULT' : modifier +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + shadow: (modifier, { theme }) => { + modifier = modifier === '' ? 'DEFAULT' : modifier - let transformValue = transformThemeValue('boxShadow') - let value = transformValue(theme.boxShadow[modifier]) + let value = transformValue(theme.boxShadow[modifier]) - if (modifier === '' || value === undefined) { - return [] - } + if (modifier === '' || value === undefined) { + return [] + } - return [ - [shadowReset, { respectVariants: false }], - { - [nameClass('shadow', modifier)]: { - '--tw-shadow': value === 'none' ? '0 0 #0000' : value, - 'box-shadow': [ - `var(--tw-ring-offset-shadow, 0 0 #0000)`, - `var(--tw-ring-shadow, 0 0 #0000)`, - `var(--tw-shadow)`, - ].join(', '), - }, + return [ + [shadowReset, { respectVariants: false }], + { + [nameClass('shadow', modifier)]: { + '--tw-shadow': value === 'none' ? '0 0 #0000' : value, + 'box-shadow': [ + `var(--tw-ring-offset-shadow, 0 0 #0000)`, + `var(--tw-ring-shadow, 0 0 #0000)`, + `var(--tw-shadow)`, + ].join(', '), }, - ] - }), - ], + }, + ] + }, }) } diff --git a/src/corePlugins/cursor.js b/src/corePlugins/cursor.js index c0f849f..0ce450a 100644 --- a/src/corePlugins/cursor.js +++ b/src/corePlugins/cursor.js @@ -1,19 +1,16 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default -const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default const { asValue } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - cursor: [ - (modifier, { theme }) => { - let value = asValue(modifier, theme.cursor) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + cursor: (modifier, { theme }) => { + let value = asValue(modifier, theme.cursor) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('cursor', modifier), { cursor: value }]] - }, - ], + return { [nameClass('cursor', modifier)]: { cursor: value } } + }, }) } diff --git a/src/corePlugins/divideColor.js b/src/corePlugins/divideColor.js index b68991c..bc3621d 100644 --- a/src/corePlugins/divideColor.js +++ b/src/corePlugins/divideColor.js @@ -1,34 +1,28 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default -const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable').default const toColorValue = require('tailwindcss/lib/util/toColorValue').default const { asColor } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { +module.exports = function ({ matchUtilities, jit: { theme } }) { let colorPalette = flattenColorPalette(theme.divideColor) // TODO: Make sure there is no issue with DEFAULT here - addUtilities({ - divide: [ - (modifier, { theme }) => { - let value = asColor(modifier, colorPalette) + matchUtilities({ + divide: (modifier, { theme }) => { + let value = asColor(modifier, colorPalette) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [ - [ - `${nameClass('divide', modifier)} > :not([hidden]) ~ :not([hidden])`, - withAlphaVariable({ - color: colorPalette[modifier], - property: 'border-color', - variable: '--tw-divide-opacity', - }), - ], - ] - }, - ], + return { + [`${nameClass('divide', modifier)} > :not([hidden]) ~ :not([hidden])`]: withAlphaVariable({ + color: colorPalette[modifier], + property: 'border-color', + variable: '--tw-divide-opacity', + }), + } + }, }) } diff --git a/src/corePlugins/divideOpacity.js b/src/corePlugins/divideOpacity.js index 34da7f6..ec17813 100644 --- a/src/corePlugins/divideOpacity.js +++ b/src/corePlugins/divideOpacity.js @@ -1,24 +1,20 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default -const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default const { asValue } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - 'divide-opacity': [ - (modifier, { theme }) => { - let value = asValue(modifier, theme.divideOpacity) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + 'divide-opacity': (modifier, { theme }) => { + let value = asValue(modifier, theme.divideOpacity) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [ - [ - `${nameClass('divide-opacity', modifier)} > :not([hidden]) ~ :not([hidden])`, - { '--tw-divide-opacity': value }, - ], - ] - }, - ], + return { + [`${nameClass('divide-opacity', modifier)} > :not([hidden]) ~ :not([hidden])`]: { + '--tw-divide-opacity': value, + }, + } + }, }) } diff --git a/src/corePlugins/divideWidth.js b/src/corePlugins/divideWidth.js index eb58630..b084a45 100644 --- a/src/corePlugins/divideWidth.js +++ b/src/corePlugins/divideWidth.js @@ -1,60 +1,46 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const { asLength } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - 'divide-x': [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['divideWidth']) +module.exports = function ({ addUtilities, matchUtilities, jit: { theme } }) { + matchUtilities({ + 'divide-x': (modifier, { theme }) => { + let value = asLength(modifier, theme['divideWidth']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [ - [ - `${nameClass('divide-x', modifier)} > :not([hidden]) ~ :not([hidden])`, - { - '--tw-divide-x-reverse': '0', - 'border-right-width': `calc(${value} * var(--tw-divide-x-reverse))`, - 'border-left-width': `calc(${value} * calc(1 - var(--tw-divide-x-reverse)))`, - }, - ], - ] - }, - ], - 'divide-y': [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['divideWidth']) + return { + [`${nameClass('divide-x', modifier)} > :not([hidden]) ~ :not([hidden])`]: { + '--tw-divide-x-reverse': '0', + 'border-right-width': `calc(${value} * var(--tw-divide-x-reverse))`, + 'border-left-width': `calc(${value} * calc(1 - var(--tw-divide-x-reverse)))`, + }, + } + }, + 'divide-y': (modifier, { theme }) => { + let value = asLength(modifier, theme['divideWidth']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [ - [ - `${nameClass('divide-y', modifier)} > :not([hidden]) ~ :not([hidden])`, - { - '--tw-divide-y-reverse': '0', - 'border-top-width': `calc(${value} * calc(1 - var(--tw-divide-y-reverse)))`, - 'border-bottom-width': `calc(${value} * var(--tw-divide-y-reverse))`, - }, - ], - ] - }, - ], + return { + [`${nameClass('divide-y', modifier)} > :not([hidden]) ~ :not([hidden])`]: { + '--tw-divide-y-reverse': '0', + 'border-top-width': `calc(${value} * calc(1 - var(--tw-divide-y-reverse)))`, + 'border-bottom-width': `calc(${value} * var(--tw-divide-y-reverse))`, + }, + } + }, }) addUtilities({ - 'divide-y-reverse': { - '.divide-y-reverse > :not([hidden]) ~ :not([hidden])': { - '--tw-divide-y-reverse': '1', - }, + '.divide-y-reverse > :not([hidden]) ~ :not([hidden])': { + '--tw-divide-y-reverse': '1', }, - 'divide-x-reverse': { - '.divide-x-reverse > :not([hidden]) ~ :not([hidden])': { - '--tw-divide-x-reverse': '1', - }, + '.divide-x-reverse > :not([hidden]) ~ :not([hidden])': { + '--tw-divide-x-reverse': '1', }, }) } diff --git a/src/corePlugins/fill.js b/src/corePlugins/fill.js index f1bb257..f8666b0 100644 --- a/src/corePlugins/fill.js +++ b/src/corePlugins/fill.js @@ -1,24 +1,21 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default -const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable').default const toColorValue = require('tailwindcss/lib/util/toColorValue').default const { asColor } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { +module.exports = function ({ matchUtilities, jit: { theme } }) { let colorPalette = flattenColorPalette(theme.fill) - addUtilities({ - fill: [ - (modifier, { theme }) => { - let value = asColor(modifier, colorPalette) + matchUtilities({ + fill: (modifier, { theme }) => { + let value = asColor(modifier, colorPalette) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('fill', modifier), { fill: toColorValue(value) }]] - }, - ], + return { [nameClass('fill', modifier)]: { fill: toColorValue(value) } } + }, }) } diff --git a/src/corePlugins/flex.js b/src/corePlugins/flex.js index 15bb5da..5bc4006 100644 --- a/src/corePlugins/flex.js +++ b/src/corePlugins/flex.js @@ -1,16 +1,16 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - flex: [ - (modifier, { theme }) => { - if (modifier === undefined || modifier === '' || theme.flex[modifier] === undefined) { - return [] - } +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + flex: (modifier, { theme }) => { + let value = theme.flex[modifier] - return [[nameClass('flex', modifier), { flex: theme.flex[modifier] }]] - }, - ], + if (value === undefined) { + return [] + } + + return { [nameClass('flex', modifier)]: { flex: theme.flex[modifier] } } + }, }) } diff --git a/src/corePlugins/flexGrow.js b/src/corePlugins/flexGrow.js index 379bed0..b568770 100644 --- a/src/corePlugins/flexGrow.js +++ b/src/corePlugins/flexGrow.js @@ -1,18 +1,16 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const { asValue } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - 'flex-grow': [ - (modifier, { theme }) => { - let value = asValue(modifier, theme.flexGrow) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + 'flex-grow': (modifier, { theme }) => { + let value = asValue(modifier, theme.flexGrow) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('flex-grow', modifier), { 'flex-grow': value }]] - }, - ], + return { [nameClass('flex-grow', modifier)]: { 'flex-grow': value } } + }, }) } diff --git a/src/corePlugins/flexShrink.js b/src/corePlugins/flexShrink.js index 6381979..a523b76 100644 --- a/src/corePlugins/flexShrink.js +++ b/src/corePlugins/flexShrink.js @@ -1,18 +1,16 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const { asValue } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - 'flex-shrink': [ - (modifier, { theme }) => { - let value = asValue(modifier, theme.flexShrink) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + 'flex-shrink': (modifier, { theme }) => { + let value = asValue(modifier, theme.flexShrink) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('flex-shrink', modifier), { 'flex-shrink': value }]] - }, - ], + return { [nameClass('flex-shrink', modifier)]: { 'flex-shrink': value } } + }, }) } diff --git a/src/corePlugins/fontFamily.js b/src/corePlugins/fontFamily.js index 45d4d23..e2a3531 100644 --- a/src/corePlugins/fontFamily.js +++ b/src/corePlugins/fontFamily.js @@ -1,21 +1,19 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { +module.exports = function ({ matchUtilities, jit: { theme } }) { let transformValue = transformThemeValue('fontFamily') - addUtilities({ - font: [ - (modifier, { theme }) => { - let transformValue = transformThemeValue('fontFamily') - let value = transformValue(theme.fontFamily[modifier]) + matchUtilities({ + font: (modifier, { theme }) => { + let transformValue = transformThemeValue('fontFamily') + let value = transformValue(theme.fontFamily[modifier]) - if (modifier === '' || value === undefined) { - return [] - } + if (modifier === '' || value === undefined) { + return [] + } - return [[nameClass('font', modifier), { 'font-family': transformValue(value) }]] - }, - ], + return { [nameClass('font', modifier)]: { 'font-family': transformValue(value) } } + }, }) } diff --git a/src/corePlugins/fontSize.js b/src/corePlugins/fontSize.js index 20548e3..c07444b 100644 --- a/src/corePlugins/fontSize.js +++ b/src/corePlugins/fontSize.js @@ -1,57 +1,46 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const { asLength } = require('../pluginUtils') +const { isPlainObject } = require('../lib/utils') -function isPlainObject(value) { - return typeof value === 'object' && value !== null -} - -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - text: [ - (modifier, { theme }) => { - let value = theme.fontSize[modifier] +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + text: (modifier, { theme }) => { + let value = theme.fontSize[modifier] - if (value === undefined) { - value = asLength(modifier, {}) + if (value === undefined) { + value = asLength(modifier, {}) - return value === undefined - ? [] - : [ - [ - nameClass('text', modifier), - { - 'font-size': value, - }, - ], - ] - } - - let [fontSize, options] = Array.isArray(value) ? value : [value] - let { lineHeight, letterSpacing } = isPlainObject(options) - ? options + return value === undefined + ? [] : { - lineHeight: options, + [nameClass('text', modifier)]: { + 'font-size': value, + }, } + } + + let [fontSize, options] = Array.isArray(value) ? value : [value] + let { lineHeight, letterSpacing } = isPlainObject(options) + ? options + : { + lineHeight: options, + } - return [ - [ - nameClass('text', modifier), - { - 'font-size': fontSize, - ...(lineHeight === undefined - ? {} - : { - 'line-height': lineHeight, - }), - ...(letterSpacing === undefined - ? {} - : { - 'letter-spacing': letterSpacing, - }), - }, - ], - ] - }, - ], + return { + [nameClass('text', modifier)]: { + 'font-size': fontSize, + ...(lineHeight === undefined + ? {} + : { + 'line-height': lineHeight, + }), + ...(letterSpacing === undefined + ? {} + : { + 'letter-spacing': letterSpacing, + }), + }, + } + }, }) } diff --git a/src/corePlugins/fontWeight.js b/src/corePlugins/fontWeight.js index ba5b6de..958188a 100644 --- a/src/corePlugins/fontWeight.js +++ b/src/corePlugins/fontWeight.js @@ -1,16 +1,15 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - font: [ - (modifier, { theme }) => { - if (modifier === '' || theme.fontWeight[modifier] === undefined) { - return [] - } +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + font: (modifier, { theme }) => { + let value = theme.fontWeight[modifier] + if (value === undefined) { + return [] + } - return [[nameClass('font', modifier), { 'font-weight': theme.fontWeight[modifier] }]] - }, - ], + return { [nameClass('font', modifier)]: { 'font-weight': value } } + }, }) } diff --git a/src/corePlugins/gap.js b/src/corePlugins/gap.js index bbc8c4f..eacc3f3 100644 --- a/src/corePlugins/gap.js +++ b/src/corePlugins/gap.js @@ -1,42 +1,36 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const { asLength } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - gap: [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['gap']) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + gap: (modifier, { theme }) => { + let value = asLength(modifier, theme['gap']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('gap', modifier), { gap: value }]] - }, - ], + return { [nameClass('gap', modifier)]: { gap: value } } + }, }) - addUtilities({ - 'gap-x': [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['gap']) + matchUtilities({ + 'gap-x': (modifier, { theme }) => { + let value = asLength(modifier, theme['gap']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('gap-x', modifier), { 'column-gap': value }]] - }, - ], - 'gap-y': [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['gap']) + return { [nameClass('gap-x', modifier)]: { 'column-gap': value } } + }, + 'gap-y': (modifier, { theme }) => { + let value = asLength(modifier, theme['gap']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('gap-y', modifier), { 'row-gap': value }]] - }, - ], + return { [nameClass('gap-y', modifier)]: { 'row-gap': value } } + }, }) } diff --git a/src/corePlugins/gradientColorStops.js b/src/corePlugins/gradientColorStops.js index caad583..3a0fbc7 100644 --- a/src/corePlugins/gradientColorStops.js +++ b/src/corePlugins/gradientColorStops.js @@ -18,75 +18,60 @@ function transparentTo(value) { } } -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { +module.exports = function ({ matchUtilities, jit: { theme } }) { let colorPalette = flattenColorPalette(theme.backgroundColor) - addUtilities({ - from: [ - (modifier, { theme }) => { - let value = asColor(modifier, colorPalette) + matchUtilities({ + from: (modifier, { theme }) => { + let value = asColor(modifier, colorPalette) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - let transparentToValue = transparentTo(value) + let transparentToValue = transparentTo(value) - return [ - [ - nameClass('from', modifier), - { - '--tw-gradient-from': toColorValue(value, 'from'), - '--tw-gradient-stops': `var(--tw-gradient-from), var(--tw-gradient-to, ${transparentToValue})`, - }, - ], - ] - }, - ], + return { + [nameClass('from', modifier)]: { + '--tw-gradient-from': toColorValue(value, 'from'), + '--tw-gradient-stops': `var(--tw-gradient-from), var(--tw-gradient-to, ${transparentToValue})`, + }, + } + }, }) - addUtilities({ - via: [ - (modifier, { theme }) => { - let value = asColor(modifier, colorPalette) + matchUtilities({ + via: (modifier, { theme }) => { + let value = asColor(modifier, colorPalette) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - let transparentToValue = transparentTo(value) + let transparentToValue = transparentTo(value) - return [ - [ - nameClass('via', modifier), - { - '--tw-gradient-stops': `var(--tw-gradient-from), ${toColorValue( - value, - 'via' - )}, var(--tw-gradient-to, ${transparentToValue})`, - }, - ], - ] - }, - ], + return { + [nameClass('via', modifier)]: { + '--tw-gradient-stops': `var(--tw-gradient-from), ${toColorValue( + value, + 'via' + )}, var(--tw-gradient-to, ${transparentToValue})`, + }, + } + }, }) - addUtilities({ - to: [ - (modifier, { theme }) => { - let value = asColor(modifier, colorPalette) + matchUtilities({ + to: (modifier, { theme }) => { + let value = asColor(modifier, colorPalette) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [ - [ - nameClass('to', modifier), - { - '--tw-gradient-to': toColorValue(value, 'to'), - }, - ], - ] - }, - ], + return { + [nameClass('to', modifier)]: { + '--tw-gradient-to': toColorValue(value, 'to'), + }, + } + }, }) } diff --git a/src/corePlugins/gridAutoColumns.js b/src/corePlugins/gridAutoColumns.js index 6b995cb..01c3738 100644 --- a/src/corePlugins/gridAutoColumns.js +++ b/src/corePlugins/gridAutoColumns.js @@ -1,18 +1,16 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const { asList } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - 'auto-cols': [ - (modifier, { theme }) => { - let value = asList(modifier, theme.gridAutoColumns) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + 'auto-cols': (modifier, { theme }) => { + let value = asList(modifier, theme.gridAutoColumns) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('auto-cols', modifier), { 'grid-auto-columns': value }]] - }, - ], + return { [nameClass('auto-cols', modifier)]: { 'grid-auto-columns': value } } + }, }) } diff --git a/src/corePlugins/gridAutoRows.js b/src/corePlugins/gridAutoRows.js index 92f6d48..c89a65e 100644 --- a/src/corePlugins/gridAutoRows.js +++ b/src/corePlugins/gridAutoRows.js @@ -1,18 +1,16 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const { asList } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - 'auto-rows': [ - (modifier, { theme }) => { - let value = asList(modifier, theme.gridAutoRows) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + 'auto-rows': (modifier, { theme }) => { + let value = asList(modifier, theme.gridAutoRows) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('auto-rows', modifier), { 'grid-auto-rows': value }]] - }, - ], + return { [nameClass('auto-rows', modifier)]: { 'grid-auto-rows': value } } + }, }) } diff --git a/src/corePlugins/gridColumn.js b/src/corePlugins/gridColumn.js index a315b50..5d4de3d 100644 --- a/src/corePlugins/gridColumn.js +++ b/src/corePlugins/gridColumn.js @@ -1,16 +1,14 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - col: [ - (modifier, { theme }) => { - if (modifier === '' || theme.gridColumn[modifier] === undefined) { - return [] - } +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + col: (modifier, { theme }) => { + if (modifier === '' || theme.gridColumn[modifier] === undefined) { + return [] + } - return [[nameClass('col', modifier), { 'grid-column': theme.gridColumn[modifier] }]] - }, - ], + return { [nameClass('col', modifier)]: { 'grid-column': theme.gridColumn[modifier] } } + }, }) } diff --git a/src/corePlugins/gridColumnEnd.js b/src/corePlugins/gridColumnEnd.js index 7bc23c3..a168e99 100644 --- a/src/corePlugins/gridColumnEnd.js +++ b/src/corePlugins/gridColumnEnd.js @@ -1,19 +1,17 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - 'col-end': [ - (modifier, { theme }) => { - let transformValue = transformThemeValue('gridColumnEnd') - let value = transformValue(theme.gridColumnEnd[modifier]) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + 'col-end': (modifier, { theme }) => { + let transformValue = transformThemeValue('gridColumnEnd') + let value = transformValue(theme.gridColumnEnd[modifier]) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('col-end', modifier), { 'grid-column-end': value }]] - }, - ], + return { [nameClass('col-end', modifier)]: { 'grid-column-end': value } } + }, }) } diff --git a/src/corePlugins/gridColumnStart.js b/src/corePlugins/gridColumnStart.js index 6832275..d72fc84 100644 --- a/src/corePlugins/gridColumnStart.js +++ b/src/corePlugins/gridColumnStart.js @@ -1,19 +1,17 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - 'col-start': [ - (modifier, { theme }) => { - let transformValue = transformThemeValue('gridColumnStart') - let value = transformValue(theme.gridColumnStart[modifier]) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + 'col-start': (modifier, { theme }) => { + let transformValue = transformThemeValue('gridColumnStart') + let value = transformValue(theme.gridColumnStart[modifier]) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('col-start', modifier), { 'grid-column-start': value }]] - }, - ], + return { [nameClass('col-start', modifier)]: { 'grid-column-start': value } } + }, }) } diff --git a/src/corePlugins/gridRow.js b/src/corePlugins/gridRow.js index 7f62bcd..a808311 100644 --- a/src/corePlugins/gridRow.js +++ b/src/corePlugins/gridRow.js @@ -1,16 +1,16 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - row: [ - (modifier, { theme }) => { - if (modifier === '' || theme.gridRow[modifier] === undefined) { - return [] - } +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + row: (modifier, { theme }) => { + let value = theme.gridRow[modifier] - return [[nameClass('row', modifier), { 'grid-row': theme.gridRow[modifier] }]] - }, - ], + if (value === undefined) { + return [] + } + + return { [nameClass('row', modifier)]: { 'grid-row': value } } + }, }) } diff --git a/src/corePlugins/gridRowEnd.js b/src/corePlugins/gridRowEnd.js index 8b18d77..5d72438 100644 --- a/src/corePlugins/gridRowEnd.js +++ b/src/corePlugins/gridRowEnd.js @@ -1,19 +1,15 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default -const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - 'row-end': [ - (modifier, { theme }) => { - let transformValue = transformThemeValue('gridRowEnd') - let value = transformValue(theme.gridRowEnd[modifier]) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + 'row-end': (modifier, { theme }) => { + let value = theme.gridRowEnd[modifier] - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('row-end', modifier), { 'grid-row-end': value }]] - }, - ], + return { [nameClass('row-end', modifier)]: { 'grid-row-end': value } } + }, }) } diff --git a/src/corePlugins/gridRowStart.js b/src/corePlugins/gridRowStart.js index d169833..aff3da3 100644 --- a/src/corePlugins/gridRowStart.js +++ b/src/corePlugins/gridRowStart.js @@ -1,19 +1,15 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default -const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - 'row-start': [ - (modifier, { theme }) => { - let transformValue = transformThemeValue('gridRowStart') - let value = transformValue(theme.gridRowStart[modifier]) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + 'row-start': (modifier, { theme }) => { + let value = theme.gridRowStart[modifier] - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('row-start', modifier), { 'grid-row-start': value }]] - }, - ], + return { [nameClass('row-start', modifier)]: { 'grid-row-start': value } } + }, }) } diff --git a/src/corePlugins/gridTemplateColumns.js b/src/corePlugins/gridTemplateColumns.js index 9eae80d..2c22f01 100644 --- a/src/corePlugins/gridTemplateColumns.js +++ b/src/corePlugins/gridTemplateColumns.js @@ -1,18 +1,16 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const { asList } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - 'grid-cols': [ - (modifier, { theme }) => { - let value = asList(modifier, theme.gridTemplateColumns) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + 'grid-cols': (modifier, { theme }) => { + let value = asList(modifier, theme.gridTemplateColumns) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('grid-cols', modifier), { 'grid-template-columns': value }]] - }, - ], + return { [nameClass('grid-cols', modifier)]: { 'grid-template-columns': value } } + }, }) } diff --git a/src/corePlugins/gridTemplateRows.js b/src/corePlugins/gridTemplateRows.js index 9a7b828..4654d68 100644 --- a/src/corePlugins/gridTemplateRows.js +++ b/src/corePlugins/gridTemplateRows.js @@ -1,18 +1,16 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const { asList } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - 'grid-rows': [ - (modifier, { theme }) => { - let value = asList(modifier, theme.gridTemplateRows) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + 'grid-rows': (modifier, { theme }) => { + let value = asList(modifier, theme.gridTemplateRows) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('grid-rows', modifier), { 'grid-template-rows': value }]] - }, - ], + return { [nameClass('grid-rows', modifier)]: { 'grid-template-rows': value } } + }, }) } diff --git a/src/corePlugins/height.js b/src/corePlugins/height.js index a27c8ae..5f99e37 100644 --- a/src/corePlugins/height.js +++ b/src/corePlugins/height.js @@ -1,19 +1,16 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default -const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default const { asLength } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - h: [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['height']) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + h: (modifier, { theme }) => { + let value = asLength(modifier, theme['height']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('h', modifier), { height: value }]] - }, - ], + return { [nameClass('h', modifier)]: { height: value } } + }, }) } diff --git a/src/corePlugins/inset.js b/src/corePlugins/inset.js index 3d4296f..5f3f0e1 100644 --- a/src/corePlugins/inset.js +++ b/src/corePlugins/inset.js @@ -1,90 +1,76 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const { asLength } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - inset: [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['inset']) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + inset: (modifier, { theme }) => { + let value = asLength(modifier, theme['inset']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [ - [nameClass('inset', modifier), { top: value, right: value, bottom: value, left: value }], - ] - }, - ], + return { + [nameClass('inset', modifier)]: { top: value, right: value, bottom: value, left: value }, + } + }, }) - addUtilities({ - 'inset-x': [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['inset']) + matchUtilities({ + 'inset-x': (modifier, { theme }) => { + let value = asLength(modifier, theme['inset']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('inset-x', modifier), { left: value, right: value }]] - }, - ], - 'inset-y': [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['inset']) + return { [nameClass('inset-x', modifier)]: { left: value, right: value } } + }, + 'inset-y': (modifier, { theme }) => { + let value = asLength(modifier, theme['inset']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('inset-y', modifier), { top: value, bottom: value }]] - }, - ], + return { [nameClass('inset-y', modifier)]: { top: value, bottom: value } } + }, }) - addUtilities({ - top: [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['inset']) + matchUtilities({ + top: (modifier, { theme }) => { + let value = asLength(modifier, theme['inset']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('top', modifier), { top: value }]] - }, - ], - right: [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['inset']) + return { [nameClass('top', modifier)]: { top: value } } + }, + right: (modifier, { theme }) => { + let value = asLength(modifier, theme['inset']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('right', modifier), { right: value }]] - }, - ], - bottom: [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['inset']) + return { [nameClass('right', modifier)]: { right: value } } + }, + bottom: (modifier, { theme }) => { + let value = asLength(modifier, theme['inset']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('bottom', modifier), { bottom: value }]] - }, - ], - left: [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['inset']) + return { [nameClass('bottom', modifier)]: { bottom: value } } + }, + left: (modifier, { theme }) => { + let value = asLength(modifier, theme['inset']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('left', modifier), { left: value }]] - }, - ], + return { [nameClass('left', modifier)]: { left: value } } + }, }) } diff --git a/src/corePlugins/letterSpacing.js b/src/corePlugins/letterSpacing.js index 1db8ce8..f80d6eb 100644 --- a/src/corePlugins/letterSpacing.js +++ b/src/corePlugins/letterSpacing.js @@ -1,18 +1,16 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const { asLength } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - tracking: [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['letterSpacing']) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + tracking: (modifier, { theme }) => { + let value = asLength(modifier, theme['letterSpacing']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('tracking', modifier), { 'letter-spacing': value }]] - }, - ], + return { [nameClass('tracking', modifier)]: { 'letter-spacing': value } } + }, }) } diff --git a/src/corePlugins/lineHeight.js b/src/corePlugins/lineHeight.js index 367a042..1a9f8e7 100644 --- a/src/corePlugins/lineHeight.js +++ b/src/corePlugins/lineHeight.js @@ -1,18 +1,16 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const { asLength } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - leading: [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['lineHeight']) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + leading: (modifier, { theme }) => { + let value = asLength(modifier, theme['lineHeight']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('leading', modifier), { 'line-height': value }]] - }, - ], + return { [nameClass('leading', modifier)]: { 'line-height': value } } + }, }) } diff --git a/src/corePlugins/listStyleType.js b/src/corePlugins/listStyleType.js index 10f6368..90dccdf 100644 --- a/src/corePlugins/listStyleType.js +++ b/src/corePlugins/listStyleType.js @@ -1,16 +1,14 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - list: [ - (modifier, { theme }) => { - if (modifier === '' || theme.listStyleType[modifier] === undefined) { - return [] - } +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + list: (modifier, { theme }) => { + if (modifier === '' || theme.listStyleType[modifier] === undefined) { + return [] + } - return [[nameClass('list', modifier), { 'list-style-type': theme.listStyleType[modifier] }]] - }, - ], + return { [nameClass('list', modifier)]: { 'list-style-type': theme.listStyleType[modifier] } } + }, }) } diff --git a/src/corePlugins/margin.js b/src/corePlugins/margin.js index 740543f..c98e940 100644 --- a/src/corePlugins/margin.js +++ b/src/corePlugins/margin.js @@ -1,87 +1,74 @@ +const nameClass = require('tailwindcss/lib/util/nameClass').default const { asLength } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - m: [ - (modifier, { theme, candidate }) => { - let value = asLength(modifier, theme['margin']) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + m: (modifier, { theme, candidate }) => { + let value = asLength(modifier, theme['margin']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[`.${candidate}`, { margin: value }]] - }, - ], + return { [nameClass('m', modifier)]: { margin: value } } + }, }) - addUtilities({ - mx: [ - (modifier, { theme, candidate }) => { - let value = asLength(modifier, theme['margin']) + matchUtilities({ + mx: (modifier, { theme, candidate }) => { + let value = asLength(modifier, theme['margin']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[`.${candidate}`, { 'margin-left': value, 'margin-right': value }]] - }, - ], - my: [ - (modifier, { theme, candidate }) => { - let value = asLength(modifier, theme['margin']) + return { [nameClass('mx', modifier)]: { 'margin-left': value, 'margin-right': value } } + }, + my: (modifier, { theme, candidate }) => { + let value = asLength(modifier, theme['margin']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[`.${candidate}`, { 'margin-top': value, 'margin-bottom': value }]] - }, - ], + return { [nameClass('my', modifier)]: { 'margin-top': value, 'margin-bottom': value } } + }, }) - addUtilities({ - mt: [ - (modifier, { theme, candidate }) => { - let value = asLength(modifier, theme['margin']) + matchUtilities({ + mt: (modifier, { theme, candidate }) => { + let value = asLength(modifier, theme['margin']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[`.${candidate}`, { 'margin-top': value }]] - }, - ], - mr: [ - (modifier, { theme, candidate }) => { - let value = asLength(modifier, theme['margin']) + return { [nameClass('mt', modifier)]: { 'margin-top': value } } + }, + mr: (modifier, { theme, candidate }) => { + let value = asLength(modifier, theme['margin']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[`.${candidate}`, { 'margin-right': value }]] - }, - ], - mb: [ - (modifier, { theme, candidate }) => { - let value = asLength(modifier, theme['margin']) + return { [nameClass('mr', modifier)]: { 'margin-right': value } } + }, + mb: (modifier, { theme, candidate }) => { + let value = asLength(modifier, theme['margin']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[`.${candidate}`, { 'margin-bottom': value }]] - }, - ], - ml: [ - (modifier, { theme, candidate }) => { - let value = asLength(modifier, theme['margin']) + return { [nameClass('mb', modifier)]: { 'margin-bottom': value } } + }, + ml: (modifier, { theme, candidate }) => { + let value = asLength(modifier, theme['margin']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[`.${candidate}`, { 'margin-left': value }]] - }, - ], + return { [nameClass('ml', modifier)]: { 'margin-left': value } } + }, }) } diff --git a/src/corePlugins/maxHeight.js b/src/corePlugins/maxHeight.js index 3f379cf..c0b8c46 100644 --- a/src/corePlugins/maxHeight.js +++ b/src/corePlugins/maxHeight.js @@ -2,18 +2,16 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default const { asLength } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - 'max-h': [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['maxHeight']) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + 'max-h': (modifier, { theme }) => { + let value = asLength(modifier, theme['maxHeight']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('max-h', modifier), { 'max-height': value }]] - }, - ], + return { [nameClass('max-h', modifier)]: { 'max-height': value } } + }, }) } diff --git a/src/corePlugins/maxWidth.js b/src/corePlugins/maxWidth.js index a4e949e..2faee71 100644 --- a/src/corePlugins/maxWidth.js +++ b/src/corePlugins/maxWidth.js @@ -2,18 +2,16 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default const { asLength } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - 'max-w': [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['maxWidth']) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + 'max-w': (modifier, { theme }) => { + let value = asLength(modifier, theme['maxWidth']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('max-w', modifier), { 'max-width': value }]] - }, - ], + return { [nameClass('max-w', modifier)]: { 'max-width': value } } + }, }) } diff --git a/src/corePlugins/minHeight.js b/src/corePlugins/minHeight.js index cd06dc0..27c5b7c 100644 --- a/src/corePlugins/minHeight.js +++ b/src/corePlugins/minHeight.js @@ -2,18 +2,16 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default const { asLength } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - 'min-h': [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['minHeight']) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + 'min-h': (modifier, { theme }) => { + let value = asLength(modifier, theme['minHeight']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('min-h', modifier), { 'min-height': value }]] - }, - ], + return { [nameClass('min-h', modifier)]: { 'min-height': value } } + }, }) } diff --git a/src/corePlugins/minWidth.js b/src/corePlugins/minWidth.js index 7d00a77..24df890 100644 --- a/src/corePlugins/minWidth.js +++ b/src/corePlugins/minWidth.js @@ -2,18 +2,16 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default const { asLength } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - 'min-w': [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['minWidth']) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + 'min-w': (modifier, { theme }) => { + let value = asLength(modifier, theme['minWidth']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('min-w', modifier), { 'min-width': value }]] - }, - ], + return { [nameClass('min-w', modifier)]: { 'min-width': value } } + }, }) } diff --git a/src/corePlugins/objectPosition.js b/src/corePlugins/objectPosition.js index bb5cd27..246776c 100644 --- a/src/corePlugins/objectPosition.js +++ b/src/corePlugins/objectPosition.js @@ -1,18 +1,16 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - object: [ - (modifier, { theme }) => { - if (modifier === '' || theme.objectPosition[modifier] === undefined) { - return [] - } +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + object: (modifier, { theme }) => { + if (modifier === '' || theme.objectPosition[modifier] === undefined) { + return [] + } - return [ - [nameClass('object', modifier), { 'object-position': theme.objectPosition[modifier] }], - ] - }, - ], + return { + [nameClass('object', modifier)]: { 'object-position': theme.objectPosition[modifier] }, + } + }, }) } diff --git a/src/corePlugins/opacity.js b/src/corePlugins/opacity.js index 2dc5f95..f9f1e5f 100644 --- a/src/corePlugins/opacity.js +++ b/src/corePlugins/opacity.js @@ -1,10 +1,9 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const { asValue } = require('../pluginUtils') -const { newFormat } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - opacity: newFormat((modifier, { theme }) => { +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + opacity: (modifier, { theme }) => { let value = asValue(modifier, theme.opacity) if (value === undefined) { @@ -12,6 +11,6 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { } return { [nameClass('opacity', modifier)]: { opacity: value } } - }), + }, }) } diff --git a/src/corePlugins/order.js b/src/corePlugins/order.js index 3d00af0..9f37038 100644 --- a/src/corePlugins/order.js +++ b/src/corePlugins/order.js @@ -1,18 +1,16 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const { asValue } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - order: [ - (modifier, { theme }) => { - let value = asValue(modifier, theme.order) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + order: (modifier, { theme }) => { + let value = asValue(modifier, theme.order) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('order', modifier), { order: value }]] - }, - ], + return { [nameClass('order', modifier)]: { order: value } } + }, }) } diff --git a/src/corePlugins/outline.js b/src/corePlugins/outline.js index dc5c4f3..e806599 100644 --- a/src/corePlugins/outline.js +++ b/src/corePlugins/outline.js @@ -5,29 +5,24 @@ function isPlainObject(value) { return typeof value === 'object' && value !== null } -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - outline: [ - (modifier, { theme }) => { - let transformValue = transformThemeValue('outline') - let value = transformValue(theme.outline[modifier]) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + outline: (modifier, { theme }) => { + let transformValue = transformThemeValue('outline') + let value = transformValue(theme.outline[modifier]) - if (modifier === '' || value === undefined) { - return [] - } + if (modifier === '' || value === undefined) { + return [] + } - let [outline, outlineOffset = '0'] = Array.isArray(value) ? value : [value] + let [outline, outlineOffset = '0'] = Array.isArray(value) ? value : [value] - return [ - [ - nameClass('outline', modifier), - { - outline, - 'outline-offset': outlineOffset, - }, - ], - ] - }, - ], + return { + [nameClass('outline', modifier)]: { + outline, + 'outline-offset': outlineOffset, + }, + } + }, }) } diff --git a/src/corePlugins/padding.js b/src/corePlugins/padding.js index 78bc3b2..3748d73 100644 --- a/src/corePlugins/padding.js +++ b/src/corePlugins/padding.js @@ -1,88 +1,74 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const { asLength } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - p: [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['padding']) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + p: (modifier, { theme }) => { + let value = asLength(modifier, theme['padding']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('p', modifier), { padding: value }]] - }, - ], + return { [nameClass('p', modifier)]: { padding: value } } + }, }) - addUtilities({ - px: [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['padding']) + matchUtilities({ + px: (modifier, { theme }) => { + let value = asLength(modifier, theme['padding']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('px', modifier), { 'padding-left': value, 'padding-right': value }]] - }, - ], - py: [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['padding']) + return { [nameClass('px', modifier)]: { 'padding-left': value, 'padding-right': value } } + }, + py: (modifier, { theme }) => { + let value = asLength(modifier, theme['padding']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('py', modifier), { 'padding-top': value, 'padding-bottom': value }]] - }, - ], + return { [nameClass('py', modifier)]: { 'padding-top': value, 'padding-bottom': value } } + }, }) - addUtilities({ - pt: [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['padding']) + matchUtilities({ + pt: (modifier, { theme }) => { + let value = asLength(modifier, theme['padding']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('pt', modifier), { 'padding-top': value }]] - }, - ], - pr: [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['padding']) + return { [nameClass('pt', modifier)]: { 'padding-top': value } } + }, + pr: (modifier, { theme }) => { + let value = asLength(modifier, theme['padding']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('pr', modifier), { 'padding-right': value }]] - }, - ], - pb: [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['padding']) + return { [nameClass('pr', modifier)]: { 'padding-right': value } } + }, + pb: (modifier, { theme }) => { + let value = asLength(modifier, theme['padding']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('pb', modifier), { 'padding-bottom': value }]] - }, - ], - pl: [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['padding']) + return { [nameClass('pb', modifier)]: { 'padding-bottom': value } } + }, + pl: (modifier, { theme }) => { + let value = asLength(modifier, theme['padding']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('pl', modifier), { 'padding-left': value }]] - }, - ], + return { [nameClass('pl', modifier)]: { 'padding-left': value } } + }, }) } diff --git a/src/corePlugins/placeholderColor.js b/src/corePlugins/placeholderColor.js index 893888e..9f9da78 100644 --- a/src/corePlugins/placeholderColor.js +++ b/src/corePlugins/placeholderColor.js @@ -1,33 +1,27 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default -const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable').default const toColorValue = require('tailwindcss/lib/util/toColorValue').default const { asColor } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { +module.exports = function ({ matchUtilities, jit: { theme } }) { let colorPalette = flattenColorPalette(theme.placeholderColor) - addUtilities({ - placeholder: [ - (modifier, { theme }) => { - let value = asColor(modifier, colorPalette) + matchUtilities({ + placeholder: (modifier, { theme }) => { + let value = asColor(modifier, colorPalette) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [ - [ - `${nameClass('placeholder', modifier)}::placeholder`, - withAlphaVariable({ - color: value, - property: 'color', - variable: '--tw-placeholder-opacity', - }), - ], - ] - }, - ], + return { + [`${nameClass('placeholder', modifier)}::placeholder`]: withAlphaVariable({ + color: value, + property: 'color', + variable: '--tw-placeholder-opacity', + }), + } + }, }) } diff --git a/src/corePlugins/placeholderOpacity.js b/src/corePlugins/placeholderOpacity.js index c247f4a..675dc72 100644 --- a/src/corePlugins/placeholderOpacity.js +++ b/src/corePlugins/placeholderOpacity.js @@ -1,24 +1,20 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default -const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default const { asValue } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - 'placeholder-opacity': [ - (modifier, { theme }) => { - let value = asValue(modifier, theme.placeholderOpacity) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + 'placeholder-opacity': (modifier, { theme }) => { + let value = asValue(modifier, theme.placeholderOpacity) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [ - [ - `${nameClass('placeholder-opacity', modifier)}::placeholder`, - { '--tw-placeholder-opacity': value }, - ], - ] - }, - ], + return { + [`${nameClass('placeholder-opacity', modifier)}::placeholder`]: { + '--tw-placeholder-opacity': value, + }, + } + }, }) } diff --git a/src/corePlugins/ringColor.js b/src/corePlugins/ringColor.js index 73dff1b..a56717f 100644 --- a/src/corePlugins/ringColor.js +++ b/src/corePlugins/ringColor.js @@ -4,29 +4,24 @@ const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable').defa const toColorValue = require('tailwindcss/lib/util/toColorValue').default const { asColor } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { +module.exports = function ({ matchUtilities, jit: { theme } }) { let colorPalette = flattenColorPalette(theme.ringColor) - addUtilities({ - ring: [ - (modifier, { theme }) => { - let value = asColor(modifier, colorPalette) + matchUtilities({ + ring: (modifier, { theme }) => { + let value = asColor(modifier, colorPalette) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [ - [ - nameClass('ring', modifier), - withAlphaVariable({ - color: value, - property: '--tw-ring-color', - variable: '--tw-ring-opacity', - }), - ], - ] - }, - ], + return { + [nameClass('ring', modifier)]: withAlphaVariable({ + color: value, + property: '--tw-ring-color', + variable: '--tw-ring-opacity', + }), + } + }, }) } diff --git a/src/corePlugins/ringOffsetColor.js b/src/corePlugins/ringOffsetColor.js index ede4743..2f05af5 100644 --- a/src/corePlugins/ringOffsetColor.js +++ b/src/corePlugins/ringOffsetColor.js @@ -4,27 +4,22 @@ const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable').defa const toColorValue = require('tailwindcss/lib/util/toColorValue').default const { asColor } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { +module.exports = function ({ matchUtilities, jit: { theme } }) { let colorPalette = flattenColorPalette(theme.ringOffsetColor) - addUtilities({ - 'ring-offset': [ - (modifier, { theme }) => { - let value = asColor(modifier, colorPalette) + matchUtilities({ + 'ring-offset': (modifier, { theme }) => { + let value = asColor(modifier, colorPalette) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [ - [ - nameClass('ring-offset', modifier), - { - '--tw-ring-offset-color': toColorValue(value), - }, - ], - ] - }, - ], + return { + [nameClass('ring-offset', modifier)]: { + '--tw-ring-offset-color': toColorValue(value), + }, + } + }, }) } diff --git a/src/corePlugins/ringOffsetWidth.js b/src/corePlugins/ringOffsetWidth.js index 7ee32c7..ca17a42 100644 --- a/src/corePlugins/ringOffsetWidth.js +++ b/src/corePlugins/ringOffsetWidth.js @@ -1,25 +1,20 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const { asLength } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - 'ring-offset': [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['ringOffsetWidth']) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + 'ring-offset': (modifier, { theme }) => { + let value = asLength(modifier, theme['ringOffsetWidth']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [ - [ - nameClass('ring-offset', modifier), - { - '--tw-ring-offset-width': value, - }, - ], - ] - }, - ], + return { + [nameClass('ring-offset', modifier)]: { + '--tw-ring-offset-width': value, + }, + } + }, }) } diff --git a/src/corePlugins/ringOpacity.js b/src/corePlugins/ringOpacity.js index ba29622..4aa9fcd 100644 --- a/src/corePlugins/ringOpacity.js +++ b/src/corePlugins/ringOpacity.js @@ -1,25 +1,20 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const { asValue } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - 'ring-opacity': [ - (modifier, { theme }) => { - let value = asValue(modifier, theme['ringOpacity']) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + 'ring-opacity': (modifier, { theme }) => { + let value = asValue(modifier, theme['ringOpacity']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [ - [ - nameClass('ring-opacity', modifier), - { - '--tw-ring-opacity': value, - }, - ], - ] - }, - ], + return { + [nameClass('ring-opacity', modifier)]: { + '--tw-ring-opacity': value, + }, + } + }, }) } diff --git a/src/corePlugins/ringWidth.js b/src/corePlugins/ringWidth.js index 7cdf1c0..f03287f 100644 --- a/src/corePlugins/ringWidth.js +++ b/src/corePlugins/ringWidth.js @@ -12,14 +12,13 @@ function safeCall(callback, defaultValue) { } } -module.exports = function ({ jit: { theme, addUtilities } }) { +module.exports = function ({ matchUtilities, addUtilities, jit: { theme } }) { let ringColorDefault = (([r, g, b]) => { return `rgba(${r}, ${g}, ${b}, ${dlv(theme, ['ringOpacity', 'DEFAULT'], '0.5')})` })(safeCall(() => toRgba(dlv(theme, ['ringOpacity', 'DEFAULT'])), ['147', '197', '253'])) - let ringReset = [ - '*', - { + let ringReset = { + '*': { '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-ring-offset-width': theme.ringOffsetWidth?.DEFAULT ?? '0px', '--tw-ring-offset-color': theme.ringOffsetColor?.DEFAULT ?? '#fff', @@ -27,44 +26,41 @@ module.exports = function ({ jit: { theme, addUtilities } }) { '--tw-ring-offset-shadow': '0 0 #0000', '--tw-ring-shadow': '0 0 #0000', }, - { - respectVariants: false, - }, - ] + } - addUtilities({ - ring: [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['ringWidth']) + matchUtilities({ + ring: (modifier, { theme }) => { + let value = asLength(modifier, theme['ringWidth']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [ + return [ + [ ringReset, - [ - nameClass('ring', modifier), - { - '--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`, - '--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(${value} + var(--tw-ring-offset-width)) var(--tw-ring-color)`, - 'box-shadow': [ - `var(--tw-ring-offset-shadow)`, - `var(--tw-ring-shadow)`, - `var(--tw-shadow, 0 0 #0000)`, - ].join(', '), - }, - ], - ] - }, - ], + { + respectVariants: false, + }, + ], + { + [nameClass('ring', modifier)]: { + '--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`, + '--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(${value} + var(--tw-ring-offset-width)) var(--tw-ring-color)`, + 'box-shadow': [ + `var(--tw-ring-offset-shadow)`, + `var(--tw-ring-shadow)`, + `var(--tw-shadow, 0 0 #0000)`, + ].join(', '), + }, + }, + ] + }, }) addUtilities({ - 'ring-inset': { - '.ring-inset': { - '--tw-ring-inset': 'inset', - }, + '.ring-inset': { + '--tw-ring-inset': 'inset', }, }) } diff --git a/src/corePlugins/rotate.js b/src/corePlugins/rotate.js index 57cebcb..99cd7b2 100644 --- a/src/corePlugins/rotate.js +++ b/src/corePlugins/rotate.js @@ -1,18 +1,16 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const { asAngle } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - rotate: [ - (modifier, { theme }) => { - let value = asAngle(modifier, theme.rotate) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + rotate: (modifier, { theme }) => { + let value = asAngle(modifier, theme.rotate) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('rotate', modifier), { '--tw-rotate': value }]] - }, - ], + return { [nameClass('rotate', modifier)]: { '--tw-rotate': value } } + }, }) } diff --git a/src/corePlugins/scale.js b/src/corePlugins/scale.js index 1ed319c..86d6b1f 100644 --- a/src/corePlugins/scale.js +++ b/src/corePlugins/scale.js @@ -1,42 +1,36 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const { asValue } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - scale: [ - (modifier, { theme }) => { - let value = asValue(modifier, theme.scale) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + scale: (modifier, { theme }) => { + let value = asValue(modifier, theme.scale) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('scale', modifier), { '--tw-scale-x': value, '--tw-scale-y': value }]] - }, - ], + return { [nameClass('scale', modifier)]: { '--tw-scale-x': value, '--tw-scale-y': value } } + }, }) - addUtilities({ - 'scale-x': [ - (modifier, { theme }) => { - let value = asValue(modifier, theme.scale) + matchUtilities({ + 'scale-x': (modifier, { theme }) => { + let value = asValue(modifier, theme.scale) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('scale-x', modifier), { '--tw-scale-x': value }]] - }, - ], - 'scale-y': [ - (modifier, { theme }) => { - let value = asValue(modifier, theme.scale) + return { [nameClass('scale-x', modifier)]: { '--tw-scale-x': value } } + }, + 'scale-y': (modifier, { theme }) => { + let value = asValue(modifier, theme.scale) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('scale-y', modifier), { '--tw-scale-y': value }]] - }, - ], + return { [nameClass('scale-y', modifier)]: { '--tw-scale-y': value } } + }, }) } diff --git a/src/corePlugins/skew.js b/src/corePlugins/skew.js index 0318a66..330a16e 100644 --- a/src/corePlugins/skew.js +++ b/src/corePlugins/skew.js @@ -1,29 +1,25 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const { asAngle } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - 'skew-x': [ - (modifier, { theme }) => { - let value = asAngle(modifier, theme.skew) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + 'skew-x': (modifier, { theme }) => { + let value = asAngle(modifier, theme.skew) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('skew-x', modifier), { '--tw-skew-x': value }]] - }, - ], - 'skew-y': [ - (modifier, { theme }) => { - let value = asAngle(modifier, theme.skew) + return { [nameClass('skew-x', modifier)]: { '--tw-skew-x': value } } + }, + 'skew-y': (modifier, { theme }) => { + let value = asAngle(modifier, theme.skew) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('skew-y', modifier), { '--tw-skew-y': value }]] - }, - ], + return { [nameClass('skew-y', modifier)]: { '--tw-skew-y': value } } + }, }) } diff --git a/src/corePlugins/space.js b/src/corePlugins/space.js index b653383..3f7af1c 100644 --- a/src/corePlugins/space.js +++ b/src/corePlugins/space.js @@ -2,60 +2,46 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default const { asLength } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - 'space-x': [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['space']) +module.exports = function ({ matchUtilities, addUtilities, jit: { theme } }) { + matchUtilities({ + 'space-x': (modifier, { theme }) => { + let value = asLength(modifier, theme['space']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [ - [ - `${nameClass('space-x', modifier)} > :not([hidden]) ~ :not([hidden])`, - { - '--tw-space-x-reverse': '0', - 'margin-right': `calc(${value} * var(--tw-space-x-reverse))`, - 'margin-left': `calc(${value} * calc(1 - var(--tw-space-x-reverse)))`, - }, - ], - ] - }, - ], - 'space-y': [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['space']) + return { + [`${nameClass('space-x', modifier)} > :not([hidden]) ~ :not([hidden])`]: { + '--tw-space-x-reverse': '0', + 'margin-right': `calc(${value} * var(--tw-space-x-reverse))`, + 'margin-left': `calc(${value} * calc(1 - var(--tw-space-x-reverse)))`, + }, + } + }, + 'space-y': (modifier, { theme }) => { + let value = asLength(modifier, theme['space']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [ - [ - `${nameClass('space-y', modifier)} > :not([hidden]) ~ :not([hidden])`, - { - '--tw-space-y-reverse': '0', - 'margin-top': `calc(${value} * calc(1 - var(--tw-space-y-reverse)))`, - 'margin-bottom': `calc(${value} * var(--tw-space-y-reverse))`, - }, - ], - ] - }, - ], + return { + [`${nameClass('space-y', modifier)} > :not([hidden]) ~ :not([hidden])`]: { + '--tw-space-y-reverse': '0', + 'margin-top': `calc(${value} * calc(1 - var(--tw-space-y-reverse)))`, + 'margin-bottom': `calc(${value} * var(--tw-space-y-reverse))`, + }, + } + }, }) addUtilities({ - 'space-y-reverse': { - '.space-y-reverse > :not([hidden]) ~ :not([hidden])': { - '--tw-space-y-reverse': '1', - }, + '.space-y-reverse > :not([hidden]) ~ :not([hidden])': { + '--tw-space-y-reverse': '1', }, - 'space-x-reverse': { - '.space-x-reverse > :not([hidden]) ~ :not([hidden])': { - '--tw-space-x-reverse': '1', - }, + '.space-x-reverse > :not([hidden]) ~ :not([hidden])': { + '--tw-space-x-reverse': '1', }, }) } diff --git a/src/corePlugins/stroke.js b/src/corePlugins/stroke.js index 5ece9ac..8d2bbaa 100644 --- a/src/corePlugins/stroke.js +++ b/src/corePlugins/stroke.js @@ -1,24 +1,21 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default -const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable').default const toColorValue = require('tailwindcss/lib/util/toColorValue').default const { asColor } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { +module.exports = function ({ matchUtilities, jit: { theme } }) { let colorPalette = flattenColorPalette(theme.stroke) - addUtilities({ - stroke: [ - (modifier, { theme }) => { - let value = asColor(modifier, colorPalette) + matchUtilities({ + stroke: (modifier, { theme }) => { + let value = asColor(modifier, colorPalette) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('stroke', modifier), { stroke: toColorValue(value) }]] - }, - ], + return { [nameClass('stroke', modifier)]: { stroke: toColorValue(value) } } + }, }) } diff --git a/src/corePlugins/strokeWidth.js b/src/corePlugins/strokeWidth.js index bf2926b..215831f 100644 --- a/src/corePlugins/strokeWidth.js +++ b/src/corePlugins/strokeWidth.js @@ -2,18 +2,16 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default const { asLength } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - stroke: [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['strokeWidth']) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + stroke: (modifier, { theme }) => { + let value = asLength(modifier, theme['strokeWidth']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('stroke', modifier), { 'stroke-width': value }]] - }, - ], + return { [nameClass('stroke', modifier)]: { 'stroke-width': value } } + }, }) } diff --git a/src/corePlugins/textColor.js b/src/corePlugins/textColor.js index ef0c0c5..33a9be9 100644 --- a/src/corePlugins/textColor.js +++ b/src/corePlugins/textColor.js @@ -1,33 +1,27 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default -const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable').default const toColorValue = require('tailwindcss/lib/util/toColorValue').default const { asColor } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { +module.exports = function ({ matchUtilities, jit: { theme } }) { let colorPalette = flattenColorPalette(theme.textColor) - addUtilities({ - text: [ - (modifier, { theme }) => { - let value = asColor(modifier, colorPalette) + matchUtilities({ + text: (modifier, { theme }) => { + let value = asColor(modifier, colorPalette) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [ - [ - nameClass('text', modifier), - withAlphaVariable({ - color: value, - property: 'color', - variable: '--tw-text-opacity', - }), - ], - ] - }, - ], + return { + [nameClass('text', modifier)]: withAlphaVariable({ + color: value, + property: 'color', + variable: '--tw-text-opacity', + }), + } + }, }) } diff --git a/src/corePlugins/textOpacity.js b/src/corePlugins/textOpacity.js index 752cea7..98080e7 100644 --- a/src/corePlugins/textOpacity.js +++ b/src/corePlugins/textOpacity.js @@ -1,18 +1,16 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const { asValue } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - 'text-opacity': [ - (modifier, { theme }) => { - let value = asValue(modifier, theme.textOpacity) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + 'text-opacity': (modifier, { theme }) => { + let value = asValue(modifier, theme.textOpacity) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('text-opacity', modifier), { '--tw-text-opacity': value }]] - }, - ], + return { [nameClass('text-opacity', modifier)]: { '--tw-text-opacity': value } } + }, }) } diff --git a/src/corePlugins/transformOrigin.js b/src/corePlugins/transformOrigin.js index 88e3ead..f99acc5 100644 --- a/src/corePlugins/transformOrigin.js +++ b/src/corePlugins/transformOrigin.js @@ -1,18 +1,15 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default -const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - origin: [ - (modifier, { theme }) => { - if (modifier === '' || theme.transformOrigin[modifier] === undefined) { - return [] - } +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + origin: (modifier, { theme }) => { + let value = theme.transformOrigin[modifier] - return [ - [nameClass('origin', modifier), { 'transform-origin': theme.transformOrigin[modifier] }], - ] - }, - ], + if (value === undefined) { + return [] + } + + return { [nameClass('origin', modifier)]: { 'transform-origin': value } } + }, }) } diff --git a/src/corePlugins/transitionDelay.js b/src/corePlugins/transitionDelay.js index 6aea54d..4b31704 100644 --- a/src/corePlugins/transitionDelay.js +++ b/src/corePlugins/transitionDelay.js @@ -1,18 +1,17 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default -const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - delay: [ - (modifier, { theme }) => { - if (modifier === '' || theme.transitionDelay[modifier] === undefined) { - return [] - } +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + delay: (modifier, { theme }) => { + let value = theme.transitionDelay[modifier] - return [ - [nameClass('delay', modifier), { 'transition-delay': theme.transitionDelay[modifier] }], - ] - }, - ], + if (value === undefined) { + return [] + } + + return { + [nameClass('delay', modifier)]: { 'transition-delay': value }, + } + }, }) } diff --git a/src/corePlugins/transitionDuration.js b/src/corePlugins/transitionDuration.js index 3d11334..ad7f1c5 100644 --- a/src/corePlugins/transitionDuration.js +++ b/src/corePlugins/transitionDuration.js @@ -1,21 +1,15 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default -const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - duration: [ - (modifier, { theme }) => { - if (modifier === '' || theme.transitionDuration[modifier] === undefined) { - return [] - } +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + duration: (modifier, { theme }) => { + let value = theme.transitionDuration[modifier] - return [ - [ - nameClass('duration', modifier), - { 'transition-duration': theme.transitionDuration[modifier] }, - ], - ] - }, - ], + if (value === undefined) { + return [] + } + + return { [nameClass('duration', modifier)]: { 'transition-duration': value } } + }, }) } diff --git a/src/corePlugins/transitionProperty.js b/src/corePlugins/transitionProperty.js index 541f2dc..13c36a8 100644 --- a/src/corePlugins/transitionProperty.js +++ b/src/corePlugins/transitionProperty.js @@ -1,35 +1,28 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default -const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { +module.exports = function ({ matchUtilities, jit: { theme } }) { let defaultTimingFunction = theme.transitionTimingFunction.DEFAULT let defaultDuration = theme.transitionDuration.DEFAULT - addUtilities({ - transition: [ - (modifier, { theme }) => { - let transformValue = transformThemeValue('transitionProperty') - let value = transformValue(theme.transitionProperty[modifier]) + matchUtilities({ + transition: (modifier, { theme }) => { + let value = theme.transitionProperty[modifier] - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [ - [ - nameClass('transition', modifier), - { - 'transition-property': value, - ...(value === 'none' - ? {} - : { - 'transition-timing-function': defaultTimingFunction, - 'transition-duration': defaultDuration, - }), - }, - ], - ] - }, - ], + return { + [nameClass('transition', modifier)]: { + 'transition-property': value, + ...(value === 'none' + ? {} + : { + 'transition-timing-function': defaultTimingFunction, + 'transition-duration': defaultDuration, + }), + }, + } + }, }) } diff --git a/src/corePlugins/transitionTimingFunction.js b/src/corePlugins/transitionTimingFunction.js index d626ab6..56c6518 100644 --- a/src/corePlugins/transitionTimingFunction.js +++ b/src/corePlugins/transitionTimingFunction.js @@ -1,21 +1,15 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default -const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - ease: [ - (modifier, { theme }) => { - if (modifier === '' || theme.transitionTimingFunction[modifier] === undefined) { - return [] - } +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + ease: (modifier, { theme }) => { + let value = theme.transitionTimingFunction[modifier] - return [ - [ - nameClass('ease', modifier), - { 'transition-timing-function': theme.transitionTimingFunction[modifier] }, - ], - ] - }, - ], + if (value === undefined) { + return [] + } + + return { [nameClass('ease', modifier)]: { 'transition-timing-function': value } } + }, }) } diff --git a/src/corePlugins/translate.js b/src/corePlugins/translate.js index 9d23f7e..b1fc620 100644 --- a/src/corePlugins/translate.js +++ b/src/corePlugins/translate.js @@ -1,30 +1,25 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default -const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default const { asLength } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - 'translate-x': [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['translate']) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + 'translate-x': (modifier, { theme }) => { + let value = asLength(modifier, theme['translate']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('translate-x', modifier), { '--tw-translate-x': value }]] - }, - ], - 'translate-y': [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['translate']) + return { [nameClass('translate-x', modifier)]: { '--tw-translate-x': value } } + }, + 'translate-y': (modifier, { theme }) => { + let value = asLength(modifier, theme['translate']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('translate-y', modifier), { '--tw-translate-y': value }]] - }, - ], + return { [nameClass('translate-y', modifier)]: { '--tw-translate-y': value } } + }, }) } diff --git a/src/corePlugins/width.js b/src/corePlugins/width.js index 946cc9f..dcdd987 100644 --- a/src/corePlugins/width.js +++ b/src/corePlugins/width.js @@ -1,19 +1,16 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default -const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default const { asLength } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - w: [ - (modifier, { theme }) => { - let value = asLength(modifier, theme['width']) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + w: (modifier, { theme }) => { + let value = asLength(modifier, theme['width']) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('w', modifier), { width: value }]] - }, - ], + return { [nameClass('w', modifier)]: { width: value } } + }, }) } diff --git a/src/corePlugins/zIndex.js b/src/corePlugins/zIndex.js index eaeaa58..d8cafe5 100644 --- a/src/corePlugins/zIndex.js +++ b/src/corePlugins/zIndex.js @@ -1,19 +1,16 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default -const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default const { asValue } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - z: [ - (modifier, { theme }) => { - let value = asValue(modifier, theme.scale) +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ + z: (modifier, { theme }) => { + let value = asValue(modifier, theme.scale) - if (value === undefined) { - return [] - } + if (value === undefined) { + return [] + } - return [[nameClass('z', modifier), { 'z-index': value }]] - }, - ], + return { [nameClass('z', modifier)]: { 'z-index': value } } + }, }) } From 1030119d167024778b13894b1f77efb22c84a3fd Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 5 Mar 2021 19:42:49 -0500 Subject: [PATCH 13/13] Remove old { jit: addUtilities } API --- src/corePlugins/animation.js | 8 +++--- src/corePlugins/fontVariantNumeric.js | 6 ++--- src/lib/generateRules.js | 10 -------- src/lib/setupContext.js | 36 +++++++++------------------ src/pluginUtils.js | 4 +-- 5 files changed, 21 insertions(+), 43 deletions(-) diff --git a/src/corePlugins/animation.js b/src/corePlugins/animation.js index 777565b..77dcf5e 100644 --- a/src/corePlugins/animation.js +++ b/src/corePlugins/animation.js @@ -3,7 +3,7 @@ const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue'). const parseAnimationValue = require('tailwindcss/lib/util/parseAnimationValue').default const { newFormat } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities } }) { +module.exports = function ({ matchUtilities, jit: { theme } }) { let keyframes = Object.fromEntries( Object.entries(theme.keyframes).map(([key, value]) => { return [ @@ -19,9 +19,9 @@ module.exports = function ({ jit: { theme, addUtilities } }) { ) let transformValue = transformThemeValue('animation') - addUtilities({ + matchUtilities({ animate: [ - newFormat((modifier, { theme }) => { + (modifier, { theme }) => { let value = transformValue(theme.animation[modifier]) if (modifier === '' || value === undefined) { @@ -34,7 +34,7 @@ module.exports = function ({ jit: { theme, addUtilities } }) { keyframes[animationName], { [nameClass('animate', modifier)]: { animation: value } }, ] - }), + }, ], }) } diff --git a/src/corePlugins/fontVariantNumeric.js b/src/corePlugins/fontVariantNumeric.js index d17cea4..727f27c 100644 --- a/src/corePlugins/fontVariantNumeric.js +++ b/src/corePlugins/fontVariantNumeric.js @@ -10,8 +10,8 @@ let fontVariantBaseStyles = { }, } -module.exports = function ({ jit: { addUtilities } }) { - addUtilities({ +module.exports = function ({ matchUtilities }) { + matchUtilities({ 'normal-nums': fontVariantBaseStyles, ordinal: fontVariantBaseStyles, 'slashed-zero': fontVariantBaseStyles, @@ -23,7 +23,7 @@ module.exports = function ({ jit: { addUtilities } }) { 'stacked-fractions': fontVariantBaseStyles, }) - addUtilities({ + matchUtilities({ 'normal-nums': { '.normal-nums': { 'font-variant-numeric': 'normal' } }, ordinal: { '.ordinal': { '--tw-ordinal': 'ordinal' } }, 'slashed-zero': { '.slashed-zero': { '--tw-slashed-zero': 'slashed-zero' } }, diff --git a/src/lib/generateRules.js b/src/lib/generateRules.js index 3bffb93..fbe3c4d 100644 --- a/src/lib/generateRules.js +++ b/src/lib/generateRules.js @@ -133,16 +133,6 @@ function generateRules(tailwindConfig, candidates, context) { for (let [sort, plugin] of plugins) { if (typeof plugin === 'function') { for (let ruleSet of [].concat(plugin(modifier, pluginHelpers))) { - if (plugin.format !== 'new') { - let options = {} - if (Array.isArray(ruleSet)) { - ;[, , options = {}] = ruleSet - ruleSet = toPostCssNode(ruleSet, context.postCssNodeCache) - } - matches.push([{ ...sort, options }, ruleSet]) - continue - } - let [rules, options] = parseRules(ruleSet, context.newPostCssNodeCache) for (let rule of rules) { matches.push([{ ...sort, options }, rule]) diff --git a/src/lib/setupContext.js b/src/lib/setupContext.js index 84110f5..3ab31b6 100644 --- a/src/lib/setupContext.js +++ b/src/lib/setupContext.js @@ -342,22 +342,6 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs return prefixSelector(tailwindConfig.prefix, selector) } - function addUtilities(utilities) { - let offset = offsets.utilities++ - - for (let identifier in utilities) { - let value = [].concat(utilities[identifier]) - - let withOffsets = value.map((rule) => [{ sort: offset, layer: 'utilities' }, rule]) - - if (!context.candidateRuleMap.has(identifier)) { - context.candidateRuleMap.set(identifier, []) - } - - context.candidateRuleMap.get(identifier).push(...withOffsets) - } - } - return { // Classic plugin API addVariant(variantName, applyThisVariant, options = {}) { @@ -447,14 +431,19 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs } }, matchUtilities: function (utilities) { - utilities = Object.fromEntries( - Object.entries(utilities).map(([key, value]) => { - value.format = 'new' - return [key, value] - }) - ) + let offset = offsets.utilities++ + + for (let identifier in utilities) { + let value = [].concat(utilities[identifier]) + + let withOffsets = value.map((rule) => [{ sort: offset, layer: 'utilities' }, rule]) + + if (!context.candidateRuleMap.has(identifier)) { + context.candidateRuleMap.set(identifier, []) + } - addUtilities(utilities) + context.candidateRuleMap.get(identifier).push(...withOffsets) + } }, // --- jit: { @@ -480,7 +469,6 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs context.candidateRuleMap.get(identifier).push(...withOffsets) } }, - addUtilities, }, } } diff --git a/src/pluginUtils.js b/src/pluginUtils.js index 771b4c3..50e87a8 100644 --- a/src/pluginUtils.js +++ b/src/pluginUtils.js @@ -132,8 +132,8 @@ module.exports = { transformAllClasses, transformLastClasses, createSimpleStaticUtilityPlugin(styles) { - return function ({ jit: { addUtilities } }) { - addUtilities( + return function ({ matchUtilities }) { + matchUtilities( Object.entries(styles).reduce((newStyles, [selector, rules]) => { let result = { [selector]: rules } newStyles[selector.slice(1)] = [result]