Skip to content

Commit 1743c23

Browse files
adamwathanadamwathan
authored
Merge pull request #1594 from tailwindcss/stack-divide-utilities
Support reverse order for space and divide utilities
2 parents 7ef2e0a + 0653659 commit 1743c23

File tree

6 files changed

+429
-123
lines changed

6 files changed

+429
-123
lines changed

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

Lines changed: 160 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -607,195 +607,307 @@ video {
607607
}
608608

609609
.space-y-0 > :not(template) ~ :not(template) {
610-
margin-top: 0 !important;
610+
--space-y-reverse: 0 !important;
611+
margin-top: calc(0 * calc(1 - var(--space-y-reverse))) !important;
612+
margin-bottom: calc(0 * var(--space-y-reverse)) !important;
611613
}
612614

613615
.space-x-0 > :not(template) ~ :not(template) {
614-
margin-left: 0 !important;
616+
--space-x-reverse: 0 !important;
617+
margin-right: calc(0 * var(--space-y-reverse)) !important;
618+
margin-left: calc(0 * calc(1 - var(--space-y-reverse))) !important;
615619
}
616620

617621
.space-y-1 > :not(template) ~ :not(template) {
618-
margin-top: 0.25rem !important;
622+
--space-y-reverse: 0 !important;
623+
margin-top: calc(0.25rem * calc(1 - var(--space-y-reverse))) !important;
624+
margin-bottom: calc(0.25rem * var(--space-y-reverse)) !important;
619625
}
620626

621627
.space-x-1 > :not(template) ~ :not(template) {
622-
margin-left: 0.25rem !important;
628+
--space-x-reverse: 0 !important;
629+
margin-right: calc(0.25rem * var(--space-y-reverse)) !important;
630+
margin-left: calc(0.25rem * calc(1 - var(--space-y-reverse))) !important;
623631
}
624632

625633
.space-y-2 > :not(template) ~ :not(template) {
626-
margin-top: 0.5rem !important;
634+
--space-y-reverse: 0 !important;
635+
margin-top: calc(0.5rem * calc(1 - var(--space-y-reverse))) !important;
636+
margin-bottom: calc(0.5rem * var(--space-y-reverse)) !important;
627637
}
628638

629639
.space-x-2 > :not(template) ~ :not(template) {
630-
margin-left: 0.5rem !important;
640+
--space-x-reverse: 0 !important;
641+
margin-right: calc(0.5rem * var(--space-y-reverse)) !important;
642+
margin-left: calc(0.5rem * calc(1 - var(--space-y-reverse))) !important;
631643
}
632644

633645
.space-y-3 > :not(template) ~ :not(template) {
634-
margin-top: 0.75rem !important;
646+
--space-y-reverse: 0 !important;
647+
margin-top: calc(0.75rem * calc(1 - var(--space-y-reverse))) !important;
648+
margin-bottom: calc(0.75rem * var(--space-y-reverse)) !important;
635649
}
636650

637651
.space-x-3 > :not(template) ~ :not(template) {
638-
margin-left: 0.75rem !important;
652+
--space-x-reverse: 0 !important;
653+
margin-right: calc(0.75rem * var(--space-y-reverse)) !important;
654+
margin-left: calc(0.75rem * calc(1 - var(--space-y-reverse))) !important;
639655
}
640656

641657
.space-y-4 > :not(template) ~ :not(template) {
642-
margin-top: 1rem !important;
658+
--space-y-reverse: 0 !important;
659+
margin-top: calc(1rem * calc(1 - var(--space-y-reverse))) !important;
660+
margin-bottom: calc(1rem * var(--space-y-reverse)) !important;
643661
}
644662

645663
.space-x-4 > :not(template) ~ :not(template) {
646-
margin-left: 1rem !important;
664+
--space-x-reverse: 0 !important;
665+
margin-right: calc(1rem * var(--space-y-reverse)) !important;
666+
margin-left: calc(1rem * calc(1 - var(--space-y-reverse))) !important;
647667
}
648668

649669
.space-y-5 > :not(template) ~ :not(template) {
650-
margin-top: 1.25rem !important;
670+
--space-y-reverse: 0 !important;
671+
margin-top: calc(1.25rem * calc(1 - var(--space-y-reverse))) !important;
672+
margin-bottom: calc(1.25rem * var(--space-y-reverse)) !important;
651673
}
652674

