Merge pull request tailwindlabs#1584 from tailwindcss/stack-divide-ut…

…ilities

Add `space` and `divide` utilities

__tests__/plugins/divideColor.test.js

@@ -0,0 +1,89 @@
+import invokePlugin from '../util/invokePlugin'
+import plugin from '../../src/plugins/divideColor'
+
+test('generating divide color utilities', () => {
+  const config = {
+    theme: {
+      divideColor: {
+        default: 'orange', // This should be ignored
+        purple: 'purple',
+        white: {
+          25: 'rgba(255,255,255,.25)',
+          50: 'rgba(255,255,255,.5)',
+          75: 'rgba(255,255,255,.75)',
+          default: '#fff',
+        },
+        red: {
+          1: 'rgb(33,0,0)',
+          2: 'rgb(67,0,0)',
+          3: 'rgb(100,0,0)',
+        },
+        green: {
+          1: 'rgb(0,33,0)',
+          2: 'rgb(0,67,0)',
+          3: 'rgb(0,100,0)',
+        },
+        blue: {
+          1: 'rgb(0,0,33)',
+          2: 'rgb(0,0,67)',
+          3: 'rgb(0,0,100)',
+        },
+      },
+    },
+    variants: {
+      divideColor: ['responsive'],
+    },
+  }
+
+  const { utilities } = invokePlugin(plugin(), config)
+
+  expect(utilities).toEqual([
+    [
+      {
+        '.divide-purple > :not(template) ~ :not(template)': {
+          'border-color': 'purple',
+        },
+        '.divide-white-25 > :not(template) ~ :not(template)': {
+          'border-color': 'rgba(255,255,255,.25)',
+        },
+        '.divide-white-50 > :not(template) ~ :not(template)': {
+          'border-color': 'rgba(255,255,255,.5)',
+        },
+        '.divide-white-75 > :not(template) ~ :not(template)': {
+          'border-color': 'rgba(255,255,255,.75)',
+        },
+        '.divide-white > :not(template) ~ :not(template)': {
+          'border-color': '#fff',
+        },
+        '.divide-red-1 > :not(template) ~ :not(template)': {
+          'border-color': 'rgb(33,0,0)',
+        },
+        '.divide-red-2 > :not(template) ~ :not(template)': {
+          'border-color': 'rgb(67,0,0)',
+        },
+        '.divide-red-3 > :not(template) ~ :not(template)': {
+          'border-color': 'rgb(100,0,0)',
+        },
+        '.divide-green-1 > :not(template) ~ :not(template)': {
+          'border-color': 'rgb(0,33,0)',
+        },
+        '.divide-green-2 > :not(template) ~ :not(template)': {
+          'border-color': 'rgb(0,67,0)',
+        },
+        '.divide-green-3 > :not(template) ~ :not(template)': {
+          'border-color': 'rgb(0,100,0)',
+        },
+        '.divide-blue-1 > :not(template) ~ :not(template)': {
+          'border-color': 'rgb(0,0,33)',
+        },
+        '.divide-blue-2 > :not(template) ~ :not(template)': {
+          'border-color': 'rgb(0,0,67)',
+        },
+        '.divide-blue-3 > :not(template) ~ :not(template)': {
+          'border-color': 'rgb(0,0,100)',
+        },
+      },
+      ['responsive'],
+    ],
+  ])
+})

__tests__/plugins/divideWidth.test.js

@@ -0,0 +1,36 @@
+import invokePlugin from '../util/invokePlugin'
+import plugin from '../../src/plugins/divideWidth'
+
+test('generating divide width utilities', () => {
+  const config = {
+    theme: {
+      divideWidth: {
+        default: '1px',
+        '2': '2px',
+        '4': '4px',
+        '8': '8px',
+      },
+    },
+    variants: {
+      divideWidth: ['responsive'],
+    },
+  }
+
+  const { utilities } = invokePlugin(plugin(), config)
+
+  expect(utilities).toEqual([
+    [
+      {
+        '.divide-y-2 > :not(template) ~ :not(template)': { 'border-top-width': '2px' },
+        '.divide-x-2 > :not(template) ~ :not(template)': { 'border-left-width': '2px' },
+        '.divide-y-4 > :not(template) ~ :not(template)': { 'border-top-width': '4px' },
+        '.divide-x-4 > :not(template) ~ :not(template)': { 'border-left-width': '4px' },
+        '.divide-y-8 > :not(template) ~ :not(template)': { 'border-top-width': '8px' },
+        '.divide-x-8 > :not(template) ~ :not(template)': { 'border-left-width': '8px' },
+        '.divide-y > :not(template) ~ :not(template)': { 'border-top-width': '1px' },
+        '.divide-x > :not(template) ~ :not(template)': { 'border-left-width': '1px' },
+      },
+      ['responsive'],
+    ],
+  ])
+})

__tests__/plugins/space.test.js

