685c19e266
This PR fixes an issue when using `@tailwindcss/vite` and you're trying to resolve paths. In the latest 4.2.3 release, we added support for following the vite `aliases` option. However, some people run into issues because if you just use `@` as an alias then using `@tailwindcss/typography` wouldn't resolve because it's a package, and not something local. With this PR we fix that by making sure that Vite's resolver can actually resolve to an absolute path. If not, then we fallback to the resolving that happens in `@tailwindcss/node`. Fixes: #19946 ## Test plan 1. Added an integration test that reproduces this issue, and is now solved 2. Tested it on a reproduction provided in the corresponding issue Before: <img width="1694" height="1856" alt="image" src="https://github.com/user-attachments/assets/c50f7104-78b3-476d-9e60-0c83e0976a5c" /> After: <img width="1694" height="1856" alt="image" src="https://github.com/user-attachments/assets/44ea0e3b-f60f-479f-a4a1-203a6230475b" />
80 lines
2 KiB
TypeScript
80 lines
2 KiB
TypeScript
import { candidate, css, html, js, json, test, ts } from '../utils'
|
|
|
|
test(
|
|
'sveltekit build resolves package plugins',
|
|
{
|
|
fs: {
|
|
'package.json': json`
|
|
{
|
|
"type": "module",
|
|
"scripts": {
|
|
"prepare": "svelte-kit sync || echo ''"
|
|
},
|
|
"dependencies": {
|
|
"svelte": "^5",
|
|
"tailwindcss": "workspace:^"
|
|
},
|
|
"devDependencies": {
|
|
"@sveltejs/adapter-auto": "^6",
|
|
"@sveltejs/kit": "^2",
|
|
"@tailwindcss/forms": "^0.5.11",
|
|
"@tailwindcss/vite": "workspace:^",
|
|
"vite": "^8"
|
|
}
|
|
}
|
|
`,
|
|
'svelte.config.js': js`
|
|
import adapter from '@sveltejs/adapter-auto'
|
|
|
|
export default {
|
|
kit: {
|
|
adapter: adapter(),
|
|
},
|
|
}
|
|
`,
|
|
'vite.config.ts': ts`
|
|
import tailwindcss from '@tailwindcss/vite'
|
|
import { sveltekit } from '@sveltejs/kit/vite'
|
|
import { defineConfig } from 'vite'
|
|
|
|
export default defineConfig({
|
|
build: { cssMinify: false },
|
|
plugins: [tailwindcss(), sveltekit()],
|
|
})
|
|
`,
|
|
'src/app.html': html`
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
%sveltekit.head%
|
|
</head>
|
|
<body data-sveltekit-preload-data="hover">
|
|
<div style="display: contents">%sveltekit.body%</div>
|
|
</body>
|
|
</html>
|
|
`,
|
|
'src/routes/+layout.svelte': html`
|
|
<script>
|
|
import '../app.css'
|
|
</script>
|
|
|
|
<slot />
|
|
`,
|
|
'src/routes/+page.svelte': html`
|
|
<div class="form-input">Hello, world!</div>
|
|
`,
|
|
'src/app.css': css`
|
|
@import 'tailwindcss';
|
|
@plugin '@tailwindcss/forms';
|
|
`,
|
|
},
|
|
},
|
|
async ({ exec, fs, expect }) => {
|
|
await exec('pnpm vite build')
|
|
|
|
let files = await fs.glob('.svelte-kit/output/client/**/*.css')
|
|
expect(files.length).toBeGreaterThan(0)
|
|
|
|
await fs.expectFileToContain(files[0][0], [candidate`form-input`])
|
|
},
|
|
)
|