wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Add @config support (#9405)

Browse source 
* Refactor CLI

* Add `@config` support

* Update changelog

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
This commit is contained in:
Jordan Pittman 2022-09-23 13:48:17 -04:00 • committed by GitHub
parent bf44941049
commit 5ea752e85c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 1095 additions and 807 deletions
Download patch file Download diff file Expand all files Collapse all files

224
integrations/tailwindcss-cli/tests/integration.test.js
View file

@ -1,3 +1,4 @@
let fs = require('fs')
let $ = require('../../execute')
let { css, html, javascript } = require('../../syntax')
@ -88,6 +89,108 @@ describe('static build', () => {
`
)
})
it('can read from a config file from an @config directive', async () => {
await writeInputFile('index.html', html`<div class="bg-yellow"></div>`)
await writeInputFile(
'index.css',
css`
@config "./tailwind.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;
`
)
await writeInputFile(
'tailwind.config.js',
javascript`
module.exports = {
content: {
relative: true,
files: ['./index.html'],
},
theme: {
extend: {
colors: {
yellow: '#ff0',
}
},
},
corePlugins: {
preflight: false,
},
}
`
)
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-yellow {
--tw-bg-opacity: 1;
background-color: rgb(255 255 0 / var(--tw-bg-opacity));
}
`
)
})
it('can read from a config file from an @config directive inside an @import from postcss-import', async () => {
await fs.promises.mkdir('./src/config', { recursive: true })
await writeInputFile('index.html', html`<div class="bg-yellow"></div>`)
await writeInputFile(
'config/myconfig.css',
css`
@config "../tailwind.config.js";
`
)
await writeInputFile(
'index.css',
css`
@import './config/myconfig';
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
`
)
await writeInputFile(
'tailwind.config.js',
javascript`
module.exports = {
content: {
relative: true,
files: ['./index.html'],
},
theme: {
extend: {
colors: {
yellow: '#ff0',
}
},
},
corePlugins: {
preflight: false,
},
}
`
)
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-yellow {
--tw-bg-opacity: 1;
background-color: rgb(255 255 0 / var(--tw-bg-opacity));
}
`
)
})
})
describe('watcher', () => {
@ -381,4 +484,125 @@ describe('watcher', () => {
return runningProcess.stop()
})
test('listens for changes to the @config directive', async () => {
await writeInputFile('index.html', html`<div class="bg-yellow"></div>`)
await writeInputFile(
'index.css',
css`
@config "./tailwind.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;
`
)
await writeInputFile(
'tailwind.config.js',
javascript`
module.exports = {
content: {
relative: true,
files: ['./index.html'],
},
theme: {
extend: {
colors: {
yellow: '#ff0',
}
},
},
corePlugins: {
preflight: false,
},
}
`
)
await writeInputFile(
'tailwind.2.config.js',
javascript`
module.exports = {
content: {
relative: true,
files: ['./index.html'],
},
theme: {
extend: {
colors: {
yellow: '#ff7',
}
},
},
corePlugins: {
preflight: false,
},
}
`
)
let runningProcess = $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css -w')
await runningProcess.onStderr(ready)
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.bg-yellow {
--tw-bg-opacity: 1;
background-color: rgb(255 255 0 / var(--tw-bg-opacity));
}
`
)
await writeInputFile(
'index.css',
css`
@config "./tailwind.2.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;
`
)
await runningProcess.onStderr(ready)
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.bg-yellow {
--tw-bg-opacity: 1;
background-color: rgb(255 255 119 / var(--tw-bg-opacity));
}
`
)
await writeInputFile(
'tailwind.2.config.js',
javascript`
module.exports = {
content: {
relative: true,
files: ['./index.html'],
},
theme: {
extend: {
colors: {
yellow: '#fff',
}
},
},
corePlugins: {
preflight: false,
},
}
`
)
await runningProcess.onStderr(ready)
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.bg-yellow {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
`
)
return runningProcess.stop()
})
})