Ensure we can apply classes that are grouped with non-class selectors #6922
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
When we have a css rule that is defined as `.foo, .bar {}`, then we will
crawl each selector and link it to the same node. This is useful because
now our Map looks something like this:
```js
Map(2) { 'foo' => Node {}, 'bar' => Node {} }
```
This allows us to later on `@apply foo` or `@apply bar` and we can do a
direct lookup for this "candidate".
When we have css defined as `span {}`, then we consider this
"non-ondemandable". This means that we will _always_ inject these rules
into the `*` section and call it a day.
However, it could happen that you have something like this: `span, .foo
{}` up until now this was totally fine. It contains a non-ondemandable
selector (`span`) and therefore we injected this into that `*` section.
However, the issue occurs if you now try to `@apply foo`. Since we had
an early return for this use case it didn't endup in our Map from above
and now you get an error like:
```
The `foo` class does not exist. If `foo` is a custom class, make sure it
is defined within a `@layer` directive."
```
So instead what we will do is keep track whether or not a css rule
contains any on-demandable classes. If this is the case then we still
generate it always by putting it in that `*` section. However, we will
still register all on-demandable classes in our Map (in this case `.foo`).
This allows us to `@apply foo` again!
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 fixes a bug where you can't apply
.fooif you defined it asspan, .foo {}in your css. This used to work in older AOT mode, but didn't work in JIT mode yet.When we have a css rule that is defined as
.foo, .bar {}, then we will crawl each selector and link it to the same node. This is useful because now our Map looks something like this:This allows us to later on
@apply fooor@apply barand we can do a direct lookup for this "candidate".When we have css defined as
span {}, then we consider this "non-ondemandable". This means that we will always inject these rules into the*section and call it a day.However, it could happen that you have something like this:
span, .foo {}up until now this was totally fine. It contains a non-ondemandable selector (span) and therefore we injected this into that*section.However, the issue occurs if you now try to
@apply foo. Since we had an early return for this use case it didn't endup in our Map from above and now you get an error like:So instead what we will do is keep track whether or not a css rule contains any on-demandable classes. If this is the case then we still generate it always by putting it in that
*section. However, we will still register all on-demandable classes in our Map (in this case.foo).This allows us to
@apply fooagain!Fixes: #6882