Skip to content

Fix Vite resolution for bare CSS imports#20056

Open
yudin-s wants to merge 1 commit into
tailwindlabs:mainfrom
yudin-s:fix-vite-bare-css-imports
Open

Fix Vite resolution for bare CSS imports#20056
yudin-s wants to merge 1 commit into
tailwindlabs:mainfrom
yudin-s:fix-vite-bare-css-imports

Conversation

@yudin-s
Copy link
Copy Markdown
Contributor

@yudin-s yudin-s commented May 14, 2026

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 .css filenames that exist next to the importing stylesheet.

Test plan

  • source ~/.nvm/nvm.sh && nvm use 22.14.0 && source ~/.cargo/env && pnpm build
  • source ~/.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

@yudin-s yudin-s requested a review from a team as a code owner May 14, 2026 15:27
@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps Bot commented May 14, 2026

Confidence Score: 5/5

Safe 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

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 14, 2026

Review Change Stack

Walkthrough

This PR adds a fallback resolver for bare CSS imports in the Vite Tailwind plugin. The implementation in packages/@tailwindcss-vite/src/index.ts extends createCustomResolver with logic to resolve non-relative, non-absolute CSS imports (like 'components.css') by checking for the file in the same directory. A corresponding integration test in integrations/vite/resolvers.test.ts verifies that Vite correctly bundles such imports during a production build by building a fixture and asserting the expected styles appear in the output.

🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately and concisely summarizes the main change: fixing Vite resolution for bare CSS imports without path prefixes.
Description check ✅ Passed The description is directly related to the changeset, explaining the problem being fixed and providing a concrete test plan.
Linked Issues check ✅ Passed The PR successfully addresses issue #19719 by adding fallback logic to resolve bare CSS imports in the same folder, matching the expected behavior described in the issue.
Out of Scope Changes check ✅ Passed All changes are directly scoped to fixing bare CSS import resolution: a test case validating the fix and resolver logic implementing the fallback mechanism.

✏️ 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

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

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.

  • Generate code and open pull requests
  • Plan features and break down work
  • Investigate incidents and troubleshoot customer tickets together
  • Automate recurring tasks and respond to alerts with triggers
  • Summarize progress and report instantly

Built for teams:

  • Shared memory across your entire org—no repeating context
  • Per-thread sandboxes to safely plan and execute work
  • Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started


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

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

🧹 Nitpick comments (1)
integrations/vite/resolvers.test.ts (1)

587-647: ⚡ Quick win

Add 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 a pnpm vite dev variant 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

📥 Commits

Reviewing files that changed from the base of the PR and between 460a008 and 63aa150.

📒 Files selected for processing (2)
  • integrations/vite/resolvers.test.ts
  • packages/@tailwindcss-vite/src/index.ts

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.

plugin:@tailwindcss/vite fails to resolve css file import in same folder if not prefixed with ./

1 participant