@@ -0,0 +1,36 @@
+import invokePlugin from '../util/invokePlugin'
+import plugin from '../../src/plugins/space'
+
+test('generating space utilities', () => {
+  const config = {
+    theme: {
+      space: {
+        '1': '1px',
+        '2': '2px',
+        '4': '4px',
+        '8': '8px',
+      },
+    },
+    variants: {
+      space: ['responsive'],
+    },
+  }
+
+  const { utilities } = invokePlugin(plugin(), config)
+
+  expect(utilities).toEqual([
+    [
+      {
+        '.space-y-1 > :not(template) ~ :not(template)': { 'margin-top': '1px' },
+        '.space-x-1 > :not(template) ~ :not(template)': { 'margin-left': '1px' },
+        '.space-y-2 > :not(template) ~ :not(template)': { 'margin-top': '2px' },
+        '.space-x-2 > :not(template) ~ :not(template)': { 'margin-left': '2px' },
+        '.space-y-4 > :not(template) ~ :not(template)': { 'margin-top': '4px' },
+        '.space-x-4 > :not(template) ~ :not(template)': { 'margin-left': '4px' },
+        '.space-y-8 > :not(template) ~ :not(template)': { 'margin-top': '8px' },
+        '.space-x-8 > :not(template) ~ :not(template)': { 'margin-left': '8px' },
+      },
+      ['responsive'],
+    ],
+  ])
+})

__tests__/util/invokePlugin.js

@@ -24,6 +24,9 @@ export default function(plugin, config) {
   plugin(pluginApi)
 
   return {
-    utilities: addedUtilities,
+    utilities: addedUtilities.map(([utilities, variants]) => [
+      _.merge({}, ..._.castArray(utilities)),
+      variants,
+    ]),
   }
 }

src/corePlugins.js

@@ -1,5 +1,8 @@
 import preflight from './plugins/preflight'
 import container from './plugins/container'
+import space from './plugins/space'
+import divideWidth from './plugins/divideWidth'
+import divideColor from './plugins/divideColor'
 import accessibility from './plugins/accessibility'
 import appearance from './plugins/appearance'
 import backgroundAttachment from './plugins/backgroundAttachment'
@@ -96,6 +99,9 @@ export default function({ corePlugins: corePluginConfig }) {
   return configurePlugins(corePluginConfig, {
     preflight,
     container,
+    space,
+    divideWidth,
+    divideColor,
     accessibility,
     appearance,
     backgroundAttachment,

src/plugins/divideColor.js

@@ -0,0 +1,21 @@
+import _ from 'lodash'
+import flattenColorPalette from '../util/flattenColorPalette'
+
+export default function() {
+  return function({ addUtilities, e, theme, variants }) {
+    const colors = flattenColorPalette(theme('divideColor'))
+
+    const utilities = _.fromPairs(
+      _.map(_.omit(colors, 'default'), (value, modifier) => {
+        return [
+          `.${e(`divide-${modifier}`)} > :not(template) ~ :not(template)`,
+          {
+            'border-color': value,
+          },
+        ]
+      })
+    )
+
+    addUtilities(utilities, variants('divideColor'))
+  }
+}

src/plugins/divideWidth.js

@@ -0,0 +1,24 @@
+import _ from 'lodash'
+
+export default function() {
+  return function({ addUtilities, e, theme, variants }) {
+    const generators = [
+      (value, modifier) => ({
+        [`.${e(`divide-y${modifier}`)} > :not(template) ~ :not(template)`]: {
+          'border-top-width': `${value}`,
+        },
+        [`.${e(`divide-x${modifier}`)} > :not(template) ~ :not(template)`]: {
+          'border-left-width': `${value}`,
+        },
+      }),
+    ]
+
+    const utilities = _.flatMap(generators, generator => {
+      return _.flatMap(theme('divideWidth'), (value, modifier) => {
+        return generator(value, modifier === 'default' ? '' : `-${modifier}`)
+      })
+    })
+
+    addUtilities(utilities, variants('divideWidth'))
+  }
+}

src/plugins/space.js

@@ -0,0 +1,22 @@
+import _ from 'lodash'
+
+export default function() {
+  return function({ addUtilities, e, theme, variants }) {
+    const generators = [
+      (size, modifier) => ({
+        [`.${e(`space-y-${modifier}`)} > :not(template) ~ :not(template)`]: {
+          'margin-top': `${size}`,
+        },
+        [`.${e(`space-x-${modifier}`)} > :not(template) ~ :not(template)`]: {
+          'margin-left': `${size}`,
+        },
+      }),
+    ]
+
+    const utilities = _.flatMap(generators, generator => {
+      return _.flatMap(theme('space'), generator)
+    })
+
+    addUtilities(utilities, variants('space'))
+  }
+}

stubs/defaultConfig.stub.js

@@ -206,6 +206,8 @@ module.exports = {
       move: 'move',
       'not-allowed': 'not-allowed',
     },
+    divideColor: theme => theme('borderColor'),
+    divideWidth: theme => theme('borderWidth'),
     fill: {
       current: 'currentColor',
     },
@@ -374,6 +376,7 @@ module.exports = {
     },
     padding: theme => theme('spacing'),
     placeholderColor: theme => theme('colors'),
+    space: theme => theme('spacing'),
     stroke: {
       current: 'currentColor',
     },