Skip to content

Commit c84c397

Browse files
adamwathanadamwathan
committed
Add stack-x and stack-y utilities
1 parent 51d0dd3 commit c84c397

6 files changed

Lines changed: 369 additions & 0 deletions

File tree

‎__tests__/fixtures/tailwind-output-important.css‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -606,6 +606,158 @@ video {
606606
}
607607
}
608608

609+
.stack-y-0 > * + * {
610+
margin-top: 0 !important;
611+
}
612+
613+
.stack-x-0 > * + * {
614+
margin-left: 0 !important;
615+
}
616+
617+
.stack-y-1 > * + * {
618+
margin-top: 0.25rem !important;
619+
}
620+
621+
.stack-x-1 > * + * {
622+
margin-left: 0.25rem !important;
623+
}
624+
625+
.stack-y-2 > * + * {
626+
margin-top: 0.5rem !important;
627+
}
628+
629+
.stack-x-2 > * + * {
630+
margin-left: 0.5rem !important;
631+
}
632+
633+
.stack-y-3 > * + * {
634+
margin-top: 0.75rem !important;
635+
}
636+
637+
.stack-x-3 > * + * {
638+
margin-left: 0.75rem !important;
639+
}
640+
641+
.stack-y-4 > * + * {
642+
margin-top: 1rem !important;
643+
}
644+
645+
.stack-x-4 > * + * {
646+
margin-left: 1rem !important;
647+
}
648+
649+
.stack-y-5 > * + * {
650+
margin-top: 1.25rem !important;
651+
}
652+
653+
.stack-x-5 > * + * {
654+
margin-left: 1.25rem !important;
655+
}
656+
657+
.stack-y-6 > * + * {
658+
margin-top: 1.5rem !important;
659+
}
660+
661+
.stack-x-6 > * + * {
662+
margin-left: 1.5rem !important;
663+
}
664+
665+
.stack-y-8 > * + * {
666+
margin-top: 2rem !important;
667+
}
668+
669+
.stack-x-8 > * + * {
670+
margin-left: 2rem !important;
671+
}
672+
673+
.stack-y-10 > * + * {
674+
margin-top: 2.5rem !important;
675+
}
676+
677+
.stack-x-10 > * + * {
678+
margin-left: 2.5rem !important;
679+
}
680+
681+
.stack-y-12 > * + * {
682+
margin-top: 3rem !important;
683+
}
684+
685+
.stack-x-12 > * + * {
686+
margin-left: 3rem !important;
687+
}
688+
689+
.stack-y-16 > * + * {
690+
margin-top: 4rem !important;
691+
}
692+
693+
.stack-x-16 > * + * {
694+
margin-left: 4rem !important;
695+
}
696+
697+
.stack-y-20 > * + * {
698+
margin-top: 5rem !important;
699+
}
700+
701+
.stack-x-20 > * + * {
702+
margin-left: 5rem !important;
703+
}
704+
705+
.stack-y-24 > * + * {
706+
margin-top: 6rem !important;
707+
}
708+
709+
.stack-x-24 > * + * {
710+
margin-left: 6rem !important;
711+
}
712+
713+
.stack-y-32 > * + * {
714+
margin-top: 8rem !important;
715+
}
716+
717+
.stack-x-32 > * + * {
718+
margin-left: 8rem !important;
719+
}
720+
721+
.stack-y-40 > * + * {
722+
margin-top: 10rem !important;
723+
}
724+
725+
.stack-x-40 > * + * {
726+
margin-left: 10rem !important;
727+
}
728+
729+
.stack-y-48 > * + * {
730+
margin-top: 12rem !important;
731+
}
732+
733+
.stack-x-48 > * + * {
734+
margin-left: 12rem !important;
735+
}
736+
737+
.stack-y-56 > * + * {
738+
margin-top: 14rem !important;
739+
}
740+
741+
.stack-x-56 > * + * {
742+
margin-left: 14rem !important;
743+
}
744+
745+
.stack-y-64 > * + * {
746+
margin-top: 16rem !important;
747+
}
748+
749+
.stack-x-64 > * + * {
750+
margin-left: 16rem !important;
751+
}
752+
753+
.stack-y-px > * + * {
754+
margin-top: 1px !important;
755+
}
756+
757+
.stack-x-px > * + * {
758+
margin-left: 1px !important;
759+
}
760+
609761
.sr-only {
610762
position: absolute !important;
611763
width: 1px !important;

‎__tests__/fixtures/tailwind-output.css‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -606,6 +606,158 @@ video {
606606
}
607607
}
608608

