Skip to content

fix(tailwind): stop emitting a bare nested rule for group/peer markers#3594

Open
yashs33244 wants to merge 1 commit into
resend:canaryfrom
yashs33244:fix/tailwind-group-peer-duplicate
Open

fix(tailwind): stop emitting a bare nested rule for group/peer markers#3594
yashs33244 wants to merge 1 commit into
resend:canaryfrom
yashs33244:fix/tailwind-group-peer-duplicate

Conversation

@yashs33244

@yashs33244 yashs33244 commented Jun 23, 2026

Copy link
Copy Markdown
Contributor

What

Using a group/peer marker class together with a group-*/peer-* variant injects a duplicate, malformed rule into the <head> <style>:

<Tailwind><Head/><body>
  <div className="group"><a className="group-hover:underline">x</a></div>
</body></Tailwind>

extractRulesPerClass produces two non-inlinable entries:

"group-hover:underline": ".group-hover\:underline{&:is(:where(.group):hover *){@media (hover:hover){…}}}"   // correct
"group":                 "&:is(:where(.group):hover *){@media (hover:hover){…}}"                            // bare, parentless &

The second is invalid CSS in a <style> block (the & has no parent). It happens because the rule walker descends into the variant's nested &:is(:where(.group):hover *) rule and processes it standalone, and because class names are collected from the whole rule block - so the .group reference inside :where(.group) keys the marker class.

Fix

In extractRulesPerClass:

  • skip rules whose prelude is a nesting selector (&…) - they belong to a parent utility, not a standalone class;
  • collect class names from rule.prelude only, so a class referenced inside the block doesn't key the rule.

Now only group-hover:underline is emitted; the group marker produces nothing. Added a regression test; all tailwind tests pass.


Summary by cubic

Stops emitting the duplicate, malformed parentless &:is(...) rule when group/peer markers are used with group-*/peer-* variants in react-email. This prevents invalid CSS in the <head> and keeps only the correct utility rules.

  • Bug Fixes
    • In extractRulesPerClass, skip rules whose first selector is a nesting selector (&...) and collect class names from rule.prelude only to avoid keying marker classes.
    • Added a regression test for group with group-hover:underline.

Written for commit 863cd98. Summary will update on new commits.

Review in cubic

extractRulesPerClass walked into nested rules and collected class names
from the whole block, so group/peer markers (referenced via :where(.group)
inside a group-* utility's nested rule) were keyed to a duplicate,
parentless &:is(...) rule emitted into the <style> block. Skip rules whose
prelude is a nesting selector and collect class names from the prelude only.
Copilot AI review requested due to automatic review settings June 23, 2026 08:55
@vercel

vercel Bot commented Jun 23, 2026

Copy link
Copy Markdown
Contributor

@yashs33244 is attempting to deploy a commit to the resend Team on Vercel.

A member of the Team first needs to authorize it.

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

@changeset-bot

changeset-bot Bot commented Jun 23, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 863cd98

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
Name Type
react-email Patch
@react-email/editor Patch
@react-email/ui Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@cubic-dev-ai cubic-dev-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

No issues found across 3 files

Confidence score: 5/5

  • Automated review surfaced no issues in the provided summaries.
  • No files require special attention.

Auto-approved: Fixes a CSS extraction bug that emitted malformed rules for group/peer markers. Change is isolated to a utility function, includes a regression test, and all existing tests pass.

Re-trigger cubic

@github-actions github-actions Bot added the linear-synced PR has been synced to Linear label Jun 23, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

linear-synced PR has been synced to Linear

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants