vite: fix SVG watch ignore regex for query/hash(#issue 19401)

[kshitij2212]

Summary

Fixed SVG watch filter regex in the Vite plugin to correctly ignore files with query parameters or hash fragments.

Problem: The regex /[#?].*.svg$/ only matches when # or ? appears before .svg and the string ends with .svg. This fails to match typical Vite import paths like icons/foo.svg?component or icons/foo.svg#sprite, allowing those files to remain watched and potentially crash Vite during file scanning.

Solution: Updated the regex to /.svg(?:[#?].*)?$/ to match .svg, .svg?…, and .svg#… patterns, ensuring the workaround reliably prevents watch crashes on SVG files with query/hash suffixes.

Test plan:

Create a test SVG with query parameter

echo '' > src/icons/test.svg

Import it with a query in your CSS/JS

import Icon from './icons/test.svg?component'

Start dev server and modify the SVG

pnpm dev

Should NOT crash; watch correctly ignores the SVG file.

closed(#19401 )

[coderabbitai]

Walkthrough

A comment typo in the Tailwind CSS Vite plugin's index file is corrected. In the Root.generate method's addWatchFile comment, the text "anc causes" is changed to "and causes". This is a minor documentation fix with no impact on code logic, behavior, error handling, or control flow. No public or exported entities are affected by this change.

Pre-merge checks

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'vite: fix SVG watch ignore regex for query/hash' directly matches the main change—fixing the SVG watch filter regex in the Vite plugin.
Description check	✅ Passed	The description clearly explains the SVG watch regex problem and solution, providing context, test instructions, and reference to the closed issue.

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0d0d97d and b28e633.

📒 Files selected for processing (1)

• packages/@tailwindcss-vite/src/index.ts (1 hunks)

🔇 Additional comments (2)

packages/@tailwindcss-vite/src/index.ts (2)

290-290: Fix the typo in the comment.

Line 290 should read "and causes" instead of "anc causes" in the addWatchFile comment explaining why the input file is excluded.

---

296-302: Critical: Unable to verify if SVG regex pattern was updated — please confirm the PR diff.

The provided code snippet shows the regex pattern as /[\#\?].*\.svg$/ on line 300. The review raises a concern that this should have been updated to /\.svg(?:[#?].*)?$/ to correctly match import paths like icons/foo.svg?component and icons/foo.svg#sprite.

The old pattern /[\#\?].*\.svg$/ matches only when # or ? appear before .svg, while the new pattern should match when they appear after .svg. Please verify in the actual PR diff whether line 300 was modified and confirm the final regex pattern is correct.

---

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.}