From 0735e3d27e78248f6b9d0f3c37a865c025af5098 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 26 Apr 2019 08:17:49 -0400 Subject: [PATCH] Remove 'className' from plugin API Certain plugins behave differently and the rules about `default` meaning "no suffix" are not universal (see the cursor plugin). The simplest thing to do right now is keep things as they are, which means only certain plugins respect the default option and only certain other plugins respect the negative prefix convention. --- __tests__/processPlugins.test.js | 60 ----------------------------- src/plugins/inset.js | 23 +++++++---- src/plugins/margin.js | 17 ++++---- src/util/className.js | 13 ------- src/util/prefixNegativeModifiers.js | 5 +++ src/util/processPlugins.js | 2 - 6 files changed, 29 insertions(+), 91 deletions(-) delete mode 100644 src/util/className.js create mode 100644 src/util/prefixNegativeModifiers.js diff --git a/__tests__/processPlugins.test.js b/__tests__/processPlugins.test.js index fb445a83b..2d62ae323 100644 --- a/__tests__/processPlugins.test.js +++ b/__tests__/processPlugins.test.js @@ -597,66 +597,6 @@ test('plugins can create rules with escaped selectors', () => { `) }) -test('plugins can create class names accounting for special naming rules easily', () => { - const { components, utilities } = processPlugins( - [ - function({ className, addUtilities }) { - addUtilities({ - [className('rotate', '1/4')]: { - transform: 'rotate(90deg)', - }, - [className('rotate', '-1/4')]: { - transform: 'rotate(-90deg)', - }, - [className('rotate', 'default')]: { - transform: 'rotate(180deg)', - }, - }) - }, - ], - makeConfig() - ) - - expect(components.length).toBe(0) - expect(css(utilities)).toMatchCss(` - @variants { - .rotate-1\\/4 { - transform: rotate(90deg) - } - .-rotate-1\\/4 { - transform: rotate(-90deg) - } - .rotate { - transform: rotate(180deg) - } - } - `) -}) - -test('the second parameter in className is optional', () => { - const { components, utilities } = processPlugins( - [ - function({ className, addUtilities }) { - addUtilities({ - [className('rotate')]: { - transform: 'rotate(180deg)', - }, - }) - }, - ], - makeConfig() - ) - - expect(components.length).toBe(0) - expect(css(utilities)).toMatchCss(` - @variants { - .rotate { - transform: rotate(180deg) - } - } - `) -}) - test('plugins can access the current config', () => { const { components, utilities } = processPlugins( [ diff --git a/src/plugins/inset.js b/src/plugins/inset.js index 586f2a51b..10abc55a4 100644 --- a/src/plugins/inset.js +++ b/src/plugins/inset.js @@ -1,10 +1,11 @@ import _ from 'lodash' +import prefixNegativeModifiers from '../util/prefixNegativeModifiers' export default function() { - return function({ addUtilities, className, theme, variants }) { + return function({ addUtilities, e, theme, variants }) { const generators = [ (size, modifier) => ({ - [className('inset', modifier)]: { + [`.${e(prefixNegativeModifiers('inset', modifier))}`]: { top: `${size}`, right: `${size}`, bottom: `${size}`, @@ -12,14 +13,20 @@ export default function() { }, }), (size, modifier) => ({ - [className('inset-y', modifier)]: { top: `${size}`, bottom: `${size}` }, - [className('inset-x', modifier)]: { right: `${size}`, left: `${size}` }, + [`.${e(prefixNegativeModifiers('inset-y', modifier))}`]: { + top: `${size}`, + bottom: `${size}`, + }, + [`.${e(prefixNegativeModifiers('inset-x', modifier))}`]: { + right: `${size}`, + left: `${size}`, + }, }), (size, modifier) => ({ - [className('top', modifier)]: { top: `${size}` }, - [className('right', modifier)]: { right: `${size}` }, - [className('bottom', modifier)]: { bottom: `${size}` }, - [className('left', modifier)]: { left: `${size}` }, + [`.${e(prefixNegativeModifiers('top', modifier))}`]: { top: `${size}` }, + [`.${e(prefixNegativeModifiers('right', modifier))}`]: { right: `${size}` }, + [`.${e(prefixNegativeModifiers('bottom', modifier))}`]: { bottom: `${size}` }, + [`.${e(prefixNegativeModifiers('left', modifier))}`]: { left: `${size}` }, }), ] diff --git a/src/plugins/margin.js b/src/plugins/margin.js index 65a8f2e23..67399d489 100644 --- a/src/plugins/margin.js +++ b/src/plugins/margin.js @@ -1,26 +1,27 @@ import _ from 'lodash' +import prefixNegativeModifiers from '../util/prefixNegativeModifiers' export default function() { - return function({ addUtilities, className, theme, variants }) { + return function({ addUtilities, e, theme, variants }) { const generators = [ (size, modifier) => ({ - [className('m', modifier)]: { margin: `${size}` }, + [`.${e(prefixNegativeModifiers('m', modifier))}`]: { margin: `${size}` }, }), (size, modifier) => ({ - [className('my', modifier)]: { + [`.${e(prefixNegativeModifiers('my', modifier))}`]: { 'margin-top': `${size}`, 'margin-bottom': `${size}`, }, - [className('mx', modifier)]: { + [`.${e(prefixNegativeModifiers('mx', modifier))}`]: { 'margin-left': `${size}`, 'margin-right': `${size}`, }, }), (size, modifier) => ({ - [className('mt', modifier)]: { 'margin-top': `${size}` }, - [className('mr', modifier)]: { 'margin-right': `${size}` }, - [className('mb', modifier)]: { 'margin-bottom': `${size}` }, - [className('ml', modifier)]: { 'margin-left': `${size}` }, + [`.${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}` }, }), ] diff --git a/src/util/className.js b/src/util/className.js deleted file mode 100644 index b91465039..000000000 --- a/src/util/className.js +++ /dev/null @@ -1,13 +0,0 @@ -import _ from 'lodash' -import escapeClassName from './escapeClassName' - -export default function className(base, modifier = 'default') { - const name = (() => { - if (modifier === 'default') { - return base - } - return _.startsWith(modifier, '-') ? `-${base}-${modifier.slice(1)}` : `${base}-${modifier}` - })() - - return `.${escapeClassName(name)}` -} diff --git a/src/util/prefixNegativeModifiers.js b/src/util/prefixNegativeModifiers.js new file mode 100644 index 000000000..3b0ab62c2 --- /dev/null +++ b/src/util/prefixNegativeModifiers.js @@ -0,0 +1,5 @@ +import _ from 'lodash' + +export default function prefixNegativeModifiers(base, modifier) { + return _.startsWith(modifier, '-') ? `-${base}-${modifier.slice(1)}` : `${base}-${modifier}` +} diff --git a/src/util/processPlugins.js b/src/util/processPlugins.js index 2d6b0bb4c..a607e8472 100644 --- a/src/util/processPlugins.js +++ b/src/util/processPlugins.js @@ -2,7 +2,6 @@ import _ from 'lodash' import postcss from 'postcss' import Node from 'postcss/lib/node' import escapeClassName from '../util/escapeClassName' -import className from '../util/className' import generateVariantFunction from '../util/generateVariantFunction' import parseObjectStyles from '../util/parseObjectStyles' import prefixSelector from '../util/prefixSelector' @@ -40,7 +39,6 @@ export default function(plugins, config) { return getConfigValue(`variants.${path}`, defaultValue) }, e: escapeClassName, - className, prefix: applyConfiguredPrefix, addUtilities: (utilities, options) => { const defaultOptions = { variants: [], respectPrefix: true, respectImportant: true }