609+
.stack-y-0 > * + * {
610+
margin-top: 0;
611+
}
612+
613+
.stack-x-0 > * + * {
614+
margin-left: 0;
615+
}
616+
617+
.stack-y-1 > * + * {
618+
margin-top: 0.25rem;
619+
}
620+
621+
.stack-x-1 > * + * {
622+
margin-left: 0.25rem;
623+
}
624+
625+
.stack-y-2 > * + * {
626+
margin-top: 0.5rem;
627+
}
628+
629+
.stack-x-2 > * + * {
630+
margin-left: 0.5rem;
631+
}
632+
633+
.stack-y-3 > * + * {
634+
margin-top: 0.75rem;
635+
}
636+
637+
.stack-x-3 > * + * {
638+
margin-left: 0.75rem;
639+
}
640+
641+
.stack-y-4 > * + * {
642+
margin-top: 1rem;
643+
}
644+
645+
.stack-x-4 > * + * {
646+
margin-left: 1rem;
647+
}
648+
649+
.stack-y-5 > * + * {
650+
margin-top: 1.25rem;
651+
}
652+
653+
.stack-x-5 > * + * {
654+
margin-left: 1.25rem;
655+
}
656+
657+
.stack-y-6 > * + * {
658+
margin-top: 1.5rem;
659+
}
660+
661+
.stack-x-6 > * + * {
662+
margin-left: 1.5rem;
663+
}
664+
665+
.stack-y-8 > * + * {
666+
margin-top: 2rem;
667+
}
668+
669+
.stack-x-8 > * + * {
670+
margin-left: 2rem;
671+
}
672+
673+
.stack-y-10 > * + * {
674+
margin-top: 2.5rem;
675+
}
676+
677+
.stack-x-10 > * + * {
678+
margin-left: 2.5rem;
679+
}
680+
681+
.stack-y-12 > * + * {
682+
margin-top: 3rem;
683+
}
684+
685+
.stack-x-12 > * + * {
686+
margin-left: 3rem;
687+
}
688+
689+
.stack-y-16 > * + * {
690+
margin-top: 4rem;
691+
}
692+
693+
.stack-x-16 > * + * {
694+
margin-left: 4rem;
695+
}
696+
697+
.stack-y-20 > * + * {
698+
margin-top: 5rem;
699+
}
700+
701+
.stack-x-20 > * + * {
702+
margin-left: 5rem;
703+
}
704+
705+
.stack-y-24 > * + * {
706+
margin-top: 6rem;
707+
}
708+
709+
.stack-x-24 > * + * {
710+
margin-left: 6rem;
711+
}
712+
713+
.stack-y-32 > * + * {
714+
margin-top: 8rem;
715+
}
716+
717+
.stack-x-32 > * + * {
718+
margin-left: 8rem;
719+
}
720+
721+
.stack-y-40 > * + * {
722+
margin-top: 10rem;
723+
}
724+
725+
.stack-x-40 > * + * {
726+
margin-left: 10rem;
727+
}
728+
729+
.stack-y-48 > * + * {
730+
margin-top: 12rem;
731+
}
732+
733+
.stack-x-48 > * + * {
734+
margin-left: 12rem;
735+
}
736+
737+
.stack-y-56 > * + * {
738+
margin-top: 14rem;
739+
}
740+
741+
.stack-x-56 > * + * {
742+
margin-left: 14rem;
743+
}
744+
745+
.stack-y-64 > * + * {
746+
margin-top: 16rem;
747+
}
748+
749+
.stack-x-64 > * + * {
750+
margin-left: 16rem;
751+
}
752+
753+
.stack-y-px > * + * {
754+
margin-top: 1px;
755+
}
756+
757+
.stack-x-px > * + * {
758+
margin-left: 1px;
759+
}
760+
609761
.sr-only {
610762
position: absolute;
611763
width: 1px;

‎__tests__/plugins/stack.test.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import invokePlugin from '../util/invokePlugin'
2+
import plugin from '../../src/plugins/stack'
3+
4+
test('generating stack utilities', () => {
5+
const config = {
6+
theme: {
7+
stack: {
8+
'1': '1px',
9+
'2': '2px',
10+
'4': '4px',
11+
'8': '8px',
12+
},
13+
},
14+
variants: {
15+
stack: ['responsive'],
16+
},
17+
}
18+
19+
const { utilities } = invokePlugin(plugin(), config)
20+
21+
expect(utilities).toEqual([
22+
[
23+
[
24+
{
25+
'.stack-y-1 > * + *': { 'margin-top': '1px' },
26+
'.stack-x-1 > * + *': { 'margin-left': '1px' },
27+
},
28+
{
29+
'.stack-y-2 > * + *': { 'margin-top': '2px' },
30+
'.stack-x-2 > * + *': { 'margin-left': '2px' },
31+
},
32+
{
33+
'.stack-y-4 > * + *': { 'margin-top': '4px' },
34+
'.stack-x-4 > * + *': { 'margin-left': '4px' },
35+
},
36+
{
37+
'.stack-y-8 > * + *': { 'margin-top': '8px' },
38+
'.stack-x-8 > * + *': { 'margin-left': '8px' },
39+
},
40+
],
41+
['responsive'],
42+
],
43+
])
44+
})

‎src/corePlugins.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import preflight from './plugins/preflight'
22
import container from './plugins/container'
3+
import stack from './plugins/stack'
34
import accessibility from './plugins/accessibility'
45
import appearance from './plugins/appearance'
56
import backgroundAttachment from './plugins/backgroundAttachment'
@@ -96,6 +97,7 @@ export default function({ corePlugins: corePluginConfig }) {
9697
return configurePlugins(corePluginConfig, {
9798
preflight,
9899
container,
100+
stack,
99101
accessibility,
100102
appearance,
101103
backgroundAttachment,

‎src/plugins/stack.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import _ from 'lodash'
2+
3+
export default function() {
4+
return function({ addUtilities, e, theme, variants }) {
5+
const generators = [
6+
(size, modifier) => ({
7+
[`.${e(`stack-y-${modifier}`)} > * + *`]: { 'margin-top': `${size}` },
8+
[`.${e(`stack-x-${modifier}`)} > * + *`]: { 'margin-left': `${size}` },
9+
}),
10+
]
11+
12+
const utilities = _.flatMap(generators, generator => {
13+
return _.flatMap(theme('stack'), generator)
14+
})
15+
16+
addUtilities(utilities, variants('stack'))
17+
}
18+
}

0 commit comments

Comments
 (0)