From c84c397f0b25c9ff4442359078b5b0dc26988de9 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Thu, 16 Apr 2020 10:45:05 -0400 Subject: [PATCH] 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 513c74bd7..24040287e 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 0136ffc83..a66f47fcc 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 000000000..616c51197 --- /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 ce66a9049..0cfcac3d7 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 000000000..dd8195c9d --- /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 a1cc24a98..b6ad0005a 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', },