Always resolve relative files, relative to the current .css file

[RobinMalfait]

This PR fixes an issue where resolving of certain CSS or JS files results in the wrong paths. The issue happens if you have a setup where a relative file path also exists in the parent folder:

/* src/foo.css */
.foo-in-root {}

/* src/theme/a.css */
@import "./foo.css"; /* This resolved to the file above, instead of the file below */

/* src/theme/foo.css */
.foo-in-theme {}

This happened because we resolved relative to a base folder, but Vite expects an importer instead. The difference is subtle, but they expect a file. On that file they use let base = path.dirname(importer) to get a base path out themselves.

This in turn means that if you pass in a folder, you get this:

path.dirname('/path/to/my-project') // /path/to

If we gave it a proper file, then we get the proper base path

path.dirname('/path/to/my-project/index.css') // /path/to/my-project

I'm actually surprised that this didn't cause issues earlier... but it did result in error since we recently started resolving files using Vite's aliasOnly: true feature such taht Vite aliases work as well.

With this change, we now make sure that:

1. We use a proper importer instead of the base path
2. We refactor the resolving logic such that we try with aliasOnly: true first, then aliasOnly: false

We also still ensure that in the CSS resolver we expect a .css file, and in the JS resolver we don't expect a .css file (which can happen if a "browser": "./dist/index.css" field in package.json points to a CSS file, daisyUI does this for example).

Fixes: #19956

Test plan

1. Added additional (failing) integration tests to reproduce the linked issue
2. Existing integration tests pass

While the build still worked, the linked issue resulted in a much bigger file size because the wrong .css files were included. With this fix, the number is correct again:

Since this is touching code related to previous PRs, I wanted to manually make sure that these still work as expected:

• Unknown file extension ".css" for ... #19950: This one is about daisyUI and the .css file referenced in the package.json's "browser" field:

• @tailwindcss/vite: build error when use @plugin "@tailwindcss/typography"; #19946: This one is about the Vite alias being just a single @ causing issues with @plugin "@tailwindcss/typography"; for example:

[ci-all]

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 0e57eb4e-8d42-4489-b24b-15bfc1e4711c

📥 Commits

Reviewing files that changed from the base of the PR and between f62597a and dd81a5c.

📒 Files selected for processing (3)

• CHANGELOG.md
• integrations/vite/resolvers.test.ts
• packages/@tailwindcss-vite/src/index.ts

---

Walkthrough

The pull request fixes relative path resolution for Tailwind CSS directives (@import and @plugin) when using the @tailwindcss/vite plugin. The implementation refactors resolver logic to use a shared helper function that standardizes path resolution across environment and pre-environment Vite APIs. Integration tests are added to verify correct behavior during production builds, including proper handling of CSS and JavaScript module imports, and the changelog is updated to document the fix.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically summarizes the main change: fixing relative file resolution to be relative to the importing .css file rather than a base directory.
Description check	✅ Passed	The description provides comprehensive context about the issue, root cause, solution approach, and verification steps including test plan and manual testing of related issues.
Linked Issues check	✅ Passed	The PR directly addresses issue #19956 by fixing incorrect resolution of relative @import/@plugin paths when similarly named files exist in parent directories, restoring correct behavior from v4.2.2.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to the objective: integration tests reproduce the issue, resolver logic refactors relative path resolution, and changelog documents the fix.

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

---

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