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.

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

Don't prefix classes in arbitrary variants #10214

Merged
merged 6 commits into from
Jan 3, 2023

Conversation

thecrypticace
Copy link
Contributor

We were incorrectly prefixing classes in arbitrary variants if the first variant wasn't an arbitrary variant. Additionally, if the first variant was arbitrary then all classes in all variants would end up un-prefixed. For example:

<div class="[.foo_&]:group-hover:tw-underline">test</div>
<div class="group-hover:[.foo_&]:tw-underline">test</div>

These would result in the selectors:

.foo .group:hover .\[\.foo_\&\]\:group-hover\:tw-underline
.tw-group:hover .tw-foo .group-hover\:\[\.foo_\&\]\:tw-underline

Notice how:

  1. The first one doesn't have the group class prefixed like it should.
  2. The second has the foo class prefixed when it should not.

Here we rework the functions finalizeSelector and formatVariantSelector together to take multiple formats. They were previously using a mix for AST and string-based parsing. This now does the full transformation using the selector AST, parses the format strings AST as early as possible, and is set up to parse them only once for a given set of rules. All of this will allow considering metadata on a per format string basis. For instance, we now know if the format string .foo & was produced by a normal variant or by an arbitrary variant. We use this information to control the prefixing behavior for individual format strings.

Fixes #10125

Copy link
Member

@RobinMalfait RobinMalfait left a comment

Choose a reason for hiding this comment

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

Looks good! Pretty nice that we didn't have to rewrite everything to handle the isArbitraryVariant per collected format.

src/util/formatVariantSelector.js Outdated Show resolved Hide resolved
refactor
The functions `finalizeSelector` and `formatVariantSelector` together were using a mix for AST and string-based parsing. This now does the full transformation using the selector AST. This also parses the format strings AST as early as possible and is set up to parse them only once for a given set of rules.

All of this will allow considering metadata per format string. For instance, we now know if the format string `.foo &` was produced by a normal variant or by an arbitrary variant. We use this information to control the prefixing behavior for individual format strings.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

prefix option + modifier + arbitrary variant: extra prefix is generated for classes inside variant
2 participants