Skip to content

fix(react-email/tailwind): enhance CSS rule extraction and inline style handling#2949

Open
Shubhdeep12 wants to merge 3 commits intoresend:canaryfrom
Shubhdeep12:fix/css-inline-rule-extraction
Open

fix(react-email/tailwind): enhance CSS rule extraction and inline style handling#2949
Shubhdeep12 wants to merge 3 commits intoresend:canaryfrom
Shubhdeep12:fix/css-inline-rule-extraction

Conversation

@Shubhdeep12
Copy link

@Shubhdeep12 Shubhdeep12 commented Feb 7, 2026

related #2909


Summary by cubic

Inline base declarations from mixed Tailwind rules and keep only media/pseudo parts in the stylesheet. This fixes missing inline styles and preserves responsive behavior in @react-email/tailwind.

  • Bug Fixes
    • Split mixed rules into inlinable base and non-inlinable parts; only store non-inlinable parts when present (splitMixedRule returns null). Added is-part-inlinable; updated extractRulesPerClass.
    • Inline base styles and keep the class only when non-inlinable rules remain (cloneElementWithInlinedStyles). Updated tests and snapshots.

Written for commit f1dcdbc. Summary will update on new commits.

…ling

- Updated `extractRulesPerClass` to split mixed rules into inlinable and non-inlinable parts.
- Added a new test case to verify the correct extraction of mixed rules.
- Modified the `cloneElementWithInlinedStyles` function to handle residual classes more effectively.
- Adjusted inline snapshots in tests for consistency with new style handling.
@changeset-bot
Copy link

changeset-bot bot commented Feb 7, 2026

🦋 Changeset detected

Latest commit: f1dcdbc

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/tailwind Patch
@react-email/components Patch
playground 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

@vercel
Copy link

vercel bot commented Feb 7, 2026

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

A member of the Team first needs to authorize it.

@pkg-pr-new
Copy link

pkg-pr-new bot commented Feb 7, 2026

Open in StackBlitz

npm i https://pkg.pr.new/resend/react-email/@react-email/tailwind@2949

commit: f1dcdbc

Copy link
Contributor

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

Choose a reason for hiding this comment

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

1 issue found across 7 files

Confidence score: 4/5

  • Potential duplication in packages/tailwind/src/utils/css/split-mixed-rule.ts when non-inlinable rules with only inlinable children fall back to a full clone could lead to repeated declarations alongside the inlinable part
  • Overall risk seems limited given the low confidence in the report and the single moderate issue, so this PR looks safe to merge with care
  • Pay close attention to packages/tailwind/src/utils/css/split-mixed-rule.ts - possible declaration duplication in split logic.
Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="packages/tailwind/src/utils/css/split-mixed-rule.ts">

<violation number="1" location="packages/tailwind/src/utils/css/split-mixed-rule.ts:49">
P2: When a non-inlinable rule has only inlinable children, nonInlinablePart falls back to the full clone, duplicating all declarations alongside inlinablePart.</violation>
</file>

Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.

- Updated string quotes from single to double for consistency.
- Enhanced documentation for non-inlinable parts to clarify behavior when no split occurs.
- Ensured non-inlinable part always returns a valid structure with an empty block when necessary.
…le extraction

- Updated `extractRulesPerClass` to only set non-inlinable rules if a valid part exists.
- Modified `splitMixedRule` to return null for non-inlinable parts when none are present, enhancing clarity in the function's behavior.
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.

1 participant