[NgoQuocViet2001]

Summary

rewriteUrlsInAst picks a single rewriter per declaration. When a value has both url(…) and image-set(…), only the image-set(…) rewriter runs, and it copies everything around its match as-is. So the sibling url(…)s in an imported stylesheet are never rebased:

/* src/components/hero.css, imported from src/app.css */
.hero { background-image: url(./overlay.png), image-set("./bg.png" 1x); }
/* before: url(./overlay.png), image-set(url("./components/bg.png") 1x) */
/* after:  url(./components/overlay.png), image-set(url("./components/bg.png") 1x) */

In Vite, ./overlay.png is then resolved against app.css. Vite warns that it "didn't resolve at build time" and the image is not emitted. Vite fixed this in its own copy of this code in vitejs/vite#18868. Porting that fix as-is would rebase the URLs inside image-set(…) twice here, because our rebased paths stay relative. Instead, asyncReplace takes an optional replacer for the text between matches, and rewriteCssImageSet uses it for the url(…)s outside the image-set(…). Each URL is now rewritten exactly once.

Test plan

• New test in urls.test.ts. It fails on main (url(./a.png) and url("./d.png") are left as-is) and passes with this change. It also checks that url(./b.png) inside the image-set(…) is rebased only once.
• vitest run --project @tailwindcss/node --project @tailwindcss/postcss: 32 passed. Full vitest run --hideSkippedTests: 5657 passed, 1 skipped.
• Vite 8 build with @tailwindcss/vite and the stylesheet above: on main it warns and drops overlay.png. With this change both images are emitted and there are no warnings.
• prettier --check on the changed files.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Source mode: Auto
• Repository: Unavailable
• Branch: Unavailable
• File: No configuration file from this repository applied
• Commit: Unavailable
• Layers: Repository UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: 1eae9dbb-3089-44e8-8ea0-ddbc38a72c8e

📥 Commits

Reviewing files that changed from the base of the PR and between 8cc0551 and b863d04.

📒 Files selected for processing: 3

• CHANGELOG.md
• packages/@tailwindcss-node/src/urls.test.ts
• packages/@tailwindcss-node/src/urls.ts

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

Walkthrough

asyncReplace now accepts an optional replacer for unmatched text and applies it before, between, and after matches. rewriteCssImageSet uses this replacer to rewrite relative url(...) references adjacent to or between image-set(...) expressions. A test checks rewriting of URLs in a combined background-image declaration. The Unreleased changelog documents the fix.

Priority: ➖ Normal

Merge Risk: ⚪ Minimal · up to b863d

The change has no established merge-blocking correctness, security, or availability risk.

Pre-merge checks: 4

Check name	Status	Explanation
Title check		The title clearly and concisely describes the main change: rewriting sibling url(…) references next to image-set(…) when imported stylesheets are inlined.
Description check		The description directly explains the affected behavior, the implementation approach, the regression test, and the reported validation results.
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[greptile-apps]

Confidence Score: 5/5

[Medium impact] The PR appears safe to merge.

_{Reviews (1) · Last reviewed commit: "Rewrite `url(…)`s next to an `image-set(..." · Reviewed by Greptile}