From 11690b4c9be79eb8acf0a0f32a8ffe476e5ce1a7 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 16 Oct 2020 10:24:16 -0400 Subject: [PATCH] Update all core plugins to use the same class name generation strategy --- __tests__/plugins/letterSpacing.test.js | 10 ++++++---- __tests__/plugins/zIndex.test.js | 14 ++++++++------ __tests__/sanity.test.js | 2 +- src/plugins/backgroundColor.js | 3 ++- src/plugins/backgroundImage.js | 3 ++- src/plugins/backgroundPosition.js | 3 ++- src/plugins/backgroundSize.js | 3 ++- src/plugins/borderColor.js | 3 ++- src/plugins/borderRadius.js | 21 +++++++++++---------- src/plugins/borderWidth.js | 13 +++++++------ src/plugins/boxShadow.js | 6 ++---- src/plugins/cursor.js | 3 ++- src/plugins/divideColor.js | 3 ++- src/plugins/divideOpacity.js | 3 ++- src/plugins/divideWidth.js | 9 +++++---- src/plugins/fill.js | 3 ++- src/plugins/flex.js | 3 ++- src/plugins/flexGrow.js | 4 ++-- src/plugins/flexShrink.js | 4 ++-- src/plugins/fontFamily.js | 25 ++++++++++--------------- src/plugins/fontSize.js | 3 ++- src/plugins/fontWeight.js | 17 ++--------------- src/plugins/gradientColorStops.js | 7 ++++--- src/plugins/height.js | 17 ++--------------- src/plugins/inset.js | 18 +++++++++--------- src/plugins/letterSpacing.js | 18 ++---------------- src/plugins/lineHeight.js | 17 ++--------------- src/plugins/listStyleType.js | 17 ++--------------- src/plugins/margin.js | 16 ++++++++-------- src/plugins/maxHeight.js | 17 ++--------------- src/plugins/maxWidth.js | 17 ++--------------- src/plugins/minHeight.js | 17 ++--------------- src/plugins/minWidth.js | 17 ++--------------- src/plugins/objectPosition.js | 17 ++--------------- src/plugins/opacity.js | 17 ++--------------- src/plugins/order.js | 17 ++--------------- src/plugins/outline.js | 3 ++- src/plugins/padding.js | 15 ++++++++------- src/plugins/placeholderColor.js | 3 ++- src/plugins/placeholderOpacity.js | 3 ++- src/plugins/space.js | 6 +++--- src/plugins/stroke.js | 3 ++- src/plugins/strokeWidth.js | 17 ++--------------- src/plugins/textColor.js | 3 ++- src/plugins/width.js | 17 ++--------------- src/plugins/zIndex.js | 18 ++---------------- src/util/createUtilityPlugin.js | 17 +++-------------- src/util/nameClass.js | 21 +++++++++++++++++++++ 48 files changed, 172 insertions(+), 341 deletions(-) create mode 100644 src/util/nameClass.js diff --git a/__tests__/plugins/letterSpacing.test.js b/__tests__/plugins/letterSpacing.test.js index af27532fc..9388b19e5 100644 --- a/__tests__/plugins/letterSpacing.test.js +++ b/__tests__/plugins/letterSpacing.test.js @@ -41,10 +41,12 @@ test('letter spacing can use negative prefix syntax', () => { expect(addedUtilities).toEqual([ { - utilities: { - '.-tracking-1': { 'letter-spacing': '-0.025em' }, - '.tracking-1': { 'letter-spacing': '0.025em' }, - }, + utilities: [ + { + '.-tracking-1': { letterSpacing: '-0.025em' }, + '.tracking-1': { letterSpacing: '0.025em' }, + }, + ], variants: ['responsive'], }, ]) diff --git a/__tests__/plugins/zIndex.test.js b/__tests__/plugins/zIndex.test.js index 4493066ed..628a79dc7 100644 --- a/__tests__/plugins/zIndex.test.js +++ b/__tests__/plugins/zIndex.test.js @@ -43,12 +43,14 @@ test('z index can use negative prefix syntax', () => { expect(addedUtilities).toEqual([ { - utilities: { - '.-z-20': { 'z-index': '-20' }, - '.-z-10': { 'z-index': '-10' }, - '.z-10': { 'z-index': '10' }, - '.z-20': { 'z-index': '20' }, - }, + utilities: [ + { + '.-z-20': { zIndex: '-20' }, + '.-z-10': { zIndex: '-10' }, + '.z-10': { zIndex: '10' }, + '.z-20': { zIndex: '20' }, + }, + ], variants: ['responsive'], }, ]) diff --git a/__tests__/sanity.test.js b/__tests__/sanity.test.js index a5dbeddf6..a44762c13 100644 --- a/__tests__/sanity.test.js +++ b/__tests__/sanity.test.js @@ -4,7 +4,7 @@ import postcss from 'postcss' import tailwind from '../src/index' import config from '../stubs/defaultConfig.stub.js' -it('generates the right CSS', () => { +it('generates the right CSS using the default settings', () => { const inputPath = path.resolve(`${__dirname}/fixtures/tailwind-input.css`) const input = fs.readFileSync(inputPath, 'utf8') diff --git a/src/plugins/backgroundColor.js b/src/plugins/backgroundColor.js index 581cda8b2..e29d002ee 100644 --- a/src/plugins/backgroundColor.js +++ b/src/plugins/backgroundColor.js @@ -2,6 +2,7 @@ import _ from 'lodash' import flattenColorPalette from '../util/flattenColorPalette' import withAlphaVariable from '../util/withAlphaVariable' import toColorValue from '../util/toColorValue' +import nameClass from '../util/nameClass' export default function() { return function({ addUtilities, e, theme, variants, corePlugins }) { @@ -21,7 +22,7 @@ export default function() { const utilities = _.fromPairs( _.map(colors, (value, modifier) => { - return [`.${e(`bg-${modifier}`)}`, getProperties(value)] + return [nameClass('bg', modifier), getProperties(value)] }) ) diff --git a/src/plugins/backgroundImage.js b/src/plugins/backgroundImage.js index 149d687e3..91960d28a 100644 --- a/src/plugins/backgroundImage.js +++ b/src/plugins/backgroundImage.js @@ -1,11 +1,12 @@ import _ from 'lodash' +import nameClass from '../util/nameClass' export default function() { return function({ addUtilities, e, theme, variants }) { const utilities = _.fromPairs( _.map(theme('backgroundImage'), (value, modifier) => { return [ - `.${e(`bg-${modifier}`)}`, + nameClass('bg', modifier), { 'background-image': value, }, diff --git a/src/plugins/backgroundPosition.js b/src/plugins/backgroundPosition.js index 88c2e5d8a..4f2a09ce7 100644 --- a/src/plugins/backgroundPosition.js +++ b/src/plugins/backgroundPosition.js @@ -1,11 +1,12 @@ import _ from 'lodash' +import nameClass from '../util/nameClass' export default function() { return function({ addUtilities, e, theme, variants }) { const utilities = _.fromPairs( _.map(theme('backgroundPosition'), (value, modifier) => { return [ - `.${e(`bg-${modifier}`)}`, + nameClass('bg', modifier), { 'background-position': value, }, diff --git a/src/plugins/backgroundSize.js b/src/plugins/backgroundSize.js index a03f90a51..49330546b 100644 --- a/src/plugins/backgroundSize.js +++ b/src/plugins/backgroundSize.js @@ -1,11 +1,12 @@ import _ from 'lodash' +import nameClass from '../util/nameClass' export default function() { return function({ addUtilities, e, theme, variants }) { const utilities = _.fromPairs( _.map(theme('backgroundSize'), (value, modifier) => { return [ - `.${e(`bg-${modifier}`)}`, + nameClass('bg', modifier), { 'background-size': value, }, diff --git a/src/plugins/borderColor.js b/src/plugins/borderColor.js index 6d94e0816..b6fce5dc3 100644 --- a/src/plugins/borderColor.js +++ b/src/plugins/borderColor.js @@ -1,5 +1,6 @@ import _ from 'lodash' import flattenColorPalette from '../util/flattenColorPalette' +import nameClass from '../util/nameClass' import toColorValue from '../util/toColorValue' import withAlphaVariable from '../util/withAlphaVariable' @@ -21,7 +22,7 @@ export default function() { const utilities = _.fromPairs( _.map(_.omit(colors, 'DEFAULT'), (value, modifier) => { - return [`.${e(`border-${modifier}`)}`, getProperties(value)] + return [nameClass('border', modifier), getProperties(value)] }) ) diff --git a/src/plugins/borderRadius.js b/src/plugins/borderRadius.js index f01cfc37f..5b7af2430 100644 --- a/src/plugins/borderRadius.js +++ b/src/plugins/borderRadius.js @@ -1,40 +1,41 @@ import _ from 'lodash' +import nameClass from '../util/nameClass' export default function() { return function({ addUtilities, e, theme, variants }) { const generators = [ (value, modifier) => ({ - [`.${e(`rounded${modifier}`)}`]: { borderRadius: `${value}` }, + [nameClass('rounded', modifier)]: { borderRadius: `${value}` }, }), (value, modifier) => ({ - [`.${e(`rounded-t${modifier}`)}`]: { + [nameClass('rounded-t', modifier)]: { borderTopLeftRadius: `${value}`, borderTopRightRadius: `${value}`, }, - [`.${e(`rounded-r${modifier}`)}`]: { + [nameClass('rounded-r', modifier)]: { borderTopRightRadius: `${value}`, borderBottomRightRadius: `${value}`, }, - [`.${e(`rounded-b${modifier}`)}`]: { + [nameClass('rounded-b', modifier)]: { borderBottomRightRadius: `${value}`, borderBottomLeftRadius: `${value}`, }, - [`.${e(`rounded-l${modifier}`)}`]: { + [nameClass('rounded-l', modifier)]: { borderTopLeftRadius: `${value}`, borderBottomLeftRadius: `${value}`, }, }), (value, modifier) => ({ - [`.${e(`rounded-tl${modifier}`)}`]: { borderTopLeftRadius: `${value}` }, - [`.${e(`rounded-tr${modifier}`)}`]: { borderTopRightRadius: `${value}` }, - [`.${e(`rounded-br${modifier}`)}`]: { borderBottomRightRadius: `${value}` }, - [`.${e(`rounded-bl${modifier}`)}`]: { borderBottomLeftRadius: `${value}` }, + [nameClass('rounded-tl', modifier)]: { borderTopLeftRadius: `${value}` }, + [nameClass('rounded-tr', modifier)]: { borderTopRightRadius: `${value}` }, + [nameClass('rounded-br', modifier)]: { borderBottomRightRadius: `${value}` }, + [nameClass('rounded-bl', modifier)]: { borderBottomLeftRadius: `${value}` }, }), ] const utilities = _.flatMap(generators, generator => { return _.flatMap(theme('borderRadius'), (value, modifier) => { - return generator(value, modifier === 'DEFAULT' ? '' : `-${modifier}`) + return generator(value, modifier) }) }) diff --git a/src/plugins/borderWidth.js b/src/plugins/borderWidth.js index 97e99828f..f0e3db139 100644 --- a/src/plugins/borderWidth.js +++ b/src/plugins/borderWidth.js @@ -1,22 +1,23 @@ import _ from 'lodash' +import nameClass from '../util/nameClass' export default function() { return function({ addUtilities, e, theme, variants }) { const generators = [ (value, modifier) => ({ - [`.${e(`border${modifier}`)}`]: { borderWidth: `${value}` }, + [nameClass('border', modifier)]: { borderWidth: `${value}` }, }), (value, modifier) => ({ - [`.${e(`border-t${modifier}`)}`]: { borderTopWidth: `${value}` }, - [`.${e(`border-r${modifier}`)}`]: { borderRightWidth: `${value}` }, - [`.${e(`border-b${modifier}`)}`]: { borderBottomWidth: `${value}` }, - [`.${e(`border-l${modifier}`)}`]: { borderLeftWidth: `${value}` }, + [nameClass('border-t', modifier)]: { borderTopWidth: `${value}` }, + [nameClass('border-r', modifier)]: { borderRightWidth: `${value}` }, + [nameClass('border-b', modifier)]: { borderBottomWidth: `${value}` }, + [nameClass('border-l', modifier)]: { borderLeftWidth: `${value}` }, }), ] const utilities = _.flatMap(generators, generator => { return _.flatMap(theme('borderWidth'), (value, modifier) => { - return generator(value, modifier === 'DEFAULT' ? '' : `-${modifier}`) + return generator(value, modifier) }) }) diff --git a/src/plugins/boxShadow.js b/src/plugins/boxShadow.js index 20f400f39..50b0fe97a 100644 --- a/src/plugins/boxShadow.js +++ b/src/plugins/boxShadow.js @@ -1,14 +1,12 @@ import _ from 'lodash' -import prefixNegativeModifiers from '../util/prefixNegativeModifiers' +import nameClass from '../util/nameClass' export default function() { return function({ addUtilities, e, theme, variants }) { const utilities = _.fromPairs( _.map(theme('boxShadow'), (value, modifier) => { - const className = - modifier === 'DEFAULT' ? 'shadow' : `${e(prefixNegativeModifiers('shadow', modifier))}` return [ - `.${className}`, + nameClass('shadow', modifier), { 'box-shadow': value, }, diff --git a/src/plugins/cursor.js b/src/plugins/cursor.js index a0006dc63..81cec0d1a 100644 --- a/src/plugins/cursor.js +++ b/src/plugins/cursor.js @@ -1,11 +1,12 @@ import _ from 'lodash' +import nameClass from '../util/nameClass' export default function() { return function({ addUtilities, e, theme, variants }) { const utilities = _.fromPairs( _.map(theme('cursor'), (value, modifier) => { return [ - `.${e(`cursor-${modifier}`)}`, + nameClass('cursor', modifier), { cursor: value, }, diff --git a/src/plugins/divideColor.js b/src/plugins/divideColor.js index d728cb8eb..a42e88e96 100644 --- a/src/plugins/divideColor.js +++ b/src/plugins/divideColor.js @@ -1,5 +1,6 @@ import _ from 'lodash' import flattenColorPalette from '../util/flattenColorPalette' +import nameClass from '../util/nameClass' import toColorValue from '../util/toColorValue' import withAlphaVariable from '../util/withAlphaVariable' @@ -22,7 +23,7 @@ export default function() { const utilities = _.fromPairs( _.map(_.omit(colors, 'DEFAULT'), (value, modifier) => { return [ - `.${e(`divide-${modifier}`)} > :not(template) ~ :not(template)`, + `${nameClass('divide', modifier)} > :not(template) ~ :not(template)`, getProperties(value), ] }) diff --git a/src/plugins/divideOpacity.js b/src/plugins/divideOpacity.js index 06dc5e08a..1137f33c4 100644 --- a/src/plugins/divideOpacity.js +++ b/src/plugins/divideOpacity.js @@ -1,11 +1,12 @@ import _ from 'lodash' +import nameClass from '../util/nameClass' export default function() { return function({ addUtilities, e, theme, variants }) { const utilities = _.fromPairs( _.map(theme('divideOpacity'), (value, modifier) => { return [ - `.${e(`divide-opacity-${modifier}`)} > :not(template) ~ :not(template)`, + `${nameClass('divide-opacity', modifier)} > :not(template) ~ :not(template)`, { '--divide-opacity': value, }, diff --git a/src/plugins/divideWidth.js b/src/plugins/divideWidth.js index d06afc4dd..f3a6b04de 100644 --- a/src/plugins/divideWidth.js +++ b/src/plugins/divideWidth.js @@ -1,17 +1,18 @@ import _ from 'lodash' +import nameClass from '../util/nameClass' export default function() { - return function({ addUtilities, e, theme, variants }) { + return function({ addUtilities, theme, variants }) { const generators = [ (size, modifier) => ({ - [`.${e(`divide-y${modifier}`)} > :not(template) ~ :not(template)`]: { + [`${nameClass('divide-y', modifier)} > :not(template) ~ :not(template)`]: { '--divide-y-reverse': '0', 'border-top-width': `calc(${ size === '0' ? '0px' : size } * calc(1 - var(--divide-y-reverse)))`, 'border-bottom-width': `calc(${size === '0' ? '0px' : size} * var(--divide-y-reverse))`, }, - [`.${e(`divide-x${modifier}`)} > :not(template) ~ :not(template)`]: { + [`${nameClass('divide-x', modifier)} > :not(template) ~ :not(template)`]: { '--divide-x-reverse': '0', 'border-right-width': `calc(${size === '0' ? '0px' : size} * var(--divide-x-reverse))`, 'border-left-width': `calc(${ @@ -24,7 +25,7 @@ export default function() { const utilities = _.flatMap(generators, generator => { return [ ..._.flatMap(theme('divideWidth'), (value, modifier) => { - return generator(value, modifier === 'DEFAULT' ? '' : `-${modifier}`) + return generator(value, modifier) }), { '.divide-y-reverse > :not(template) ~ :not(template)': { diff --git a/src/plugins/fill.js b/src/plugins/fill.js index 84bd170cd..b4ff443f5 100644 --- a/src/plugins/fill.js +++ b/src/plugins/fill.js @@ -1,5 +1,6 @@ import _ from 'lodash' import flattenColorPalette from '../util/flattenColorPalette' +import nameClass from '../util/nameClass' import toColorValue from '../util/toColorValue' export default function() { @@ -8,7 +9,7 @@ export default function() { const utilities = _.fromPairs( _.map(colors, (value, modifier) => { - return [`.${e(`fill-${modifier}`)}`, { fill: toColorValue(value) }] + return [nameClass('fill', modifier), { fill: toColorValue(value) }] }) ) diff --git a/src/plugins/flex.js b/src/plugins/flex.js index 0f637dad5..dceb61fb5 100644 --- a/src/plugins/flex.js +++ b/src/plugins/flex.js @@ -1,11 +1,12 @@ import _ from 'lodash' +import nameClass from '../util/nameClass' export default function() { return function({ addUtilities, e, theme, variants }) { const utilities = _.fromPairs( _.map(theme('flex'), (value, modifier) => { return [ - `.${e(`flex-${modifier}`)}`, + nameClass('flex', modifier), { flex: value, }, diff --git a/src/plugins/flexGrow.js b/src/plugins/flexGrow.js index 6784fd77c..c8ce7cb89 100644 --- a/src/plugins/flexGrow.js +++ b/src/plugins/flexGrow.js @@ -1,13 +1,13 @@ import _ from 'lodash' +import nameClass from '../util/nameClass' export default function() { return function({ addUtilities, e, theme, variants }) { addUtilities( _.fromPairs( _.map(theme('flexGrow'), (value, modifier) => { - const className = modifier === 'DEFAULT' ? 'flex-grow' : `flex-grow-${modifier}` return [ - `.${e(className)}`, + nameClass('flex-grow', modifier), { 'flex-grow': value, }, diff --git a/src/plugins/flexShrink.js b/src/plugins/flexShrink.js index 129218aed..735f397a4 100644 --- a/src/plugins/flexShrink.js +++ b/src/plugins/flexShrink.js @@ -1,13 +1,13 @@ import _ from 'lodash' +import nameClass from '../util/nameClass' export default function() { return function({ addUtilities, e, theme, variants }) { addUtilities( _.fromPairs( _.map(theme('flexShrink'), (value, modifier) => { - const className = modifier === 'DEFAULT' ? 'flex-shrink' : `flex-shrink-${modifier}` return [ - `.${e(className)}`, + nameClass('flex-shrink', modifier), { 'flex-shrink': value, }, diff --git a/src/plugins/fontFamily.js b/src/plugins/fontFamily.js index b682984d4..7ed6538c7 100644 --- a/src/plugins/fontFamily.js +++ b/src/plugins/fontFamily.js @@ -1,18 +1,13 @@ -import _ from 'lodash' +import createUtilityPlugin from '../util/createUtilityPlugin' export default function() { - return function({ addUtilities, e, theme, variants }) { - const utilities = _.fromPairs( - _.map(theme('fontFamily'), (value, modifier) => { - return [ - `.${e(`font-${modifier}`)}`, - { - 'font-family': Array.isArray(value) ? value.join(', ') : value, - }, - ] - }) - ) - - addUtilities(utilities, variants('fontFamily')) - } + return createUtilityPlugin('fontFamily', [ + [ + 'font', + ['fontFamily'], + value => { + return Array.isArray(value) ? value.join(', ') : value + }, + ], + ]) } diff --git a/src/plugins/fontSize.js b/src/plugins/fontSize.js index e5667db55..7ed3750bf 100644 --- a/src/plugins/fontSize.js +++ b/src/plugins/fontSize.js @@ -1,4 +1,5 @@ import _ from 'lodash' +import nameClass from '../util/nameClass' export default function() { return function({ addUtilities, e, theme, variants }) { @@ -12,7 +13,7 @@ export default function() { } return [ - `.${e(`text-${modifier}`)}`, + nameClass('text', modifier), { 'font-size': fontSize, ...(lineHeight === undefined diff --git a/src/plugins/fontWeight.js b/src/plugins/fontWeight.js index 3cc80ebdc..1d96bc396 100644 --- a/src/plugins/fontWeight.js +++ b/src/plugins/fontWeight.js @@ -1,18 +1,5 @@ -import _ from 'lodash' +import createUtilityPlugin from '../util/createUtilityPlugin' export default function() { - return function({ addUtilities, e, theme, variants }) { - const utilities = _.fromPairs( - _.map(theme('fontWeight'), (value, modifier) => { - return [ - `.${e(`font-${modifier}`)}`, - { - 'font-weight': value, - }, - ] - }) - ) - - addUtilities(utilities, variants('fontWeight')) - } + return createUtilityPlugin('fontWeight', [['font', ['fontWeight']]]) } diff --git a/src/plugins/gradientColorStops.js b/src/plugins/gradientColorStops.js index 50b09e8aa..80fa12b5d 100644 --- a/src/plugins/gradientColorStops.js +++ b/src/plugins/gradientColorStops.js @@ -1,5 +1,6 @@ import _ from 'lodash' import flattenColorPalette from '../util/flattenColorPalette' +import nameClass from '../util/nameClass' import toColorValue from '../util/toColorValue' import { toRgba } from '../util/withAlphaVariable' @@ -24,21 +25,21 @@ export default function() { return [ [ - `.${e(`from-${modifier}`)}`, + nameClass('from', modifier), { '--gradient-from-color': toColorValue(value, 'from'), '--gradient-color-stops': `var(--gradient-from-color), var(--gradient-to-color, ${transparentTo})`, }, ], [ - `.${e(`via-${modifier}`)}`, + nameClass('via', modifier), { '--gradient-via-color': toColorValue(value, 'via'), '--gradient-color-stops': `var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, ${transparentTo})`, }, ], [ - `.${e(`to-${modifier}`)}`, + nameClass('to', modifier), { '--gradient-to-color': toColorValue(value, 'to'), }, diff --git a/src/plugins/height.js b/src/plugins/height.js index bf7da12b1..e124fbc4c 100644 --- a/src/plugins/height.js +++ b/src/plugins/height.js @@ -1,18 +1,5 @@ -import _ from 'lodash' +import createUtilityPlugin from '../util/createUtilityPlugin' export default function() { - return function({ addUtilities, e, theme, variants }) { - const utilities = _.fromPairs( - _.map(theme('height'), (value, modifier) => { - return [ - `.${e(`h-${modifier}`)}`, - { - height: value, - }, - ] - }) - ) - - addUtilities(utilities, variants('height')) - } + return createUtilityPlugin('height', [['h', ['height']]]) } diff --git a/src/plugins/inset.js b/src/plugins/inset.js index 10abc55a4..7117da499 100644 --- a/src/plugins/inset.js +++ b/src/plugins/inset.js @@ -1,11 +1,11 @@ import _ from 'lodash' -import prefixNegativeModifiers from '../util/prefixNegativeModifiers' +import nameClass from '../util/nameClass' export default function() { - return function({ addUtilities, e, theme, variants }) { + return function({ addUtilities, theme, variants }) { const generators = [ (size, modifier) => ({ - [`.${e(prefixNegativeModifiers('inset', modifier))}`]: { + [nameClass('inset', modifier)]: { top: `${size}`, right: `${size}`, bottom: `${size}`, @@ -13,20 +13,20 @@ export default function() { }, }), (size, modifier) => ({ - [`.${e(prefixNegativeModifiers('inset-y', modifier))}`]: { + [nameClass('inset-y', modifier)]: { top: `${size}`, bottom: `${size}`, }, - [`.${e(prefixNegativeModifiers('inset-x', modifier))}`]: { + [nameClass('inset-x', modifier)]: { right: `${size}`, left: `${size}`, }, }), (size, modifier) => ({ - [`.${e(prefixNegativeModifiers('top', modifier))}`]: { top: `${size}` }, - [`.${e(prefixNegativeModifiers('right', modifier))}`]: { right: `${size}` }, - [`.${e(prefixNegativeModifiers('bottom', modifier))}`]: { bottom: `${size}` }, - [`.${e(prefixNegativeModifiers('left', modifier))}`]: { left: `${size}` }, + [nameClass('top', modifier)]: { top: `${size}` }, + [nameClass('right', modifier)]: { right: `${size}` }, + [nameClass('bottom', modifier)]: { bottom: `${size}` }, + [nameClass('left', modifier)]: { left: `${size}` }, }), ] diff --git a/src/plugins/letterSpacing.js b/src/plugins/letterSpacing.js index bdcd2e5bd..4c4e698c6 100644 --- a/src/plugins/letterSpacing.js +++ b/src/plugins/letterSpacing.js @@ -1,19 +1,5 @@ -import _ from 'lodash' -import prefixNegativeModifiers from '../util/prefixNegativeModifiers' +import createUtilityPlugin from '../util/createUtilityPlugin' export default function() { - return function({ addUtilities, theme, variants, e }) { - const utilities = _.fromPairs( - _.map(theme('letterSpacing'), (value, modifier) => { - return [ - `.${e(prefixNegativeModifiers('tracking', modifier))}`, - { - 'letter-spacing': value, - }, - ] - }) - ) - - addUtilities(utilities, variants('letterSpacing')) - } + return createUtilityPlugin('letterSpacing', [['tracking', ['letterSpacing']]]) } diff --git a/src/plugins/lineHeight.js b/src/plugins/lineHeight.js index ac9d4fc5d..89b565ece 100644 --- a/src/plugins/lineHeight.js +++ b/src/plugins/lineHeight.js @@ -1,18 +1,5 @@ -import _ from 'lodash' +import createUtilityPlugin from '../util/createUtilityPlugin' export default function() { - return function({ addUtilities, e, theme, variants }) { - const utilities = _.fromPairs( - _.map(theme('lineHeight'), (value, modifier) => { - return [ - `.${e(`leading-${modifier}`)}`, - { - 'line-height': value, - }, - ] - }) - ) - - addUtilities(utilities, variants('lineHeight')) - } + return createUtilityPlugin('lineHeight', [['leading', ['lineHeight']]]) } diff --git a/src/plugins/listStyleType.js b/src/plugins/listStyleType.js index 4caa59c80..15ce86a54 100644 --- a/src/plugins/listStyleType.js +++ b/src/plugins/listStyleType.js @@ -1,18 +1,5 @@ -import _ from 'lodash' +import createUtilityPlugin from '../util/createUtilityPlugin' export default function() { - return function({ addUtilities, e, theme, variants }) { - const utilities = _.fromPairs( - _.map(theme('listStyleType'), (value, modifier) => { - return [ - `.${e(`list-${modifier}`)}`, - { - 'list-style-type': value, - }, - ] - }) - ) - - addUtilities(utilities, variants('listStyleType')) - } + return createUtilityPlugin('listStyleType', [['list', ['listStyleType']]]) } diff --git a/src/plugins/margin.js b/src/plugins/margin.js index 67399d489..146b2e29f 100644 --- a/src/plugins/margin.js +++ b/src/plugins/margin.js @@ -1,27 +1,27 @@ import _ from 'lodash' -import prefixNegativeModifiers from '../util/prefixNegativeModifiers' +import nameClass from '../util/nameClass' export default function() { return function({ addUtilities, e, theme, variants }) { const generators = [ (size, modifier) => ({ - [`.${e(prefixNegativeModifiers('m', modifier))}`]: { margin: `${size}` }, + [nameClass('m', modifier)]: { margin: `${size}` }, }), (size, modifier) => ({ - [`.${e(prefixNegativeModifiers('my', modifier))}`]: { + [nameClass('my', modifier)]: { 'margin-top': `${size}`, 'margin-bottom': `${size}`, }, - [`.${e(prefixNegativeModifiers('mx', modifier))}`]: { + [nameClass('mx', modifier)]: { 'margin-left': `${size}`, 'margin-right': `${size}`, }, }), (size, modifier) => ({ - [`.${e(prefixNegativeModifiers('mt', modifier))}`]: { 'margin-top': `${size}` }, - [`.${e(prefixNegativeModifiers('mr', modifier))}`]: { 'margin-right': `${size}` }, - [`.${e(prefixNegativeModifiers('mb', modifier))}`]: { 'margin-bottom': `${size}` }, - [`.${e(prefixNegativeModifiers('ml', modifier))}`]: { 'margin-left': `${size}` }, + [nameClass('mt', modifier)]: { 'margin-top': `${size}` }, + [nameClass('mr', modifier)]: { 'margin-right': `${size}` }, + [nameClass('mb', modifier)]: { 'margin-bottom': `${size}` }, + [nameClass('ml', modifier)]: { 'margin-left': `${size}` }, }), ] diff --git a/src/plugins/maxHeight.js b/src/plugins/maxHeight.js index 0c2a199fb..2d6b469c9 100644 --- a/src/plugins/maxHeight.js +++ b/src/plugins/maxHeight.js @@ -1,18 +1,5 @@ -import _ from 'lodash' +import createUtilityPlugin from '../util/createUtilityPlugin' export default function() { - return function({ addUtilities, e, theme, variants }) { - const utilities = _.fromPairs( - _.map(theme('maxHeight'), (value, modifier) => { - return [ - `.${e(`max-h-${modifier}`)}`, - { - 'max-height': value, - }, - ] - }) - ) - - addUtilities(utilities, variants('maxHeight')) - } + return createUtilityPlugin('maxHeight', [['max-h', ['maxHeight']]]) } diff --git a/src/plugins/maxWidth.js b/src/plugins/maxWidth.js index b893fe3ee..162ce7a47 100644 --- a/src/plugins/maxWidth.js +++ b/src/plugins/maxWidth.js @@ -1,18 +1,5 @@ -import _ from 'lodash' +import createUtilityPlugin from '../util/createUtilityPlugin' export default function() { - return function({ addUtilities, e, theme, variants }) { - const utilities = _.fromPairs( - _.map(theme('maxWidth'), (value, modifier) => { - return [ - `.${e(`max-w-${modifier}`)}`, - { - 'max-width': value, - }, - ] - }) - ) - - addUtilities(utilities, variants('maxWidth')) - } + return createUtilityPlugin('maxWidth', [['max-w', ['maxWidth']]]) } diff --git a/src/plugins/minHeight.js b/src/plugins/minHeight.js index 5f42806ad..379930590 100644 --- a/src/plugins/minHeight.js +++ b/src/plugins/minHeight.js @@ -1,18 +1,5 @@ -import _ from 'lodash' +import createUtilityPlugin from '../util/createUtilityPlugin' export default function() { - return function({ addUtilities, e, theme, variants }) { - const utilities = _.fromPairs( - _.map(theme('minHeight'), (value, modifier) => { - return [ - `.${e(`min-h-${modifier}`)}`, - { - 'min-height': value, - }, - ] - }) - ) - - addUtilities(utilities, variants('minHeight')) - } + return createUtilityPlugin('minHeight', [['min-h', ['minHeight']]]) } diff --git a/src/plugins/minWidth.js b/src/plugins/minWidth.js index 4dc351065..42bebe371 100644 --- a/src/plugins/minWidth.js +++ b/src/plugins/minWidth.js @@ -1,18 +1,5 @@ -import _ from 'lodash' +import createUtilityPlugin from '../util/createUtilityPlugin' export default function() { - return function({ addUtilities, e, theme, variants }) { - const utilities = _.fromPairs( - _.map(theme('minWidth'), (value, modifier) => { - return [ - `.${e(`min-w-${modifier}`)}`, - { - 'min-width': value, - }, - ] - }) - ) - - addUtilities(utilities, variants('minWidth')) - } + return createUtilityPlugin('minWidth', [['min-w', ['minWidth']]]) } diff --git a/src/plugins/objectPosition.js b/src/plugins/objectPosition.js index 10cb8b18a..1bb082ab6 100644 --- a/src/plugins/objectPosition.js +++ b/src/plugins/objectPosition.js @@ -1,18 +1,5 @@ -import _ from 'lodash' +import createUtilityPlugin from '../util/createUtilityPlugin' export default function() { - return function({ addUtilities, e, theme, variants }) { - const utilities = _.fromPairs( - _.map(theme('objectPosition'), (value, modifier) => { - return [ - `.${e(`object-${modifier}`)}`, - { - 'object-position': value, - }, - ] - }) - ) - - addUtilities(utilities, variants('objectPosition')) - } + return createUtilityPlugin('objectPosition', [['object', ['objectPosition']]]) } diff --git a/src/plugins/opacity.js b/src/plugins/opacity.js index b6745b4b8..29b932bab 100644 --- a/src/plugins/opacity.js +++ b/src/plugins/opacity.js @@ -1,18 +1,5 @@ -import _ from 'lodash' +import createUtilityPlugin from '../util/createUtilityPlugin' export default function() { - return function({ addUtilities, e, theme, variants }) { - const utilities = _.fromPairs( - _.map(theme('opacity'), (value, modifier) => { - return [ - `.${e(`opacity-${modifier}`)}`, - { - opacity: value, - }, - ] - }) - ) - - addUtilities(utilities, variants('opacity')) - } + return createUtilityPlugin('opacity', [['opacity', ['opacity']]]) } diff --git a/src/plugins/order.js b/src/plugins/order.js index 1c5dd9279..e0f627eb8 100644 --- a/src/plugins/order.js +++ b/src/plugins/order.js @@ -1,18 +1,5 @@ -import _ from 'lodash' +import createUtilityPlugin from '../util/createUtilityPlugin' export default function() { - return function({ addUtilities, e, theme, variants }) { - const utilities = _.fromPairs( - _.map(theme('order'), (value, modifier) => { - return [ - `.${e(`order-${modifier}`)}`, - { - order: value, - }, - ] - }) - ) - - addUtilities(utilities, variants('order')) - } + return createUtilityPlugin('order', [['order', ['order']]]) } diff --git a/src/plugins/outline.js b/src/plugins/outline.js index b4fa027ad..3e2a3dbe8 100644 --- a/src/plugins/outline.js +++ b/src/plugins/outline.js @@ -1,4 +1,5 @@ import _ from 'lodash' +import nameClass from '../util/nameClass' export default function() { return function({ addUtilities, e, theme, variants }) { @@ -7,7 +8,7 @@ export default function() { const [outline, outlineOffset = '0'] = Array.isArray(value) ? value : [value] return [ - `.${e(`outline-${modifier}`)}`, + nameClass('outline', modifier), { outline, outlineOffset, diff --git a/src/plugins/padding.js b/src/plugins/padding.js index 578efb1ce..1f5129aa6 100644 --- a/src/plugins/padding.js +++ b/src/plugins/padding.js @@ -1,20 +1,21 @@ import _ from 'lodash' +import nameClass from '../util/nameClass' export default function() { return function({ addUtilities, e, theme, variants }) { const generators = [ (size, modifier) => ({ - [`.${e(`p-${modifier}`)}`]: { padding: `${size}` }, + [nameClass('p', modifier)]: { padding: `${size}` }, }), (size, modifier) => ({ - [`.${e(`py-${modifier}`)}`]: { 'padding-top': `${size}`, 'padding-bottom': `${size}` }, - [`.${e(`px-${modifier}`)}`]: { 'padding-left': `${size}`, 'padding-right': `${size}` }, + [nameClass('py', modifier)]: { 'padding-top': `${size}`, 'padding-bottom': `${size}` }, + [nameClass('px', modifier)]: { 'padding-left': `${size}`, 'padding-right': `${size}` }, }), (size, modifier) => ({ - [`.${e(`pt-${modifier}`)}`]: { 'padding-top': `${size}` }, - [`.${e(`pr-${modifier}`)}`]: { 'padding-right': `${size}` }, - [`.${e(`pb-${modifier}`)}`]: { 'padding-bottom': `${size}` }, - [`.${e(`pl-${modifier}`)}`]: { 'padding-left': `${size}` }, + [nameClass('pt', modifier)]: { 'padding-top': `${size}` }, + [nameClass('pr', modifier)]: { 'padding-right': `${size}` }, + [nameClass('pb', modifier)]: { 'padding-bottom': `${size}` }, + [nameClass('pl', modifier)]: { 'padding-left': `${size}` }, }), ] diff --git a/src/plugins/placeholderColor.js b/src/plugins/placeholderColor.js index 6709da30a..80db5da05 100644 --- a/src/plugins/placeholderColor.js +++ b/src/plugins/placeholderColor.js @@ -1,5 +1,6 @@ import _ from 'lodash' import flattenColorPalette from '../util/flattenColorPalette' +import nameClass from '../util/nameClass' import toColorValue from '../util/toColorValue' import withAlphaVariable from '../util/withAlphaVariable' @@ -21,7 +22,7 @@ export default function() { const utilities = _.fromPairs( _.map(colors, (value, modifier) => { - return [`.${e(`placeholder-${modifier}`)}::placeholder`, getProperties(value)] + return [`${nameClass('placeholder', modifier)}::placeholder`, getProperties(value)] }) ) diff --git a/src/plugins/placeholderOpacity.js b/src/plugins/placeholderOpacity.js index 3164add62..b6e8275b9 100644 --- a/src/plugins/placeholderOpacity.js +++ b/src/plugins/placeholderOpacity.js @@ -1,11 +1,12 @@ import _ from 'lodash' +import nameClass from '../util/nameClass' export default function() { return function({ addUtilities, e, theme, variants }) { const utilities = _.fromPairs( _.map(theme('placeholderOpacity'), (value, modifier) => { return [ - `.${e(`placeholder-opacity-${modifier}`)}::placeholder`, + `${nameClass('placeholder-opacity', modifier)}::placeholder`, { '--placeholder-opacity': value, }, diff --git a/src/plugins/space.js b/src/plugins/space.js index d775f1b33..bd98948c9 100644 --- a/src/plugins/space.js +++ b/src/plugins/space.js @@ -1,16 +1,16 @@ import _ from 'lodash' -import prefixNegativeModifiers from '../util/prefixNegativeModifiers' +import nameClass from '../util/nameClass' export default function() { return function({ addUtilities, e, theme, variants }) { const generators = [ (size, modifier) => ({ - [`.${e(prefixNegativeModifiers('space-y', modifier))} > :not(template) ~ :not(template)`]: { + [`${nameClass('space-y', modifier)} > :not(template) ~ :not(template)`]: { '--space-y-reverse': '0', 'margin-top': `calc(${size === '0' ? '0px' : size} * calc(1 - var(--space-y-reverse)))`, 'margin-bottom': `calc(${size === '0' ? '0px' : size} * var(--space-y-reverse))`, }, - [`.${e(prefixNegativeModifiers('space-x', modifier))} > :not(template) ~ :not(template)`]: { + [`${nameClass('space-x', modifier)} > :not(template) ~ :not(template)`]: { '--space-x-reverse': '0', 'margin-right': `calc(${size === '0' ? '0px' : size} * var(--space-x-reverse))`, 'margin-left': `calc(${size === '0' ? '0px' : size} * calc(1 - var(--space-x-reverse)))`, diff --git a/src/plugins/stroke.js b/src/plugins/stroke.js index 43ab8fc69..6c8c74d5f 100644 --- a/src/plugins/stroke.js +++ b/src/plugins/stroke.js @@ -1,5 +1,6 @@ import _ from 'lodash' import flattenColorPalette from '../util/flattenColorPalette' +import nameClass from '../util/nameClass' import toColorValue from '../util/toColorValue' export default function() { @@ -8,7 +9,7 @@ export default function() { const utilities = _.fromPairs( _.map(colors, (value, modifier) => { - return [`.${e(`stroke-${modifier}`)}`, { stroke: toColorValue(value) }] + return [nameClass('stroke', modifier), { stroke: toColorValue(value) }] }) ) diff --git a/src/plugins/strokeWidth.js b/src/plugins/strokeWidth.js index 79db44fcd..93d32827b 100644 --- a/src/plugins/strokeWidth.js +++ b/src/plugins/strokeWidth.js @@ -1,18 +1,5 @@ -import _ from 'lodash' +import createUtilityPlugin from '../util/createUtilityPlugin' export default function() { - return function({ addUtilities, e, theme, variants }) { - const utilities = _.fromPairs( - _.map(theme('strokeWidth'), (value, modifier) => { - return [ - `.${e(`stroke-${modifier}`)}`, - { - strokeWidth: value, - }, - ] - }) - ) - - addUtilities(utilities, variants('strokeWidth')) - } + return createUtilityPlugin('strokeWidth', [['stroke', ['strokeWidth']]]) } diff --git a/src/plugins/textColor.js b/src/plugins/textColor.js index 0cf8a1b26..3acdc7763 100644 --- a/src/plugins/textColor.js +++ b/src/plugins/textColor.js @@ -1,5 +1,6 @@ import _ from 'lodash' import flattenColorPalette from '../util/flattenColorPalette' +import nameClass from '../util/nameClass' import toColorValue from '../util/toColorValue' import withAlphaVariable from '../util/withAlphaVariable' @@ -21,7 +22,7 @@ export default function() { const utilities = _.fromPairs( _.map(colors, (value, modifier) => { - return [`.${e(`text-${modifier}`)}`, getProperties(value)] + return [nameClass('text', modifier), getProperties(value)] }) ) diff --git a/src/plugins/width.js b/src/plugins/width.js index 0492ef3a9..441d309d5 100644 --- a/src/plugins/width.js +++ b/src/plugins/width.js @@ -1,18 +1,5 @@ -import _ from 'lodash' +import createUtilityPlugin from '../util/createUtilityPlugin' export default function() { - return function({ addUtilities, e, theme, variants }) { - const utilities = _.fromPairs( - _.map(theme('width'), (value, modifier) => { - return [ - `.${e(`w-${modifier}`)}`, - { - width: value, - }, - ] - }) - ) - - addUtilities(utilities, variants('width')) - } + return createUtilityPlugin('width', [['w', ['width']]]) } diff --git a/src/plugins/zIndex.js b/src/plugins/zIndex.js index 479463865..9384ea5ed 100644 --- a/src/plugins/zIndex.js +++ b/src/plugins/zIndex.js @@ -1,19 +1,5 @@ -import _ from 'lodash' -import prefixNegativeModifiers from '../util/prefixNegativeModifiers' +import createUtilityPlugin from '../util/createUtilityPlugin' export default function() { - return function({ addUtilities, e, theme, variants }) { - const utilities = _.fromPairs( - _.map(theme('zIndex'), (value, modifier) => { - return [ - `.${e(prefixNegativeModifiers('z', modifier))}`, - { - 'z-index': value, - }, - ] - }) - ) - - addUtilities(utilities, variants('zIndex')) - } + return createUtilityPlugin('zIndex', [['z', ['zIndex']]]) } diff --git a/src/util/createUtilityPlugin.js b/src/util/createUtilityPlugin.js index f1f8cdf21..d3dc8c4ff 100644 --- a/src/util/createUtilityPlugin.js +++ b/src/util/createUtilityPlugin.js @@ -2,27 +2,16 @@ import identity from 'lodash/identity' import fromPairs from 'lodash/fromPairs' import toPairs from 'lodash/toPairs' import castArray from 'lodash/castArray' - -function className(classPrefix, key) { - if (key === 'DEFAULT') { - return classPrefix - } - - if (key.startsWith('-')) { - return `-${classPrefix}${key}` - } - - return `${classPrefix}-${key}` -} +import nameClass from './nameClass' export default function createUtilityPlugin(themeKey, utilityVariations) { - return function({ e, addUtilities, variants, theme }) { + return function({ addUtilities, variants, theme }) { const utilities = utilityVariations.map( ([classPrefix, properties, transformValue = identity]) => { return fromPairs( toPairs(theme(themeKey)).map(([key, value]) => { return [ - `.${e(className(classPrefix, key))}`, + nameClass(classPrefix, key), fromPairs(castArray(properties).map(property => [property, transformValue(value)])), ] }) diff --git a/src/util/nameClass.js b/src/util/nameClass.js new file mode 100644 index 000000000..44081f7bd --- /dev/null +++ b/src/util/nameClass.js @@ -0,0 +1,21 @@ +import escapeClassName from './escapeClassName' + +function asClass(name) { + return `.${escapeClassName(name)}` +} + +export default function nameClass(classPrefix, key) { + if (key === 'DEFAULT') { + return asClass(classPrefix) + } + + if (key === '-') { + return asClass(`-${classPrefix}`) + } + + if (key.startsWith('-')) { + return asClass(`-${classPrefix}${key}`) + } + + return asClass(`${classPrefix}-${key}`) +}