tailwindcss/integrations/vite
Robin Malfait 5a799900d4
Always resolve relative files, relative to the current .css file (#19965)
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:

```css
/* 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:
```js
path.dirname('/path/to/my-project') // /path/to
```

If we gave it a proper file, then we get the proper base path
```js
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:
<img width="1234" height="1037" alt="image"
src="https://github.com/user-attachments/assets/fdff803c-0db2-4066-92fa-064c2816b35c"
/>

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

- https://github.com/tailwindlabs/tailwindcss/issues/19950: This one is
about daisyUI and the `.css` file referenced in the package.json's
`"browser"` field: <img width="782" height="1229" alt="image"
src="https://github.com/user-attachments/assets/fb7b9d3b-527b-414b-94b0-2be7e96056f1"
/>

- https://github.com/tailwindlabs/tailwindcss/issues/19946: This one is
about the Vite alias being just a single `@` causing issues with
`@plugin "@tailwindcss/typography";` for example: <img width="1694"
height="1856" alt="image"
src="https://github.com/user-attachments/assets/d1935ecf-e80a-4945-a69a-ec3c5223efab"
/>


[ci-all]
2026-04-24 15:07:56 +02:00
..
astro.test.ts Fallback to config.createResolver for client and ssr environments in @tailwindcss/vite (#19679) 2026-02-17 19:59:57 +00:00
config.test.ts feat: add Vite 7 support to the @tailwindcss/vite plugin (#18384) 2025-06-24 12:31:17 -04:00
css-modules.test.ts feat: add Vite 7 support to the @tailwindcss/vite plugin (#18384) 2025-06-24 12:31:17 -04:00
html-style-blocks.test.ts feat: add Vite 7 support to the @tailwindcss/vite plugin (#18384) 2025-06-24 12:31:17 -04:00
ignored-packages.test.ts feat: add Vite 7 support to the @tailwindcss/vite plugin (#18384) 2025-06-24 12:31:17 -04:00
index.test.ts Add support for Vite 8 in @tailwindcss/vite (#19790) 2026-03-12 20:54:34 +01:00
multi-root.test.ts feat: add Vite 7 support to the @tailwindcss/vite plugin (#18384) 2025-06-24 12:31:17 -04:00
nuxt.test.ts bump nuxt dependency in integration tests 2026-01-06 16:17:55 +01:00
other-transforms.test.ts feat: add Vite 7 support to the @tailwindcss/vite plugin (#18384) 2025-06-24 12:31:17 -04:00
qwik.test.ts Vite: Don't register the current CSS file as a dependency on itself (#17533) 2025-04-03 18:50:16 +02:00
react-router.test.ts Cleanup inconsistencies related to (regex) escapes (#19804) 2026-03-15 22:04:58 +01:00
resolvers.test.ts Always resolve relative files, relative to the current .css file (#19965) 2026-04-24 15:07:56 +02:00
solidstart.test.ts Fix Vite issues with SolidStart (#16052) 2025-01-30 16:58:20 +01:00
source-maps.test.ts feat: add Vite 7 support to the @tailwindcss/vite plugin (#18384) 2025-06-24 12:31:17 -04:00
ssr.test.ts Add support for Vite 8 in @tailwindcss/vite (#19790) 2026-03-12 20:54:34 +01:00
svelte.test.ts Cleanup inconsistencies related to (regex) escapes (#19804) 2026-03-15 22:04:58 +01:00
sveltekit.test.ts Fix issue around resolving paths in @tailwindcss/vite (#19947) 2026-04-21 14:11:46 +02:00
url-rewriting.test.ts feat: add Vite 7 support to the @tailwindcss/vite plugin (#18384) 2025-06-24 12:31:17 -04:00
virtual-modules.test.ts Vite: Don't crash with virtual module dependencies (#16780) 2025-02-25 11:29:58 +01:00
vue.test.ts feat: add Vite 7 support to the @tailwindcss/vite plugin (#18384) 2025-06-24 12:31:17 -04:00