653675
.space-x-5 > :not(template) ~ :not(template) {
654-
margin-left: 1.25rem !important;
676+
--space-x-reverse: 0 !important;
677+
margin-right: calc(1.25rem * var(--space-y-reverse)) !important;
678+
margin-left: calc(1.25rem * calc(1 - var(--space-y-reverse))) !important;
655679
}
656680

657681
.space-y-6 > :not(template) ~ :not(template) {
658-
margin-top: 1.5rem !important;
682+
--space-y-reverse: 0 !important;
683+
margin-top: calc(1.5rem * calc(1 - var(--space-y-reverse))) !important;
684+
margin-bottom: calc(1.5rem * var(--space-y-reverse)) !important;
659685
}
660686

661687
.space-x-6 > :not(template) ~ :not(template) {
662-
margin-left: 1.5rem !important;
688+
--space-x-reverse: 0 !important;
689+
margin-right: calc(1.5rem * var(--space-y-reverse)) !important;
690+
margin-left: calc(1.5rem * calc(1 - var(--space-y-reverse))) !important;
663691
}
664692

665693
.space-y-8 > :not(template) ~ :not(template) {
666-
margin-top: 2rem !important;
694+
--space-y-reverse: 0 !important;
695+
margin-top: calc(2rem * calc(1 - var(--space-y-reverse))) !important;
696+
margin-bottom: calc(2rem * var(--space-y-reverse)) !important;
667697
}
668698

669699
.space-x-8 > :not(template) ~ :not(template) {
670-
margin-left: 2rem !important;
700+
--space-x-reverse: 0 !important;
701+
margin-right: calc(2rem * var(--space-y-reverse)) !important;
702+
margin-left: calc(2rem * calc(1 - var(--space-y-reverse))) !important;
671703
}
672704

673705
.space-y-10 > :not(template) ~ :not(template) {
674-
margin-top: 2.5rem !important;
706+
--space-y-reverse: 0 !important;
707+
margin-top: calc(2.5rem * calc(1 - var(--space-y-reverse))) !important;
708+
margin-bottom: calc(2.5rem * var(--space-y-reverse)) !important;
675709
}
676710

677711
.space-x-10 > :not(template) ~ :not(template) {
678-
margin-left: 2.5rem !important;
712+
--space-x-reverse: 0 !important;
713+
margin-right: calc(2.5rem * var(--space-y-reverse)) !important;
714+
margin-left: calc(2.5rem * calc(1 - var(--space-y-reverse))) !important;
679715
}
680716

681717
.space-y-12 > :not(template) ~ :not(template) {
682-
margin-top: 3rem !important;
718+
--space-y-reverse: 0 !important;
719+
margin-top: calc(3rem * calc(1 - var(--space-y-reverse))) !important;
720+
margin-bottom: calc(3rem * var(--space-y-reverse)) !important;
683721
}
684722

685723
.space-x-12 > :not(template) ~ :not(template) {
686-
margin-left: 3rem !important;
724+
--space-x-reverse: 0 !important;
725+
margin-right: calc(3rem * var(--space-y-reverse)) !important;
726+
margin-left: calc(3rem * calc(1 - var(--space-y-reverse))) !important;
687727
}
688728

689729
.space-y-16 > :not(template) ~ :not(template) {
690-
margin-top: 4rem !important;
730+
--space-y-reverse: 0 !important;
731+
margin-top: calc(4rem * calc(1 - var(--space-y-reverse))) !important;
732+
margin-bottom: calc(4rem * var(--space-y-reverse)) !important;
691733
}
692734

693735
.space-x-16 > :not(template) ~ :not(template) {
694-
margin-left: 4rem !important;
736+
--space-x-reverse: 0 !important;
737+
margin-right: calc(4rem * var(--space-y-reverse)) !important;
738+
margin-left: calc(4rem * calc(1 - var(--space-y-reverse))) !important;
695739
}
696740

697741
.space-y-20 > :not(template) ~ :not(template) {
698-
margin-top: 5rem !important;
742+
--space-y-reverse: 0 !important;
743+
margin-top: calc(5rem * calc(1 - var(--space-y-reverse))) !important;
744+
margin-bottom: calc(5rem * var(--space-y-reverse)) !important;
699745
}
700746

701747
.space-x-20 > :not(template) ~ :not(template) {
702-
margin-left: 5rem !important;
748+
--space-x-reverse: 0 !important;
749+
margin-right: calc(5rem * var(--space-y-reverse)) !important;
750+
margin-left: calc(5rem * calc(1 - var(--space-y-reverse))) !important;
703751
}
704752

