From c6ae957aff332aeaeb1712149e7d5302f44bed62 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Wed, 24 Apr 2019 16:37:13 -0400
Subject: [PATCH] Support negative values for inset

---
 __tests__/processPlugins.test.js | 36 ++++++++++++++++++++++++++++++++
 src/plugins/inset.js             | 16 +++++++-------
 src/plugins/margin.js            | 20 +++++++-----------
 src/util/className.js            | 13 ++++++++++++
 src/util/processPlugins.js       |  2 ++
 src/util/resolveConfig.js        | 15 +++++++------
 6 files changed, 76 insertions(+), 26 deletions(-)
 create mode 100644 src/util/className.js

diff --git a/__tests__/processPlugins.test.js b/__tests__/processPlugins.test.js
index 2d62ae323..048f2415e 100644
--- a/__tests__/processPlugins.test.js
+++ b/__tests__/processPlugins.test.js
@@ -597,6 +597,42 @@ 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('plugins can access the current config', () => {
   const { components, utilities } = processPlugins(
     [
diff --git a/src/plugins/inset.js b/src/plugins/inset.js
index 4787ec2da..586f2a51b 100644
--- a/src/plugins/inset.js
+++ b/src/plugins/inset.js
@@ -1,10 +1,10 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, className, theme, variants }) {
     const generators = [
       (size, modifier) => ({
-        [`.${e(`inset-${modifier}`)}`]: {
+        [className('inset', modifier)]: {
           top: `${size}`,
           right: `${size}`,
           bottom: `${size}`,
@@ -12,14 +12,14 @@ export default function() {
         },
       }),
       (size, modifier) => ({
-        [`.${e(`inset-y-${modifier}`)}`]: { top: `${size}`, bottom: `${size}` },
-        [`.${e(`inset-x-${modifier}`)}`]: { right: `${size}`, left: `${size}` },
+        [className('inset-y', modifier)]: { top: `${size}`, bottom: `${size}` },
+        [className('inset-x', modifier)]: { right: `${size}`, left: `${size}` },
       }),
       (size, modifier) => ({
-        [`.${e(`top-${modifier}`)}`]: { top: `${size}` },
-        [`.${e(`right-${modifier}`)}`]: { right: `${size}` },
-        [`.${e(`bottom-${modifier}`)}`]: { bottom: `${size}` },
-        [`.${e(`left-${modifier}`)}`]: { left: `${size}` },
+        [className('top', modifier)]: { top: `${size}` },
+        [className('right', modifier)]: { right: `${size}` },
+        [className('bottom', modifier)]: { bottom: `${size}` },
+        [className('left', modifier)]: { left: `${size}` },
       }),
     ]
 
diff --git a/src/plugins/margin.js b/src/plugins/margin.js
index 41d32a9de..65a8f2e23 100644
--- a/src/plugins/margin.js
+++ b/src/plugins/margin.js
@@ -1,30 +1,26 @@
 import _ from 'lodash'
 
-function className(prefix, modifier) {
-  return _.startsWith(modifier, '-') ? `-${prefix}-${modifier.slice(1)}` : `${prefix}-${modifier}`
-}
-
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, className, theme, variants }) {
     const generators = [
       (size, modifier) => ({
-        [`.${e(className('m', modifier))}`]: { margin: `${size}` },
+        [className('m', modifier)]: { margin: `${size}` },
       }),
       (size, modifier) => ({
-        [`.${e(className('my', modifier))}`]: {
+        [className('my', modifier)]: {
           'margin-top': `${size}`,
           'margin-bottom': `${size}`,
         },
-        [`.${e(className('mx', modifier))}`]: {
+        [className('mx', modifier)]: {
           'margin-left': `${size}`,
           'margin-right': `${size}`,
         },
       }),
       (size, modifier) => ({
-        [`.${e(className('mt', modifier))}`]: { 'margin-top': `${size}` },
-        [`.${e(className('mr', modifier))}`]: { 'margin-right': `${size}` },
-        [`.${e(className('mb', modifier))}`]: { 'margin-bottom': `${size}` },
-        [`.${e(className('ml', modifier))}`]: { 'margin-left': `${size}` },
+        [className('mt', modifier)]: { 'margin-top': `${size}` },
+        [className('mr', modifier)]: { 'margin-right': `${size}` },
+        [className('mb', modifier)]: { 'margin-bottom': `${size}` },
+        [className('ml', modifier)]: { 'margin-left': `${size}` },
       }),
     ]
 
diff --git a/src/util/className.js b/src/util/className.js
new file mode 100644
index 000000000..9f417ed2b
--- /dev/null
+++ b/src/util/className.js
@@ -0,0 +1,13 @@
+import _ from 'lodash'
+import escapeClassName from './escapeClassName'
+
+export default function className(base, modifier) {
+  const name = (() => {
+    if (modifier === 'default') {
+      return base
+    }
+    return _.startsWith(modifier, '-') ? `-${base}-${modifier.slice(1)}` : `${base}-${modifier}`
+  })()
+
+  return `.${escapeClassName(name)}`
+}
diff --git a/src/util/processPlugins.js b/src/util/processPlugins.js
index a607e8472..2d6b0bb4c 100644
--- a/src/util/processPlugins.js
+++ b/src/util/processPlugins.js
@@ -2,6 +2,7 @@ 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'
@@ -39,6 +40,7 @@ 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 }
diff --git a/src/util/resolveConfig.js b/src/util/resolveConfig.js
index 30496980f..872dd8c46 100644
--- a/src/util/resolveConfig.js
+++ b/src/util/resolveConfig.js
@@ -5,14 +5,17 @@ import map from 'lodash/map'
 import get from 'lodash/get'
 
 const utils = {
-  negative: function (scale) {
+  negative(scale) {
     return Object.keys(scale)
       .filter(key => scale[key] !== '0')
-      .reduce((negativeScale, key) => ({
-        ...negativeScale,
-        [`-${key}`]: `-${scale[key]}`
-      }), {})
-  }
+      .reduce(
+        (negativeScale, key) => ({
+          ...negativeScale,
+          [`-${key}`]: `-${scale[key]}`,
+        }),
+        {}
+      )
+  },
 }
 
 function value(valueToResolve, ...args) {