archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Sort by layer inside variants layer (#10505)

Browse Source 
* 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
This commit is contained in:
Robin Malfait 2023-02-06 16:27:01 +01:00 committed by GitHub
parent da52210dd2
commit b17b60ef6a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 79 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -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

6
src/lib/offsets.js
View File

@ -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) {

4
tests/getSortOrder.test.js
View File

@ -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
@ -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

122
tests/kitchen-sink.test.js
View File

@ -551,9 +551,6 @@ crosscheck(() => {
::backdrop {
margin: 10px;
}
.first\:pt-0:first-child {
padding-top: 0;
}
.hover\:container:hover {
width: 100%;
}
@ -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;
@ -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;
}
@ -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;
}

18
tests/modify-selectors.test.js
View File

@ -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;
}
@ -88,11 +89,6 @@ crosscheck(() => {
font-weight: 700;
}
}
@media (min-width: 1024px) {
.foo .lg\:foo\:disabled\:markdown:disabled > p {
margin-top: 12px;
}
}
`)
})
})