mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
7e9a53f6cb
* add `jiti` and `detective-typescript` dependencies
* use `jiti` and `detective-typescript`
Instead of `detective`, this way we will be able to support
`tailwind.config.ts` files and `ESM` files.
* use `@swc/core` instead of the built-in `babel` form `jiti`
* update changelog
* add `jiti` and `detective-typescript` dependencies to `stable`
* use `sucrase` to transform the configs
* add `sucrase` dependency to `stable` engine
* make loading the config easier
* use abstracted loading config utils
* WIP: make `load` related files public API
* use new config loader in PostCSS plugin
* add list of default config files to look for
* cleanup unused arguments
* find default config path when using CLI
* improve `init` command
* make eslint happy
* keep all files in `stubs` folder
* add `tailwind.config.js` stub file
* Initialize PostCSS config using the same format as Tailwind config
* Rename config content stubs to config.*.js
* Improve option descriptions for init options
* Remove unused code, remove `constants` file
* Fix TS warning
* apply CLI changes to the Oxide version
* update `--help` output in CLI tests
* WIP: make tests work on CI
TODO: Test all combinations of `--full`, `--ts`, `--postcss`, and `--esm`.
* wip
* remove unused `fs`
* Fix init tests
Did you know you could pass an empty args to a command? No? Me neither. ¯\_(ツ)_/¯
* bump `napi-derive`
* list extensions we are interested in
* no-op the `removeFile` if file doesn't exist
* ensure all `init` flags work
* ensure we cleanup the new files
* test ESM/CJS generation based on package.json
* remove unnecessary test
We are not displaying output in the `--help` anymore based on whether
`type: module` is present or not.
Therefore this test is unneeded.
* only look for `TypeScript` files when the entryFile is `TypeScript` as well
* refactor `load` to be `loadConfig`
This will allow you to use:
```js
import loadConfig from 'tailwindcss/loadConfig'
let config = loadConfig("/Users/xyz/projects/my-app/tailwind.config.ts")
```
The `loadConfig` function will return the configuration object based on
the given absolute path of a tailwind configuration file.
The given path can be a CJS, an ESM or a TS file.
* use the `config.full.js` stub instead of the `defaultConfig.stub.js` file
The root `defaultConfig` is still there for backwards compatibilty
reasons. But the `module.exports = requrie('./config.full.js')` was
causing some problems when actually using tailwindcss.
So dropped it instead.
* apply `load` -> `loadConfig` changes to `Oxide` engine CLI
* ensure we write the config file in the Oxide engine
* improve type in Oxide engine CLI
* catch errors instead of checking if the file exists
A little smaller but just for tests so doesn't matter too much here 👍
* ensure we publish the correct stub files
---------
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
Co-authored-by: Nate Moore <nate@natemoo.re>
Co-authored-by: Enzo Innocenzi <enzo@innocenzi.dev>
391 lines
9.4 KiB
JavaScript
391 lines
9.4 KiB
JavaScript
import fs from 'fs'
|
|
import path from 'path'
|
|
import inTempDirectory from '../jest/runInTempDirectory'
|
|
|
|
import { crosscheck, run, html, css, javascript } from './util/run'
|
|
|
|
const defaultConfigFile = 'tailwind.config.js'
|
|
const cjsConfigFile = 'tailwind.config.cjs'
|
|
|
|
crosscheck(() => {
|
|
test('it uses the values from the custom config file', () => {
|
|
let config = require(path.resolve(`${__dirname}/fixtures/custom-config.js`))
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
@media (min-width: 400px) {
|
|
.mobile\:font-bold {
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('custom config can be passed as an object', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="mobile:font-bold"></div>` }],
|
|
theme: {
|
|
screens: {
|
|
mobile: '400px',
|
|
},
|
|
},
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
@media (min-width: 400px) {
|
|
.mobile\:font-bold {
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('custom config path can be passed using `config` property in an object', () => {
|
|
let config = {
|
|
config: path.resolve(`${__dirname}/fixtures/custom-config.js`),
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
@media (min-width: 400px) {
|
|
.mobile\:font-bold {
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('custom config can be passed under the `config` property', () => {
|
|
let config = {
|
|
config: {
|
|
content: [{ raw: html`<div class="mobile:font-bold"></div>` }],
|
|
theme: {
|
|
screens: {
|
|
mobile: '400px',
|
|
},
|
|
},
|
|
},
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
@media (min-width: 400px) {
|
|
.mobile\:font-bold {
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('tailwind.config.cjs is picked up by default', () => {
|
|
return inTempDirectory(() => {
|
|
fs.writeFileSync(
|
|
path.resolve(cjsConfigFile),
|
|
javascript`module.exports = {
|
|
content: [{ raw: '<div class="mobile:font-bold"></div>' }],
|
|
theme: {
|
|
screens: {
|
|
mobile: '400px',
|
|
},
|
|
},
|
|
}`
|
|
)
|
|
|
|
return run('@tailwind utilities').then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
@media (min-width: 400px) {
|
|
.mobile\:font-bold {
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
})
|
|
|
|
test('tailwind.config.js is picked up by default', () => {
|
|
return inTempDirectory(() => {
|
|
fs.writeFileSync(
|
|
path.resolve(defaultConfigFile),
|
|
javascript`module.exports = {
|
|
content: [{ raw: '<div class="mobile:font-bold"></div>' }],
|
|
theme: {
|
|
screens: {
|
|
mobile: '400px',
|
|
},
|
|
},
|
|
}`
|
|
)
|
|
|
|
return run('@tailwind utilities').then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
@media (min-width: 400px) {
|
|
.mobile\:font-bold {
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
})
|
|
|
|
test('tailwind.config.cjs is picked up by default when passing an empty object', () => {
|
|
return inTempDirectory(() => {
|
|
fs.writeFileSync(
|
|
path.resolve(cjsConfigFile),
|
|
javascript`module.exports = {
|
|
content: [{ raw: '<div class="mobile:font-bold"></div>' }],
|
|
theme: {
|
|
screens: {
|
|
mobile: '400px',
|
|
},
|
|
},
|
|
}`
|
|
)
|
|
|
|
return run('@tailwind utilities', {}).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
@media (min-width: 400px) {
|
|
.mobile\:font-bold {
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
})
|
|
|
|
test('tailwind.config.js is picked up by default when passing an empty object', () => {
|
|
return inTempDirectory(() => {
|
|
fs.writeFileSync(
|
|
path.resolve(defaultConfigFile),
|
|
javascript`module.exports = {
|
|
content: [{ raw: '<div class="mobile:font-bold"></div>' }],
|
|
theme: {
|
|
screens: {
|
|
mobile: '400px',
|
|
},
|
|
},
|
|
}`
|
|
)
|
|
|
|
return run('@tailwind utilities', {}).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
@media (min-width: 400px) {
|
|
.mobile\:font-bold {
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
})
|
|
|
|
test('the default config can be overridden using the presets key', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="min-h-primary min-h-secondary min-h-0"></div>` }],
|
|
presets: [
|
|
{
|
|
theme: {
|
|
extend: { minHeight: { secondary: '24px' } },
|
|
},
|
|
},
|
|
],
|
|
theme: {
|
|
extend: { minHeight: { primary: '48px' } },
|
|
},
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.min-h-0 {
|
|
min-height: 0;
|
|
}
|
|
.min-h-primary {
|
|
min-height: 48px;
|
|
}
|
|
.min-h-secondary {
|
|
min-height: 24px;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('presets can be functions', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="min-h-primary min-h-secondary min-h-0"></div>` }],
|
|
presets: [
|
|
() => ({
|
|
theme: {
|
|
extend: { minHeight: { secondary: '24px' } },
|
|
},
|
|
}),
|
|
],
|
|
theme: {
|
|
extend: { minHeight: { primary: '48px' } },
|
|
},
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.min-h-0 {
|
|
min-height: 0;
|
|
}
|
|
.min-h-primary {
|
|
min-height: 48px;
|
|
}
|
|
.min-h-secondary {
|
|
min-height: 24px;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('the default config can be removed by using an empty presets key in a preset', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="min-h-primary min-h-secondary min-h-0"></div>` }],
|
|
presets: [
|
|
{
|
|
presets: [],
|
|
theme: {
|
|
extend: { minHeight: { secondary: '24px' } },
|
|
},
|
|
},
|
|
],
|
|
theme: {
|
|
extend: { minHeight: { primary: '48px' } },
|
|
},
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.min-h-primary {
|
|
min-height: 48px;
|
|
}
|
|
.min-h-secondary {
|
|
min-height: 24px;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('presets can have their own presets', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="bg-red bg-transparent bg-black bg-white"></div>` }],
|
|
presets: [
|
|
{
|
|
presets: [],
|
|
theme: {
|
|
colors: { red: '#dd0000' },
|
|
},
|
|
},
|
|
{
|
|
presets: [
|
|
{
|
|
presets: [],
|
|
theme: {
|
|
colors: {
|
|
transparent: 'transparent',
|
|
red: '#ff0000',
|
|
},
|
|
},
|
|
},
|
|
],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
black: 'black',
|
|
red: '#ee0000',
|
|
},
|
|
backgroundColor: (theme) => theme('colors'),
|
|
},
|
|
},
|
|
corePlugins: ['backgroundColor'],
|
|
},
|
|
],
|
|
theme: {
|
|
extend: { colors: { white: 'white' } },
|
|
},
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.bg-black {
|
|
background-color: #000;
|
|
}
|
|
.bg-red {
|
|
background-color: #e00;
|
|
}
|
|
.bg-transparent {
|
|
background-color: #0000;
|
|
}
|
|
.bg-white {
|
|
background-color: #fff;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('function presets can be mixed with object presets', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="bg-red bg-transparent bg-black bg-white"></div>` }],
|
|
presets: [
|
|
() => ({
|
|
presets: [],
|
|
theme: {
|
|
colors: { red: '#dd0000' },
|
|
},
|
|
}),
|
|
{
|
|
presets: [
|
|
() => ({
|
|
presets: [],
|
|
theme: {
|
|
colors: {
|
|
transparent: 'transparent',
|
|
red: '#ff0000',
|
|
},
|
|
},
|
|
}),
|
|
],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
black: 'black',
|
|
red: '#ee0000',
|
|
},
|
|
backgroundColor: (theme) => theme('colors'),
|
|
},
|
|
},
|
|
corePlugins: ['backgroundColor'],
|
|
},
|
|
],
|
|
theme: {
|
|
extend: { colors: { white: 'white' } },
|
|
},
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.bg-black {
|
|
background-color: #000;
|
|
}
|
|
.bg-red {
|
|
background-color: #e00;
|
|
}
|
|
.bg-transparent {
|
|
background-color: #0000;
|
|
}
|
|
.bg-white {
|
|
background-color: #fff;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
})
|