Fix webpack loader cache key for resource queries

[colinaaa]

Summary

@tailwindcss/webpack currently uses this.resourcePath as the cache key, which ignores the resource query. When the same CSS file is imported multiple times with different resourceQuery values, all of those imports share a single CacheEntry. That means the utilities discovered for one entry can leak into the CSS output for another entry.

This PR changes the cache key to use this.resource (path + query) instead, while still using this.resourcePath for all filesystem work.

Test plan

• pnpm test:integrations -- webpack/loader.test.ts
  • Confirms all existing webpack loader integration tests pass.
  • Confirms the new @tailwindcss/webpack loader isolates cache by resource including query test passes, verifying that two entries importing the same CSS file with different queries produce isolated outputs (dist/a.css only contains only-a / --color-red-500, and dist/b.css only contains only-b / --color-blue-500).

[coderabbitai]

Walkthrough

This pull request updates the Webpack loader's cache handling mechanism. A new helper function getCacheKey is introduced to derive cache keys from resource identifiers. The getContextFromCache function signature is refactored to accept resourceId instead of inputFile, and all internal calls are updated accordingly. The cache population logic is preserved with the new key derivation approach. Additionally, a new test case is added to validate cache isolation when different resource queries are used with Webpack entry points, ensuring no cross-contamination between resources in the cached results.

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main change: fixing the webpack loader cache key to account for resource queries.
Description check	✅ Passed	The description is directly related to the changeset, explaining the problem, the solution, and how it was tested.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

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 and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

packages/@tailwindcss-webpack/src/index.ts (1)

43-45: Consider a collision-proof separator for the composite cache key.

The : delimiter is also present in Windows drive-letter paths (e.g., opts.base = "C:/some/dir"), making the key format theoretically ambiguous. In practice this is unlikely to cause a collision today, but the fix is trivial.

♻️ Suggested improvement

 function getCacheKey(resourceId: string, opts: LoaderOptions): string {
-  return `${resourceId}:${opts.base ?? ''}:${JSON.stringify(opts.optimize)}`
+  return JSON.stringify([resourceId, opts.base ?? '', opts.optimize ?? null])
 }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/`@tailwindcss-webpack/src/index.ts around lines 43 - 45, The
composite cache key in getCacheKey(resourceId, opts) uses ":" which can collide
with Windows drive letters; update getCacheKey to produce an unambiguous
key—either by using a collision-proof separator (e.g., a null character '\u0000'
or an unlikely token) between resourceId, opts.base and
JSON.stringify(opts.optimize), or simply serialize the whole object (e.g.,
JSON.stringify({resourceId, base: opts.base ?? '', optimize: opts.optimize})) so
the key is unambiguous; change the implementation in getCacheKey to use one of
these approaches.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@packages/`@tailwindcss-webpack/src/index.ts:
- Around line 43-45: The composite cache key in getCacheKey(resourceId, opts)
uses ":" which can collide with Windows drive letters; update getCacheKey to
produce an unambiguous key—either by using a collision-proof separator (e.g., a
null character '\u0000' or an unlikely token) between resourceId, opts.base and
JSON.stringify(opts.optimize), or simply serialize the whole object (e.g.,
JSON.stringify({resourceId, base: opts.base ?? '', optimize: opts.optimize})) so
the key is unambiguous; change the implementation in getCacheKey to use one of
these approaches.

---

ℹ️ Review info

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 097f982 and e601055.

📒 Files selected for processing (2)

• integrations/webpack/loader.test.ts
• packages/@tailwindcss-webpack/src/index.ts