Support @apply for classes outside of a @layer
#5378
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
RobinMalfait
changed the title
@apply for classes outside of a @layer@apply for classes outside of a @layer
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
force-pushed
the
apply-classes-outside-layers
branch
from
d5e7c08 to
cd0675d
Compare
RobinMalfait
commented
Sep 7, 2021
| } | ||
|
|
||
| .bar:hover { | ||
| --tw-text-opacity: 1; | ||
| color: rgba(16, 185, 129, var(--tw-text-opacity)); | ||
| color: rgba(34, 197, 94, var(--tw-text-opacity)); |
There was a problem hiding this comment.
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR will allow you to apply classes that are not inside a
@layerdirective. This is an important part of making JIT the default for backwards compatibility reasons. In short:The following already worked:
This got converted to the following output:
However, it was not possible to do this:
This resulted in the following output:
But with this PR, it results in the following output:
There is this weird issue that
.bar:hover:hoverexists, but I will fix that in another PR. (Note: this is an existing issue, and not a newly introduced issue)Apart from the backwards compatibility aspect, the biggest difference is the behaviour whether you are using the class or not.