Skip to content

Commit b17b60e

Browse files
RobinMalfaitRobinMalfait
authored
Sort by layer inside variants layer (#10505)
* sort by `layer` inside `variants` layer We currently have a whole system for sorting the utilties / components already. Right now we also have a "variants" layer, this is to ensure that we always have variants at the end of the file regardless of the `parentLayer` (base, utilties, components). That said, we also have to make sure that within this `variants` layer we also sort by the `parentLayer`. * update changelog * ensure order is correct now
1 parent da52210 commit b17b60e

5 files changed

+79
-72
lines changed

‎CHANGELOG.md

+1
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
4444
- Handle variants when the same class appears multiple times in a selector ([#10397](https://github.com/tailwindlabs/tailwindcss/pull/10397))
4545
- Handle group/peer variants with quoted strings ([#10400](https://github.com/tailwindlabs/tailwindcss/pull/10400))
4646
- Parse alpha value from rgba/hsla colors when using variables ([#10429](https://github.com/tailwindlabs/tailwindcss/pull/10429))
47+
- Sort by `layer` inside `variants` layer ([#10505](https://github.com/tailwindlabs/tailwindcss/pull/10505))
4748

4849
### Changed
4950

‎src/lib/offsets.js

+6
Original file line numberDiff line numberDiff line change
@@ -209,6 +209,12 @@ export class Offsets {
209209
return this.layerPositions[a.layer] - this.layerPositions[b.layer]
210210
}
211211

212+
// When sorting the `variants` layer, we need to sort based on the parent layer as well within
213+
// this variants layer.
214+
if (a.parentLayer !== b.parentLayer) {
215+
return this.layerPositions[a.parentLayer] - this.layerPositions[b.parentLayer]
216+
}
217+
212218
// Sort based on the sorting function
213219
for (let aOptions of a.options) {
214220
for (let bOptions of b.options) {

‎tests/getSortOrder.test.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ crosscheck(() => {
6060
// Components and utilities with variants
6161
[
6262
'focus:hover:container hover:underline hover:container p-1',
63-
'p-1 hover:container hover:underline focus:hover:container',
63+
'p-1 hover:container focus:hover:container hover:underline',
6464
],
6565

6666
// Leave user css order alone, and move to the front
@@ -98,7 +98,7 @@ crosscheck(() => {
9898
// Components and utilities with variants
9999
[
100100
'focus:hover:tw-container hover:tw-underline hover:tw-container tw-p-1',
101-
'tw-p-1 hover:tw-container hover:tw-underline focus:hover:tw-container',
101+
'tw-p-1 hover:tw-container focus:hover:tw-container hover:tw-underline',
102102
],
103103

104104
// Leave user css order alone, and move to the front

‎tests/kitchen-sink.test.js

+63-59
Original file line numberDiff line numberDiff line change
@@ -551,9 +551,6 @@ crosscheck(() => {
551551
::backdrop {
552552
margin: 10px;
553553
}
554-
.first\:pt-0:first-child {
555-
padding-top: 0;
556-
}
557554
.hover\:container:hover {
558555
width: 100%;
559556
}
@@ -582,6 +579,69 @@ crosscheck(() => {
582579
max-width: 1536px;
583580
}
584581
}
582+
@media (min-width: 640px) {
583+
.sm\:container {
584+
width: 100%;
585+
}
586+
@media (min-width: 640px) {
587+
.sm\:container {
588+
max-width: 640px;
589+
}
590+
}
591+
@media (min-width: 768px) {
592+
.sm\:container {
593+
max-width: 768px;
594+
}
595+
}
596+
@media (min-width: 1024px) {
597+
.sm\:container {
598+
max-width: 1024px;
599+
}
600+
}
601+
@media (min-width: 1280px) {
602+
.sm\:container {
603+
max-width: 1280px;
604+
}
605+
}
606+
@media (min-width: 1536px) {
607+
.sm\:container {
608+
max-width: 1536px;
609+
}
610+
}
611+
}
612+
@media (min-width: 768px) {
613+
.md\:container {
614+
width: 100%;
615+
}
616+
@media (min-width: 640px) {
617+
.md\:container {
618+
max-width: 640px;
619+
}
620+
}
621+
@media (min-width: 768px) {
622+
.md\:container {
623+
max-width: 768px;
624+
}
625+
}
626+
@media (min-width: 1024px) {
627+
.md\:container {
628+
max-width: 1024px;
629+
}
630+
}
631+
@media (min-width: 1280px) {
632+
.md\:container {
633+
max-width: 1280px;
634+
}
635+
}
636+
@media (min-width: 1536px) {
637+
.md\:container {
638+
max-width: 1536px;
639+
}
640+
}
641+
}
642+
.first\:pt-0:first-child {
643+
padding-top: 0;
644+
}
585645
.hover\:scale-75:hover {
586646
--tw-scale-x: 0.75;
587647
--tw-scale-y: 0.75;
@@ -661,34 +721,6 @@ crosscheck(() => {
661721
background: #abcdef;
662722
}
663723
@media (min-width: 640px) {
664-
.sm\:container {
665-
width: 100%;
666-
}
667-
@media (min-width: 640px) {
668-
.sm\:container {
669-
max-width: 640px;
670-
}
671-
}
672-
@media (min-width: 768px) {
673-
.sm\:container {
674-
max-width: 768px;
675-
}
676-
}
677-
@media (min-width: 1024px) {
678-
.sm\:container {
679-
max-width: 1024px;
680-
}
681-
}
682-
@media (min-width: 1280px) {
683-
.sm\:container {
684-
max-width: 1280px;
685-
}
686-
}
687-
@media (min-width: 1536px) {
688-
.sm\:container {
689-
max-width: 1536px;
690-
}
691-
}
692724
.sm\:text-center {
693725
text-align: center;
694726
}
@@ -707,34 +739,6 @@ crosscheck(() => {
707739
}
708740
}
709741
@media (min-width: 768px) {
710-
.md\:container {
711-
width: 100%;
712-
}
713-
@media (min-width: 640px) {
714-
.md\:container {
715-
max-width: 640px;
716-
}
717-
}
718-
@media (min-width: 768px) {
719-
.md\:container {
720-
max-width: 768px;
721-
}
722-
}
723-
@media (min-width: 1024px) {
724-
.md\:container {
725-
max-width: 1024px;
726-
}
727-
}
728-
@media (min-width: 1280px) {
729-
.md\:container {
730-
max-width: 1280px;
731-
}
732-
}
733-
@media (min-width: 1536px) {
734-
.md\:container {
735-
max-width: 1536px;
736-
}
737-
}
738742
.md\:text-center {
739743
text-align: center;
740744
}

‎tests/modify-selectors.test.js

+7-11
Original file line numberDiff line numberDiff line change
@@ -66,15 +66,16 @@ crosscheck(() => {
6666
.font-bold {
6767
font-weight: 700;
6868
}
69-
.foo .foo\:markdown > p {
70-
margin-top: 12px;
71-
}
72-
.foo .foo\:font-bold {
73-
font-weight: 700;
74-
}
69+
.foo .foo\:markdown > p,
7570
.foo .foo\:visited\:markdown:visited > p {
7671
margin-top: 12px;
7772
}
73+
@media (min-width: 1024px) {
74+
.foo .lg\:foo\:disabled\:markdown:disabled > p {
75+
margin-top: 12px;
76+
}
77+
}
78+
.foo .foo\:font-bold,
7879
.foo .foo\:hover\:font-bold:hover {
7980
font-weight: 700;
8081
}
@@ -88,11 +89,6 @@ crosscheck(() => {
8889
font-weight: 700;
8990
}
9091
}
91-
@media (min-width: 1024px) {
92-
.foo .lg\:foo\:disabled\:markdown:disabled > p {
93-
margin-top: 12px;
94-
}
95-
}
9692
`)
9793
})
9894
})

0 commit comments

Comments
 (0)