diff --git a/src/corePlugins/animation.js b/src/corePlugins/animation.js index 86ca541..77dcf5e 100644 --- a/src/corePlugins/animation.js +++ b/src/corePlugins/animation.js @@ -1,25 +1,25 @@ 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 } }) { +module.exports = function ({ matchUtilities, jit: { theme } }) { let keyframes = Object.fromEntries( Object.entries(theme.keyframes).map(([key, value]) => { return [ key, [ - `@keyframes ${key}`, - Object.entries(value).map(([key, value]) => { - return [key, value] - }), + { + [`@keyframes ${key}`]: value, + }, + { respectVariants: false }, ], - { respectVariants: false }, ] }) ) let transformValue = transformThemeValue('animation') - addUtilities({ + matchUtilities({ animate: [ (modifier, { theme }) => { let value = transformValue(theme.animation[modifier]) @@ -30,7 +30,10 @@ 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 } }, + ] }, ], }) diff --git a/src/corePlugins/backgroundColor.js b/src/corePlugins/backgroundColor.js index 87db759..72acf44 100644 --- a/src/corePlugins/backgroundColor.js +++ b/src/corePlugins/backgroundColor.js @@ -5,29 +5,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.backgroundColor) - addUtilities({ - bg: [ - (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 9673baf..9279e7a 100644 --- a/src/corePlugins/backgroundImage.js +++ b/src/corePlugins/backgroundImage.js @@ -1,17 +1,15 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ - bg: [ - (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..5103766 100644 --- a/src/corePlugins/backgroundOpacity.js +++ b/src/corePlugins/backgroundOpacity.js @@ -1,21 +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 } }) { - let transformValue = transformThemeValue('backgroundOpacity') +module.exports = function ({ matchUtilities, jit: { theme, addVariant, e } }) { + matchUtilities({ + 'bg-opacity': (modifier, { theme }) => { + let value = asValue(modifier, theme.backgroundOpacity) - addUtilities({ - '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/corePlugins/backgroundPosition.js b/src/corePlugins/backgroundPosition.js index 76f4d5d..c5f6035 100644 --- a/src/corePlugins/backgroundPosition.js +++ b/src/corePlugins/backgroundPosition.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({ - 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 } } + }, }) } diff --git a/src/corePlugins/backgroundSize.js b/src/corePlugins/backgroundSize.js index b6c34c6..9211eb3 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] - return [[nameClass('bg', modifier), { 'background-size': theme.backgroundSize[modifier] }]] - }, - ], + if (value === undefined) { + return [] + } + + return { [nameClass('bg', modifier)]: { 'background-size': value } } + }, }) } diff --git a/src/corePlugins/borderColor.js b/src/corePlugins/borderColor.js index d893d86..683f54d 100644 --- a/src/corePlugins/borderColor.js +++ b/src/corePlugins/borderColor.js @@ -1,37 +1,31 @@ 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.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', + }), + } + }, }) } 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 74af50c..5cd5c9c 100644 --- a/src/corePlugins/boxShadow.js +++ b/src/corePlugins/boxShadow.js @@ -1,42 +1,37 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default -let shadowReset = [ - '*', - { +let transformValue = transformThemeValue('boxShadow') +let shadowReset = { + '*': { '--tw-shadow': '0 0 #0000', }, - { respectVariants: false }, -] +} -module.exports = function ({ jit: { theme, addUtilities } }) { - addUtilities({ - shadow: [ - (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, - [ - 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 fa5f9f8..b084a45 100644 --- a/src/corePlugins/divideWidth.js +++ b/src/corePlugins/divideWidth.js @@ -1,66 +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-x-reverse': [ - [ - '.divide-x-reverse > :not([hidden]) ~ :not([hidden])', - { - '--tw-divide-x-reverse': '1', - }, - ], - ], + '.divide-y-reverse > :not([hidden]) ~ :not([hidden])': { + '--tw-divide-y-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/fontVariantNumeric.js b/src/corePlugins/fontVariantNumeric.js index 61635bd..727f27c 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], +module.exports = function ({ matchUtilities }) { + matchUtilities({ + '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' }]], + matchUtilities({ + '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' } }, }) } 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 54044db..f9f1e5f 100644 --- a/src/corePlugins/opacity.js +++ b/src/corePlugins/opacity.js @@ -1,8 +1,8 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default const { asValue } = require('../pluginUtils') -module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { - addUtilities({ +module.exports = function ({ matchUtilities, jit: { theme } }) { + matchUtilities({ opacity: (modifier, { theme }) => { let value = asValue(modifier, theme.opacity) @@ -10,7 +10,7 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) { return [] } - return [[nameClass('opacity', modifier), { opacity: value }]] + 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 337f439..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,47 +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 e1a2062..3f7af1c 100644 --- a/src/corePlugins/space.js +++ b/src/corePlugins/space.js @@ -2,66 +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-x-reverse': [ - [ - '.space-x-reverse > :not([hidden]) ~ :not([hidden])', - { - '--tw-space-x-reverse': '1', - }, - ], - ], + '.space-y-reverse > :not([hidden]) ~ :not([hidden])': { + '--tw-space-y-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/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/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 } } + }, }) } diff --git a/src/lib/generateRules.js b/src/lib/generateRules.js index 2b8b1a9..fbe3c4d 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,18 @@ 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 [].concat(plugin(modifier, pluginHelpers))) { + 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..3ab31b6 100644 --- a/src/lib/setupContext.js +++ b/src/lib/setupContext.js @@ -430,6 +430,21 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs context.candidateRuleMap.get(identifier).push([{ sort: offset, layer: 'utilities' }, rule]) } }, + matchUtilities: function (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) + } + }, // --- jit: { e: escapeClassName, @@ -451,21 +466,6 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs context.candidateRuleMap.set(identifier, []) } - 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) } }, @@ -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..50e87a8 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, @@ -127,10 +132,11 @@ module.exports = { transformAllClasses, transformLastClasses, createSimpleStaticUtilityPlugin(styles) { - return function ({ jit: { addUtilities } }) { - addUtilities( + return function ({ matchUtilities }) { + matchUtilities( 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 + }, }