Add .mts and .cts config file detection (#13940)

* add `tailwind.config.cts` and `tailwind.config.mts` as default config files

* always use jiti when working with ESM or TS files

* update changelog

* add integration test for `.cts` and `.mts` configuration files
This commit is contained in:
Robin Malfait 2024-07-03 23:09:35 +02:00 • committed by GitHub
parent 0de1f0cce4
commit 588a8225eb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 57 additions and 40 deletions

View file

@ -134,51 +134,54 @@ describe('static build', () => {
)
})
it('can use a tailwind.config.ts configuration file', async () => {
await removeFile('tailwind.config.js')
await writeInputFile('index.html', html`<div class="bg-primary"></div>`)
await writeInputFile(
'index.css',
css`
@tailwind base;
@tailwind components;
@tailwind utilities;
`
)
await writeInputFile(
'../tailwind.config.ts',
javascript`
import type { Config } from 'tailwindcss'
it.each([['../tailwind.config.ts'], ['../tailwind.config.cts'], ['../tailwind.config.mts']])(
'can use a %s configuration file',
async (path) => {
await removeFile('tailwind.config.js')
await writeInputFile('index.html', html`<div class="bg-primary"></div>`)
await writeInputFile(
'index.css',
css`
@tailwind base;
@tailwind components;
@tailwind utilities;
`
)
await writeInputFile(
path,
javascript`
import type { Config } from 'tailwindcss'
export default {
content: ['./src/index.html'],
theme: {
extend: {
colors: {
primary: 'black',
export default {
content: ['./src/index.html'],
theme: {
extend: {
colors: {
primary: 'black',
},
},
},
},
corePlugins: {
preflight: false,
},
} satisfies Config
`
)
corePlugins: {
preflight: false,
},
} satisfies Config
`
)
await $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css', {
env: { NODE_ENV: 'production' },
})
await $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css', {
env: { NODE_ENV: 'production' },
})
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.bg-primary {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
`
)
})
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.bg-primary {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
`
)
}
)
it('can read from a config file from an @config directive', async () => {
await writeInputFile('index.html', html`<div class="bg-yellow"></div>`)