Support negative values for inset

Author: adamwathan

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

src/plugins/inset.js

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

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

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)}`
+}

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 }

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) {