Fix Vite resolution for bare CSS imports#20056
Conversation
Confidence Score: 5/5Safe to merge. The change is a narrow, last-resort fallback that only fires when every Vite resolver has already given up, and all five guard conditions must be true simultaneously before any filesystem I/O is attempted. The fix is well-scoped: the id.endsWith('.css'), !id.includes('/'), !id.includes('\'), !id.startsWith('.'), and !path.isAbsolute(id) checks collectively ensure only bare single-segment CSS filenames reach the fs.stat call. The filter guard correctly blocks the fallback in the JS-resolver code path. An integration test exercises the exact failure scenario reported in the issue, and the snapshot output is correct given that no utility classes are referenced in the HTML. No files require special attention. Reviews (1): Last reviewed commit: "fix(vite): resolve bare css imports from..." | Re-trigger Greptile |
WalkthroughThis PR adds a fallback resolver for bare CSS imports in the Vite Tailwind plugin. The implementation in 🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. 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. Comment |
There was a problem hiding this comment.
🧹 Nitpick comments (1)
integrations/vite/resolvers.test.ts (1)
587-647: ⚡ Quick winAdd a dev-mode companion test for this regression.
This case reproduces in build, but the reported failure path is
@tailwindcss/vite:generate:serve. Please add apnpm vite devvariant of the same fixture/assertion to lock coverage on the serve resolver path too.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@integrations/vite/resolvers.test.ts` around lines 587 - 647, Duplicate the existing "resolve bare CSS imports in the same folder" test as a dev-mode variant that runs the dev server instead of build: use the same fs fixture and vite.config.ts, call exec('pnpm vite dev') (or appropriate command the test harness uses for starting dev) and wait for the dev server to finish startup; then assert the served/generated CSS matches the same expected content (the .component-style CSS) to exercise the `@tailwindcss/vite`:generate:serve code path. Ensure the new test name indicates it's a dev-mode variant and reuse the same assertions/normalization (e.g. replacing hashed names) so coverage hits the serve resolver path.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@integrations/vite/resolvers.test.ts`:
- Around line 587-647: Duplicate the existing "resolve bare CSS imports in the
same folder" test as a dev-mode variant that runs the dev server instead of
build: use the same fs fixture and vite.config.ts, call exec('pnpm vite dev')
(or appropriate command the test harness uses for starting dev) and wait for the
dev server to finish startup; then assert the served/generated CSS matches the
same expected content (the .component-style CSS) to exercise the
`@tailwindcss/vite`:generate:serve code path. Ensure the new test name indicates
it's a dev-mode variant and reuse the same assertions/normalization (e.g.
replacing hashed names) so coverage hits the serve resolver path.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 609e9053-645e-4573-934b-99afc06dc96c
📒 Files selected for processing (2)
integrations/vite/resolvers.test.tspackages/@tailwindcss-vite/src/index.ts
Summary
Fixes #19719.
When Vite's CSS resolver treats a same-folder import like
@import "components.css"as a package import, Tailwind currently reports that the file cannot be resolved. This keeps the existing Vite resolver flow first, then adds a narrow fallback for bare.cssfilenames that exist next to the importing stylesheet.Test plan
source ~/.nvm/nvm.sh && nvm use 22.14.0 && source ~/.cargo/env && pnpm buildsource ~/.nvm/nvm.sh && nvm use 22.14.0 && source ~/.cargo/env && pnpm run test:integrations vite/resolvers.test.ts -t "resolve bare CSS imports in the same folder"source ~/.nvm/nvm.sh && nvm use 22.14.0 && pnpm exec prettier --check packages/@tailwindcss-vite/src/index.ts