Skip to content

Commit

Permalink
Sort by layer inside variants layer (#10505)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@RobinMalfait
RobinMalfait committed Feb 6, 2023
1 parent da52210 commit b17b60e
Show file tree
Hide file tree
Showing 5 changed files with 79 additions and 72 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Expand Up @@ -44,6 +44,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Handle variants when the same class appears multiple times in a selector ([#10397](https://github.com/tailwindlabs/tailwindcss/pull/10397))
- Handle group/peer variants with quoted strings ([#10400](https://github.com/tailwindlabs/tailwindcss/pull/10400))
- Parse alpha value from rgba/hsla colors when using variables ([#10429](https://github.com/tailwindlabs/tailwindcss/pull/10429))
- Sort by `layer` inside `variants` layer ([#10505](https://github.com/tailwindlabs/tailwindcss/pull/10505))

### Changed

Expand Down
6 changes: 6 additions & 0 deletions src/lib/offsets.js
View file
Expand Up @@ -209,6 +209,12 @@ export class Offsets {
return this.layerPositions[a.layer] - this.layerPositions[b.layer]
}

// When sorting the `variants` layer, we need to sort based on the parent layer as well within
// this variants layer.
if (a.parentLayer !== b.parentLayer) {
return this.layerPositions[a.parentLayer] - this.layerPositions[b.parentLayer]
}

// Sort based on the sorting function
for (let aOptions of a.options) {
for (let bOptions of b.options) {
Expand Down
4 changes: 2 additions & 2 deletions tests/getSortOrder.test.js
View file
Expand Up @@ -60,7 +60,7 @@ crosscheck(() => {
// Components and utilities with variants
[
'focus:hover:container hover:underline hover:container p-1',
'p-1 hover:container hover:underline focus:hover:container',
'p-1 hover:container focus:hover:container hover:underline',
],

// Leave user css order alone, and move to the front
Expand Down Expand Up @@ -98,7 +98,7 @@ crosscheck(() => {
// Components and utilities with variants
[
'focus:hover:tw-container hover:tw-underline hover:tw-container tw-p-1',
'tw-p-1 hover:tw-container hover:tw-underline focus:hover:tw-container',
'tw-p-1 hover:tw-container focus:hover:tw-container hover:tw-underline',
],

// Leave user css order alone, and move to the front
Expand Down
122 changes: 63 additions & 59 deletions tests/kitchen-sink.test.js
View file
Expand Up @@ -551,9 +551,6 @@ crosscheck(() => {
::backdrop {
margin: 10px;
}
.first\:pt-0:first-child {
padding-top: 0;
}
.hover\:container:hover {
width: 100%;
}
Expand Down Expand Up @@ -582,6 +579,69 @@ crosscheck(() => {
max-width: 1536px;
}
}
@media (min-width: 640px) {
.sm\:container {
width: 100%;
}
@media (min-width: 640px) {
.sm\:container {
max-width: 640px;
}
}
@media (min-width: 768px) {
.sm\:container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.sm\:container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.sm\:container {
max-width: 1280px;
}
}
@media (min-width: 1536px) {
.sm\:container {
max-width: 1536px;
}
}
}
@media (min-width: 768px) {
.md\:container {
width: 100%;
}
@media (min-width: 640px) {
.md\:container {
max-width: 640px;
}
}
@media (min-width: 768px) {
.md\:container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.md\:container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.md\:container {
max-width: 1280px;
}
}
@media (min-width: 1536px) {
.md\:container {
max-width: 1536px;
}
}
}
.first\:pt-0:first-child {
padding-top: 0;
}
.hover\:scale-75:hover {
--tw-scale-x: 0.75;
--tw-scale-y: 0.75;
Expand Down Expand Up @@ -661,34 +721,6 @@ crosscheck(() => {
background: #abcdef;
}
@media (min-width: 640px) {
.sm\:container {
width: 100%;
}
@media (min-width: 640px) {
.sm\:container {
max-width: 640px;
}
}
@media (min-width: 768px) {
.sm\:container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.sm\:container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.sm\:container {
max-width: 1280px;
}
}
@media (min-width: 1536px) {
.sm\:container {
max-width: 1536px;
}
}
.sm\:text-center {
text-align: center;
}
Expand All @@ -707,34 +739,6 @@ crosscheck(() => {
}
}
@media (min-width: 768px) {
.md\:container {
width: 100%;
}
@media (min-width: 640px) {
.md\:container {
max-width: 640px;
}
}
@media (min-width: 768px) {
.md\:container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.md\:container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.md\:container {
max-width: 1280px;
}
}
@media (min-width: 1536px) {
.md\:container {
max-width: 1536px;
}
}
.md\:text-center {
text-align: center;
}
Expand Down
18 changes: 7 additions & 11 deletions tests/modify-selectors.test.js
View file
Expand Up @@ -66,15 +66,16 @@ crosscheck(() => {
.font-bold {
font-weight: 700;
}
.foo .foo\:markdown > p {
margin-top: 12px;
}
.foo .foo\:font-bold {
font-weight: 700;
}
.foo .foo\:markdown > p,
.foo .foo\:visited\:markdown:visited > p {
margin-top: 12px;
}
@media (min-width: 1024px) {
.foo .lg\:foo\:disabled\:markdown:disabled > p {
margin-top: 12px;
}
}
.foo .foo\:font-bold,
.foo .foo\:hover\:font-bold:hover {
font-weight: 700;
}
Expand All @@ -88,11 +89,6 @@ crosscheck(() => {
font-weight: 700;
}
}
@media (min-width: 1024px) {
.foo .lg\:foo\:disabled\:markdown:disabled > p {
margin-top: 12px;
}
}
`)
})
})
Expand Down

0 comments on commit b17b60e

Please sign in to comment.