Merge pull request #874 from tailwindcss/widen-negative-value-support

Remove 'className' from plugin API

Author: adamwathan

__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(
     [

src/plugins/inset.js

@@ -1,25 +1,32 @@
 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}`,
           left: `${size}`,
         },
       }),
       (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}` },
       }),
     ]
 

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}` },
       }),
     ]
 

src/util/className.js

@@ -0,0 +1,5 @@
+import _ from 'lodash'
+
+export default function prefixNegativeModifiers(base, modifier) {
+  return _.startsWith(modifier, '-') ? `-${base}-${modifier.slice(1)}` : `${base}-${modifier}`
+}

src/util/prefixNegativeModifiers.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 }