From 8c0b25168eb76563cc4f18fcca4726e48a61f6e1 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Thu, 15 Oct 2020 16:26:34 -0400 Subject: [PATCH 1/5] Replace special handling of 'default' with 'DEFAULT' --- __tests__/containerPlugin.test.js | 2 +- __tests__/flattenColorPalette.test.js | 2 +- __tests__/plugins/boxShadow.test.js | 4 ++-- __tests__/plugins/divideWidth.test.js | 2 +- src/plugins/borderColor.js | 2 +- src/plugins/borderRadius.js | 2 +- src/plugins/borderWidth.js | 2 +- src/plugins/boxShadow.js | 2 +- src/plugins/container.js | 8 ++++---- src/plugins/css/preflight.css | 2 +- src/plugins/divideColor.js | 2 +- src/plugins/divideWidth.js | 2 +- src/plugins/flexGrow.js | 2 +- src/plugins/flexShrink.js | 2 +- src/util/createUtilityPlugin.js | 2 +- src/util/flattenColorPalette.js | 2 +- stubs/defaultConfig.stub.js | 14 +++++++------- 17 files changed, 27 insertions(+), 27 deletions(-) diff --git a/__tests__/containerPlugin.test.js b/__tests__/containerPlugin.test.js index a81239e49931..9c85e2fc069e 100644 --- a/__tests__/containerPlugin.test.js +++ b/__tests__/containerPlugin.test.js @@ -217,7 +217,7 @@ test('responsive horizontal padding can be included by default', () => { }, container: { padding: { - default: '1rem', + DEFAULT: '1rem', sm: '2rem', lg: '4rem', xl: '5rem', diff --git a/__tests__/flattenColorPalette.test.js b/__tests__/flattenColorPalette.test.js index 98ab5a72bf5a..456488a6d5f8 100644 --- a/__tests__/flattenColorPalette.test.js +++ b/__tests__/flattenColorPalette.test.js @@ -8,7 +8,7 @@ test('it flattens nested color objects', () => { 25: 'rgba(255,255,255,.25)', 50: 'rgba(255,255,255,.5)', 75: 'rgba(255,255,255,.75)', - default: '#fff', + DEFAULT: '#fff', }, red: { 1: 'rgb(33,0,0)', diff --git a/__tests__/plugins/boxShadow.test.js b/__tests__/plugins/boxShadow.test.js index aa43c94d425a..7062463209b2 100644 --- a/__tests__/plugins/boxShadow.test.js +++ b/__tests__/plugins/boxShadow.test.js @@ -2,13 +2,13 @@ import _ from 'lodash' import escapeClassName from '../../src/util/escapeClassName' import plugin from '../../src/plugins/boxShadow' -test('box shadow can use default keyword and negative prefix syntax', () => { +test('box shadow can use DEFAULT keyword and negative prefix syntax', () => { const addedUtilities = [] const config = { theme: { boxShadow: { - default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', + DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', '-': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)', '-md': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', diff --git a/__tests__/plugins/divideWidth.test.js b/__tests__/plugins/divideWidth.test.js index b55558a69056..165c7df610c7 100644 --- a/__tests__/plugins/divideWidth.test.js +++ b/__tests__/plugins/divideWidth.test.js @@ -5,7 +5,7 @@ test('generating divide width utilities', () => { const config = { theme: { divideWidth: { - default: '1px', + DEFAULT: '1px', '0': '0', '2': '2px', '4': '4px', diff --git a/src/plugins/borderColor.js b/src/plugins/borderColor.js index 40204c8d574c..6d94e0816792 100644 --- a/src/plugins/borderColor.js +++ b/src/plugins/borderColor.js @@ -20,7 +20,7 @@ export default function() { } const utilities = _.fromPairs( - _.map(_.omit(colors, 'default'), (value, modifier) => { + _.map(_.omit(colors, 'DEFAULT'), (value, modifier) => { return [`.${e(`border-${modifier}`)}`, getProperties(value)] }) ) diff --git a/src/plugins/borderRadius.js b/src/plugins/borderRadius.js index e491d30f6750..f01cfc37f6ce 100644 --- a/src/plugins/borderRadius.js +++ b/src/plugins/borderRadius.js @@ -34,7 +34,7 @@ export default function() { const utilities = _.flatMap(generators, generator => { return _.flatMap(theme('borderRadius'), (value, modifier) => { - return generator(value, modifier === 'default' ? '' : `-${modifier}`) + return generator(value, modifier === 'DEFAULT' ? '' : `-${modifier}`) }) }) diff --git a/src/plugins/borderWidth.js b/src/plugins/borderWidth.js index d84fb440eb97..97e99828f1d7 100644 --- a/src/plugins/borderWidth.js +++ b/src/plugins/borderWidth.js @@ -16,7 +16,7 @@ export default function() { const utilities = _.flatMap(generators, generator => { return _.flatMap(theme('borderWidth'), (value, modifier) => { - return generator(value, modifier === 'default' ? '' : `-${modifier}`) + return generator(value, modifier === 'DEFAULT' ? '' : `-${modifier}`) }) }) diff --git a/src/plugins/boxShadow.js b/src/plugins/boxShadow.js index 0005972864f6..20f400f395b0 100644 --- a/src/plugins/boxShadow.js +++ b/src/plugins/boxShadow.js @@ -6,7 +6,7 @@ export default function() { const utilities = _.fromPairs( _.map(theme('boxShadow'), (value, modifier) => { const className = - modifier === 'default' ? 'shadow' : `${e(prefixNegativeModifiers('shadow', modifier))}` + modifier === 'DEFAULT' ? 'shadow' : `${e(prefixNegativeModifiers('shadow', modifier))}` return [ `.${className}`, { diff --git a/src/plugins/container.js b/src/plugins/container.js index ff1ff415d8ea..6f6529fd6b90 100644 --- a/src/plugins/container.js +++ b/src/plugins/container.js @@ -30,7 +30,7 @@ function mapMinWidthsToPadding(minWidths, screens, paddings) { if (!_.isObject(paddings)) { return [ { - screen: 'default', + screen: 'DEFAULT', minWidth: 0, padding: paddings, }, @@ -39,11 +39,11 @@ function mapMinWidthsToPadding(minWidths, screens, paddings) { const mapping = [] - if (paddings.default) { + if (paddings.DEFAULT) { mapping.push({ - screen: 'default', + screen: 'DEFAULT', minWidth: 0, - padding: paddings.default, + padding: paddings.DEFAULT, }) } diff --git a/src/plugins/css/preflight.css b/src/plugins/css/preflight.css index 7f5c35341d60..511a692b066e 100644 --- a/src/plugins/css/preflight.css +++ b/src/plugins/css/preflight.css @@ -99,7 +99,7 @@ html { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ - border-color: theme('borderColor.default', currentColor); /* 2 */ + border-color: theme('borderColor.DEFAULT', currentColor); /* 2 */ } /* diff --git a/src/plugins/divideColor.js b/src/plugins/divideColor.js index 75df3789ac42..d728cb8ebda6 100644 --- a/src/plugins/divideColor.js +++ b/src/plugins/divideColor.js @@ -20,7 +20,7 @@ export default function() { } const utilities = _.fromPairs( - _.map(_.omit(colors, 'default'), (value, modifier) => { + _.map(_.omit(colors, 'DEFAULT'), (value, modifier) => { return [ `.${e(`divide-${modifier}`)} > :not(template) ~ :not(template)`, getProperties(value), diff --git a/src/plugins/divideWidth.js b/src/plugins/divideWidth.js index 44757d8e2246..d06afc4ddc48 100644 --- a/src/plugins/divideWidth.js +++ b/src/plugins/divideWidth.js @@ -24,7 +24,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 === 'DEFAULT' ? '' : `-${modifier}`) }), { '.divide-y-reverse > :not(template) ~ :not(template)': { diff --git a/src/plugins/flexGrow.js b/src/plugins/flexGrow.js index ae9e04921358..6784fd77c480 100644 --- a/src/plugins/flexGrow.js +++ b/src/plugins/flexGrow.js @@ -5,7 +5,7 @@ export default function() { addUtilities( _.fromPairs( _.map(theme('flexGrow'), (value, modifier) => { - const className = modifier === 'default' ? 'flex-grow' : `flex-grow-${modifier}` + const className = modifier === 'DEFAULT' ? 'flex-grow' : `flex-grow-${modifier}` return [ `.${e(className)}`, { diff --git a/src/plugins/flexShrink.js b/src/plugins/flexShrink.js index 073836d2847a..129218aedd1b 100644 --- a/src/plugins/flexShrink.js +++ b/src/plugins/flexShrink.js @@ -5,7 +5,7 @@ export default function() { addUtilities( _.fromPairs( _.map(theme('flexShrink'), (value, modifier) => { - const className = modifier === 'default' ? 'flex-shrink' : `flex-shrink-${modifier}` + const className = modifier === 'DEFAULT' ? 'flex-shrink' : `flex-shrink-${modifier}` return [ `.${e(className)}`, { diff --git a/src/util/createUtilityPlugin.js b/src/util/createUtilityPlugin.js index 8053cc0b219c..f1f8cdf21e61 100644 --- a/src/util/createUtilityPlugin.js +++ b/src/util/createUtilityPlugin.js @@ -4,7 +4,7 @@ import toPairs from 'lodash/toPairs' import castArray from 'lodash/castArray' function className(classPrefix, key) { - if (key === 'default') { + if (key === 'DEFAULT') { return classPrefix } diff --git a/src/util/flattenColorPalette.js b/src/util/flattenColorPalette.js index 5110e988d568..f40d09ec4f9c 100644 --- a/src/util/flattenColorPalette.js +++ b/src/util/flattenColorPalette.js @@ -8,7 +8,7 @@ export default function flattenColorPalette(colors) { } return _.map(color, (value, key) => { - const suffix = key === 'default' ? '' : `-${key}` + const suffix = key === 'DEFAULT' ? '' : `-${key}` return [`${name}${suffix}`, value] }) }) diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 46d40565b916..f0f4ac6f00f2 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -182,13 +182,13 @@ module.exports = { }, borderColor: theme => ({ ...theme('colors'), - default: theme('colors.gray.300', 'currentColor'), + DEFAULT: theme('colors.gray.300', 'currentColor'), }), borderOpacity: theme => theme('opacity'), borderRadius: { none: '0', sm: '0.125rem', - default: '0.25rem', + DEFAULT: '0.25rem', md: '0.375rem', lg: '0.5rem', xl: '0.75rem', @@ -197,7 +197,7 @@ module.exports = { full: '9999px', }, borderWidth: { - default: '1px', + DEFAULT: '1px', '0': '0', '2': '2px', '4': '4px', @@ -206,7 +206,7 @@ module.exports = { boxShadow: { xs: '0 0 0 1px rgba(0, 0, 0, 0.05)', sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)', - default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', + DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)', xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)', @@ -239,11 +239,11 @@ module.exports = { }, flexGrow: { '0': '0', - default: '1', + DEFAULT: '1', }, flexShrink: { '0': '0', - default: '1', + DEFAULT: '1', }, fontFamily: { sans: [ @@ -638,7 +638,7 @@ module.exports = { transitionProperty: { none: 'none', all: 'all', - default: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform', + DEFAULT: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform', colors: 'background-color, border-color, color, fill, stroke', opacity: 'opacity', shadow: 'box-shadow', From a5af2584564105cfa6d8dd8d3a172ef2327ab497 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 16 Oct 2020 10:24:16 -0400 Subject: [PATCH 2/5] 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 af27532fc284..9388b19e53f4 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 4493066edd07..628a79dc7de6 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 a5dbeddf6874..a44762c1396d 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 581cda8b2d95..e29d002ee9c2 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 149d687e3447..91960d28ae41 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 88c2e5d8a827..4f2a09ce7f89 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 a03f90a519ac..49330546b782 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 6d94e0816792..b6fce5dc33a3 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 f01cfc37f6ce..5b7af24304c4 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 97e99828f1d7..f0e3db13903e 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 20f400f395b0..50b0fe97a399 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 a0006dc631ef..81cec0d1a6c0 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 d728cb8ebda6..a42e88e96ed8 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 06dc5e08af06..1137f33c48d8 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 d06afc4ddc48..f3a6b04deb66 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 84bd170cda8c..b4ff443f5f1c 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 0f637dad5ca3..dceb61fb55b6 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 6784fd77c480..c8ce7cb89aad 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 129218aedd1b..735f397a4d89 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 b682984d426a..7ed6538c7df6 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 e5667db55244..7ed3750bfc05 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 3cc80ebdc445..1d96bc3963eb 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 50b09e8aac5a..80fa12b5d872 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 bf7da12b162d..e124fbc4c1b7 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 10abc55a46b6..7117da499d18 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 bdcd2e5bd065..4c4e698c6385 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 ac9d4fc5d412..89b565ece276 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 4caa59c80ad6..15ce86a540dc 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 67399d489b9d..146b2e29fd99 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 0c2a199fbd76..2d6b469c9401 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 b893fe3eee20..162ce7a479ce 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 5f42806ad3ff..379930590b72 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 4dc351065a41..42bebe371dee 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 10cb8b18a45c..1bb082ab6056 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 b6745b4b87a5..29b932babe79 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 1c5dd9279e36..e0f627eb897e 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 b4fa027ad357..3e2a3dbe847e 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 578efb1ce389..1f5129aa65e4 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 6709da30a7d2..80db5da053d1 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 3164add6264d..b6e8275b971a 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 d775f1b33f98..bd98948c9d74 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 43ab8fc698a6..6c8c74d5fbf1 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 79db44fcde6f..93d32827b85a 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 0cf8a1b2623e..3acdc7763333 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 0492ef3a918b..441d309d53bd 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 479463865ab5..9384ea5ed748 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 f1f8cdf21e61..d3dc8c4ff355 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 000000000000..44081f7bd248 --- /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}`) +} From adadd6a87665c65fb3ac11cce3f178507b84a6db Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 16 Oct 2020 10:24:25 -0400 Subject: [PATCH 3/5] Rename default variant to DEFAULT --- __tests__/variantsAtRule.test.js | 2 +- src/lib/substituteVariantsAtRules.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/__tests__/variantsAtRule.test.js b/__tests__/variantsAtRule.test.js index e2e3306aabd7..b27503d42dd9 100644 --- a/__tests__/variantsAtRule.test.js +++ b/__tests__/variantsAtRule.test.js @@ -648,7 +648,7 @@ test('the built-in variant pseudo-selectors are appended before any pseudo-eleme test('the default variant can be generated in a specified position', () => { const input = ` - @variants focus, active, default, hover { + @variants focus, active, DEFAULT, hover { .banana { color: yellow; } .chocolate { color: brown; } } diff --git a/src/lib/substituteVariantsAtRules.js b/src/lib/substituteVariantsAtRules.js index 3f3b91c75c0f..39b5ac704008 100644 --- a/src/lib/substituteVariantsAtRules.js +++ b/src/lib/substituteVariantsAtRules.js @@ -19,11 +19,11 @@ function generatePseudoClassVariant(pseudoClass, selectorPrefix = pseudoClass) { } function ensureIncludesDefault(variants) { - return variants.includes('default') ? variants : ['default', ...variants] + return variants.includes('DEFAULT') ? variants : ['DEFAULT', ...variants] } const defaultVariantGenerators = config => ({ - default: generateVariantFunction(() => {}), + DEFAULT: generateVariantFunction(() => {}), 'motion-safe': generateVariantFunction( ({ container, separator, modifySelectors }) => { const modified = modifySelectors(({ selector }) => { From 45d35f455c1539d59d6f5419834df6e4de998023 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 16 Oct 2020 10:32:35 -0400 Subject: [PATCH 4/5] Fix lint errors --- src/plugins/backgroundColor.js | 2 +- src/plugins/backgroundImage.js | 2 +- src/plugins/backgroundPosition.js | 2 +- src/plugins/backgroundSize.js | 2 +- src/plugins/borderColor.js | 2 +- src/plugins/borderRadius.js | 2 +- src/plugins/borderWidth.js | 2 +- src/plugins/boxShadow.js | 2 +- src/plugins/cursor.js | 2 +- src/plugins/divideColor.js | 2 +- src/plugins/divideOpacity.js | 2 +- src/plugins/fill.js | 2 +- src/plugins/flex.js | 2 +- src/plugins/flexGrow.js | 2 +- src/plugins/flexShrink.js | 2 +- src/plugins/fontSize.js | 2 +- src/plugins/gradientColorStops.js | 2 +- src/plugins/margin.js | 2 +- src/plugins/outline.js | 2 +- src/plugins/padding.js | 2 +- src/plugins/placeholderColor.js | 2 +- src/plugins/placeholderOpacity.js | 2 +- src/plugins/space.js | 2 +- src/plugins/stroke.js | 2 +- src/plugins/textColor.js | 2 +- 25 files changed, 25 insertions(+), 25 deletions(-) diff --git a/src/plugins/backgroundColor.js b/src/plugins/backgroundColor.js index e29d002ee9c2..e7a90c18da60 100644 --- a/src/plugins/backgroundColor.js +++ b/src/plugins/backgroundColor.js @@ -5,7 +5,7 @@ import toColorValue from '../util/toColorValue' import nameClass from '../util/nameClass' export default function() { - return function({ addUtilities, e, theme, variants, corePlugins }) { + return function({ addUtilities, theme, variants, corePlugins }) { const colors = flattenColorPalette(theme('backgroundColor')) const getProperties = value => { diff --git a/src/plugins/backgroundImage.js b/src/plugins/backgroundImage.js index 91960d28ae41..df3a20efd26b 100644 --- a/src/plugins/backgroundImage.js +++ b/src/plugins/backgroundImage.js @@ -2,7 +2,7 @@ import _ from 'lodash' import nameClass from '../util/nameClass' export default function() { - return function({ addUtilities, e, theme, variants }) { + return function({ addUtilities, theme, variants }) { const utilities = _.fromPairs( _.map(theme('backgroundImage'), (value, modifier) => { return [ diff --git a/src/plugins/backgroundPosition.js b/src/plugins/backgroundPosition.js index 4f2a09ce7f89..7fa254f76fe1 100644 --- a/src/plugins/backgroundPosition.js +++ b/src/plugins/backgroundPosition.js @@ -2,7 +2,7 @@ import _ from 'lodash' import nameClass from '../util/nameClass' export default function() { - return function({ addUtilities, e, theme, variants }) { + return function({ addUtilities, theme, variants }) { const utilities = _.fromPairs( _.map(theme('backgroundPosition'), (value, modifier) => { return [ diff --git a/src/plugins/backgroundSize.js b/src/plugins/backgroundSize.js index 49330546b782..abac1472a9df 100644 --- a/src/plugins/backgroundSize.js +++ b/src/plugins/backgroundSize.js @@ -2,7 +2,7 @@ import _ from 'lodash' import nameClass from '../util/nameClass' export default function() { - return function({ addUtilities, e, theme, variants }) { + return function({ addUtilities, theme, variants }) { const utilities = _.fromPairs( _.map(theme('backgroundSize'), (value, modifier) => { return [ diff --git a/src/plugins/borderColor.js b/src/plugins/borderColor.js index b6fce5dc33a3..29ffe5b4ed49 100644 --- a/src/plugins/borderColor.js +++ b/src/plugins/borderColor.js @@ -5,7 +5,7 @@ import toColorValue from '../util/toColorValue' import withAlphaVariable from '../util/withAlphaVariable' export default function() { - return function({ addUtilities, e, theme, variants, corePlugins }) { + return function({ addUtilities, theme, variants, corePlugins }) { const colors = flattenColorPalette(theme('borderColor')) const getProperties = value => { diff --git a/src/plugins/borderRadius.js b/src/plugins/borderRadius.js index 5b7af24304c4..af610222b915 100644 --- a/src/plugins/borderRadius.js +++ b/src/plugins/borderRadius.js @@ -2,7 +2,7 @@ import _ from 'lodash' import nameClass from '../util/nameClass' export default function() { - return function({ addUtilities, e, theme, variants }) { + return function({ addUtilities, theme, variants }) { const generators = [ (value, modifier) => ({ [nameClass('rounded', modifier)]: { borderRadius: `${value}` }, diff --git a/src/plugins/borderWidth.js b/src/plugins/borderWidth.js index f0e3db13903e..33592f2b97a0 100644 --- a/src/plugins/borderWidth.js +++ b/src/plugins/borderWidth.js @@ -2,7 +2,7 @@ import _ from 'lodash' import nameClass from '../util/nameClass' export default function() { - return function({ addUtilities, e, theme, variants }) { + return function({ addUtilities, theme, variants }) { const generators = [ (value, modifier) => ({ [nameClass('border', modifier)]: { borderWidth: `${value}` }, diff --git a/src/plugins/boxShadow.js b/src/plugins/boxShadow.js index 50b0fe97a399..6cf6953b9787 100644 --- a/src/plugins/boxShadow.js +++ b/src/plugins/boxShadow.js @@ -2,7 +2,7 @@ import _ from 'lodash' import nameClass from '../util/nameClass' export default function() { - return function({ addUtilities, e, theme, variants }) { + return function({ addUtilities, theme, variants }) { const utilities = _.fromPairs( _.map(theme('boxShadow'), (value, modifier) => { return [ diff --git a/src/plugins/cursor.js b/src/plugins/cursor.js index 81cec0d1a6c0..99acc9482196 100644 --- a/src/plugins/cursor.js +++ b/src/plugins/cursor.js @@ -2,7 +2,7 @@ import _ from 'lodash' import nameClass from '../util/nameClass' export default function() { - return function({ addUtilities, e, theme, variants }) { + return function({ addUtilities, theme, variants }) { const utilities = _.fromPairs( _.map(theme('cursor'), (value, modifier) => { return [ diff --git a/src/plugins/divideColor.js b/src/plugins/divideColor.js index a42e88e96ed8..2fe9e9fc4932 100644 --- a/src/plugins/divideColor.js +++ b/src/plugins/divideColor.js @@ -5,7 +5,7 @@ import toColorValue from '../util/toColorValue' import withAlphaVariable from '../util/withAlphaVariable' export default function() { - return function({ addUtilities, e, theme, variants, corePlugins }) { + return function({ addUtilities, theme, variants, corePlugins }) { const colors = flattenColorPalette(theme('divideColor')) const getProperties = value => { diff --git a/src/plugins/divideOpacity.js b/src/plugins/divideOpacity.js index 1137f33c48d8..444041574269 100644 --- a/src/plugins/divideOpacity.js +++ b/src/plugins/divideOpacity.js @@ -2,7 +2,7 @@ import _ from 'lodash' import nameClass from '../util/nameClass' export default function() { - return function({ addUtilities, e, theme, variants }) { + return function({ addUtilities, theme, variants }) { const utilities = _.fromPairs( _.map(theme('divideOpacity'), (value, modifier) => { return [ diff --git a/src/plugins/fill.js b/src/plugins/fill.js index b4ff443f5f1c..28ab2ad68a9b 100644 --- a/src/plugins/fill.js +++ b/src/plugins/fill.js @@ -4,7 +4,7 @@ import nameClass from '../util/nameClass' import toColorValue from '../util/toColorValue' export default function() { - return function({ addUtilities, e, theme, variants }) { + return function({ addUtilities, theme, variants }) { const colors = flattenColorPalette(theme('fill')) const utilities = _.fromPairs( diff --git a/src/plugins/flex.js b/src/plugins/flex.js index dceb61fb55b6..246b291ff5ea 100644 --- a/src/plugins/flex.js +++ b/src/plugins/flex.js @@ -2,7 +2,7 @@ import _ from 'lodash' import nameClass from '../util/nameClass' export default function() { - return function({ addUtilities, e, theme, variants }) { + return function({ addUtilities, theme, variants }) { const utilities = _.fromPairs( _.map(theme('flex'), (value, modifier) => { return [ diff --git a/src/plugins/flexGrow.js b/src/plugins/flexGrow.js index c8ce7cb89aad..2891033b926b 100644 --- a/src/plugins/flexGrow.js +++ b/src/plugins/flexGrow.js @@ -2,7 +2,7 @@ import _ from 'lodash' import nameClass from '../util/nameClass' export default function() { - return function({ addUtilities, e, theme, variants }) { + return function({ addUtilities, theme, variants }) { addUtilities( _.fromPairs( _.map(theme('flexGrow'), (value, modifier) => { diff --git a/src/plugins/flexShrink.js b/src/plugins/flexShrink.js index 735f397a4d89..fad53d17b071 100644 --- a/src/plugins/flexShrink.js +++ b/src/plugins/flexShrink.js @@ -2,7 +2,7 @@ import _ from 'lodash' import nameClass from '../util/nameClass' export default function() { - return function({ addUtilities, e, theme, variants }) { + return function({ addUtilities, theme, variants }) { addUtilities( _.fromPairs( _.map(theme('flexShrink'), (value, modifier) => { diff --git a/src/plugins/fontSize.js b/src/plugins/fontSize.js index 7ed3750bfc05..018be523f0e4 100644 --- a/src/plugins/fontSize.js +++ b/src/plugins/fontSize.js @@ -2,7 +2,7 @@ import _ from 'lodash' import nameClass from '../util/nameClass' export default function() { - return function({ addUtilities, e, theme, variants }) { + return function({ addUtilities, theme, variants }) { const utilities = _.fromPairs( _.map(theme('fontSize'), (value, modifier) => { const [fontSize, options] = Array.isArray(value) ? value : [value] diff --git a/src/plugins/gradientColorStops.js b/src/plugins/gradientColorStops.js index 80fa12b5d872..988c168c6b78 100644 --- a/src/plugins/gradientColorStops.js +++ b/src/plugins/gradientColorStops.js @@ -5,7 +5,7 @@ import toColorValue from '../util/toColorValue' import { toRgba } from '../util/withAlphaVariable' export default function() { - return function({ addUtilities, e, theme, variants }) { + return function({ addUtilities, theme, variants }) { const colors = flattenColorPalette(theme('gradientColorStops')) const utilities = _(colors) diff --git a/src/plugins/margin.js b/src/plugins/margin.js index 146b2e29fd99..08945b2c9ede 100644 --- a/src/plugins/margin.js +++ b/src/plugins/margin.js @@ -2,7 +2,7 @@ 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) => ({ [nameClass('m', modifier)]: { margin: `${size}` }, diff --git a/src/plugins/outline.js b/src/plugins/outline.js index 3e2a3dbe847e..a236001b88c6 100644 --- a/src/plugins/outline.js +++ b/src/plugins/outline.js @@ -2,7 +2,7 @@ import _ from 'lodash' import nameClass from '../util/nameClass' export default function() { - return function({ addUtilities, e, theme, variants }) { + return function({ addUtilities, theme, variants }) { const utilities = _.fromPairs( _.map(theme('outline'), (value, modifier) => { const [outline, outlineOffset = '0'] = Array.isArray(value) ? value : [value] diff --git a/src/plugins/padding.js b/src/plugins/padding.js index 1f5129aa65e4..24156921090d 100644 --- a/src/plugins/padding.js +++ b/src/plugins/padding.js @@ -2,7 +2,7 @@ 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) => ({ [nameClass('p', modifier)]: { padding: `${size}` }, diff --git a/src/plugins/placeholderColor.js b/src/plugins/placeholderColor.js index 80db5da053d1..bee0a36dc17e 100644 --- a/src/plugins/placeholderColor.js +++ b/src/plugins/placeholderColor.js @@ -5,7 +5,7 @@ import toColorValue from '../util/toColorValue' import withAlphaVariable from '../util/withAlphaVariable' export default function() { - return function({ addUtilities, e, theme, variants, corePlugins }) { + return function({ addUtilities, theme, variants, corePlugins }) { const colors = flattenColorPalette(theme('placeholderColor')) const getProperties = value => { diff --git a/src/plugins/placeholderOpacity.js b/src/plugins/placeholderOpacity.js index b6e8275b971a..4f95f5287e93 100644 --- a/src/plugins/placeholderOpacity.js +++ b/src/plugins/placeholderOpacity.js @@ -2,7 +2,7 @@ import _ from 'lodash' import nameClass from '../util/nameClass' export default function() { - return function({ addUtilities, e, theme, variants }) { + return function({ addUtilities, theme, variants }) { const utilities = _.fromPairs( _.map(theme('placeholderOpacity'), (value, modifier) => { return [ diff --git a/src/plugins/space.js b/src/plugins/space.js index bd98948c9d74..42c847ac309a 100644 --- a/src/plugins/space.js +++ b/src/plugins/space.js @@ -2,7 +2,7 @@ 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) => ({ [`${nameClass('space-y', modifier)} > :not(template) ~ :not(template)`]: { diff --git a/src/plugins/stroke.js b/src/plugins/stroke.js index 6c8c74d5fbf1..d8306ef69f47 100644 --- a/src/plugins/stroke.js +++ b/src/plugins/stroke.js @@ -4,7 +4,7 @@ import nameClass from '../util/nameClass' import toColorValue from '../util/toColorValue' export default function() { - return function({ addUtilities, e, theme, variants }) { + return function({ addUtilities, theme, variants }) { const colors = flattenColorPalette(theme('stroke')) const utilities = _.fromPairs( diff --git a/src/plugins/textColor.js b/src/plugins/textColor.js index 3acdc7763333..54fceee9897a 100644 --- a/src/plugins/textColor.js +++ b/src/plugins/textColor.js @@ -5,7 +5,7 @@ import toColorValue from '../util/toColorValue' import withAlphaVariable from '../util/withAlphaVariable' export default function() { - return function({ addUtilities, e, theme, variants, corePlugins }) { + return function({ addUtilities, theme, variants, corePlugins }) { const colors = flattenColorPalette(theme('textColor')) const getProperties = value => { From 866bf1772d4c6d99f390f70c410e0824a18cdca1 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 16 Oct 2020 10:35:13 -0400 Subject: [PATCH 5/5] Update animation plugin to use `nameClass` --- src/plugins/animation.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/plugins/animation.js b/src/plugins/animation.js index 28732d8aec44..b6c821f18ac5 100644 --- a/src/plugins/animation.js +++ b/src/plugins/animation.js @@ -1,7 +1,8 @@ import _ from 'lodash' +import nameClass from '../util/nameClass' export default function() { - return function({ addUtilities, e, theme, variants }) { + return function({ addUtilities, theme, variants }) { const keyframesConfig = theme('keyframes') const keyframesStyles = _.fromPairs( _.toPairs(keyframesConfig).map(([name, keyframes]) => { @@ -14,7 +15,7 @@ export default function() { const utilities = _.fromPairs( _.toPairs(animationConfig).map(([suffix, animation]) => { return [ - `.${e(`animate-${suffix}`)}`, + nameClass('animate', suffix), { animation, },