Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support @apply for classes outside of a @layer #5378

Merged
merged 3 commits into from
Sep 8, 2021
+196 −4
Merged

Support @apply for classes outside of a @layer #5378

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2cf82c8
support `@apply` for classes outside of a `@layer`
RobinMalfait Sep 3, 2021
1700f2b
Add failing test for respecting source order
adamwathan Sep 5, 2021
cd0675d
sort rules when using `@apply`
RobinMalfait Sep 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
sort rules when using @apply 
The `layer` was not taken into account yet when we resolved the rules
from the applyCache. This is because we set the `classCache` to the
`matches` inside of the `generateRules` function. You can think of them
as "raw" rules I guess. However, it is later in that function that we
apply the `layerOrder` to the `sort`.

This does mean that when you `@apply font-bold text-red-500` that the
rules inside the `.target {}` will be in order of the "normal" css as
well.
@RobinMalfait
RobinMalfait committed Sep 7, 2021

Verified

This commit was signed with the committer’s verified signature.
RobinMalfait Robin Malfait
GPG key ID: 92F53D68B9041AFE
Verified
Learn about vigilant mode
commit cd0675df19eee9cb873b492cd232da6f60d23362
7 changes: 6 additions & 1 deletion src/lib/expandApplyAtRules.js
View file
Original file line number Diff line number Diff line change
@@ -211,7 +211,12 @@ function processApply(root, context) {
})
}

siblings.push([meta, root.nodes[0]])
// Insert it
siblings.push([
// Ensure that when we are sorting, that we take the layer order into account
{ ...meta, sort: meta.sort | context.layerOrder[meta.layer] },
root.nodes[0],
])
}
}

13 changes: 5 additions & 8 deletions tests/apply.test.js
View file
Original file line number Diff line number Diff line change
@@ -292,29 +292,26 @@ test('@apply classes from outside a @layer', async () => {
}
.bar {
font-weight: 700;
--tw-text-opacity: 1;
color: rgba(239, 68, 68, var(--tw-text-opacity));
font-weight: 700;
}
.bar:hover {
--tw-text-opacity: 1;
color: rgba(16, 185, 129, var(--tw-text-opacity));
color: rgba(34, 197, 94, var(--tw-text-opacity));
Copy link
Member Author

@RobinMalfait RobinMalfait Sep 7, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The color value looks odd, but that's because of a rebase and the colors in #5384 have been merged since.
The "old" value is text-emerald-500 and the new value is text-green-500

}
.baz {
font-weight: 700;
text-decoration: underline;
--tw-text-opacity: 1;
color: rgba(239, 68, 68, var(--tw-text-opacity));
font-weight: 700;
}
.baz:hover {
--tw-text-opacity: 1;
color: rgba(16, 185, 129, var(--tw-text-opacity));
}
.baz {
text-decoration: underline;
color: rgba(34, 197, 94, var(--tw-text-opacity));
}
.keep-me-even-though-I-am-not-used-in-content {