705753
.space-y-24 > :not(template) ~ :not(template) {
706-
margin-top: 6rem !important;
754+
--space-y-reverse: 0 !important;
755+
margin-top: calc(6rem * calc(1 - var(--space-y-reverse))) !important;
756+
margin-bottom: calc(6rem * var(--space-y-reverse)) !important;
707757
}
708758

709759
.space-x-24 > :not(template) ~ :not(template) {
710-
margin-left: 6rem !important;
760+
--space-x-reverse: 0 !important;
761+
margin-right: calc(6rem * var(--space-y-reverse)) !important;
762+
margin-left: calc(6rem * calc(1 - var(--space-y-reverse))) !important;
711763
}
712764

713765
.space-y-32 > :not(template) ~ :not(template) {
714-
margin-top: 8rem !important;
766+
--space-y-reverse: 0 !important;
767+
margin-top: calc(8rem * calc(1 - var(--space-y-reverse))) !important;
768+
margin-bottom: calc(8rem * var(--space-y-reverse)) !important;
715769
}
716770

717771
.space-x-32 > :not(template) ~ :not(template) {
718-
margin-left: 8rem !important;
772+
--space-x-reverse: 0 !important;
773+
margin-right: calc(8rem * var(--space-y-reverse)) !important;
774+
margin-left: calc(8rem * calc(1 - var(--space-y-reverse))) !important;
719775
}
720776

721777
.space-y-40 > :not(template) ~ :not(template) {
722-
margin-top: 10rem !important;
778+
--space-y-reverse: 0 !important;
779+
margin-top: calc(10rem * calc(1 - var(--space-y-reverse))) !important;
780+
margin-bottom: calc(10rem * var(--space-y-reverse)) !important;
723781
}
724782

725783
.space-x-40 > :not(template) ~ :not(template) {
726-
margin-left: 10rem !important;
784+
--space-x-reverse: 0 !important;
785+
margin-right: calc(10rem * var(--space-y-reverse)) !important;
786+
margin-left: calc(10rem * calc(1 - var(--space-y-reverse))) !important;
727787
}
728788

729789
.space-y-48 > :not(template) ~ :not(template) {
730-
margin-top: 12rem !important;
790+
--space-y-reverse: 0 !important;
791+
margin-top: calc(12rem * calc(1 - var(--space-y-reverse))) !important;
792+
margin-bottom: calc(12rem * var(--space-y-reverse)) !important;
731793
}
732794

733795
.space-x-48 > :not(template) ~ :not(template) {
734-
margin-left: 12rem !important;
796+
--space-x-reverse: 0 !important;
797+
margin-right: calc(12rem * var(--space-y-reverse)) !important;
798+
margin-left: calc(12rem * calc(1 - var(--space-y-reverse))) !important;
735799
}
736800

737801
.space-y-56 > :not(template) ~ :not(template) {
738-
margin-top: 14rem !important;
802+
--space-y-reverse: 0 !important;
803+
margin-top: calc(14rem * calc(1 - var(--space-y-reverse))) !important;
804+
margin-bottom: calc(14rem * var(--space-y-reverse)) !important;
739805
}
740806

741807
.space-x-56 > :not(template) ~ :not(template) {
742-
margin-left: 14rem !important;
808+
--space-x-reverse: 0 !important;
809+
margin-right: calc(14rem * var(--space-y-reverse)) !important;
810+
margin-left: calc(14rem * calc(1 - var(--space-y-reverse))) !important;
743811
}
744812

745813
.space-y-64 > :not(template) ~ :not(template) {
746-
margin-top: 16rem !important;
814+
--space-y-reverse: 0 !important;
815+
margin-top: calc(16rem * calc(1 - var(--space-y-reverse))) !important;
816+
margin-bottom: calc(16rem * var(--space-y-reverse)) !important;
747817
}
748818

749819
.space-x-64 > :not(template) ~ :not(template) {
750-
margin-left: 16rem !important;
820+
--space-x-reverse: 0 !important;
821+
margin-right: calc(16rem * var(--space-y-reverse)) !important;
822+
margin-left: calc(16rem * calc(1 - var(--space-y-reverse))) !important;
751823
}
752824

753825
.space-y-px > :not(template) ~ :not(template) {
754-
margin-top: 1px !important;
826+
--space-y-reverse: 0 !important;
827+
margin-top: calc(1px * calc(1 - var(--space-y-reverse))) !important;
828+
margin-bottom: calc(1px * var(--space-y-reverse)) !important;
755829
}
756830

