mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
7347a2fd1c
Closes #15159 This PR extends the `@tailwindcss/node` packages to be able to overwrite the CSS and JS resolvers. This is necessary as some bundlers, in particular Vite, have a custom module resolution system that can be individually configured. E.g. in Vite it is possible to add custom [resolver configs](https://vite.dev/config/shared-options.html#resolve-conditions) that is expected to be taken into account. With the new `customCssResolver` and `customJsResolver` option, we're able to use the Vite resolvers which take these configs into account. ## Test Plan Tested in the playground by configuring [resolver conditions](https://vite.dev/config/shared-options.html#resolve-conditions) (with Vite 5.4 and Vite 6 beta). An integration test was added for both the JS and CSS resolvers to ensure it keeps working as expected. --------- Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
144 lines
4.7 KiB
TypeScript
144 lines
4.7 KiB
TypeScript
import { describe, expect } from 'vitest'
|
|
import { candidate, css, fetchStyles, html, js, retryAssertion, test, ts, txt } from '../utils'
|
|
|
|
for (let transformer of ['postcss', 'lightningcss']) {
|
|
describe(transformer, () => {
|
|
test(
|
|
`resolves aliases in production build`,
|
|
{
|
|
fs: {
|
|
'package.json': txt`
|
|
{
|
|
"type": "module",
|
|
"dependencies": {
|
|
"@tailwindcss/vite": "workspace:^",
|
|
"tailwindcss": "workspace:^"
|
|
},
|
|
"devDependencies": {
|
|
${transformer === 'lightningcss' ? `"lightningcss": "^1.26.0",` : ''}
|
|
"vite": "^5.3.5"
|
|
}
|
|
}
|
|
`,
|
|
'vite.config.ts': ts`
|
|
import tailwindcss from '@tailwindcss/vite'
|
|
import { defineConfig } from 'vite'
|
|
import { fileURLToPath } from 'node:url'
|
|
|
|
export default defineConfig({
|
|
css: ${transformer === 'postcss' ? '{}' : "{ transformer: 'lightningcss' }"},
|
|
build: { cssMinify: false },
|
|
plugins: [tailwindcss()],
|
|
resolve: {
|
|
alias: {
|
|
'#css-alias': fileURLToPath(new URL('./src/alias.css', import.meta.url)),
|
|
'#js-alias': fileURLToPath(new URL('./src/plugin.js', import.meta.url)),
|
|
},
|
|
},
|
|
})
|
|
`,
|
|
'index.html': html`
|
|
<head>
|
|
<link rel="stylesheet" href="./src/index.css" />
|
|
</head>
|
|
<body>
|
|
<div class="underline custom-underline">Hello, world!</div>
|
|
</body>
|
|
`,
|
|
'src/index.css': css`
|
|
@import '#css-alias';
|
|
@plugin '#js-alias';
|
|
`,
|
|
'src/alias.css': css`
|
|
@import 'tailwindcss/theme' theme(reference);
|
|
@import 'tailwindcss/utilities';
|
|
`,
|
|
'src/plugin.js': js`
|
|
export default function ({ addUtilities }) {
|
|
addUtilities({ '.custom-underline': { 'border-bottom': '1px solid green' } })
|
|
}
|
|
`,
|
|
},
|
|
},
|
|
async ({ fs, exec }) => {
|
|
await exec('pnpm vite build')
|
|
|
|
let files = await fs.glob('dist/**/*.css')
|
|
expect(files).toHaveLength(1)
|
|
let [filename] = files[0]
|
|
|
|
await fs.expectFileToContain(filename, [candidate`underline`, candidate`custom-underline`])
|
|
},
|
|
)
|
|
|
|
test(
|
|
`resolves aliases in dev mode`,
|
|
{
|
|
fs: {
|
|
'package.json': txt`
|
|
{
|
|
"type": "module",
|
|
"dependencies": {
|
|
"@tailwindcss/vite": "workspace:^",
|
|
"tailwindcss": "workspace:^"
|
|
},
|
|
"devDependencies": {
|
|
${transformer === 'lightningcss' ? `"lightningcss": "^1.26.0",` : ''}
|
|
"vite": "^5.3.5"
|
|
}
|
|
}
|
|
`,
|
|
'vite.config.ts': ts`
|
|
import tailwindcss from '@tailwindcss/vite'
|
|
import { defineConfig } from 'vite'
|
|
import { fileURLToPath } from 'node:url'
|
|
|
|
export default defineConfig({
|
|
css: ${transformer === 'postcss' ? '{}' : "{ transformer: 'lightningcss' }"},
|
|
build: { cssMinify: false },
|
|
plugins: [tailwindcss()],
|
|
resolve: {
|
|
alias: {
|
|
'#css-alias': fileURLToPath(new URL('./src/alias.css', import.meta.url)),
|
|
'#js-alias': fileURLToPath(new URL('./src/plugin.js', import.meta.url)),
|
|
},
|
|
},
|
|
})
|
|
`,
|
|
'index.html': html`
|
|
<head>
|
|
<link rel="stylesheet" href="./src/index.css" />
|
|
</head>
|
|
<body>
|
|
<div class="underline custom-underline">Hello, world!</div>
|
|
</body>
|
|
`,
|
|
'src/index.css': css`
|
|
@import '#css-alias';
|
|
@plugin '#js-alias';
|
|
`,
|
|
'src/alias.css': css`
|
|
@import 'tailwindcss/theme' theme(reference);
|
|
@import 'tailwindcss/utilities';
|
|
`,
|
|
'src/plugin.js': js`
|
|
export default function ({ addUtilities }) {
|
|
addUtilities({ '.custom-underline': { 'border-bottom': '1px solid green' } })
|
|
}
|
|
`,
|
|
},
|
|
},
|
|
async ({ root, spawn, getFreePort, fs }) => {
|
|
let port = await getFreePort()
|
|
await spawn(`pnpm vite dev --port ${port}`)
|
|
|
|
await retryAssertion(async () => {
|
|
let styles = await fetchStyles(port, '/index.html')
|
|
expect(styles).toContain(candidate`underline`)
|
|
expect(styles).toContain(candidate`custom-underline`)
|
|
})
|
|
},
|
|
)
|
|
})
|
|
}
|