Handle default keyword for negative prefix syntax. Write tests for negative prefix syntax

__tests__/plugins/boxShadow.test.js

@@ -0,0 +1,63 @@
+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', () => {
+  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)',
+        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)',
+      },
+    },
+    variants: {
+      boxShadow: ['responsive'],
+    },
+  }
+
+  const getConfigValue = (path, defaultValue) => _.get(config, path, defaultValue)
+  const pluginApi = {
+    config: getConfigValue,
+    e: escapeClassName,
+    theme: (path, defaultValue) => getConfigValue(`theme.${path}`, defaultValue),
+    variants: (path, defaultValue) => {
+      if (_.isArray(config.variants)) {
+        return config.variants
+      }
+
+      return getConfigValue(`variants.${path}`, defaultValue)
+    },
+    addUtilities(utilities, variants) {
+      addedUtilities.push({
+        utilities,
+        variants,
+      })
+    },
+  }
+
+  plugin()(pluginApi)
+
+  expect(addedUtilities).toEqual([
+    {
+      utilities: {
+        '.shadow': {
+          'box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+        },
+        '.shadow-md': {
+          'box-shadow': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+        },
+        '.-shadow': {
+          'box-shadow': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
+        },
+        '.-shadow-md': {
+          'box-shadow': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+        },
+      },
+      variants: ['responsive'],
+    },
+  ])
+})

__tests__/plugins/letterSpacing.test.js

@@ -0,0 +1,55 @@
+import _ from 'lodash'
+import escapeClassName from '../../src/util/escapeClassName'
+import plugin from '../../src/plugins/letterSpacing'
+
+test('letter spacing can use default keyword and negative prefix syntax', () => {
+  const addedUtilities = []
+
+  const config = {
+    theme: {
+      letterSpacing: {
+        '-1': '-0.05em',
+        '-': '-0.025em',
+        default: '0.025em',
+        '1': '0.05em',
+      },
+    },
+    variants: {
+      letterSpacing: ['responsive'],
+    },
+  }
+
+  const getConfigValue = (path, defaultValue) => _.get(config, path, defaultValue)
+  const pluginApi = {
+    config: getConfigValue,
+    e: escapeClassName,
+    theme: (path, defaultValue) => getConfigValue(`theme.${path}`, defaultValue),
+    variants: (path, defaultValue) => {
+      if (_.isArray(config.variants)) {
+        return config.variants
+      }
+
+      return getConfigValue(`variants.${path}`, defaultValue)
+    },
+    addUtilities(utilities, variants) {
+      addedUtilities.push({
+        utilities,
+        variants,
+      })
+    },
+  }
+
+  plugin()(pluginApi)
+
+  expect(addedUtilities).toEqual([
+    {
+      utilities: {
+        '.-tracking-1': { 'letter-spacing': '-0.05em' },
+        '.-tracking': { 'letter-spacing': '-0.025em' },
+        '.tracking': { 'letter-spacing': '0.025em' },
+        '.tracking-1': { 'letter-spacing': '0.05em' },
+      },
+      variants: ['responsive'],
+    },
+  ])
+})

__tests__/plugins/zIndex.test.js

@@ -0,0 +1,55 @@
+import _ from 'lodash'
+import escapeClassName from '../../src/util/escapeClassName'
+import plugin from '../../src/plugins/zIndex'
+
+test('z index can use default keyword and negative prefix syntax', () => {
+  const addedUtilities = []
+
+  const config = {
+    theme: {
+      zIndex: {
+        '-20': '-20',
+        '-': '-10',
+        default: '10',
+        '20': '20',
+      },
+    },
+    variants: {
+      zIndex: ['responsive'],
+    },
+  }
+
+  const getConfigValue = (path, defaultValue) => _.get(config, path, defaultValue)
+  const pluginApi = {
+    config: getConfigValue,
+    e: escapeClassName,
+    theme: (path, defaultValue) => getConfigValue(`theme.${path}`, defaultValue),
+    variants: (path, defaultValue) => {
+      if (_.isArray(config.variants)) {
+        return config.variants
+      }
+
+      return getConfigValue(`variants.${path}`, defaultValue)
+    },
+    addUtilities(utilities, variants) {
+      addedUtilities.push({
+        utilities,
+        variants,
+      })
+    },
+  }
+
+  plugin()(pluginApi)
+
+  expect(addedUtilities).toEqual([
+    {
+      utilities: {
+        '.-z-20': { 'z-index': '-20' },
+        '.-z': { 'z-index': '-10' },
+        '.z': { 'z-index': '10' },
+        '.z-20': { 'z-index': '20' },
+      },
+      variants: ['responsive'],
+    },
+  ])
+})

__tests__/prefixNegativeModifiers.test.js

@@ -0,0 +1,13 @@
+import prefixNegativeModifiers from '../src/util/prefixNegativeModifiers'
+
+test('it does not prefix classes using standard syntax', () => {
+  expect(prefixNegativeModifiers('base', 'modifier')).toEqual('base-modifier')
+})
+
+test('it prefixes classes using negative syntax', () => {
+  expect(prefixNegativeModifiers('base', '-modifier')).toEqual('-base-modifier')
+})
+
+test('it prefixes classes and omits suffix using default negative syntax', () => {
+  expect(prefixNegativeModifiers('base', '-')).toEqual('-base')
+})

src/plugins/boxShadow.js

@@ -5,9 +5,10 @@ export default function() {
   return function({ addUtilities, e, theme, variants }) {
     const utilities = _.fromPairs(
       _.map(theme('boxShadow'), (value, modifier) => {
-        const className = modifier === 'default' ? 'shadow' : `shadow-${modifier}`
+        const className =
+          modifier === 'default' ? 'shadow' : `${e(prefixNegativeModifiers('shadow', modifier))}`
         return [
-          `.${e(prefixNegativeModifiers('shadow', modifier))}`,
+          `.${className}`,
           {
             'box-shadow': value,
           },

src/plugins/letterSpacing.js

@@ -5,8 +5,12 @@ export default function() {
   return function({ addUtilities, theme, variants, e }) {
     const utilities = _.fromPairs(
       _.map(theme('letterSpacing'), (value, modifier) => {
+        const className =
+          modifier === 'default'
+            ? 'tracking'
+            : `${e(prefixNegativeModifiers('tracking', modifier))}`
         return [
-          `.${e(prefixNegativeModifiers('tracking', modifier))}`,
+          `.${className}`,
           {
             'letter-spacing': value,
           },

src/plugins/zIndex.js

@@ -5,8 +5,10 @@ export default function() {
   return function({ addUtilities, e, theme, variants }) {
     const utilities = _.fromPairs(
       _.map(theme('zIndex'), (value, modifier) => {
+        const className =
+          modifier === 'default' ? 'z' : `${e(prefixNegativeModifiers('z', modifier))}`
         return [
-          `.${e(prefixNegativeModifiers('z', modifier))}`,
+          `.${className}`,
           {
             'z-index': value,
           },

src/util/prefixNegativeModifiers.js

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