Merge pull request #992 from AlexVipond/prefixNegativeModifiers_for_boxShadow_and_letterSpacing_and_lineHeight

Support negative prefix syntax for boxShadow and letterSpacing

Author: adamwathan

__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,51 @@
+import _ from 'lodash'
+import escapeClassName from '../../src/util/escapeClassName'
+import plugin from '../../src/plugins/letterSpacing'
+
+test('letter spacing can use negative prefix syntax', () => {
+  const addedUtilities = []
+
+  const config = {
+    theme: {
+      letterSpacing: {
+        '-1': '-0.025em',
+        '1': '0.025em',
+      },
+    },
+    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.025em' },
+        '.tracking-1': { 'letter-spacing': '0.025em' },
+      },
+      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 negative prefix syntax', () => {
+  const addedUtilities = []
+
+  const config = {
+    theme: {
+      zIndex: {
+        '-20': '-20',
+        '-10': '-10',
+        '10': '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-10': { 'z-index': '-10' },
+        '.z-10': { '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

@@ -1,12 +1,14 @@
 import _ from 'lodash'
+import prefixNegativeModifiers from '../util/prefixNegativeModifiers'
 
 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(className)}`,
+          `.${className}`,
           {
             'box-shadow': value,
           },

src/plugins/letterSpacing.js

@@ -1,11 +1,12 @@
 import _ from 'lodash'
+import prefixNegativeModifiers from '../util/prefixNegativeModifiers'
 
 export default function() {
   return function({ addUtilities, theme, variants, e }) {
     const utilities = _.fromPairs(
       _.map(theme('letterSpacing'), (value, modifier) => {
         return [
-          `.${e(`tracking-${modifier}`)}`,
+          `.${e(prefixNegativeModifiers('tracking', modifier))}`,
           {
             'letter-spacing': value,
           },

src/util/prefixNegativeModifiers.js

@@ -1,5 +1,11 @@
 import _ from 'lodash'
 
 export default function prefixNegativeModifiers(base, modifier) {
-  return _.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}`
+  }
 }