Skip to content

Commit 12c1e7e

Browse files
nightahnightah
committed
fix(vite): resolve tsconfig paths in CSS and JS resolvers
Change `aliasOnly` from `true` to `false` when calling Vite's resolver so that the full resolution pipeline runs, including the oxc resolver responsible for tsconfig path resolution. When `aliasOnly` was `true`, only the @rollup/plugin-alias plugin ran, which meant `resolve.tsconfigPaths: true` had no effect on CSS `@import` or JS `@plugin` resolution in `@tailwindcss/vite`. Closes #19802
1 parent a4be983 commit 12c1e7e

File tree

2 files changed

+168
-5
lines changed

2 files changed

+168
-5
lines changed

‎integrations/vite/resolvers.test.ts‎

Lines changed: 164 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,168 @@
11
import { describe } from 'vitest'
2-
import { candidate, css, fetchStyles, html, js, retryAssertion, test, ts, txt } from '../utils'
2+
import {
3+
candidate,
4+
css,
5+
fetchStyles,
6+
html,
7+
js,
8+
json,
9+
retryAssertion,
10+
test,
11+
ts,
12+
txt,
13+
} from '../utils'
14+
15+
test(
16+
'resolves tsconfig paths in production build',
17+
{
18+
fs: {
19+
'package.json': json`
20+
{
21+
"type": "module",
22+
"dependencies": {
23+
"@tailwindcss/vite": "workspace:^",
24+
"tailwindcss": "workspace:^"
25+
},
26+
"devDependencies": {
27+
"vite": "^8"
28+
}
29+
}
30+
`,
31+
'tsconfig.json': json`
32+
{
33+
"compilerOptions": {
34+
"baseUrl": ".",
35+
"paths": {
36+
"@/*": ["./src/*"]
37+
}
38+
}
39+
}
40+
`,
41+
'vite.config.ts': ts`
42+
import tailwindcss from '@tailwindcss/vite'
43+
import { defineConfig } from 'vite'
44+
45+
export default defineConfig({
46+
build: { cssMinify: false },
47+
plugins: [tailwindcss()],
48+
resolve: {
49+
tsconfigPaths: true,
50+
},
51+
})
52+
`,
53+
'index.html': html`
54+
<head>
55+
<link rel="stylesheet" href="./src/index.css" />
56+
</head>
57+
<body>
58+
<div class="underline custom-underline">Hello, world!</div>
59+
</body>
60+
`,
61+
'src/index.css': css`
62+
@import '@/styles/base.css';
63+
@plugin '@/plugin.js';
64+
`,
65+
'src/styles/base.css': css`
66+
@reference 'tailwindcss/theme';
67+
@import 'tailwindcss/utilities';
68+
`,
69+
'src/plugin.js': js`
70+
export default function ({ addUtilities }) {
71+
addUtilities({ '.custom-underline': { 'border-bottom': '1px solid green' } })
72+
}
73+
`,
74+
},
75+
},
76+
async ({ fs, exec, expect }) => {
77+
await exec('pnpm vite build')
78+
79+
let files = await fs.glob('dist/**/*.css')
80+
expect(files).toHaveLength(1)
81+
let [filename] = files[0]
82+
83+
await fs.expectFileToContain(filename, [candidate`underline`, candidate`custom-underline`])
84+
},
85+
)
86+
87+
test(
88+
'resolves tsconfig paths in dev mode',
89+
{
90+
fs: {
91+
'package.json': json`
92+
{
93+
"type": "module",
94+
"dependencies": {
95+
"@tailwindcss/vite": "workspace:^",
96+
"tailwindcss": "workspace:^"
97+
},
98+
"devDependencies": {
99+
"vite": "^8"
100+
}
101+
}
102+
`,
103+
'tsconfig.json': json`
104+
{
105+
"compilerOptions": {
106+
"baseUrl": ".",
107+
"paths": {
108+
"@/*": ["./src/*"]
109+
}
110+
}
111+
}
112+
`,
113+
'vite.config.ts': ts`
114+
import tailwindcss from '@tailwindcss/vite'
115+
import { defineConfig } from 'vite'
116+
117+
export default defineConfig({
118+
build: { cssMinify: false },
119+
plugins: [tailwindcss()],
120+
resolve: {
121+
tsconfigPaths: true,
122+
},
123+
})
124+
`,
125+
'index.html': html`
126+
<head>
127+
<link rel="stylesheet" href="./src/index.css" />
128+
</head>
129+
<body>
130+
<div class="underline custom-underline">Hello, world!</div>
131+
</body>
132+
`,
133+
'src/index.css': css`
134+
@import '@/styles/base.css';
135+
@plugin '@/plugin.js';
136+
`,
137+
'src/styles/base.css': css`
138+
@reference 'tailwindcss/theme';
139+
@import 'tailwindcss/utilities';
140+
`,
141+
'src/plugin.js': js`
142+
export default function ({ addUtilities }) {
143+
addUtilities({ '.custom-underline': { 'border-bottom': '1px solid green' } })
144+
}
145+
`,
146+
},
147+
},
148+
async ({ spawn, expect }) => {
149+
let process = await spawn('pnpm vite dev')
150+
await process.onStdout((m) => m.includes('ready in'))
151+
152+
let url = ''
153+
await process.onStdout((m) => {
154+
let match = /Local:\s*(http.*)\//.exec(m)
155+
if (match) url = match[1]
156+
return Boolean(url)
157+
})
158+
159+
await retryAssertion(async () => {
160+
let styles = await fetchStyles(url, '/index.html')
161+
expect(styles).toContain(candidate`underline`)
162+
expect(styles).toContain(candidate`custom-underline`)
163+
})
164+
},
165+
)
3166

4167
describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
5168
test(

‎packages/@tailwindcss-vite/src/index.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,8 @@ export default function tailwindcss(opts: PluginOptions = {}): Plugin[] {
6262

6363
let jsResolver = config!.createResolver(config!.resolve)
6464

65-
customCssResolver = (id: string, base: string) => cssResolver(id, base, true, isSSR)
66-
customJsResolver = (id: string, base: string) => jsResolver(id, base, true, isSSR)
65+
customCssResolver = (id: string, base: string) => cssResolver(id, base, false, isSSR)
66+
customJsResolver = (id: string, base: string) => jsResolver(id, base, false, isSSR)
6767
} else {
6868
type ResolveIdFn = (
6969
environment: Environment,
@@ -105,8 +105,8 @@ export default function tailwindcss(opts: PluginOptions = {}): Plugin[] {
105105

106106
let jsResolver = createBackCompatIdResolver(env.config, env.config.resolve)
107107

108-
customCssResolver = (id: string, base: string) => cssResolver(env, id, base, true)
109-
customJsResolver = (id: string, base: string) => jsResolver(env, id, base, true)
108+
customCssResolver = (id: string, base: string) => cssResolver(env, id, base, false)
109+
customJsResolver = (id: string, base: string) => jsResolver(env, id, base, false)
110110
}
111111

112112
return new Root(

0 commit comments

Comments
 (0)