From c84c397f0b25c9ff4442359078b5b0dc26988de9 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Thu, 16 Apr 2020 10:45:05 -0400 Subject: [PATCH 1/6] Add stack-x and stack-y utilities --- .../fixtures/tailwind-output-important.css | 152 ++++++++++++++++++ __tests__/fixtures/tailwind-output.css | 152 ++++++++++++++++++ __tests__/plugins/stack.test.js | 44 +++++ src/corePlugins.js | 2 + src/plugins/stack.js | 18 +++ stubs/defaultConfig.stub.js | 1 + 6 files changed, 369 insertions(+) create mode 100644 __tests__/plugins/stack.test.js create mode 100644 src/plugins/stack.js diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index 513c74bd7120..24040287ec06 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -606,6 +606,158 @@ video { } } +.stack-y-0 > * + * { + margin-top: 0 !important; +} + +.stack-x-0 > * + * { + margin-left: 0 !important; +} + +.stack-y-1 > * + * { + margin-top: 0.25rem !important; +} + +.stack-x-1 > * + * { + margin-left: 0.25rem !important; +} + +.stack-y-2 > * + * { + margin-top: 0.5rem !important; +} + +.stack-x-2 > * + * { + margin-left: 0.5rem !important; +} + +.stack-y-3 > * + * { + margin-top: 0.75rem !important; +} + +.stack-x-3 > * + * { + margin-left: 0.75rem !important; +} + +.stack-y-4 > * + * { + margin-top: 1rem !important; +} + +.stack-x-4 > * + * { + margin-left: 1rem !important; +} + +.stack-y-5 > * + * { + margin-top: 1.25rem !important; +} + +.stack-x-5 > * + * { + margin-left: 1.25rem !important; +} + +.stack-y-6 > * + * { + margin-top: 1.5rem !important; +} + +.stack-x-6 > * + * { + margin-left: 1.5rem !important; +} + +.stack-y-8 > * + * { + margin-top: 2rem !important; +} + +.stack-x-8 > * + * { + margin-left: 2rem !important; +} + +.stack-y-10 > * + * { + margin-top: 2.5rem !important; +} + +.stack-x-10 > * + * { + margin-left: 2.5rem !important; +} + +.stack-y-12 > * + * { + margin-top: 3rem !important; +} + +.stack-x-12 > * + * { + margin-left: 3rem !important; +} + +.stack-y-16 > * + * { + margin-top: 4rem !important; +} + +.stack-x-16 > * + * { + margin-left: 4rem !important; +} + +.stack-y-20 > * + * { + margin-top: 5rem !important; +} + +.stack-x-20 > * + * { + margin-left: 5rem !important; +} + +.stack-y-24 > * + * { + margin-top: 6rem !important; +} + +.stack-x-24 > * + * { + margin-left: 6rem !important; +} + +.stack-y-32 > * + * { + margin-top: 8rem !important; +} + +.stack-x-32 > * + * { + margin-left: 8rem !important; +} + +.stack-y-40 > * + * { + margin-top: 10rem !important; +} + +.stack-x-40 > * + * { + margin-left: 10rem !important; +} + +.stack-y-48 > * + * { + margin-top: 12rem !important; +} + +.stack-x-48 > * + * { + margin-left: 12rem !important; +} + +.stack-y-56 > * + * { + margin-top: 14rem !important; +} + +.stack-x-56 > * + * { + margin-left: 14rem !important; +} + +.stack-y-64 > * + * { + margin-top: 16rem !important; +} + +.stack-x-64 > * + * { + margin-left: 16rem !important; +} + +.stack-y-px > * + * { + margin-top: 1px !important; +} + +.stack-x-px > * + * { + margin-left: 1px !important; +} + .sr-only { position: absolute !important; width: 1px !important; diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index 0136ffc83734..a66f47fcc3a9 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -606,6 +606,158 @@ video { } } +.stack-y-0 > * + * { + margin-top: 0; +} + +.stack-x-0 > * + * { + margin-left: 0; +} + +.stack-y-1 > * + * { + margin-top: 0.25rem; +} + +.stack-x-1 > * + * { + margin-left: 0.25rem; +} + +.stack-y-2 > * + * { + margin-top: 0.5rem; +} + +.stack-x-2 > * + * { + margin-left: 0.5rem; +} + +.stack-y-3 > * + * { + margin-top: 0.75rem; +} + +.stack-x-3 > * + * { + margin-left: 0.75rem; +} + +.stack-y-4 > * + * { + margin-top: 1rem; +} + +.stack-x-4 > * + * { + margin-left: 1rem; +} + +.stack-y-5 > * + * { + margin-top: 1.25rem; +} + +.stack-x-5 > * + * { + margin-left: 1.25rem; +} + +.stack-y-6 > * + * { + margin-top: 1.5rem; +} + +.stack-x-6 > * + * { + margin-left: 1.5rem; +} + +.stack-y-8 > * + * { + margin-top: 2rem; +} + +.stack-x-8 > * + * { + margin-left: 2rem; +} + +.stack-y-10 > * + * { + margin-top: 2.5rem; +} + +.stack-x-10 > * + * { + margin-left: 2.5rem; +} + +.stack-y-12 > * + * { + margin-top: 3rem; +} + +.stack-x-12 > * + * { + margin-left: 3rem; +} + +.stack-y-16 > * + * { + margin-top: 4rem; +} + +.stack-x-16 > * + * { + margin-left: 4rem; +} + +.stack-y-20 > * + * { + margin-top: 5rem; +} + +.stack-x-20 > * + * { + margin-left: 5rem; +} + +.stack-y-24 > * + * { + margin-top: 6rem; +} + +.stack-x-24 > * + * { + margin-left: 6rem; +} + +.stack-y-32 > * + * { + margin-top: 8rem; +} + +.stack-x-32 > * + * { + margin-left: 8rem; +} + +.stack-y-40 > * + * { + margin-top: 10rem; +} + +.stack-x-40 > * + * { + margin-left: 10rem; +} + +.stack-y-48 > * + * { + margin-top: 12rem; +} + +.stack-x-48 > * + * { + margin-left: 12rem; +} + +.stack-y-56 > * + * { + margin-top: 14rem; +} + +.stack-x-56 > * + * { + margin-left: 14rem; +} + +.stack-y-64 > * + * { + margin-top: 16rem; +} + +.stack-x-64 > * + * { + margin-left: 16rem; +} + +.stack-y-px > * + * { + margin-top: 1px; +} + +.stack-x-px > * + * { + margin-left: 1px; +} + .sr-only { position: absolute; width: 1px; diff --git a/__tests__/plugins/stack.test.js b/__tests__/plugins/stack.test.js new file mode 100644 index 000000000000..616c51197d57 --- /dev/null +++ b/__tests__/plugins/stack.test.js @@ -0,0 +1,44 @@ +import invokePlugin from '../util/invokePlugin' +import plugin from '../../src/plugins/stack' + +test('generating stack utilities', () => { + const config = { + theme: { + stack: { + '1': '1px', + '2': '2px', + '4': '4px', + '8': '8px', + }, + }, + variants: { + stack: ['responsive'], + }, + } + + const { utilities } = invokePlugin(plugin(), config) + + expect(utilities).toEqual([ + [ + [ + { + '.stack-y-1 > * + *': { 'margin-top': '1px' }, + '.stack-x-1 > * + *': { 'margin-left': '1px' }, + }, + { + '.stack-y-2 > * + *': { 'margin-top': '2px' }, + '.stack-x-2 > * + *': { 'margin-left': '2px' }, + }, + { + '.stack-y-4 > * + *': { 'margin-top': '4px' }, + '.stack-x-4 > * + *': { 'margin-left': '4px' }, + }, + { + '.stack-y-8 > * + *': { 'margin-top': '8px' }, + '.stack-x-8 > * + *': { 'margin-left': '8px' }, + }, + ], + ['responsive'], + ], + ]) +}) diff --git a/src/corePlugins.js b/src/corePlugins.js index ce66a904904b..0cfcac3d7df7 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -1,5 +1,6 @@ import preflight from './plugins/preflight' import container from './plugins/container' +import stack from './plugins/stack' import accessibility from './plugins/accessibility' import appearance from './plugins/appearance' import backgroundAttachment from './plugins/backgroundAttachment' @@ -96,6 +97,7 @@ export default function({ corePlugins: corePluginConfig }) { return configurePlugins(corePluginConfig, { preflight, container, + stack, accessibility, appearance, backgroundAttachment, diff --git a/src/plugins/stack.js b/src/plugins/stack.js new file mode 100644 index 000000000000..dd8195c9d950 --- /dev/null +++ b/src/plugins/stack.js @@ -0,0 +1,18 @@ +import _ from 'lodash' + +export default function() { + return function({ addUtilities, e, theme, variants }) { + const generators = [ + (size, modifier) => ({ + [`.${e(`stack-y-${modifier}`)} > * + *`]: { 'margin-top': `${size}` }, + [`.${e(`stack-x-${modifier}`)} > * + *`]: { 'margin-left': `${size}` }, + }), + ] + + const utilities = _.flatMap(generators, generator => { + return _.flatMap(theme('stack'), generator) + }) + + addUtilities(utilities, variants('stack')) + } +} diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index a1cc24a983f3..b6ad0005a5fd 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -374,6 +374,7 @@ module.exports = { }, padding: theme => theme('spacing'), placeholderColor: theme => theme('colors'), + stack: theme => theme('spacing'), stroke: { current: 'currentColor', }, From b447cd6ccd54b147128d46e5ee9bdf760fd66cdd Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Thu, 16 Apr 2020 10:53:19 -0400 Subject: [PATCH 2/6] Add divideWidth plugin --- .../fixtures/tailwind-output-important.css | 40 +++++++++++++++++ __tests__/fixtures/tailwind-output.css | 40 +++++++++++++++++ __tests__/plugins/divideWidth.test.js | 44 +++++++++++++++++++ src/corePlugins.js | 2 + src/plugins/divideWidth.js | 20 +++++++++ stubs/defaultConfig.stub.js | 1 + 6 files changed, 147 insertions(+) create mode 100644 __tests__/plugins/divideWidth.test.js create mode 100644 src/plugins/divideWidth.js diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index 24040287ec06..f96fc3de2cd8 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -758,6 +758,46 @@ video { margin-left: 1px !important; } +.divide-y-0 > * + * { + border-top-width: 0 !important; +} + +.divide-x-0 > * + * { + border-left-width: 0 !important; +} + +.divide-y-2 > * + * { + border-top-width: 2px !important; +} + +.divide-x-2 > * + * { + border-left-width: 2px !important; +} + +.divide-y-4 > * + * { + border-top-width: 4px !important; +} + +.divide-x-4 > * + * { + border-left-width: 4px !important; +} + +.divide-y-8 > * + * { + border-top-width: 8px !important; +} + +.divide-x-8 > * + * { + border-left-width: 8px !important; +} + +.divide-y > * + * { + border-top-width: 1px !important; +} + +.divide-x > * + * { + border-left-width: 1px !important; +} + .sr-only { position: absolute !important; width: 1px !important; diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index a66f47fcc3a9..a9076ae42ef1 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -758,6 +758,46 @@ video { margin-left: 1px; } +.divide-y-0 > * + * { + border-top-width: 0; +} + +.divide-x-0 > * + * { + border-left-width: 0; +} + +.divide-y-2 > * + * { + border-top-width: 2px; +} + +.divide-x-2 > * + * { + border-left-width: 2px; +} + +.divide-y-4 > * + * { + border-top-width: 4px; +} + +.divide-x-4 > * + * { + border-left-width: 4px; +} + +.divide-y-8 > * + * { + border-top-width: 8px; +} + +.divide-x-8 > * + * { + border-left-width: 8px; +} + +.divide-y > * + * { + border-top-width: 1px; +} + +.divide-x > * + * { + border-left-width: 1px; +} + .sr-only { position: absolute; width: 1px; diff --git a/__tests__/plugins/divideWidth.test.js b/__tests__/plugins/divideWidth.test.js new file mode 100644 index 000000000000..b13cc591d16c --- /dev/null +++ b/__tests__/plugins/divideWidth.test.js @@ -0,0 +1,44 @@ +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 > * + *': { 'border-top-width': '2px' }, + '.divide-x-2 > * + *': { 'border-left-width': '2px' }, + }, + { + '.divide-y-4 > * + *': { 'border-top-width': '4px' }, + '.divide-x-4 > * + *': { 'border-left-width': '4px' }, + }, + { + '.divide-y-8 > * + *': { 'border-top-width': '8px' }, + '.divide-x-8 > * + *': { 'border-left-width': '8px' }, + }, + { + '.divide-y > * + *': { 'border-top-width': '1px' }, + '.divide-x > * + *': { 'border-left-width': '1px' }, + }, + ], + ['responsive'], + ], + ]) +}) diff --git a/src/corePlugins.js b/src/corePlugins.js index 0cfcac3d7df7..5f72a29ae7e7 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -1,6 +1,7 @@ import preflight from './plugins/preflight' import container from './plugins/container' import stack from './plugins/stack' +import divideWidth from './plugins/divideWidth' import accessibility from './plugins/accessibility' import appearance from './plugins/appearance' import backgroundAttachment from './plugins/backgroundAttachment' @@ -98,6 +99,7 @@ export default function({ corePlugins: corePluginConfig }) { preflight, container, stack, + divideWidth, accessibility, appearance, backgroundAttachment, diff --git a/src/plugins/divideWidth.js b/src/plugins/divideWidth.js new file mode 100644 index 000000000000..52a36047a645 --- /dev/null +++ b/src/plugins/divideWidth.js @@ -0,0 +1,20 @@ +import _ from 'lodash' + +export default function() { + return function({ addUtilities, e, theme, variants }) { + const generators = [ + (value, modifier) => ({ + [`.${e(`divide-y${modifier}`)} > * + *`]: { 'border-top-width': `${value}` }, + [`.${e(`divide-x${modifier}`)} > * + *`]: { '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')) + } +} diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index b6ad0005a5fd..ab7dd497b674 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -206,6 +206,7 @@ module.exports = { move: 'move', 'not-allowed': 'not-allowed', }, + divideWidth: theme => theme('borderWidth'), fill: { current: 'currentColor', }, From 3143f20850c1818712b54e298ebb36dea426b688 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Thu, 16 Apr 2020 11:01:24 -0400 Subject: [PATCH 3/6] Add divideColor utilities --- .../fixtures/tailwind-output-important.css | 376 ++++++++++++++++++ __tests__/fixtures/tailwind-output.css | 376 ++++++++++++++++++ __tests__/plugins/divideColor.test.js | 61 +++ src/corePlugins.js | 2 + src/plugins/divideColor.js | 21 + stubs/defaultConfig.stub.js | 1 + 6 files changed, 837 insertions(+) create mode 100644 __tests__/plugins/divideColor.test.js create mode 100644 src/plugins/divideColor.js diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index f96fc3de2cd8..0f9d51eec6e2 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -798,6 +798,382 @@ video { border-left-width: 1px !important; } +.divide-transparent > * + * { + border-color: transparent !important; +} + +.divide-current > * + * { + border-color: currentColor !important; +} + +.divide-black > * + * { + border-color: #000 !important; +} + +.divide-white > * + * { + border-color: #fff !important; +} + +.divide-gray-100 > * + * { + border-color: #f7fafc !important; +} + +.divide-gray-200 > * + * { + border-color: #edf2f7 !important; +} + +.divide-gray-300 > * + * { + border-color: #e2e8f0 !important; +} + +.divide-gray-400 > * + * { + border-color: #cbd5e0 !important; +} + +.divide-gray-500 > * + * { + border-color: #a0aec0 !important; +} + +.divide-gray-600 > * + * { + border-color: #718096 !important; +} + +.divide-gray-700 > * + * { + border-color: #4a5568 !important; +} + +.divide-gray-800 > * + * { + border-color: #2d3748 !important; +} + +.divide-gray-900 > * + * { + border-color: #1a202c !important; +} + +.divide-red-100 > * + * { + border-color: #fff5f5 !important; +} + +.divide-red-200 > * + * { + border-color: #fed7d7 !important; +} + +.divide-red-300 > * + * { + border-color: #feb2b2 !important; +} + +.divide-red-400 > * + * { + border-color: #fc8181 !important; +} + +.divide-red-500 > * + * { + border-color: #f56565 !important; +} + +.divide-red-600 > * + * { + border-color: #e53e3e !important; +} + +.divide-red-700 > * + * { + border-color: #c53030 !important; +} + +.divide-red-800 > * + * { + border-color: #9b2c2c !important; +} + +.divide-red-900 > * + * { + border-color: #742a2a !important; +} + +.divide-orange-100 > * + * { + border-color: #fffaf0 !important; +} + +.divide-orange-200 > * + * { + border-color: #feebc8 !important; +} + +.divide-orange-300 > * + * { + border-color: #fbd38d !important; +} + +.divide-orange-400 > * + * { + border-color: #f6ad55 !important; +} + +.divide-orange-500 > * + * { + border-color: #ed8936 !important; +} + +.divide-orange-600 > * + * { + border-color: #dd6b20 !important; +} + +.divide-orange-700 > * + * { + border-color: #c05621 !important; +} + +.divide-orange-800 > * + * { + border-color: #9c4221 !important; +} + +.divide-orange-900 > * + * { + border-color: #7b341e !important; +} + +.divide-yellow-100 > * + * { + border-color: #fffff0 !important; +} + +.divide-yellow-200 > * + * { + border-color: #fefcbf !important; +} + +.divide-yellow-300 > * + * { + border-color: #faf089 !important; +} + +.divide-yellow-400 > * + * { + border-color: #f6e05e !important; +} + +.divide-yellow-500 > * + * { + border-color: #ecc94b !important; +} + +.divide-yellow-600 > * + * { + border-color: #d69e2e !important; +} + +.divide-yellow-700 > * + * { + border-color: #b7791f !important; +} + +.divide-yellow-800 > * + * { + border-color: #975a16 !important; +} + +.divide-yellow-900 > * + * { + border-color: #744210 !important; +} + +.divide-green-100 > * + * { + border-color: #f0fff4 !important; +} + +.divide-green-200 > * + * { + border-color: #c6f6d5 !important; +} + +.divide-green-300 > * + * { + border-color: #9ae6b4 !important; +} + +.divide-green-400 > * + * { + border-color: #68d391 !important; +} + +.divide-green-500 > * + * { + border-color: #48bb78 !important; +} + +.divide-green-600 > * + * { + border-color: #38a169 !important; +} + +.divide-green-700 > * + * { + border-color: #2f855a !important; +} + +.divide-green-800 > * + * { + border-color: #276749 !important; +} + +.divide-green-900 > * + * { + border-color: #22543d !important; +} + +.divide-teal-100 > * + * { + border-color: #e6fffa !important; +} + +.divide-teal-200 > * + * { + border-color: #b2f5ea !important; +} + +.divide-teal-300 > * + * { + border-color: #81e6d9 !important; +} + +.divide-teal-400 > * + * { + border-color: #4fd1c5 !important; +} + +.divide-teal-500 > * + * { + border-color: #38b2ac !important; +} + +.divide-teal-600 > * + * { + border-color: #319795 !important; +} + +.divide-teal-700 > * + * { + border-color: #2c7a7b !important; +} + +.divide-teal-800 > * + * { + border-color: #285e61 !important; +} + +.divide-teal-900 > * + * { + border-color: #234e52 !important; +} + +.divide-blue-100 > * + * { + border-color: #ebf8ff !important; +} + +.divide-blue-200 > * + * { + border-color: #bee3f8 !important; +} + +.divide-blue-300 > * + * { + border-color: #90cdf4 !important; +} + +.divide-blue-400 > * + * { + border-color: #63b3ed !important; +} + +.divide-blue-500 > * + * { + border-color: #4299e1 !important; +} + +.divide-blue-600 > * + * { + border-color: #3182ce !important; +} + +.divide-blue-700 > * + * { + border-color: #2b6cb0 !important; +} + +.divide-blue-800 > * + * { + border-color: #2c5282 !important; +} + +.divide-blue-900 > * + * { + border-color: #2a4365 !important; +} + +.divide-indigo-100 > * + * { + border-color: #ebf4ff !important; +} + +.divide-indigo-200 > * + * { + border-color: #c3dafe !important; +} + +.divide-indigo-300 > * + * { + border-color: #a3bffa !important; +} + +.divide-indigo-400 > * + * { + border-color: #7f9cf5 !important; +} + +.divide-indigo-500 > * + * { + border-color: #667eea !important; +} + +.divide-indigo-600 > * + * { + border-color: #5a67d8 !important; +} + +.divide-indigo-700 > * + * { + border-color: #4c51bf !important; +} + +.divide-indigo-800 > * + * { + border-color: #434190 !important; +} + +.divide-indigo-900 > * + * { + border-color: #3c366b !important; +} + +.divide-purple-100 > * + * { + border-color: #faf5ff !important; +} + +.divide-purple-200 > * + * { + border-color: #e9d8fd !important; +} + +.divide-purple-300 > * + * { + border-color: #d6bcfa !important; +} + +.divide-purple-400 > * + * { + border-color: #b794f4 !important; +} + +.divide-purple-500 > * + * { + border-color: #9f7aea !important; +} + +.divide-purple-600 > * + * { + border-color: #805ad5 !important; +} + +.divide-purple-700 > * + * { + border-color: #6b46c1 !important; +} + +.divide-purple-800 > * + * { + border-color: #553c9a !important; +} + +.divide-purple-900 > * + * { + border-color: #44337a !important; +} + +.divide-pink-100 > * + * { + border-color: #fff5f7 !important; +} + +.divide-pink-200 > * + * { + border-color: #fed7e2 !important; +} + +.divide-pink-300 > * + * { + border-color: #fbb6ce !important; +} + +.divide-pink-400 > * + * { + border-color: #f687b3 !important; +} + +.divide-pink-500 > * + * { + border-color: #ed64a6 !important; +} + +.divide-pink-600 > * + * { + border-color: #d53f8c !important; +} + +.divide-pink-700 > * + * { + border-color: #b83280 !important; +} + +.divide-pink-800 > * + * { + border-color: #97266d !important; +} + +.divide-pink-900 > * + * { + border-color: #702459 !important; +} + .sr-only { position: absolute !important; width: 1px !important; diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index a9076ae42ef1..b0aac92a48f9 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -798,6 +798,382 @@ video { border-left-width: 1px; } +.divide-transparent > * + * { + border-color: transparent; +} + +.divide-current > * + * { + border-color: currentColor; +} + +.divide-black > * + * { + border-color: #000; +} + +.divide-white > * + * { + border-color: #fff; +} + +.divide-gray-100 > * + * { + border-color: #f7fafc; +} + +.divide-gray-200 > * + * { + border-color: #edf2f7; +} + +.divide-gray-300 > * + * { + border-color: #e2e8f0; +} + +.divide-gray-400 > * + * { + border-color: #cbd5e0; +} + +.divide-gray-500 > * + * { + border-color: #a0aec0; +} + +.divide-gray-600 > * + * { + border-color: #718096; +} + +.divide-gray-700 > * + * { + border-color: #4a5568; +} + +.divide-gray-800 > * + * { + border-color: #2d3748; +} + +.divide-gray-900 > * + * { + border-color: #1a202c; +} + +.divide-red-100 > * + * { + border-color: #fff5f5; +} + +.divide-red-200 > * + * { + border-color: #fed7d7; +} + +.divide-red-300 > * + * { + border-color: #feb2b2; +} + +.divide-red-400 > * + * { + border-color: #fc8181; +} + +.divide-red-500 > * + * { + border-color: #f56565; +} + +.divide-red-600 > * + * { + border-color: #e53e3e; +} + +.divide-red-700 > * + * { + border-color: #c53030; +} + +.divide-red-800 > * + * { + border-color: #9b2c2c; +} + +.divide-red-900 > * + * { + border-color: #742a2a; +} + +.divide-orange-100 > * + * { + border-color: #fffaf0; +} + +.divide-orange-200 > * + * { + border-color: #feebc8; +} + +.divide-orange-300 > * + * { + border-color: #fbd38d; +} + +.divide-orange-400 > * + * { + border-color: #f6ad55; +} + +.divide-orange-500 > * + * { + border-color: #ed8936; +} + +.divide-orange-600 > * + * { + border-color: #dd6b20; +} + +.divide-orange-700 > * + * { + border-color: #c05621; +} + +.divide-orange-800 > * + * { + border-color: #9c4221; +} + +.divide-orange-900 > * + * { + border-color: #7b341e; +} + +.divide-yellow-100 > * + * { + border-color: #fffff0; +} + +.divide-yellow-200 > * + * { + border-color: #fefcbf; +} + +.divide-yellow-300 > * + * { + border-color: #faf089; +} + +.divide-yellow-400 > * + * { + border-color: #f6e05e; +} + +.divide-yellow-500 > * + * { + border-color: #ecc94b; +} + +.divide-yellow-600 > * + * { + border-color: #d69e2e; +} + +.divide-yellow-700 > * + * { + border-color: #b7791f; +} + +.divide-yellow-800 > * + * { + border-color: #975a16; +} + +.divide-yellow-900 > * + * { + border-color: #744210; +} + +.divide-green-100 > * + * { + border-color: #f0fff4; +} + +.divide-green-200 > * + * { + border-color: #c6f6d5; +} + +.divide-green-300 > * + * { + border-color: #9ae6b4; +} + +.divide-green-400 > * + * { + border-color: #68d391; +} + +.divide-green-500 > * + * { + border-color: #48bb78; +} + +.divide-green-600 > * + * { + border-color: #38a169; +} + +.divide-green-700 > * + * { + border-color: #2f855a; +} + +.divide-green-800 > * + * { + border-color: #276749; +} + +.divide-green-900 > * + * { + border-color: #22543d; +} + +.divide-teal-100 > * + * { + border-color: #e6fffa; +} + +.divide-teal-200 > * + * { + border-color: #b2f5ea; +} + +.divide-teal-300 > * + * { + border-color: #81e6d9; +} + +.divide-teal-400 > * + * { + border-color: #4fd1c5; +} + +.divide-teal-500 > * + * { + border-color: #38b2ac; +} + +.divide-teal-600 > * + * { + border-color: #319795; +} + +.divide-teal-700 > * + * { + border-color: #2c7a7b; +} + +.divide-teal-800 > * + * { + border-color: #285e61; +} + +.divide-teal-900 > * + * { + border-color: #234e52; +} + +.divide-blue-100 > * + * { + border-color: #ebf8ff; +} + +.divide-blue-200 > * + * { + border-color: #bee3f8; +} + +.divide-blue-300 > * + * { + border-color: #90cdf4; +} + +.divide-blue-400 > * + * { + border-color: #63b3ed; +} + +.divide-blue-500 > * + * { + border-color: #4299e1; +} + +.divide-blue-600 > * + * { + border-color: #3182ce; +} + +.divide-blue-700 > * + * { + border-color: #2b6cb0; +} + +.divide-blue-800 > * + * { + border-color: #2c5282; +} + +.divide-blue-900 > * + * { + border-color: #2a4365; +} + +.divide-indigo-100 > * + * { + border-color: #ebf4ff; +} + +.divide-indigo-200 > * + * { + border-color: #c3dafe; +} + +.divide-indigo-300 > * + * { + border-color: #a3bffa; +} + +.divide-indigo-400 > * + * { + border-color: #7f9cf5; +} + +.divide-indigo-500 > * + * { + border-color: #667eea; +} + +.divide-indigo-600 > * + * { + border-color: #5a67d8; +} + +.divide-indigo-700 > * + * { + border-color: #4c51bf; +} + +.divide-indigo-800 > * + * { + border-color: #434190; +} + +.divide-indigo-900 > * + * { + border-color: #3c366b; +} + +.divide-purple-100 > * + * { + border-color: #faf5ff; +} + +.divide-purple-200 > * + * { + border-color: #e9d8fd; +} + +.divide-purple-300 > * + * { + border-color: #d6bcfa; +} + +.divide-purple-400 > * + * { + border-color: #b794f4; +} + +.divide-purple-500 > * + * { + border-color: #9f7aea; +} + +.divide-purple-600 > * + * { + border-color: #805ad5; +} + +.divide-purple-700 > * + * { + border-color: #6b46c1; +} + +.divide-purple-800 > * + * { + border-color: #553c9a; +} + +.divide-purple-900 > * + * { + border-color: #44337a; +} + +.divide-pink-100 > * + * { + border-color: #fff5f7; +} + +.divide-pink-200 > * + * { + border-color: #fed7e2; +} + +.divide-pink-300 > * + * { + border-color: #fbb6ce; +} + +.divide-pink-400 > * + * { + border-color: #f687b3; +} + +.divide-pink-500 > * + * { + border-color: #ed64a6; +} + +.divide-pink-600 > * + * { + border-color: #d53f8c; +} + +.divide-pink-700 > * + * { + border-color: #b83280; +} + +.divide-pink-800 > * + * { + border-color: #97266d; +} + +.divide-pink-900 > * + * { + border-color: #702459; +} + .sr-only { position: absolute; width: 1px; diff --git a/__tests__/plugins/divideColor.test.js b/__tests__/plugins/divideColor.test.js new file mode 100644 index 000000000000..8d73795400a2 --- /dev/null +++ b/__tests__/plugins/divideColor.test.js @@ -0,0 +1,61 @@ +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 > * + *': { 'border-color': 'purple' }, + '.divide-white-25 > * + *': { 'border-color': 'rgba(255,255,255,.25)' }, + '.divide-white-50 > * + *': { 'border-color': 'rgba(255,255,255,.5)' }, + '.divide-white-75 > * + *': { 'border-color': 'rgba(255,255,255,.75)' }, + '.divide-white > * + *': { 'border-color': '#fff' }, + '.divide-red-1 > * + *': { 'border-color': 'rgb(33,0,0)' }, + '.divide-red-2 > * + *': { 'border-color': 'rgb(67,0,0)' }, + '.divide-red-3 > * + *': { 'border-color': 'rgb(100,0,0)' }, + '.divide-green-1 > * + *': { 'border-color': 'rgb(0,33,0)' }, + '.divide-green-2 > * + *': { 'border-color': 'rgb(0,67,0)' }, + '.divide-green-3 > * + *': { 'border-color': 'rgb(0,100,0)' }, + '.divide-blue-1 > * + *': { 'border-color': 'rgb(0,0,33)' }, + '.divide-blue-2 > * + *': { 'border-color': 'rgb(0,0,67)' }, + '.divide-blue-3 > * + *': { 'border-color': 'rgb(0,0,100)' }, + }, + ['responsive'], + ], + ]) +}) diff --git a/src/corePlugins.js b/src/corePlugins.js index 5f72a29ae7e7..75d4d25696fb 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -2,6 +2,7 @@ import preflight from './plugins/preflight' import container from './plugins/container' import stack from './plugins/stack' 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' @@ -100,6 +101,7 @@ export default function({ corePlugins: corePluginConfig }) { container, stack, divideWidth, + divideColor, accessibility, appearance, backgroundAttachment, diff --git a/src/plugins/divideColor.js b/src/plugins/divideColor.js new file mode 100644 index 000000000000..e76c8f65353c --- /dev/null +++ b/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}`)} > * + *`, + { + 'border-color': value, + }, + ] + }) + ) + + addUtilities(utilities, variants('divideColor')) + } +} diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index ab7dd497b674..4ac22ad96581 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -206,6 +206,7 @@ module.exports = { move: 'move', 'not-allowed': 'not-allowed', }, + divideColor: theme => theme('borderColor'), divideWidth: theme => theme('borderWidth'), fill: { current: 'currentColor', From a6f5137a73afc214c222198221116242cc7ceab0 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Thu, 16 Apr 2020 12:43:22 -0400 Subject: [PATCH 4/6] Rename stack to space, make invokePlugin output consistent --- .../fixtures/tailwind-output-important.css | 76 +++++++++---------- __tests__/fixtures/tailwind-output.css | 76 +++++++++---------- __tests__/plugins/divideWidth.test.js | 28 +++---- __tests__/plugins/space.test.js | 36 +++++++++ __tests__/plugins/stack.test.js | 44 ----------- __tests__/util/invokePlugin.js | 5 +- src/corePlugins.js | 4 +- src/plugins/{stack.js => space.js} | 8 +- stubs/defaultConfig.stub.js | 2 +- 9 files changed, 133 insertions(+), 146 deletions(-) create mode 100644 __tests__/plugins/space.test.js delete mode 100644 __tests__/plugins/stack.test.js rename src/plugins/{stack.js => space.js} (55%) diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index 0f9d51eec6e2..871f9d18aade 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -606,155 +606,155 @@ video { } } -.stack-y-0 > * + * { +.space-y-0 > * + * { margin-top: 0 !important; } -.stack-x-0 > * + * { +.space-x-0 > * + * { margin-left: 0 !important; } -.stack-y-1 > * + * { +.space-y-1 > * + * { margin-top: 0.25rem !important; } -.stack-x-1 > * + * { +.space-x-1 > * + * { margin-left: 0.25rem !important; } -.stack-y-2 > * + * { +.space-y-2 > * + * { margin-top: 0.5rem !important; } -.stack-x-2 > * + * { +.space-x-2 > * + * { margin-left: 0.5rem !important; } -.stack-y-3 > * + * { +.space-y-3 > * + * { margin-top: 0.75rem !important; } -.stack-x-3 > * + * { +.space-x-3 > * + * { margin-left: 0.75rem !important; } -.stack-y-4 > * + * { +.space-y-4 > * + * { margin-top: 1rem !important; } -.stack-x-4 > * + * { +.space-x-4 > * + * { margin-left: 1rem !important; } -.stack-y-5 > * + * { +.space-y-5 > * + * { margin-top: 1.25rem !important; } -.stack-x-5 > * + * { +.space-x-5 > * + * { margin-left: 1.25rem !important; } -.stack-y-6 > * + * { +.space-y-6 > * + * { margin-top: 1.5rem !important; } -.stack-x-6 > * + * { +.space-x-6 > * + * { margin-left: 1.5rem !important; } -.stack-y-8 > * + * { +.space-y-8 > * + * { margin-top: 2rem !important; } -.stack-x-8 > * + * { +.space-x-8 > * + * { margin-left: 2rem !important; } -.stack-y-10 > * + * { +.space-y-10 > * + * { margin-top: 2.5rem !important; } -.stack-x-10 > * + * { +.space-x-10 > * + * { margin-left: 2.5rem !important; } -.stack-y-12 > * + * { +.space-y-12 > * + * { margin-top: 3rem !important; } -.stack-x-12 > * + * { +.space-x-12 > * + * { margin-left: 3rem !important; } -.stack-y-16 > * + * { +.space-y-16 > * + * { margin-top: 4rem !important; } -.stack-x-16 > * + * { +.space-x-16 > * + * { margin-left: 4rem !important; } -.stack-y-20 > * + * { +.space-y-20 > * + * { margin-top: 5rem !important; } -.stack-x-20 > * + * { +.space-x-20 > * + * { margin-left: 5rem !important; } -.stack-y-24 > * + * { +.space-y-24 > * + * { margin-top: 6rem !important; } -.stack-x-24 > * + * { +.space-x-24 > * + * { margin-left: 6rem !important; } -.stack-y-32 > * + * { +.space-y-32 > * + * { margin-top: 8rem !important; } -.stack-x-32 > * + * { +.space-x-32 > * + * { margin-left: 8rem !important; } -.stack-y-40 > * + * { +.space-y-40 > * + * { margin-top: 10rem !important; } -.stack-x-40 > * + * { +.space-x-40 > * + * { margin-left: 10rem !important; } -.stack-y-48 > * + * { +.space-y-48 > * + * { margin-top: 12rem !important; } -.stack-x-48 > * + * { +.space-x-48 > * + * { margin-left: 12rem !important; } -.stack-y-56 > * + * { +.space-y-56 > * + * { margin-top: 14rem !important; } -.stack-x-56 > * + * { +.space-x-56 > * + * { margin-left: 14rem !important; } -.stack-y-64 > * + * { +.space-y-64 > * + * { margin-top: 16rem !important; } -.stack-x-64 > * + * { +.space-x-64 > * + * { margin-left: 16rem !important; } -.stack-y-px > * + * { +.space-y-px > * + * { margin-top: 1px !important; } -.stack-x-px > * + * { +.space-x-px > * + * { margin-left: 1px !important; } diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index b0aac92a48f9..29e2e031e10c 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -606,155 +606,155 @@ video { } } -.stack-y-0 > * + * { +.space-y-0 > * + * { margin-top: 0; } -.stack-x-0 > * + * { +.space-x-0 > * + * { margin-left: 0; } -.stack-y-1 > * + * { +.space-y-1 > * + * { margin-top: 0.25rem; } -.stack-x-1 > * + * { +.space-x-1 > * + * { margin-left: 0.25rem; } -.stack-y-2 > * + * { +.space-y-2 > * + * { margin-top: 0.5rem; } -.stack-x-2 > * + * { +.space-x-2 > * + * { margin-left: 0.5rem; } -.stack-y-3 > * + * { +.space-y-3 > * + * { margin-top: 0.75rem; } -.stack-x-3 > * + * { +.space-x-3 > * + * { margin-left: 0.75rem; } -.stack-y-4 > * + * { +.space-y-4 > * + * { margin-top: 1rem; } -.stack-x-4 > * + * { +.space-x-4 > * + * { margin-left: 1rem; } -.stack-y-5 > * + * { +.space-y-5 > * + * { margin-top: 1.25rem; } -.stack-x-5 > * + * { +.space-x-5 > * + * { margin-left: 1.25rem; } -.stack-y-6 > * + * { +.space-y-6 > * + * { margin-top: 1.5rem; } -.stack-x-6 > * + * { +.space-x-6 > * + * { margin-left: 1.5rem; } -.stack-y-8 > * + * { +.space-y-8 > * + * { margin-top: 2rem; } -.stack-x-8 > * + * { +.space-x-8 > * + * { margin-left: 2rem; } -.stack-y-10 > * + * { +.space-y-10 > * + * { margin-top: 2.5rem; } -.stack-x-10 > * + * { +.space-x-10 > * + * { margin-left: 2.5rem; } -.stack-y-12 > * + * { +.space-y-12 > * + * { margin-top: 3rem; } -.stack-x-12 > * + * { +.space-x-12 > * + * { margin-left: 3rem; } -.stack-y-16 > * + * { +.space-y-16 > * + * { margin-top: 4rem; } -.stack-x-16 > * + * { +.space-x-16 > * + * { margin-left: 4rem; } -.stack-y-20 > * + * { +.space-y-20 > * + * { margin-top: 5rem; } -.stack-x-20 > * + * { +.space-x-20 > * + * { margin-left: 5rem; } -.stack-y-24 > * + * { +.space-y-24 > * + * { margin-top: 6rem; } -.stack-x-24 > * + * { +.space-x-24 > * + * { margin-left: 6rem; } -.stack-y-32 > * + * { +.space-y-32 > * + * { margin-top: 8rem; } -.stack-x-32 > * + * { +.space-x-32 > * + * { margin-left: 8rem; } -.stack-y-40 > * + * { +.space-y-40 > * + * { margin-top: 10rem; } -.stack-x-40 > * + * { +.space-x-40 > * + * { margin-left: 10rem; } -.stack-y-48 > * + * { +.space-y-48 > * + * { margin-top: 12rem; } -.stack-x-48 > * + * { +.space-x-48 > * + * { margin-left: 12rem; } -.stack-y-56 > * + * { +.space-y-56 > * + * { margin-top: 14rem; } -.stack-x-56 > * + * { +.space-x-56 > * + * { margin-left: 14rem; } -.stack-y-64 > * + * { +.space-y-64 > * + * { margin-top: 16rem; } -.stack-x-64 > * + * { +.space-x-64 > * + * { margin-left: 16rem; } -.stack-y-px > * + * { +.space-y-px > * + * { margin-top: 1px; } -.stack-x-px > * + * { +.space-x-px > * + * { margin-left: 1px; } diff --git a/__tests__/plugins/divideWidth.test.js b/__tests__/plugins/divideWidth.test.js index b13cc591d16c..b9f9b9b06ce3 100644 --- a/__tests__/plugins/divideWidth.test.js +++ b/__tests__/plugins/divideWidth.test.js @@ -20,24 +20,16 @@ test('generating divide width utilities', () => { expect(utilities).toEqual([ [ - [ - { - '.divide-y-2 > * + *': { 'border-top-width': '2px' }, - '.divide-x-2 > * + *': { 'border-left-width': '2px' }, - }, - { - '.divide-y-4 > * + *': { 'border-top-width': '4px' }, - '.divide-x-4 > * + *': { 'border-left-width': '4px' }, - }, - { - '.divide-y-8 > * + *': { 'border-top-width': '8px' }, - '.divide-x-8 > * + *': { 'border-left-width': '8px' }, - }, - { - '.divide-y > * + *': { 'border-top-width': '1px' }, - '.divide-x > * + *': { 'border-left-width': '1px' }, - }, - ], + { + '.divide-y-2 > * + *': { 'border-top-width': '2px' }, + '.divide-x-2 > * + *': { 'border-left-width': '2px' }, + '.divide-y-4 > * + *': { 'border-top-width': '4px' }, + '.divide-x-4 > * + *': { 'border-left-width': '4px' }, + '.divide-y-8 > * + *': { 'border-top-width': '8px' }, + '.divide-x-8 > * + *': { 'border-left-width': '8px' }, + '.divide-y > * + *': { 'border-top-width': '1px' }, + '.divide-x > * + *': { 'border-left-width': '1px' }, + }, ['responsive'], ], ]) diff --git a/__tests__/plugins/space.test.js b/__tests__/plugins/space.test.js new file mode 100644 index 000000000000..2b8d70f580eb --- /dev/null +++ b/__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 > * + *': { 'margin-top': '1px' }, + '.space-x-1 > * + *': { 'margin-left': '1px' }, + '.space-y-2 > * + *': { 'margin-top': '2px' }, + '.space-x-2 > * + *': { 'margin-left': '2px' }, + '.space-y-4 > * + *': { 'margin-top': '4px' }, + '.space-x-4 > * + *': { 'margin-left': '4px' }, + '.space-y-8 > * + *': { 'margin-top': '8px' }, + '.space-x-8 > * + *': { 'margin-left': '8px' }, + }, + ['responsive'], + ], + ]) +}) diff --git a/__tests__/plugins/stack.test.js b/__tests__/plugins/stack.test.js deleted file mode 100644 index 616c51197d57..000000000000 --- a/__tests__/plugins/stack.test.js +++ /dev/null @@ -1,44 +0,0 @@ -import invokePlugin from '../util/invokePlugin' -import plugin from '../../src/plugins/stack' - -test('generating stack utilities', () => { - const config = { - theme: { - stack: { - '1': '1px', - '2': '2px', - '4': '4px', - '8': '8px', - }, - }, - variants: { - stack: ['responsive'], - }, - } - - const { utilities } = invokePlugin(plugin(), config) - - expect(utilities).toEqual([ - [ - [ - { - '.stack-y-1 > * + *': { 'margin-top': '1px' }, - '.stack-x-1 > * + *': { 'margin-left': '1px' }, - }, - { - '.stack-y-2 > * + *': { 'margin-top': '2px' }, - '.stack-x-2 > * + *': { 'margin-left': '2px' }, - }, - { - '.stack-y-4 > * + *': { 'margin-top': '4px' }, - '.stack-x-4 > * + *': { 'margin-left': '4px' }, - }, - { - '.stack-y-8 > * + *': { 'margin-top': '8px' }, - '.stack-x-8 > * + *': { 'margin-left': '8px' }, - }, - ], - ['responsive'], - ], - ]) -}) diff --git a/__tests__/util/invokePlugin.js b/__tests__/util/invokePlugin.js index a2ed90c92814..5b417d23f620 100644 --- a/__tests__/util/invokePlugin.js +++ b/__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, + ]), } } diff --git a/src/corePlugins.js b/src/corePlugins.js index 75d4d25696fb..9f5a3077191f 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -1,6 +1,6 @@ import preflight from './plugins/preflight' import container from './plugins/container' -import stack from './plugins/stack' +import space from './plugins/space' import divideWidth from './plugins/divideWidth' import divideColor from './plugins/divideColor' import accessibility from './plugins/accessibility' @@ -99,7 +99,7 @@ export default function({ corePlugins: corePluginConfig }) { return configurePlugins(corePluginConfig, { preflight, container, - stack, + space, divideWidth, divideColor, accessibility, diff --git a/src/plugins/stack.js b/src/plugins/space.js similarity index 55% rename from src/plugins/stack.js rename to src/plugins/space.js index dd8195c9d950..618dd2797fc2 100644 --- a/src/plugins/stack.js +++ b/src/plugins/space.js @@ -4,15 +4,15 @@ export default function() { return function({ addUtilities, e, theme, variants }) { const generators = [ (size, modifier) => ({ - [`.${e(`stack-y-${modifier}`)} > * + *`]: { 'margin-top': `${size}` }, - [`.${e(`stack-x-${modifier}`)} > * + *`]: { 'margin-left': `${size}` }, + [`.${e(`space-y-${modifier}`)} > * + *`]: { 'margin-top': `${size}` }, + [`.${e(`space-x-${modifier}`)} > * + *`]: { 'margin-left': `${size}` }, }), ] const utilities = _.flatMap(generators, generator => { - return _.flatMap(theme('stack'), generator) + return _.flatMap(theme('space'), generator) }) - addUtilities(utilities, variants('stack')) + addUtilities(utilities, variants('space')) } } diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 4ac22ad96581..acdbe7c4c13d 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -376,7 +376,7 @@ module.exports = { }, padding: theme => theme('spacing'), placeholderColor: theme => theme('colors'), - stack: theme => theme('spacing'), + space: theme => theme('spacing'), stroke: { current: 'currentColor', }, From b7e0f11d5d1b3ec74152be990e455eeebafb5aa0 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Thu, 16 Apr 2020 16:05:20 -0400 Subject: [PATCH 5/6] Switch to not(last-child) instead of owl For Alpine.js compatibility, sad because it increases the specificity but I don't think it will actually be a problem at all in real projects. --- .../fixtures/tailwind-output-important.css | 380 +++++++++--------- __tests__/fixtures/tailwind-output.css | 380 +++++++++--------- src/plugins/divideColor.js | 2 +- src/plugins/divideWidth.js | 4 +- src/plugins/space.js | 4 +- 5 files changed, 385 insertions(+), 385 deletions(-) diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index 871f9d18aade..fdfb075c6390 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -606,571 +606,571 @@ video { } } -.space-y-0 > * + * { - margin-top: 0 !important; +.space-y-0 > :not(:last-child) { + margin-bottom: 0 !important; } -.space-x-0 > * + * { - margin-left: 0 !important; +.space-x-0 > :not(:last-child) { + margin-right: 0 !important; } -.space-y-1 > * + * { - margin-top: 0.25rem !important; +.space-y-1 > :not(:last-child) { + margin-bottom: 0.25rem !important; } -.space-x-1 > * + * { - margin-left: 0.25rem !important; +.space-x-1 > :not(:last-child) { + margin-right: 0.25rem !important; } -.space-y-2 > * + * { - margin-top: 0.5rem !important; +.space-y-2 > :not(:last-child) { + margin-bottom: 0.5rem !important; } -.space-x-2 > * + * { - margin-left: 0.5rem !important; +.space-x-2 > :not(:last-child) { + margin-right: 0.5rem !important; } -.space-y-3 > * + * { - margin-top: 0.75rem !important; +.space-y-3 > :not(:last-child) { + margin-bottom: 0.75rem !important; } -.space-x-3 > * + * { - margin-left: 0.75rem !important; +.space-x-3 > :not(:last-child) { + margin-right: 0.75rem !important; } -.space-y-4 > * + * { - margin-top: 1rem !important; +.space-y-4 > :not(:last-child) { + margin-bottom: 1rem !important; } -.space-x-4 > * + * { - margin-left: 1rem !important; +.space-x-4 > :not(:last-child) { + margin-right: 1rem !important; } -.space-y-5 > * + * { - margin-top: 1.25rem !important; +.space-y-5 > :not(:last-child) { + margin-bottom: 1.25rem !important; } -.space-x-5 > * + * { - margin-left: 1.25rem !important; +.space-x-5 > :not(:last-child) { + margin-right: 1.25rem !important; } -.space-y-6 > * + * { - margin-top: 1.5rem !important; +.space-y-6 > :not(:last-child) { + margin-bottom: 1.5rem !important; } -.space-x-6 > * + * { - margin-left: 1.5rem !important; +.space-x-6 > :not(:last-child) { + margin-right: 1.5rem !important; } -.space-y-8 > * + * { - margin-top: 2rem !important; +.space-y-8 > :not(:last-child) { + margin-bottom: 2rem !important; } -.space-x-8 > * + * { - margin-left: 2rem !important; +.space-x-8 > :not(:last-child) { + margin-right: 2rem !important; } -.space-y-10 > * + * { - margin-top: 2.5rem !important; +.space-y-10 > :not(:last-child) { + margin-bottom: 2.5rem !important; } -.space-x-10 > * + * { - margin-left: 2.5rem !important; +.space-x-10 > :not(:last-child) { + margin-right: 2.5rem !important; } -.space-y-12 > * + * { - margin-top: 3rem !important; +.space-y-12 > :not(:last-child) { + margin-bottom: 3rem !important; } -.space-x-12 > * + * { - margin-left: 3rem !important; +.space-x-12 > :not(:last-child) { + margin-right: 3rem !important; } -.space-y-16 > * + * { - margin-top: 4rem !important; +.space-y-16 > :not(:last-child) { + margin-bottom: 4rem !important; } -.space-x-16 > * + * { - margin-left: 4rem !important; +.space-x-16 > :not(:last-child) { + margin-right: 4rem !important; } -.space-y-20 > * + * { - margin-top: 5rem !important; +.space-y-20 > :not(:last-child) { + margin-bottom: 5rem !important; } -.space-x-20 > * + * { - margin-left: 5rem !important; +.space-x-20 > :not(:last-child) { + margin-right: 5rem !important; } -.space-y-24 > * + * { - margin-top: 6rem !important; +.space-y-24 > :not(:last-child) { + margin-bottom: 6rem !important; } -.space-x-24 > * + * { - margin-left: 6rem !important; +.space-x-24 > :not(:last-child) { + margin-right: 6rem !important; } -.space-y-32 > * + * { - margin-top: 8rem !important; +.space-y-32 > :not(:last-child) { + margin-bottom: 8rem !important; } -.space-x-32 > * + * { - margin-left: 8rem !important; +.space-x-32 > :not(:last-child) { + margin-right: 8rem !important; } -.space-y-40 > * + * { - margin-top: 10rem !important; +.space-y-40 > :not(:last-child) { + margin-bottom: 10rem !important; } -.space-x-40 > * + * { - margin-left: 10rem !important; +.space-x-40 > :not(:last-child) { + margin-right: 10rem !important; } -.space-y-48 > * + * { - margin-top: 12rem !important; +.space-y-48 > :not(:last-child) { + margin-bottom: 12rem !important; } -.space-x-48 > * + * { - margin-left: 12rem !important; +.space-x-48 > :not(:last-child) { + margin-right: 12rem !important; } -.space-y-56 > * + * { - margin-top: 14rem !important; +.space-y-56 > :not(:last-child) { + margin-bottom: 14rem !important; } -.space-x-56 > * + * { - margin-left: 14rem !important; +.space-x-56 > :not(:last-child) { + margin-right: 14rem !important; } -.space-y-64 > * + * { - margin-top: 16rem !important; +.space-y-64 > :not(:last-child) { + margin-bottom: 16rem !important; } -.space-x-64 > * + * { - margin-left: 16rem !important; +.space-x-64 > :not(:last-child) { + margin-right: 16rem !important; } -.space-y-px > * + * { - margin-top: 1px !important; +.space-y-px > :not(:last-child) { + margin-bottom: 1px !important; } -.space-x-px > * + * { - margin-left: 1px !important; +.space-x-px > :not(:last-child) { + margin-right: 1px !important; } -.divide-y-0 > * + * { - border-top-width: 0 !important; +.divide-y-0 > :not(:last-child) { + border-bottom-width: 0 !important; } -.divide-x-0 > * + * { - border-left-width: 0 !important; +.divide-x-0 > :not(:last-child) { + border-right-width: 0 !important; } -.divide-y-2 > * + * { - border-top-width: 2px !important; +.divide-y-2 > :not(:last-child) { + border-bottom-width: 2px !important; } -.divide-x-2 > * + * { - border-left-width: 2px !important; +.divide-x-2 > :not(:last-child) { + border-right-width: 2px !important; } -.divide-y-4 > * + * { - border-top-width: 4px !important; +.divide-y-4 > :not(:last-child) { + border-bottom-width: 4px !important; } -.divide-x-4 > * + * { - border-left-width: 4px !important; +.divide-x-4 > :not(:last-child) { + border-right-width: 4px !important; } -.divide-y-8 > * + * { - border-top-width: 8px !important; +.divide-y-8 > :not(:last-child) { + border-bottom-width: 8px !important; } -.divide-x-8 > * + * { - border-left-width: 8px !important; +.divide-x-8 > :not(:last-child) { + border-right-width: 8px !important; } -.divide-y > * + * { - border-top-width: 1px !important; +.divide-y > :not(:last-child) { + border-bottom-width: 1px !important; } -.divide-x > * + * { - border-left-width: 1px !important; +.divide-x > :not(:last-child) { + border-right-width: 1px !important; } -.divide-transparent > * + * { +.divide-transparent > :not(:last-child) { border-color: transparent !important; } -.divide-current > * + * { +.divide-current > :not(:last-child) { border-color: currentColor !important; } -.divide-black > * + * { +.divide-black > :not(:last-child) { border-color: #000 !important; } -.divide-white > * + * { +.divide-white > :not(:last-child) { border-color: #fff !important; } -.divide-gray-100 > * + * { +.divide-gray-100 > :not(:last-child) { border-color: #f7fafc !important; } -.divide-gray-200 > * + * { +.divide-gray-200 > :not(:last-child) { border-color: #edf2f7 !important; } -.divide-gray-300 > * + * { +.divide-gray-300 > :not(:last-child) { border-color: #e2e8f0 !important; } -.divide-gray-400 > * + * { +.divide-gray-400 > :not(:last-child) { border-color: #cbd5e0 !important; } -.divide-gray-500 > * + * { +.divide-gray-500 > :not(:last-child) { border-color: #a0aec0 !important; } -.divide-gray-600 > * + * { +.divide-gray-600 > :not(:last-child) { border-color: #718096 !important; } -.divide-gray-700 > * + * { +.divide-gray-700 > :not(:last-child) { border-color: #4a5568 !important; } -.divide-gray-800 > * + * { +.divide-gray-800 > :not(:last-child) { border-color: #2d3748 !important; } -.divide-gray-900 > * + * { +.divide-gray-900 > :not(:last-child) { border-color: #1a202c !important; } -.divide-red-100 > * + * { +.divide-red-100 > :not(:last-child) { border-color: #fff5f5 !important; } -.divide-red-200 > * + * { +.divide-red-200 > :not(:last-child) { border-color: #fed7d7 !important; } -.divide-red-300 > * + * { +.divide-red-300 > :not(:last-child) { border-color: #feb2b2 !important; } -.divide-red-400 > * + * { +.divide-red-400 > :not(:last-child) { border-color: #fc8181 !important; } -.divide-red-500 > * + * { +.divide-red-500 > :not(:last-child) { border-color: #f56565 !important; } -.divide-red-600 > * + * { +.divide-red-600 > :not(:last-child) { border-color: #e53e3e !important; } -.divide-red-700 > * + * { +.divide-red-700 > :not(:last-child) { border-color: #c53030 !important; } -.divide-red-800 > * + * { +.divide-red-800 > :not(:last-child) { border-color: #9b2c2c !important; } -.divide-red-900 > * + * { +.divide-red-900 > :not(:last-child) { border-color: #742a2a !important; } -.divide-orange-100 > * + * { +.divide-orange-100 > :not(:last-child) { border-color: #fffaf0 !important; } -.divide-orange-200 > * + * { +.divide-orange-200 > :not(:last-child) { border-color: #feebc8 !important; } -.divide-orange-300 > * + * { +.divide-orange-300 > :not(:last-child) { border-color: #fbd38d !important; } -.divide-orange-400 > * + * { +.divide-orange-400 > :not(:last-child) { border-color: #f6ad55 !important; } -.divide-orange-500 > * + * { +.divide-orange-500 > :not(:last-child) { border-color: #ed8936 !important; } -.divide-orange-600 > * + * { +.divide-orange-600 > :not(:last-child) { border-color: #dd6b20 !important; } -.divide-orange-700 > * + * { +.divide-orange-700 > :not(:last-child) { border-color: #c05621 !important; } -.divide-orange-800 > * + * { +.divide-orange-800 > :not(:last-child) { border-color: #9c4221 !important; } -.divide-orange-900 > * + * { +.divide-orange-900 > :not(:last-child) { border-color: #7b341e !important; } -.divide-yellow-100 > * + * { +.divide-yellow-100 > :not(:last-child) { border-color: #fffff0 !important; } -.divide-yellow-200 > * + * { +.divide-yellow-200 > :not(:last-child) { border-color: #fefcbf !important; } -.divide-yellow-300 > * + * { +.divide-yellow-300 > :not(:last-child) { border-color: #faf089 !important; } -.divide-yellow-400 > * + * { +.divide-yellow-400 > :not(:last-child) { border-color: #f6e05e !important; } -.divide-yellow-500 > * + * { +.divide-yellow-500 > :not(:last-child) { border-color: #ecc94b !important; } -.divide-yellow-600 > * + * { +.divide-yellow-600 > :not(:last-child) { border-color: #d69e2e !important; } -.divide-yellow-700 > * + * { +.divide-yellow-700 > :not(:last-child) { border-color: #b7791f !important; } -.divide-yellow-800 > * + * { +.divide-yellow-800 > :not(:last-child) { border-color: #975a16 !important; } -.divide-yellow-900 > * + * { +.divide-yellow-900 > :not(:last-child) { border-color: #744210 !important; } -.divide-green-100 > * + * { +.divide-green-100 > :not(:last-child) { border-color: #f0fff4 !important; } -.divide-green-200 > * + * { +.divide-green-200 > :not(:last-child) { border-color: #c6f6d5 !important; } -.divide-green-300 > * + * { +.divide-green-300 > :not(:last-child) { border-color: #9ae6b4 !important; } -.divide-green-400 > * + * { +.divide-green-400 > :not(:last-child) { border-color: #68d391 !important; } -.divide-green-500 > * + * { +.divide-green-500 > :not(:last-child) { border-color: #48bb78 !important; } -.divide-green-600 > * + * { +.divide-green-600 > :not(:last-child) { border-color: #38a169 !important; } -.divide-green-700 > * + * { +.divide-green-700 > :not(:last-child) { border-color: #2f855a !important; } -.divide-green-800 > * + * { +.divide-green-800 > :not(:last-child) { border-color: #276749 !important; } -.divide-green-900 > * + * { +.divide-green-900 > :not(:last-child) { border-color: #22543d !important; } -.divide-teal-100 > * + * { +.divide-teal-100 > :not(:last-child) { border-color: #e6fffa !important; } -.divide-teal-200 > * + * { +.divide-teal-200 > :not(:last-child) { border-color: #b2f5ea !important; } -.divide-teal-300 > * + * { +.divide-teal-300 > :not(:last-child) { border-color: #81e6d9 !important; } -.divide-teal-400 > * + * { +.divide-teal-400 > :not(:last-child) { border-color: #4fd1c5 !important; } -.divide-teal-500 > * + * { +.divide-teal-500 > :not(:last-child) { border-color: #38b2ac !important; } -.divide-teal-600 > * + * { +.divide-teal-600 > :not(:last-child) { border-color: #319795 !important; } -.divide-teal-700 > * + * { +.divide-teal-700 > :not(:last-child) { border-color: #2c7a7b !important; } -.divide-teal-800 > * + * { +.divide-teal-800 > :not(:last-child) { border-color: #285e61 !important; } -.divide-teal-900 > * + * { +.divide-teal-900 > :not(:last-child) { border-color: #234e52 !important; } -.divide-blue-100 > * + * { +.divide-blue-100 > :not(:last-child) { border-color: #ebf8ff !important; } -.divide-blue-200 > * + * { +.divide-blue-200 > :not(:last-child) { border-color: #bee3f8 !important; } -.divide-blue-300 > * + * { +.divide-blue-300 > :not(:last-child) { border-color: #90cdf4 !important; } -.divide-blue-400 > * + * { +.divide-blue-400 > :not(:last-child) { border-color: #63b3ed !important; } -.divide-blue-500 > * + * { +.divide-blue-500 > :not(:last-child) { border-color: #4299e1 !important; } -.divide-blue-600 > * + * { +.divide-blue-600 > :not(:last-child) { border-color: #3182ce !important; } -.divide-blue-700 > * + * { +.divide-blue-700 > :not(:last-child) { border-color: #2b6cb0 !important; } -.divide-blue-800 > * + * { +.divide-blue-800 > :not(:last-child) { border-color: #2c5282 !important; } -.divide-blue-900 > * + * { +.divide-blue-900 > :not(:last-child) { border-color: #2a4365 !important; } -.divide-indigo-100 > * + * { +.divide-indigo-100 > :not(:last-child) { border-color: #ebf4ff !important; } -.divide-indigo-200 > * + * { +.divide-indigo-200 > :not(:last-child) { border-color: #c3dafe !important; } -.divide-indigo-300 > * + * { +.divide-indigo-300 > :not(:last-child) { border-color: #a3bffa !important; } -.divide-indigo-400 > * + * { +.divide-indigo-400 > :not(:last-child) { border-color: #7f9cf5 !important; } -.divide-indigo-500 > * + * { +.divide-indigo-500 > :not(:last-child) { border-color: #667eea !important; } -.divide-indigo-600 > * + * { +.divide-indigo-600 > :not(:last-child) { border-color: #5a67d8 !important; } -.divide-indigo-700 > * + * { +.divide-indigo-700 > :not(:last-child) { border-color: #4c51bf !important; } -.divide-indigo-800 > * + * { +.divide-indigo-800 > :not(:last-child) { border-color: #434190 !important; } -.divide-indigo-900 > * + * { +.divide-indigo-900 > :not(:last-child) { border-color: #3c366b !important; } -.divide-purple-100 > * + * { +.divide-purple-100 > :not(:last-child) { border-color: #faf5ff !important; } -.divide-purple-200 > * + * { +.divide-purple-200 > :not(:last-child) { border-color: #e9d8fd !important; } -.divide-purple-300 > * + * { +.divide-purple-300 > :not(:last-child) { border-color: #d6bcfa !important; } -.divide-purple-400 > * + * { +.divide-purple-400 > :not(:last-child) { border-color: #b794f4 !important; } -.divide-purple-500 > * + * { +.divide-purple-500 > :not(:last-child) { border-color: #9f7aea !important; } -.divide-purple-600 > * + * { +.divide-purple-600 > :not(:last-child) { border-color: #805ad5 !important; } -.divide-purple-700 > * + * { +.divide-purple-700 > :not(:last-child) { border-color: #6b46c1 !important; } -.divide-purple-800 > * + * { +.divide-purple-800 > :not(:last-child) { border-color: #553c9a !important; } -.divide-purple-900 > * + * { +.divide-purple-900 > :not(:last-child) { border-color: #44337a !important; } -.divide-pink-100 > * + * { +.divide-pink-100 > :not(:last-child) { border-color: #fff5f7 !important; } -.divide-pink-200 > * + * { +.divide-pink-200 > :not(:last-child) { border-color: #fed7e2 !important; } -.divide-pink-300 > * + * { +.divide-pink-300 > :not(:last-child) { border-color: #fbb6ce !important; } -.divide-pink-400 > * + * { +.divide-pink-400 > :not(:last-child) { border-color: #f687b3 !important; } -.divide-pink-500 > * + * { +.divide-pink-500 > :not(:last-child) { border-color: #ed64a6 !important; } -.divide-pink-600 > * + * { +.divide-pink-600 > :not(:last-child) { border-color: #d53f8c !important; } -.divide-pink-700 > * + * { +.divide-pink-700 > :not(:last-child) { border-color: #b83280 !important; } -.divide-pink-800 > * + * { +.divide-pink-800 > :not(:last-child) { border-color: #97266d !important; } -.divide-pink-900 > * + * { +.divide-pink-900 > :not(:last-child) { border-color: #702459 !important; } diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index 29e2e031e10c..a2e9ce46b5eb 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -606,571 +606,571 @@ video { } } -.space-y-0 > * + * { - margin-top: 0; +.space-y-0 > :not(:last-child) { + margin-bottom: 0; } -.space-x-0 > * + * { - margin-left: 0; +.space-x-0 > :not(:last-child) { + margin-right: 0; } -.space-y-1 > * + * { - margin-top: 0.25rem; +.space-y-1 > :not(:last-child) { + margin-bottom: 0.25rem; } -.space-x-1 > * + * { - margin-left: 0.25rem; +.space-x-1 > :not(:last-child) { + margin-right: 0.25rem; } -.space-y-2 > * + * { - margin-top: 0.5rem; +.space-y-2 > :not(:last-child) { + margin-bottom: 0.5rem; } -.space-x-2 > * + * { - margin-left: 0.5rem; +.space-x-2 > :not(:last-child) { + margin-right: 0.5rem; } -.space-y-3 > * + * { - margin-top: 0.75rem; +.space-y-3 > :not(:last-child) { + margin-bottom: 0.75rem; } -.space-x-3 > * + * { - margin-left: 0.75rem; +.space-x-3 > :not(:last-child) { + margin-right: 0.75rem; } -.space-y-4 > * + * { - margin-top: 1rem; +.space-y-4 > :not(:last-child) { + margin-bottom: 1rem; } -.space-x-4 > * + * { - margin-left: 1rem; +.space-x-4 > :not(:last-child) { + margin-right: 1rem; } -.space-y-5 > * + * { - margin-top: 1.25rem; +.space-y-5 > :not(:last-child) { + margin-bottom: 1.25rem; } -.space-x-5 > * + * { - margin-left: 1.25rem; +.space-x-5 > :not(:last-child) { + margin-right: 1.25rem; } -.space-y-6 > * + * { - margin-top: 1.5rem; +.space-y-6 > :not(:last-child) { + margin-bottom: 1.5rem; } -.space-x-6 > * + * { - margin-left: 1.5rem; +.space-x-6 > :not(:last-child) { + margin-right: 1.5rem; } -.space-y-8 > * + * { - margin-top: 2rem; +.space-y-8 > :not(:last-child) { + margin-bottom: 2rem; } -.space-x-8 > * + * { - margin-left: 2rem; +.space-x-8 > :not(:last-child) { + margin-right: 2rem; } -.space-y-10 > * + * { - margin-top: 2.5rem; +.space-y-10 > :not(:last-child) { + margin-bottom: 2.5rem; } -.space-x-10 > * + * { - margin-left: 2.5rem; +.space-x-10 > :not(:last-child) { + margin-right: 2.5rem; } -.space-y-12 > * + * { - margin-top: 3rem; +.space-y-12 > :not(:last-child) { + margin-bottom: 3rem; } -.space-x-12 > * + * { - margin-left: 3rem; +.space-x-12 > :not(:last-child) { + margin-right: 3rem; } -.space-y-16 > * + * { - margin-top: 4rem; +.space-y-16 > :not(:last-child) { + margin-bottom: 4rem; } -.space-x-16 > * + * { - margin-left: 4rem; +.space-x-16 > :not(:last-child) { + margin-right: 4rem; } -.space-y-20 > * + * { - margin-top: 5rem; +.space-y-20 > :not(:last-child) { + margin-bottom: 5rem; } -.space-x-20 > * + * { - margin-left: 5rem; +.space-x-20 > :not(:last-child) { + margin-right: 5rem; } -.space-y-24 > * + * { - margin-top: 6rem; +.space-y-24 > :not(:last-child) { + margin-bottom: 6rem; } -.space-x-24 > * + * { - margin-left: 6rem; +.space-x-24 > :not(:last-child) { + margin-right: 6rem; } -.space-y-32 > * + * { - margin-top: 8rem; +.space-y-32 > :not(:last-child) { + margin-bottom: 8rem; } -.space-x-32 > * + * { - margin-left: 8rem; +.space-x-32 > :not(:last-child) { + margin-right: 8rem; } -.space-y-40 > * + * { - margin-top: 10rem; +.space-y-40 > :not(:last-child) { + margin-bottom: 10rem; } -.space-x-40 > * + * { - margin-left: 10rem; +.space-x-40 > :not(:last-child) { + margin-right: 10rem; } -.space-y-48 > * + * { - margin-top: 12rem; +.space-y-48 > :not(:last-child) { + margin-bottom: 12rem; } -.space-x-48 > * + * { - margin-left: 12rem; +.space-x-48 > :not(:last-child) { + margin-right: 12rem; } -.space-y-56 > * + * { - margin-top: 14rem; +.space-y-56 > :not(:last-child) { + margin-bottom: 14rem; } -.space-x-56 > * + * { - margin-left: 14rem; +.space-x-56 > :not(:last-child) { + margin-right: 14rem; } -.space-y-64 > * + * { - margin-top: 16rem; +.space-y-64 > :not(:last-child) { + margin-bottom: 16rem; } -.space-x-64 > * + * { - margin-left: 16rem; +.space-x-64 > :not(:last-child) { + margin-right: 16rem; } -.space-y-px > * + * { - margin-top: 1px; +.space-y-px > :not(:last-child) { + margin-bottom: 1px; } -.space-x-px > * + * { - margin-left: 1px; +.space-x-px > :not(:last-child) { + margin-right: 1px; } -.divide-y-0 > * + * { - border-top-width: 0; +.divide-y-0 > :not(:last-child) { + border-bottom-width: 0; } -.divide-x-0 > * + * { - border-left-width: 0; +.divide-x-0 > :not(:last-child) { + border-right-width: 0; } -.divide-y-2 > * + * { - border-top-width: 2px; +.divide-y-2 > :not(:last-child) { + border-bottom-width: 2px; } -.divide-x-2 > * + * { - border-left-width: 2px; +.divide-x-2 > :not(:last-child) { + border-right-width: 2px; } -.divide-y-4 > * + * { - border-top-width: 4px; +.divide-y-4 > :not(:last-child) { + border-bottom-width: 4px; } -.divide-x-4 > * + * { - border-left-width: 4px; +.divide-x-4 > :not(:last-child) { + border-right-width: 4px; } -.divide-y-8 > * + * { - border-top-width: 8px; +.divide-y-8 > :not(:last-child) { + border-bottom-width: 8px; } -.divide-x-8 > * + * { - border-left-width: 8px; +.divide-x-8 > :not(:last-child) { + border-right-width: 8px; } -.divide-y > * + * { - border-top-width: 1px; +.divide-y > :not(:last-child) { + border-bottom-width: 1px; } -.divide-x > * + * { - border-left-width: 1px; +.divide-x > :not(:last-child) { + border-right-width: 1px; } -.divide-transparent > * + * { +.divide-transparent > :not(:last-child) { border-color: transparent; } -.divide-current > * + * { +.divide-current > :not(:last-child) { border-color: currentColor; } -.divide-black > * + * { +.divide-black > :not(:last-child) { border-color: #000; } -.divide-white > * + * { +.divide-white > :not(:last-child) { border-color: #fff; } -.divide-gray-100 > * + * { +.divide-gray-100 > :not(:last-child) { border-color: #f7fafc; } -.divide-gray-200 > * + * { +.divide-gray-200 > :not(:last-child) { border-color: #edf2f7; } -.divide-gray-300 > * + * { +.divide-gray-300 > :not(:last-child) { border-color: #e2e8f0; } -.divide-gray-400 > * + * { +.divide-gray-400 > :not(:last-child) { border-color: #cbd5e0; } -.divide-gray-500 > * + * { +.divide-gray-500 > :not(:last-child) { border-color: #a0aec0; } -.divide-gray-600 > * + * { +.divide-gray-600 > :not(:last-child) { border-color: #718096; } -.divide-gray-700 > * + * { +.divide-gray-700 > :not(:last-child) { border-color: #4a5568; } -.divide-gray-800 > * + * { +.divide-gray-800 > :not(:last-child) { border-color: #2d3748; } -.divide-gray-900 > * + * { +.divide-gray-900 > :not(:last-child) { border-color: #1a202c; } -.divide-red-100 > * + * { +.divide-red-100 > :not(:last-child) { border-color: #fff5f5; } -.divide-red-200 > * + * { +.divide-red-200 > :not(:last-child) { border-color: #fed7d7; } -.divide-red-300 > * + * { +.divide-red-300 > :not(:last-child) { border-color: #feb2b2; } -.divide-red-400 > * + * { +.divide-red-400 > :not(:last-child) { border-color: #fc8181; } -.divide-red-500 > * + * { +.divide-red-500 > :not(:last-child) { border-color: #f56565; } -.divide-red-600 > * + * { +.divide-red-600 > :not(:last-child) { border-color: #e53e3e; } -.divide-red-700 > * + * { +.divide-red-700 > :not(:last-child) { border-color: #c53030; } -.divide-red-800 > * + * { +.divide-red-800 > :not(:last-child) { border-color: #9b2c2c; } -.divide-red-900 > * + * { +.divide-red-900 > :not(:last-child) { border-color: #742a2a; } -.divide-orange-100 > * + * { +.divide-orange-100 > :not(:last-child) { border-color: #fffaf0; } -.divide-orange-200 > * + * { +.divide-orange-200 > :not(:last-child) { border-color: #feebc8; } -.divide-orange-300 > * + * { +.divide-orange-300 > :not(:last-child) { border-color: #fbd38d; } -.divide-orange-400 > * + * { +.divide-orange-400 > :not(:last-child) { border-color: #f6ad55; } -.divide-orange-500 > * + * { +.divide-orange-500 > :not(:last-child) { border-color: #ed8936; } -.divide-orange-600 > * + * { +.divide-orange-600 > :not(:last-child) { border-color: #dd6b20; } -.divide-orange-700 > * + * { +.divide-orange-700 > :not(:last-child) { border-color: #c05621; } -.divide-orange-800 > * + * { +.divide-orange-800 > :not(:last-child) { border-color: #9c4221; } -.divide-orange-900 > * + * { +.divide-orange-900 > :not(:last-child) { border-color: #7b341e; } -.divide-yellow-100 > * + * { +.divide-yellow-100 > :not(:last-child) { border-color: #fffff0; } -.divide-yellow-200 > * + * { +.divide-yellow-200 > :not(:last-child) { border-color: #fefcbf; } -.divide-yellow-300 > * + * { +.divide-yellow-300 > :not(:last-child) { border-color: #faf089; } -.divide-yellow-400 > * + * { +.divide-yellow-400 > :not(:last-child) { border-color: #f6e05e; } -.divide-yellow-500 > * + * { +.divide-yellow-500 > :not(:last-child) { border-color: #ecc94b; } -.divide-yellow-600 > * + * { +.divide-yellow-600 > :not(:last-child) { border-color: #d69e2e; } -.divide-yellow-700 > * + * { +.divide-yellow-700 > :not(:last-child) { border-color: #b7791f; } -.divide-yellow-800 > * + * { +.divide-yellow-800 > :not(:last-child) { border-color: #975a16; } -.divide-yellow-900 > * + * { +.divide-yellow-900 > :not(:last-child) { border-color: #744210; } -.divide-green-100 > * + * { +.divide-green-100 > :not(:last-child) { border-color: #f0fff4; } -.divide-green-200 > * + * { +.divide-green-200 > :not(:last-child) { border-color: #c6f6d5; } -.divide-green-300 > * + * { +.divide-green-300 > :not(:last-child) { border-color: #9ae6b4; } -.divide-green-400 > * + * { +.divide-green-400 > :not(:last-child) { border-color: #68d391; } -.divide-green-500 > * + * { +.divide-green-500 > :not(:last-child) { border-color: #48bb78; } -.divide-green-600 > * + * { +.divide-green-600 > :not(:last-child) { border-color: #38a169; } -.divide-green-700 > * + * { +.divide-green-700 > :not(:last-child) { border-color: #2f855a; } -.divide-green-800 > * + * { +.divide-green-800 > :not(:last-child) { border-color: #276749; } -.divide-green-900 > * + * { +.divide-green-900 > :not(:last-child) { border-color: #22543d; } -.divide-teal-100 > * + * { +.divide-teal-100 > :not(:last-child) { border-color: #e6fffa; } -.divide-teal-200 > * + * { +.divide-teal-200 > :not(:last-child) { border-color: #b2f5ea; } -.divide-teal-300 > * + * { +.divide-teal-300 > :not(:last-child) { border-color: #81e6d9; } -.divide-teal-400 > * + * { +.divide-teal-400 > :not(:last-child) { border-color: #4fd1c5; } -.divide-teal-500 > * + * { +.divide-teal-500 > :not(:last-child) { border-color: #38b2ac; } -.divide-teal-600 > * + * { +.divide-teal-600 > :not(:last-child) { border-color: #319795; } -.divide-teal-700 > * + * { +.divide-teal-700 > :not(:last-child) { border-color: #2c7a7b; } -.divide-teal-800 > * + * { +.divide-teal-800 > :not(:last-child) { border-color: #285e61; } -.divide-teal-900 > * + * { +.divide-teal-900 > :not(:last-child) { border-color: #234e52; } -.divide-blue-100 > * + * { +.divide-blue-100 > :not(:last-child) { border-color: #ebf8ff; } -.divide-blue-200 > * + * { +.divide-blue-200 > :not(:last-child) { border-color: #bee3f8; } -.divide-blue-300 > * + * { +.divide-blue-300 > :not(:last-child) { border-color: #90cdf4; } -.divide-blue-400 > * + * { +.divide-blue-400 > :not(:last-child) { border-color: #63b3ed; } -.divide-blue-500 > * + * { +.divide-blue-500 > :not(:last-child) { border-color: #4299e1; } -.divide-blue-600 > * + * { +.divide-blue-600 > :not(:last-child) { border-color: #3182ce; } -.divide-blue-700 > * + * { +.divide-blue-700 > :not(:last-child) { border-color: #2b6cb0; } -.divide-blue-800 > * + * { +.divide-blue-800 > :not(:last-child) { border-color: #2c5282; } -.divide-blue-900 > * + * { +.divide-blue-900 > :not(:last-child) { border-color: #2a4365; } -.divide-indigo-100 > * + * { +.divide-indigo-100 > :not(:last-child) { border-color: #ebf4ff; } -.divide-indigo-200 > * + * { +.divide-indigo-200 > :not(:last-child) { border-color: #c3dafe; } -.divide-indigo-300 > * + * { +.divide-indigo-300 > :not(:last-child) { border-color: #a3bffa; } -.divide-indigo-400 > * + * { +.divide-indigo-400 > :not(:last-child) { border-color: #7f9cf5; } -.divide-indigo-500 > * + * { +.divide-indigo-500 > :not(:last-child) { border-color: #667eea; } -.divide-indigo-600 > * + * { +.divide-indigo-600 > :not(:last-child) { border-color: #5a67d8; } -.divide-indigo-700 > * + * { +.divide-indigo-700 > :not(:last-child) { border-color: #4c51bf; } -.divide-indigo-800 > * + * { +.divide-indigo-800 > :not(:last-child) { border-color: #434190; } -.divide-indigo-900 > * + * { +.divide-indigo-900 > :not(:last-child) { border-color: #3c366b; } -.divide-purple-100 > * + * { +.divide-purple-100 > :not(:last-child) { border-color: #faf5ff; } -.divide-purple-200 > * + * { +.divide-purple-200 > :not(:last-child) { border-color: #e9d8fd; } -.divide-purple-300 > * + * { +.divide-purple-300 > :not(:last-child) { border-color: #d6bcfa; } -.divide-purple-400 > * + * { +.divide-purple-400 > :not(:last-child) { border-color: #b794f4; } -.divide-purple-500 > * + * { +.divide-purple-500 > :not(:last-child) { border-color: #9f7aea; } -.divide-purple-600 > * + * { +.divide-purple-600 > :not(:last-child) { border-color: #805ad5; } -.divide-purple-700 > * + * { +.divide-purple-700 > :not(:last-child) { border-color: #6b46c1; } -.divide-purple-800 > * + * { +.divide-purple-800 > :not(:last-child) { border-color: #553c9a; } -.divide-purple-900 > * + * { +.divide-purple-900 > :not(:last-child) { border-color: #44337a; } -.divide-pink-100 > * + * { +.divide-pink-100 > :not(:last-child) { border-color: #fff5f7; } -.divide-pink-200 > * + * { +.divide-pink-200 > :not(:last-child) { border-color: #fed7e2; } -.divide-pink-300 > * + * { +.divide-pink-300 > :not(:last-child) { border-color: #fbb6ce; } -.divide-pink-400 > * + * { +.divide-pink-400 > :not(:last-child) { border-color: #f687b3; } -.divide-pink-500 > * + * { +.divide-pink-500 > :not(:last-child) { border-color: #ed64a6; } -.divide-pink-600 > * + * { +.divide-pink-600 > :not(:last-child) { border-color: #d53f8c; } -.divide-pink-700 > * + * { +.divide-pink-700 > :not(:last-child) { border-color: #b83280; } -.divide-pink-800 > * + * { +.divide-pink-800 > :not(:last-child) { border-color: #97266d; } -.divide-pink-900 > * + * { +.divide-pink-900 > :not(:last-child) { border-color: #702459; } diff --git a/src/plugins/divideColor.js b/src/plugins/divideColor.js index e76c8f65353c..5260774dd79e 100644 --- a/src/plugins/divideColor.js +++ b/src/plugins/divideColor.js @@ -8,7 +8,7 @@ export default function() { const utilities = _.fromPairs( _.map(_.omit(colors, 'default'), (value, modifier) => { return [ - `.${e(`divide-${modifier}`)} > * + *`, + `.${e(`divide-${modifier}`)} > :not(:last-child)`, { 'border-color': value, }, diff --git a/src/plugins/divideWidth.js b/src/plugins/divideWidth.js index 52a36047a645..254bc5cbb930 100644 --- a/src/plugins/divideWidth.js +++ b/src/plugins/divideWidth.js @@ -4,8 +4,8 @@ export default function() { return function({ addUtilities, e, theme, variants }) { const generators = [ (value, modifier) => ({ - [`.${e(`divide-y${modifier}`)} > * + *`]: { 'border-top-width': `${value}` }, - [`.${e(`divide-x${modifier}`)} > * + *`]: { 'border-left-width': `${value}` }, + [`.${e(`divide-y${modifier}`)} > :not(:last-child)`]: { 'border-bottom-width': `${value}` }, + [`.${e(`divide-x${modifier}`)} > :not(:last-child)`]: { 'border-right-width': `${value}` }, }), ] diff --git a/src/plugins/space.js b/src/plugins/space.js index 618dd2797fc2..8fae0d97015b 100644 --- a/src/plugins/space.js +++ b/src/plugins/space.js @@ -4,8 +4,8 @@ export default function() { return function({ addUtilities, e, theme, variants }) { const generators = [ (size, modifier) => ({ - [`.${e(`space-y-${modifier}`)} > * + *`]: { 'margin-top': `${size}` }, - [`.${e(`space-x-${modifier}`)} > * + *`]: { 'margin-left': `${size}` }, + [`.${e(`space-y-${modifier}`)} > :not(:last-child)`]: { 'margin-bottom': `${size}` }, + [`.${e(`space-x-${modifier}`)} > :not(:last-child)`]: { 'margin-right': `${size}` }, }), ] From 0f54a60d055111df0745a43d6cc3f01124b0477b Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 17 Apr 2020 09:49:16 -0400 Subject: [PATCH 6/6] Switch from :not(:last-child) to :not(template) ~ :not(template) --- .../fixtures/tailwind-output-important.css | 380 +++++++++--------- __tests__/fixtures/tailwind-output.css | 380 +++++++++--------- __tests__/plugins/divideColor.test.js | 56 ++- __tests__/plugins/divideWidth.test.js | 16 +- __tests__/plugins/space.test.js | 16 +- src/plugins/divideColor.js | 2 +- src/plugins/divideWidth.js | 8 +- src/plugins/space.js | 8 +- 8 files changed, 451 insertions(+), 415 deletions(-) diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index fdfb075c6390..b18d9ed71d05 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -606,571 +606,571 @@ video { } } -.space-y-0 > :not(:last-child) { - margin-bottom: 0 !important; +.space-y-0 > :not(template) ~ :not(template) { + margin-top: 0 !important; } -.space-x-0 > :not(:last-child) { - margin-right: 0 !important; +.space-x-0 > :not(template) ~ :not(template) { + margin-left: 0 !important; } -.space-y-1 > :not(:last-child) { - margin-bottom: 0.25rem !important; +.space-y-1 > :not(template) ~ :not(template) { + margin-top: 0.25rem !important; } -.space-x-1 > :not(:last-child) { - margin-right: 0.25rem !important; +.space-x-1 > :not(template) ~ :not(template) { + margin-left: 0.25rem !important; } -.space-y-2 > :not(:last-child) { - margin-bottom: 0.5rem !important; +.space-y-2 > :not(template) ~ :not(template) { + margin-top: 0.5rem !important; } -.space-x-2 > :not(:last-child) { - margin-right: 0.5rem !important; +.space-x-2 > :not(template) ~ :not(template) { + margin-left: 0.5rem !important; } -.space-y-3 > :not(:last-child) { - margin-bottom: 0.75rem !important; +.space-y-3 > :not(template) ~ :not(template) { + margin-top: 0.75rem !important; } -.space-x-3 > :not(:last-child) { - margin-right: 0.75rem !important; +.space-x-3 > :not(template) ~ :not(template) { + margin-left: 0.75rem !important; } -.space-y-4 > :not(:last-child) { - margin-bottom: 1rem !important; +.space-y-4 > :not(template) ~ :not(template) { + margin-top: 1rem !important; } -.space-x-4 > :not(:last-child) { - margin-right: 1rem !important; +.space-x-4 > :not(template) ~ :not(template) { + margin-left: 1rem !important; } -.space-y-5 > :not(:last-child) { - margin-bottom: 1.25rem !important; +.space-y-5 > :not(template) ~ :not(template) { + margin-top: 1.25rem !important; } -.space-x-5 > :not(:last-child) { - margin-right: 1.25rem !important; +.space-x-5 > :not(template) ~ :not(template) { + margin-left: 1.25rem !important; } -.space-y-6 > :not(:last-child) { - margin-bottom: 1.5rem !important; +.space-y-6 > :not(template) ~ :not(template) { + margin-top: 1.5rem !important; } -.space-x-6 > :not(:last-child) { - margin-right: 1.5rem !important; +.space-x-6 > :not(template) ~ :not(template) { + margin-left: 1.5rem !important; } -.space-y-8 > :not(:last-child) { - margin-bottom: 2rem !important; +.space-y-8 > :not(template) ~ :not(template) { + margin-top: 2rem !important; } -.space-x-8 > :not(:last-child) { - margin-right: 2rem !important; +.space-x-8 > :not(template) ~ :not(template) { + margin-left: 2rem !important; } -.space-y-10 > :not(:last-child) { - margin-bottom: 2.5rem !important; +.space-y-10 > :not(template) ~ :not(template) { + margin-top: 2.5rem !important; } -.space-x-10 > :not(:last-child) { - margin-right: 2.5rem !important; +.space-x-10 > :not(template) ~ :not(template) { + margin-left: 2.5rem !important; } -.space-y-12 > :not(:last-child) { - margin-bottom: 3rem !important; +.space-y-12 > :not(template) ~ :not(template) { + margin-top: 3rem !important; } -.space-x-12 > :not(:last-child) { - margin-right: 3rem !important; +.space-x-12 > :not(template) ~ :not(template) { + margin-left: 3rem !important; } -.space-y-16 > :not(:last-child) { - margin-bottom: 4rem !important; +.space-y-16 > :not(template) ~ :not(template) { + margin-top: 4rem !important; } -.space-x-16 > :not(:last-child) { - margin-right: 4rem !important; +.space-x-16 > :not(template) ~ :not(template) { + margin-left: 4rem !important; } -.space-y-20 > :not(:last-child) { - margin-bottom: 5rem !important; +.space-y-20 > :not(template) ~ :not(template) { + margin-top: 5rem !important; } -.space-x-20 > :not(:last-child) { - margin-right: 5rem !important; +.space-x-20 > :not(template) ~ :not(template) { + margin-left: 5rem !important; } -.space-y-24 > :not(:last-child) { - margin-bottom: 6rem !important; +.space-y-24 > :not(template) ~ :not(template) { + margin-top: 6rem !important; } -.space-x-24 > :not(:last-child) { - margin-right: 6rem !important; +.space-x-24 > :not(template) ~ :not(template) { + margin-left: 6rem !important; } -.space-y-32 > :not(:last-child) { - margin-bottom: 8rem !important; +.space-y-32 > :not(template) ~ :not(template) { + margin-top: 8rem !important; } -.space-x-32 > :not(:last-child) { - margin-right: 8rem !important; +.space-x-32 > :not(template) ~ :not(template) { + margin-left: 8rem !important; } -.space-y-40 > :not(:last-child) { - margin-bottom: 10rem !important; +.space-y-40 > :not(template) ~ :not(template) { + margin-top: 10rem !important; } -.space-x-40 > :not(:last-child) { - margin-right: 10rem !important; +.space-x-40 > :not(template) ~ :not(template) { + margin-left: 10rem !important; } -.space-y-48 > :not(:last-child) { - margin-bottom: 12rem !important; +.space-y-48 > :not(template) ~ :not(template) { + margin-top: 12rem !important; } -.space-x-48 > :not(:last-child) { - margin-right: 12rem !important; +.space-x-48 > :not(template) ~ :not(template) { + margin-left: 12rem !important; } -.space-y-56 > :not(:last-child) { - margin-bottom: 14rem !important; +.space-y-56 > :not(template) ~ :not(template) { + margin-top: 14rem !important; } -.space-x-56 > :not(:last-child) { - margin-right: 14rem !important; +.space-x-56 > :not(template) ~ :not(template) { + margin-left: 14rem !important; } -.space-y-64 > :not(:last-child) { - margin-bottom: 16rem !important; +.space-y-64 > :not(template) ~ :not(template) { + margin-top: 16rem !important; } -.space-x-64 > :not(:last-child) { - margin-right: 16rem !important; +.space-x-64 > :not(template) ~ :not(template) { + margin-left: 16rem !important; } -.space-y-px > :not(:last-child) { - margin-bottom: 1px !important; +.space-y-px > :not(template) ~ :not(template) { + margin-top: 1px !important; } -.space-x-px > :not(:last-child) { - margin-right: 1px !important; +.space-x-px > :not(template) ~ :not(template) { + margin-left: 1px !important; } -.divide-y-0 > :not(:last-child) { - border-bottom-width: 0 !important; +.divide-y-0 > :not(template) ~ :not(template) { + border-top-width: 0 !important; } -.divide-x-0 > :not(:last-child) { - border-right-width: 0 !important; +.divide-x-0 > :not(template) ~ :not(template) { + border-left-width: 0 !important; } -.divide-y-2 > :not(:last-child) { - border-bottom-width: 2px !important; +.divide-y-2 > :not(template) ~ :not(template) { + border-top-width: 2px !important; } -.divide-x-2 > :not(:last-child) { - border-right-width: 2px !important; +.divide-x-2 > :not(template) ~ :not(template) { + border-left-width: 2px !important; } -.divide-y-4 > :not(:last-child) { - border-bottom-width: 4px !important; +.divide-y-4 > :not(template) ~ :not(template) { + border-top-width: 4px !important; } -.divide-x-4 > :not(:last-child) { - border-right-width: 4px !important; +.divide-x-4 > :not(template) ~ :not(template) { + border-left-width: 4px !important; } -.divide-y-8 > :not(:last-child) { - border-bottom-width: 8px !important; +.divide-y-8 > :not(template) ~ :not(template) { + border-top-width: 8px !important; } -.divide-x-8 > :not(:last-child) { - border-right-width: 8px !important; +.divide-x-8 > :not(template) ~ :not(template) { + border-left-width: 8px !important; } -.divide-y > :not(:last-child) { - border-bottom-width: 1px !important; +.divide-y > :not(template) ~ :not(template) { + border-top-width: 1px !important; } -.divide-x > :not(:last-child) { - border-right-width: 1px !important; +.divide-x > :not(template) ~ :not(template) { + border-left-width: 1px !important; } -.divide-transparent > :not(:last-child) { +.divide-transparent > :not(template) ~ :not(template) { border-color: transparent !important; } -.divide-current > :not(:last-child) { +.divide-current > :not(template) ~ :not(template) { border-color: currentColor !important; } -.divide-black > :not(:last-child) { +.divide-black > :not(template) ~ :not(template) { border-color: #000 !important; } -.divide-white > :not(:last-child) { +.divide-white > :not(template) ~ :not(template) { border-color: #fff !important; } -.divide-gray-100 > :not(:last-child) { +.divide-gray-100 > :not(template) ~ :not(template) { border-color: #f7fafc !important; } -.divide-gray-200 > :not(:last-child) { +.divide-gray-200 > :not(template) ~ :not(template) { border-color: #edf2f7 !important; } -.divide-gray-300 > :not(:last-child) { +.divide-gray-300 > :not(template) ~ :not(template) { border-color: #e2e8f0 !important; } -.divide-gray-400 > :not(:last-child) { +.divide-gray-400 > :not(template) ~ :not(template) { border-color: #cbd5e0 !important; } -.divide-gray-500 > :not(:last-child) { +.divide-gray-500 > :not(template) ~ :not(template) { border-color: #a0aec0 !important; } -.divide-gray-600 > :not(:last-child) { +.divide-gray-600 > :not(template) ~ :not(template) { border-color: #718096 !important; } -.divide-gray-700 > :not(:last-child) { +.divide-gray-700 > :not(template) ~ :not(template) { border-color: #4a5568 !important; } -.divide-gray-800 > :not(:last-child) { +.divide-gray-800 > :not(template) ~ :not(template) { border-color: #2d3748 !important; } -.divide-gray-900 > :not(:last-child) { +.divide-gray-900 > :not(template) ~ :not(template) { border-color: #1a202c !important; } -.divide-red-100 > :not(:last-child) { +.divide-red-100 > :not(template) ~ :not(template) { border-color: #fff5f5 !important; } -.divide-red-200 > :not(:last-child) { +.divide-red-200 > :not(template) ~ :not(template) { border-color: #fed7d7 !important; } -.divide-red-300 > :not(:last-child) { +.divide-red-300 > :not(template) ~ :not(template) { border-color: #feb2b2 !important; } -.divide-red-400 > :not(:last-child) { +.divide-red-400 > :not(template) ~ :not(template) { border-color: #fc8181 !important; } -.divide-red-500 > :not(:last-child) { +.divide-red-500 > :not(template) ~ :not(template) { border-color: #f56565 !important; } -.divide-red-600 > :not(:last-child) { +.divide-red-600 > :not(template) ~ :not(template) { border-color: #e53e3e !important; } -.divide-red-700 > :not(:last-child) { +.divide-red-700 > :not(template) ~ :not(template) { border-color: #c53030 !important; } -.divide-red-800 > :not(:last-child) { +.divide-red-800 > :not(template) ~ :not(template) { border-color: #9b2c2c !important; } -.divide-red-900 > :not(:last-child) { +.divide-red-900 > :not(template) ~ :not(template) { border-color: #742a2a !important; } -.divide-orange-100 > :not(:last-child) { +.divide-orange-100 > :not(template) ~ :not(template) { border-color: #fffaf0 !important; } -.divide-orange-200 > :not(:last-child) { +.divide-orange-200 > :not(template) ~ :not(template) { border-color: #feebc8 !important; } -.divide-orange-300 > :not(:last-child) { +.divide-orange-300 > :not(template) ~ :not(template) { border-color: #fbd38d !important; } -.divide-orange-400 > :not(:last-child) { +.divide-orange-400 > :not(template) ~ :not(template) { border-color: #f6ad55 !important; } -.divide-orange-500 > :not(:last-child) { +.divide-orange-500 > :not(template) ~ :not(template) { border-color: #ed8936 !important; } -.divide-orange-600 > :not(:last-child) { +.divide-orange-600 > :not(template) ~ :not(template) { border-color: #dd6b20 !important; } -.divide-orange-700 > :not(:last-child) { +.divide-orange-700 > :not(template) ~ :not(template) { border-color: #c05621 !important; } -.divide-orange-800 > :not(:last-child) { +.divide-orange-800 > :not(template) ~ :not(template) { border-color: #9c4221 !important; } -.divide-orange-900 > :not(:last-child) { +.divide-orange-900 > :not(template) ~ :not(template) { border-color: #7b341e !important; } -.divide-yellow-100 > :not(:last-child) { +.divide-yellow-100 > :not(template) ~ :not(template) { border-color: #fffff0 !important; } -.divide-yellow-200 > :not(:last-child) { +.divide-yellow-200 > :not(template) ~ :not(template) { border-color: #fefcbf !important; } -.divide-yellow-300 > :not(:last-child) { +.divide-yellow-300 > :not(template) ~ :not(template) { border-color: #faf089 !important; } -.divide-yellow-400 > :not(:last-child) { +.divide-yellow-400 > :not(template) ~ :not(template) { border-color: #f6e05e !important; } -.divide-yellow-500 > :not(:last-child) { +.divide-yellow-500 > :not(template) ~ :not(template) { border-color: #ecc94b !important; } -.divide-yellow-600 > :not(:last-child) { +.divide-yellow-600 > :not(template) ~ :not(template) { border-color: #d69e2e !important; } -.divide-yellow-700 > :not(:last-child) { +.divide-yellow-700 > :not(template) ~ :not(template) { border-color: #b7791f !important; } -.divide-yellow-800 > :not(:last-child) { +.divide-yellow-800 > :not(template) ~ :not(template) { border-color: #975a16 !important; } -.divide-yellow-900 > :not(:last-child) { +.divide-yellow-900 > :not(template) ~ :not(template) { border-color: #744210 !important; } -.divide-green-100 > :not(:last-child) { +.divide-green-100 > :not(template) ~ :not(template) { border-color: #f0fff4 !important; } -.divide-green-200 > :not(:last-child) { +.divide-green-200 > :not(template) ~ :not(template) { border-color: #c6f6d5 !important; } -.divide-green-300 > :not(:last-child) { +.divide-green-300 > :not(template) ~ :not(template) { border-color: #9ae6b4 !important; } -.divide-green-400 > :not(:last-child) { +.divide-green-400 > :not(template) ~ :not(template) { border-color: #68d391 !important; } -.divide-green-500 > :not(:last-child) { +.divide-green-500 > :not(template) ~ :not(template) { border-color: #48bb78 !important; } -.divide-green-600 > :not(:last-child) { +.divide-green-600 > :not(template) ~ :not(template) { border-color: #38a169 !important; } -.divide-green-700 > :not(:last-child) { +.divide-green-700 > :not(template) ~ :not(template) { border-color: #2f855a !important; } -.divide-green-800 > :not(:last-child) { +.divide-green-800 > :not(template) ~ :not(template) { border-color: #276749 !important; } -.divide-green-900 > :not(:last-child) { +.divide-green-900 > :not(template) ~ :not(template) { border-color: #22543d !important; } -.divide-teal-100 > :not(:last-child) { +.divide-teal-100 > :not(template) ~ :not(template) { border-color: #e6fffa !important; } -.divide-teal-200 > :not(:last-child) { +.divide-teal-200 > :not(template) ~ :not(template) { border-color: #b2f5ea !important; } -.divide-teal-300 > :not(:last-child) { +.divide-teal-300 > :not(template) ~ :not(template) { border-color: #81e6d9 !important; } -.divide-teal-400 > :not(:last-child) { +.divide-teal-400 > :not(template) ~ :not(template) { border-color: #4fd1c5 !important; } -.divide-teal-500 > :not(:last-child) { +.divide-teal-500 > :not(template) ~ :not(template) { border-color: #38b2ac !important; } -.divide-teal-600 > :not(:last-child) { +.divide-teal-600 > :not(template) ~ :not(template) { border-color: #319795 !important; } -.divide-teal-700 > :not(:last-child) { +.divide-teal-700 > :not(template) ~ :not(template) { border-color: #2c7a7b !important; } -.divide-teal-800 > :not(:last-child) { +.divide-teal-800 > :not(template) ~ :not(template) { border-color: #285e61 !important; } -.divide-teal-900 > :not(:last-child) { +.divide-teal-900 > :not(template) ~ :not(template) { border-color: #234e52 !important; } -.divide-blue-100 > :not(:last-child) { +.divide-blue-100 > :not(template) ~ :not(template) { border-color: #ebf8ff !important; } -.divide-blue-200 > :not(:last-child) { +.divide-blue-200 > :not(template) ~ :not(template) { border-color: #bee3f8 !important; } -.divide-blue-300 > :not(:last-child) { +.divide-blue-300 > :not(template) ~ :not(template) { border-color: #90cdf4 !important; } -.divide-blue-400 > :not(:last-child) { +.divide-blue-400 > :not(template) ~ :not(template) { border-color: #63b3ed !important; } -.divide-blue-500 > :not(:last-child) { +.divide-blue-500 > :not(template) ~ :not(template) { border-color: #4299e1 !important; } -.divide-blue-600 > :not(:last-child) { +.divide-blue-600 > :not(template) ~ :not(template) { border-color: #3182ce !important; } -.divide-blue-700 > :not(:last-child) { +.divide-blue-700 > :not(template) ~ :not(template) { border-color: #2b6cb0 !important; } -.divide-blue-800 > :not(:last-child) { +.divide-blue-800 > :not(template) ~ :not(template) { border-color: #2c5282 !important; } -.divide-blue-900 > :not(:last-child) { +.divide-blue-900 > :not(template) ~ :not(template) { border-color: #2a4365 !important; } -.divide-indigo-100 > :not(:last-child) { +.divide-indigo-100 > :not(template) ~ :not(template) { border-color: #ebf4ff !important; } -.divide-indigo-200 > :not(:last-child) { +.divide-indigo-200 > :not(template) ~ :not(template) { border-color: #c3dafe !important; } -.divide-indigo-300 > :not(:last-child) { +.divide-indigo-300 > :not(template) ~ :not(template) { border-color: #a3bffa !important; } -.divide-indigo-400 > :not(:last-child) { +.divide-indigo-400 > :not(template) ~ :not(template) { border-color: #7f9cf5 !important; } -.divide-indigo-500 > :not(:last-child) { +.divide-indigo-500 > :not(template) ~ :not(template) { border-color: #667eea !important; } -.divide-indigo-600 > :not(:last-child) { +.divide-indigo-600 > :not(template) ~ :not(template) { border-color: #5a67d8 !important; } -.divide-indigo-700 > :not(:last-child) { +.divide-indigo-700 > :not(template) ~ :not(template) { border-color: #4c51bf !important; } -.divide-indigo-800 > :not(:last-child) { +.divide-indigo-800 > :not(template) ~ :not(template) { border-color: #434190 !important; } -.divide-indigo-900 > :not(:last-child) { +.divide-indigo-900 > :not(template) ~ :not(template) { border-color: #3c366b !important; } -.divide-purple-100 > :not(:last-child) { +.divide-purple-100 > :not(template) ~ :not(template) { border-color: #faf5ff !important; } -.divide-purple-200 > :not(:last-child) { +.divide-purple-200 > :not(template) ~ :not(template) { border-color: #e9d8fd !important; } -.divide-purple-300 > :not(:last-child) { +.divide-purple-300 > :not(template) ~ :not(template) { border-color: #d6bcfa !important; } -.divide-purple-400 > :not(:last-child) { +.divide-purple-400 > :not(template) ~ :not(template) { border-color: #b794f4 !important; } -.divide-purple-500 > :not(:last-child) { +.divide-purple-500 > :not(template) ~ :not(template) { border-color: #9f7aea !important; } -.divide-purple-600 > :not(:last-child) { +.divide-purple-600 > :not(template) ~ :not(template) { border-color: #805ad5 !important; } -.divide-purple-700 > :not(:last-child) { +.divide-purple-700 > :not(template) ~ :not(template) { border-color: #6b46c1 !important; } -.divide-purple-800 > :not(:last-child) { +.divide-purple-800 > :not(template) ~ :not(template) { border-color: #553c9a !important; } -.divide-purple-900 > :not(:last-child) { +.divide-purple-900 > :not(template) ~ :not(template) { border-color: #44337a !important; } -.divide-pink-100 > :not(:last-child) { +.divide-pink-100 > :not(template) ~ :not(template) { border-color: #fff5f7 !important; } -.divide-pink-200 > :not(:last-child) { +.divide-pink-200 > :not(template) ~ :not(template) { border-color: #fed7e2 !important; } -.divide-pink-300 > :not(:last-child) { +.divide-pink-300 > :not(template) ~ :not(template) { border-color: #fbb6ce !important; } -.divide-pink-400 > :not(:last-child) { +.divide-pink-400 > :not(template) ~ :not(template) { border-color: #f687b3 !important; } -.divide-pink-500 > :not(:last-child) { +.divide-pink-500 > :not(template) ~ :not(template) { border-color: #ed64a6 !important; } -.divide-pink-600 > :not(:last-child) { +.divide-pink-600 > :not(template) ~ :not(template) { border-color: #d53f8c !important; } -.divide-pink-700 > :not(:last-child) { +.divide-pink-700 > :not(template) ~ :not(template) { border-color: #b83280 !important; } -.divide-pink-800 > :not(:last-child) { +.divide-pink-800 > :not(template) ~ :not(template) { border-color: #97266d !important; } -.divide-pink-900 > :not(:last-child) { +.divide-pink-900 > :not(template) ~ :not(template) { border-color: #702459 !important; } diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index a2e9ce46b5eb..81a8b5c51b60 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -606,571 +606,571 @@ video { } } -.space-y-0 > :not(:last-child) { - margin-bottom: 0; +.space-y-0 > :not(template) ~ :not(template) { + margin-top: 0; } -.space-x-0 > :not(:last-child) { - margin-right: 0; +.space-x-0 > :not(template) ~ :not(template) { + margin-left: 0; } -.space-y-1 > :not(:last-child) { - margin-bottom: 0.25rem; +.space-y-1 > :not(template) ~ :not(template) { + margin-top: 0.25rem; } -.space-x-1 > :not(:last-child) { - margin-right: 0.25rem; +.space-x-1 > :not(template) ~ :not(template) { + margin-left: 0.25rem; } -.space-y-2 > :not(:last-child) { - margin-bottom: 0.5rem; +.space-y-2 > :not(template) ~ :not(template) { + margin-top: 0.5rem; } -.space-x-2 > :not(:last-child) { - margin-right: 0.5rem; +.space-x-2 > :not(template) ~ :not(template) { + margin-left: 0.5rem; } -.space-y-3 > :not(:last-child) { - margin-bottom: 0.75rem; +.space-y-3 > :not(template) ~ :not(template) { + margin-top: 0.75rem; } -.space-x-3 > :not(:last-child) { - margin-right: 0.75rem; +.space-x-3 > :not(template) ~ :not(template) { + margin-left: 0.75rem; } -.space-y-4 > :not(:last-child) { - margin-bottom: 1rem; +.space-y-4 > :not(template) ~ :not(template) { + margin-top: 1rem; } -.space-x-4 > :not(:last-child) { - margin-right: 1rem; +.space-x-4 > :not(template) ~ :not(template) { + margin-left: 1rem; } -.space-y-5 > :not(:last-child) { - margin-bottom: 1.25rem; +.space-y-5 > :not(template) ~ :not(template) { + margin-top: 1.25rem; } -.space-x-5 > :not(:last-child) { - margin-right: 1.25rem; +.space-x-5 > :not(template) ~ :not(template) { + margin-left: 1.25rem; } -.space-y-6 > :not(:last-child) { - margin-bottom: 1.5rem; +.space-y-6 > :not(template) ~ :not(template) { + margin-top: 1.5rem; } -.space-x-6 > :not(:last-child) { - margin-right: 1.5rem; +.space-x-6 > :not(template) ~ :not(template) { + margin-left: 1.5rem; } -.space-y-8 > :not(:last-child) { - margin-bottom: 2rem; +.space-y-8 > :not(template) ~ :not(template) { + margin-top: 2rem; } -.space-x-8 > :not(:last-child) { - margin-right: 2rem; +.space-x-8 > :not(template) ~ :not(template) { + margin-left: 2rem; } -.space-y-10 > :not(:last-child) { - margin-bottom: 2.5rem; +.space-y-10 > :not(template) ~ :not(template) { + margin-top: 2.5rem; } -.space-x-10 > :not(:last-child) { - margin-right: 2.5rem; +.space-x-10 > :not(template) ~ :not(template) { + margin-left: 2.5rem; } -.space-y-12 > :not(:last-child) { - margin-bottom: 3rem; +.space-y-12 > :not(template) ~ :not(template) { + margin-top: 3rem; } -.space-x-12 > :not(:last-child) { - margin-right: 3rem; +.space-x-12 > :not(template) ~ :not(template) { + margin-left: 3rem; } -.space-y-16 > :not(:last-child) { - margin-bottom: 4rem; +.space-y-16 > :not(template) ~ :not(template) { + margin-top: 4rem; } -.space-x-16 > :not(:last-child) { - margin-right: 4rem; +.space-x-16 > :not(template) ~ :not(template) { + margin-left: 4rem; } -.space-y-20 > :not(:last-child) { - margin-bottom: 5rem; +.space-y-20 > :not(template) ~ :not(template) { + margin-top: 5rem; } -.space-x-20 > :not(:last-child) { - margin-right: 5rem; +.space-x-20 > :not(template) ~ :not(template) { + margin-left: 5rem; } -.space-y-24 > :not(:last-child) { - margin-bottom: 6rem; +.space-y-24 > :not(template) ~ :not(template) { + margin-top: 6rem; } -.space-x-24 > :not(:last-child) { - margin-right: 6rem; +.space-x-24 > :not(template) ~ :not(template) { + margin-left: 6rem; } -.space-y-32 > :not(:last-child) { - margin-bottom: 8rem; +.space-y-32 > :not(template) ~ :not(template) { + margin-top: 8rem; } -.space-x-32 > :not(:last-child) { - margin-right: 8rem; +.space-x-32 > :not(template) ~ :not(template) { + margin-left: 8rem; } -.space-y-40 > :not(:last-child) { - margin-bottom: 10rem; +.space-y-40 > :not(template) ~ :not(template) { + margin-top: 10rem; } -.space-x-40 > :not(:last-child) { - margin-right: 10rem; +.space-x-40 > :not(template) ~ :not(template) { + margin-left: 10rem; } -.space-y-48 > :not(:last-child) { - margin-bottom: 12rem; +.space-y-48 > :not(template) ~ :not(template) { + margin-top: 12rem; } -.space-x-48 > :not(:last-child) { - margin-right: 12rem; +.space-x-48 > :not(template) ~ :not(template) { + margin-left: 12rem; } -.space-y-56 > :not(:last-child) { - margin-bottom: 14rem; +.space-y-56 > :not(template) ~ :not(template) { + margin-top: 14rem; } -.space-x-56 > :not(:last-child) { - margin-right: 14rem; +.space-x-56 > :not(template) ~ :not(template) { + margin-left: 14rem; } -.space-y-64 > :not(:last-child) { - margin-bottom: 16rem; +.space-y-64 > :not(template) ~ :not(template) { + margin-top: 16rem; } -.space-x-64 > :not(:last-child) { - margin-right: 16rem; +.space-x-64 > :not(template) ~ :not(template) { + margin-left: 16rem; } -.space-y-px > :not(:last-child) { - margin-bottom: 1px; +.space-y-px > :not(template) ~ :not(template) { + margin-top: 1px; } -.space-x-px > :not(:last-child) { - margin-right: 1px; +.space-x-px > :not(template) ~ :not(template) { + margin-left: 1px; } -.divide-y-0 > :not(:last-child) { - border-bottom-width: 0; +.divide-y-0 > :not(template) ~ :not(template) { + border-top-width: 0; } -.divide-x-0 > :not(:last-child) { - border-right-width: 0; +.divide-x-0 > :not(template) ~ :not(template) { + border-left-width: 0; } -.divide-y-2 > :not(:last-child) { - border-bottom-width: 2px; +.divide-y-2 > :not(template) ~ :not(template) { + border-top-width: 2px; } -.divide-x-2 > :not(:last-child) { - border-right-width: 2px; +.divide-x-2 > :not(template) ~ :not(template) { + border-left-width: 2px; } -.divide-y-4 > :not(:last-child) { - border-bottom-width: 4px; +.divide-y-4 > :not(template) ~ :not(template) { + border-top-width: 4px; } -.divide-x-4 > :not(:last-child) { - border-right-width: 4px; +.divide-x-4 > :not(template) ~ :not(template) { + border-left-width: 4px; } -.divide-y-8 > :not(:last-child) { - border-bottom-width: 8px; +.divide-y-8 > :not(template) ~ :not(template) { + border-top-width: 8px; } -.divide-x-8 > :not(:last-child) { - border-right-width: 8px; +.divide-x-8 > :not(template) ~ :not(template) { + border-left-width: 8px; } -.divide-y > :not(:last-child) { - border-bottom-width: 1px; +.divide-y > :not(template) ~ :not(template) { + border-top-width: 1px; } -.divide-x > :not(:last-child) { - border-right-width: 1px; +.divide-x > :not(template) ~ :not(template) { + border-left-width: 1px; } -.divide-transparent > :not(:last-child) { +.divide-transparent > :not(template) ~ :not(template) { border-color: transparent; } -.divide-current > :not(:last-child) { +.divide-current > :not(template) ~ :not(template) { border-color: currentColor; } -.divide-black > :not(:last-child) { +.divide-black > :not(template) ~ :not(template) { border-color: #000; } -.divide-white > :not(:last-child) { +.divide-white > :not(template) ~ :not(template) { border-color: #fff; } -.divide-gray-100 > :not(:last-child) { +.divide-gray-100 > :not(template) ~ :not(template) { border-color: #f7fafc; } -.divide-gray-200 > :not(:last-child) { +.divide-gray-200 > :not(template) ~ :not(template) { border-color: #edf2f7; } -.divide-gray-300 > :not(:last-child) { +.divide-gray-300 > :not(template) ~ :not(template) { border-color: #e2e8f0; } -.divide-gray-400 > :not(:last-child) { +.divide-gray-400 > :not(template) ~ :not(template) { border-color: #cbd5e0; } -.divide-gray-500 > :not(:last-child) { +.divide-gray-500 > :not(template) ~ :not(template) { border-color: #a0aec0; } -.divide-gray-600 > :not(:last-child) { +.divide-gray-600 > :not(template) ~ :not(template) { border-color: #718096; } -.divide-gray-700 > :not(:last-child) { +.divide-gray-700 > :not(template) ~ :not(template) { border-color: #4a5568; } -.divide-gray-800 > :not(:last-child) { +.divide-gray-800 > :not(template) ~ :not(template) { border-color: #2d3748; } -.divide-gray-900 > :not(:last-child) { +.divide-gray-900 > :not(template) ~ :not(template) { border-color: #1a202c; } -.divide-red-100 > :not(:last-child) { +.divide-red-100 > :not(template) ~ :not(template) { border-color: #fff5f5; } -.divide-red-200 > :not(:last-child) { +.divide-red-200 > :not(template) ~ :not(template) { border-color: #fed7d7; } -.divide-red-300 > :not(:last-child) { +.divide-red-300 > :not(template) ~ :not(template) { border-color: #feb2b2; } -.divide-red-400 > :not(:last-child) { +.divide-red-400 > :not(template) ~ :not(template) { border-color: #fc8181; } -.divide-red-500 > :not(:last-child) { +.divide-red-500 > :not(template) ~ :not(template) { border-color: #f56565; } -.divide-red-600 > :not(:last-child) { +.divide-red-600 > :not(template) ~ :not(template) { border-color: #e53e3e; } -.divide-red-700 > :not(:last-child) { +.divide-red-700 > :not(template) ~ :not(template) { border-color: #c53030; } -.divide-red-800 > :not(:last-child) { +.divide-red-800 > :not(template) ~ :not(template) { border-color: #9b2c2c; } -.divide-red-900 > :not(:last-child) { +.divide-red-900 > :not(template) ~ :not(template) { border-color: #742a2a; } -.divide-orange-100 > :not(:last-child) { +.divide-orange-100 > :not(template) ~ :not(template) { border-color: #fffaf0; } -.divide-orange-200 > :not(:last-child) { +.divide-orange-200 > :not(template) ~ :not(template) { border-color: #feebc8; } -.divide-orange-300 > :not(:last-child) { +.divide-orange-300 > :not(template) ~ :not(template) { border-color: #fbd38d; } -.divide-orange-400 > :not(:last-child) { +.divide-orange-400 > :not(template) ~ :not(template) { border-color: #f6ad55; } -.divide-orange-500 > :not(:last-child) { +.divide-orange-500 > :not(template) ~ :not(template) { border-color: #ed8936; } -.divide-orange-600 > :not(:last-child) { +.divide-orange-600 > :not(template) ~ :not(template) { border-color: #dd6b20; } -.divide-orange-700 > :not(:last-child) { +.divide-orange-700 > :not(template) ~ :not(template) { border-color: #c05621; } -.divide-orange-800 > :not(:last-child) { +.divide-orange-800 > :not(template) ~ :not(template) { border-color: #9c4221; } -.divide-orange-900 > :not(:last-child) { +.divide-orange-900 > :not(template) ~ :not(template) { border-color: #7b341e; } -.divide-yellow-100 > :not(:last-child) { +.divide-yellow-100 > :not(template) ~ :not(template) { border-color: #fffff0; } -.divide-yellow-200 > :not(:last-child) { +.divide-yellow-200 > :not(template) ~ :not(template) { border-color: #fefcbf; } -.divide-yellow-300 > :not(:last-child) { +.divide-yellow-300 > :not(template) ~ :not(template) { border-color: #faf089; } -.divide-yellow-400 > :not(:last-child) { +.divide-yellow-400 > :not(template) ~ :not(template) { border-color: #f6e05e; } -.divide-yellow-500 > :not(:last-child) { +.divide-yellow-500 > :not(template) ~ :not(template) { border-color: #ecc94b; } -.divide-yellow-600 > :not(:last-child) { +.divide-yellow-600 > :not(template) ~ :not(template) { border-color: #d69e2e; } -.divide-yellow-700 > :not(:last-child) { +.divide-yellow-700 > :not(template) ~ :not(template) { border-color: #b7791f; } -.divide-yellow-800 > :not(:last-child) { +.divide-yellow-800 > :not(template) ~ :not(template) { border-color: #975a16; } -.divide-yellow-900 > :not(:last-child) { +.divide-yellow-900 > :not(template) ~ :not(template) { border-color: #744210; } -.divide-green-100 > :not(:last-child) { +.divide-green-100 > :not(template) ~ :not(template) { border-color: #f0fff4; } -.divide-green-200 > :not(:last-child) { +.divide-green-200 > :not(template) ~ :not(template) { border-color: #c6f6d5; } -.divide-green-300 > :not(:last-child) { +.divide-green-300 > :not(template) ~ :not(template) { border-color: #9ae6b4; } -.divide-green-400 > :not(:last-child) { +.divide-green-400 > :not(template) ~ :not(template) { border-color: #68d391; } -.divide-green-500 > :not(:last-child) { +.divide-green-500 > :not(template) ~ :not(template) { border-color: #48bb78; } -.divide-green-600 > :not(:last-child) { +.divide-green-600 > :not(template) ~ :not(template) { border-color: #38a169; } -.divide-green-700 > :not(:last-child) { +.divide-green-700 > :not(template) ~ :not(template) { border-color: #2f855a; } -.divide-green-800 > :not(:last-child) { +.divide-green-800 > :not(template) ~ :not(template) { border-color: #276749; } -.divide-green-900 > :not(:last-child) { +.divide-green-900 > :not(template) ~ :not(template) { border-color: #22543d; } -.divide-teal-100 > :not(:last-child) { +.divide-teal-100 > :not(template) ~ :not(template) { border-color: #e6fffa; } -.divide-teal-200 > :not(:last-child) { +.divide-teal-200 > :not(template) ~ :not(template) { border-color: #b2f5ea; } -.divide-teal-300 > :not(:last-child) { +.divide-teal-300 > :not(template) ~ :not(template) { border-color: #81e6d9; } -.divide-teal-400 > :not(:last-child) { +.divide-teal-400 > :not(template) ~ :not(template) { border-color: #4fd1c5; } -.divide-teal-500 > :not(:last-child) { +.divide-teal-500 > :not(template) ~ :not(template) { border-color: #38b2ac; } -.divide-teal-600 > :not(:last-child) { +.divide-teal-600 > :not(template) ~ :not(template) { border-color: #319795; } -.divide-teal-700 > :not(:last-child) { +.divide-teal-700 > :not(template) ~ :not(template) { border-color: #2c7a7b; } -.divide-teal-800 > :not(:last-child) { +.divide-teal-800 > :not(template) ~ :not(template) { border-color: #285e61; } -.divide-teal-900 > :not(:last-child) { +.divide-teal-900 > :not(template) ~ :not(template) { border-color: #234e52; } -.divide-blue-100 > :not(:last-child) { +.divide-blue-100 > :not(template) ~ :not(template) { border-color: #ebf8ff; } -.divide-blue-200 > :not(:last-child) { +.divide-blue-200 > :not(template) ~ :not(template) { border-color: #bee3f8; } -.divide-blue-300 > :not(:last-child) { +.divide-blue-300 > :not(template) ~ :not(template) { border-color: #90cdf4; } -.divide-blue-400 > :not(:last-child) { +.divide-blue-400 > :not(template) ~ :not(template) { border-color: #63b3ed; } -.divide-blue-500 > :not(:last-child) { +.divide-blue-500 > :not(template) ~ :not(template) { border-color: #4299e1; } -.divide-blue-600 > :not(:last-child) { +.divide-blue-600 > :not(template) ~ :not(template) { border-color: #3182ce; } -.divide-blue-700 > :not(:last-child) { +.divide-blue-700 > :not(template) ~ :not(template) { border-color: #2b6cb0; } -.divide-blue-800 > :not(:last-child) { +.divide-blue-800 > :not(template) ~ :not(template) { border-color: #2c5282; } -.divide-blue-900 > :not(:last-child) { +.divide-blue-900 > :not(template) ~ :not(template) { border-color: #2a4365; } -.divide-indigo-100 > :not(:last-child) { +.divide-indigo-100 > :not(template) ~ :not(template) { border-color: #ebf4ff; } -.divide-indigo-200 > :not(:last-child) { +.divide-indigo-200 > :not(template) ~ :not(template) { border-color: #c3dafe; } -.divide-indigo-300 > :not(:last-child) { +.divide-indigo-300 > :not(template) ~ :not(template) { border-color: #a3bffa; } -.divide-indigo-400 > :not(:last-child) { +.divide-indigo-400 > :not(template) ~ :not(template) { border-color: #7f9cf5; } -.divide-indigo-500 > :not(:last-child) { +.divide-indigo-500 > :not(template) ~ :not(template) { border-color: #667eea; } -.divide-indigo-600 > :not(:last-child) { +.divide-indigo-600 > :not(template) ~ :not(template) { border-color: #5a67d8; } -.divide-indigo-700 > :not(:last-child) { +.divide-indigo-700 > :not(template) ~ :not(template) { border-color: #4c51bf; } -.divide-indigo-800 > :not(:last-child) { +.divide-indigo-800 > :not(template) ~ :not(template) { border-color: #434190; } -.divide-indigo-900 > :not(:last-child) { +.divide-indigo-900 > :not(template) ~ :not(template) { border-color: #3c366b; } -.divide-purple-100 > :not(:last-child) { +.divide-purple-100 > :not(template) ~ :not(template) { border-color: #faf5ff; } -.divide-purple-200 > :not(:last-child) { +.divide-purple-200 > :not(template) ~ :not(template) { border-color: #e9d8fd; } -.divide-purple-300 > :not(:last-child) { +.divide-purple-300 > :not(template) ~ :not(template) { border-color: #d6bcfa; } -.divide-purple-400 > :not(:last-child) { +.divide-purple-400 > :not(template) ~ :not(template) { border-color: #b794f4; } -.divide-purple-500 > :not(:last-child) { +.divide-purple-500 > :not(template) ~ :not(template) { border-color: #9f7aea; } -.divide-purple-600 > :not(:last-child) { +.divide-purple-600 > :not(template) ~ :not(template) { border-color: #805ad5; } -.divide-purple-700 > :not(:last-child) { +.divide-purple-700 > :not(template) ~ :not(template) { border-color: #6b46c1; } -.divide-purple-800 > :not(:last-child) { +.divide-purple-800 > :not(template) ~ :not(template) { border-color: #553c9a; } -.divide-purple-900 > :not(:last-child) { +.divide-purple-900 > :not(template) ~ :not(template) { border-color: #44337a; } -.divide-pink-100 > :not(:last-child) { +.divide-pink-100 > :not(template) ~ :not(template) { border-color: #fff5f7; } -.divide-pink-200 > :not(:last-child) { +.divide-pink-200 > :not(template) ~ :not(template) { border-color: #fed7e2; } -.divide-pink-300 > :not(:last-child) { +.divide-pink-300 > :not(template) ~ :not(template) { border-color: #fbb6ce; } -.divide-pink-400 > :not(:last-child) { +.divide-pink-400 > :not(template) ~ :not(template) { border-color: #f687b3; } -.divide-pink-500 > :not(:last-child) { +.divide-pink-500 > :not(template) ~ :not(template) { border-color: #ed64a6; } -.divide-pink-600 > :not(:last-child) { +.divide-pink-600 > :not(template) ~ :not(template) { border-color: #d53f8c; } -.divide-pink-700 > :not(:last-child) { +.divide-pink-700 > :not(template) ~ :not(template) { border-color: #b83280; } -.divide-pink-800 > :not(:last-child) { +.divide-pink-800 > :not(template) ~ :not(template) { border-color: #97266d; } -.divide-pink-900 > :not(:last-child) { +.divide-pink-900 > :not(template) ~ :not(template) { border-color: #702459; } diff --git a/__tests__/plugins/divideColor.test.js b/__tests__/plugins/divideColor.test.js index 8d73795400a2..21c0bba34131 100644 --- a/__tests__/plugins/divideColor.test.js +++ b/__tests__/plugins/divideColor.test.js @@ -40,20 +40,48 @@ test('generating divide color utilities', () => { expect(utilities).toEqual([ [ { - '.divide-purple > * + *': { 'border-color': 'purple' }, - '.divide-white-25 > * + *': { 'border-color': 'rgba(255,255,255,.25)' }, - '.divide-white-50 > * + *': { 'border-color': 'rgba(255,255,255,.5)' }, - '.divide-white-75 > * + *': { 'border-color': 'rgba(255,255,255,.75)' }, - '.divide-white > * + *': { 'border-color': '#fff' }, - '.divide-red-1 > * + *': { 'border-color': 'rgb(33,0,0)' }, - '.divide-red-2 > * + *': { 'border-color': 'rgb(67,0,0)' }, - '.divide-red-3 > * + *': { 'border-color': 'rgb(100,0,0)' }, - '.divide-green-1 > * + *': { 'border-color': 'rgb(0,33,0)' }, - '.divide-green-2 > * + *': { 'border-color': 'rgb(0,67,0)' }, - '.divide-green-3 > * + *': { 'border-color': 'rgb(0,100,0)' }, - '.divide-blue-1 > * + *': { 'border-color': 'rgb(0,0,33)' }, - '.divide-blue-2 > * + *': { 'border-color': 'rgb(0,0,67)' }, - '.divide-blue-3 > * + *': { 'border-color': 'rgb(0,0,100)' }, + '.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'], ], diff --git a/__tests__/plugins/divideWidth.test.js b/__tests__/plugins/divideWidth.test.js index b9f9b9b06ce3..af1723b6a7b5 100644 --- a/__tests__/plugins/divideWidth.test.js +++ b/__tests__/plugins/divideWidth.test.js @@ -21,14 +21,14 @@ test('generating divide width utilities', () => { expect(utilities).toEqual([ [ { - '.divide-y-2 > * + *': { 'border-top-width': '2px' }, - '.divide-x-2 > * + *': { 'border-left-width': '2px' }, - '.divide-y-4 > * + *': { 'border-top-width': '4px' }, - '.divide-x-4 > * + *': { 'border-left-width': '4px' }, - '.divide-y-8 > * + *': { 'border-top-width': '8px' }, - '.divide-x-8 > * + *': { 'border-left-width': '8px' }, - '.divide-y > * + *': { 'border-top-width': '1px' }, - '.divide-x > * + *': { 'border-left-width': '1px' }, + '.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'], ], diff --git a/__tests__/plugins/space.test.js b/__tests__/plugins/space.test.js index 2b8d70f580eb..e77277d0eac0 100644 --- a/__tests__/plugins/space.test.js +++ b/__tests__/plugins/space.test.js @@ -21,14 +21,14 @@ test('generating space utilities', () => { expect(utilities).toEqual([ [ { - '.space-y-1 > * + *': { 'margin-top': '1px' }, - '.space-x-1 > * + *': { 'margin-left': '1px' }, - '.space-y-2 > * + *': { 'margin-top': '2px' }, - '.space-x-2 > * + *': { 'margin-left': '2px' }, - '.space-y-4 > * + *': { 'margin-top': '4px' }, - '.space-x-4 > * + *': { 'margin-left': '4px' }, - '.space-y-8 > * + *': { 'margin-top': '8px' }, - '.space-x-8 > * + *': { 'margin-left': '8px' }, + '.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'], ], diff --git a/src/plugins/divideColor.js b/src/plugins/divideColor.js index 5260774dd79e..9877263c48aa 100644 --- a/src/plugins/divideColor.js +++ b/src/plugins/divideColor.js @@ -8,7 +8,7 @@ export default function() { const utilities = _.fromPairs( _.map(_.omit(colors, 'default'), (value, modifier) => { return [ - `.${e(`divide-${modifier}`)} > :not(:last-child)`, + `.${e(`divide-${modifier}`)} > :not(template) ~ :not(template)`, { 'border-color': value, }, diff --git a/src/plugins/divideWidth.js b/src/plugins/divideWidth.js index 254bc5cbb930..f1fdb7f94924 100644 --- a/src/plugins/divideWidth.js +++ b/src/plugins/divideWidth.js @@ -4,8 +4,12 @@ export default function() { return function({ addUtilities, e, theme, variants }) { const generators = [ (value, modifier) => ({ - [`.${e(`divide-y${modifier}`)} > :not(:last-child)`]: { 'border-bottom-width': `${value}` }, - [`.${e(`divide-x${modifier}`)} > :not(:last-child)`]: { 'border-right-width': `${value}` }, + [`.${e(`divide-y${modifier}`)} > :not(template) ~ :not(template)`]: { + 'border-top-width': `${value}`, + }, + [`.${e(`divide-x${modifier}`)} > :not(template) ~ :not(template)`]: { + 'border-left-width': `${value}`, + }, }), ] diff --git a/src/plugins/space.js b/src/plugins/space.js index 8fae0d97015b..c7c674631109 100644 --- a/src/plugins/space.js +++ b/src/plugins/space.js @@ -4,8 +4,12 @@ export default function() { return function({ addUtilities, e, theme, variants }) { const generators = [ (size, modifier) => ({ - [`.${e(`space-y-${modifier}`)} > :not(:last-child)`]: { 'margin-bottom': `${size}` }, - [`.${e(`space-x-${modifier}`)} > :not(:last-child)`]: { 'margin-right': `${size}` }, + [`.${e(`space-y-${modifier}`)} > :not(template) ~ :not(template)`]: { + 'margin-top': `${size}`, + }, + [`.${e(`space-x-${modifier}`)} > :not(template) ~ :not(template)`]: { + 'margin-left': `${size}`, + }, }), ]