757831
.space-x-px > :not(template) ~ :not(template) {
758-
margin-left: 1px !important;
832+
--space-x-reverse: 0 !important;
833+
margin-right: calc(1px * var(--space-y-reverse)) !important;
834+
margin-left: calc(1px * calc(1 - var(--space-y-reverse))) !important;
835+
}
836+
837+
.space-y-reverse > :not(template) ~ :not(template) {
838+
--space-y-reverse: 1 !important;
839+
}
840+
841+
.space-x-reverse > :not(template) ~ :not(template) {
842+
--space-x-reverse: 1 !important;
759843
}
760844

761845
.divide-y-0 > :not(template) ~ :not(template) {
762-
border-top-width: 0 !important;
846+
--divide-y-reverse: 0 !important;
847+
border-top: calc(0 * calc(1 - var(--divide-y-reverse))) !important;
848+
border-bottom: calc(0 * var(--divide-y-reverse)) !important;
763849
}
764850

765851
.divide-x-0 > :not(template) ~ :not(template) {
766-
border-left-width: 0 !important;
852+
--divide-x-reverse: 0 !important;
853+
border-right: calc(0 * var(--divide-y-reverse)) !important;
854+
border-left: calc(0 * calc(1 - var(--divide-y-reverse))) !important;
767855
}
768856

769857
.divide-y-2 > :not(template) ~ :not(template) {
770-
border-top-width: 2px !important;
858+
--divide-y-reverse: 0 !important;
859+
border-top: calc(2px * calc(1 - var(--divide-y-reverse))) !important;
860+
border-bottom: calc(2px * var(--divide-y-reverse)) !important;
771861
}
772862

773863
.divide-x-2 > :not(template) ~ :not(template) {
774-
border-left-width: 2px !important;
864+
--divide-x-reverse: 0 !important;
865+
border-right: calc(2px * var(--divide-y-reverse)) !important;
866+
border-left: calc(2px * calc(1 - var(--divide-y-reverse))) !important;
775867
}
776868

777869
.divide-y-4 > :not(template) ~ :not(template) {
778-
border-top-width: 4px !important;
870+
--divide-y-reverse: 0 !important;
871+
border-top: calc(4px * calc(1 - var(--divide-y-reverse))) !important;
872+
border-bottom: calc(4px * var(--divide-y-reverse)) !important;
779873
}
780874

781875
.divide-x-4 > :not(template) ~ :not(template) {
782-
border-left-width: 4px !important;
876+
--divide-x-reverse: 0 !important;
877+
border-right: calc(4px * var(--divide-y-reverse)) !important;
878+
border-left: calc(4px * calc(1 - var(--divide-y-reverse))) !important;
783879
}
784880

785881
.divide-y-8 > :not(template) ~ :not(template) {
786-
border-top-width: 8px !important;
882+
--divide-y-reverse: 0 !important;
883+
border-top: calc(8px * calc(1 - var(--divide-y-reverse))) !important;
884+
border-bottom: calc(8px * var(--divide-y-reverse)) !important;
787885
}
788886

789887
.divide-x-8 > :not(template) ~ :not(template) {
790-
border-left-width: 8px !important;
888+
--divide-x-reverse: 0 !important;
889+
border-right: calc(8px * var(--divide-y-reverse)) !important;
890+
border-left: calc(8px * calc(1 - var(--divide-y-reverse))) !important;
791891
}
792892

793893
.divide-y > :not(template) ~ :not(template) {
794-
border-top-width: 1px !important;
894+
--divide-y-reverse: 0 !important;
895+
border-top: calc(1px * calc(1 - var(--divide-y-reverse))) !important;
896+
border-bottom: calc(1px * var(--divide-y-reverse)) !important;
795897
}
796898

797899
.divide-x > :not(template) ~ :not(template) {
798-
border-left-width: 1px !important;
900+
--divide-x-reverse: 0 !important;
901+
border-right: calc(1px * var(--divide-y-reverse)) !important;
902+
border-left: calc(1px * calc(1 - var(--divide-y-reverse))) !important;
903+
}
904+
905+
.divide-y-reverse > :not(template) ~ :not(template) {
906+
--divide-y-reverse: 1 !important;
907+
}
908+
909+
.divide-x-reverse > :not(template) ~ :not(template) {
910+
--divide-x-reverse: 1 !important;
799911
}
800912

801913
.divide-transparent > :not(template) ~ :not(template) {

0 commit comments

Comments
 (0)