diff --git a/integrations/tailwindcss-cli/tests/cli.test.js b/integrations/tailwindcss-cli/tests/cli.test.js index 8289e65d027d..553097ce0208 100644 --- a/integrations/tailwindcss-cli/tests/cli.test.js +++ b/integrations/tailwindcss-cli/tests/cli.test.js @@ -277,6 +277,74 @@ describe('Build command', () => { ) }) + test('--postcss supports process options', async () => { + await writeInputFile('index.html', html`
`) + + let customConfig = javascript` + let path = require('path') + let postcss = require('postcss') + + module.exports = { + map: { inline: true }, + plugins: [ + function tailwindcss() { + return require(path.resolve('..', '..')) + }, + ], + } + ` + + await writeInputFile('../postcss.config.js', customConfig) + + await $(`${EXECUTABLE} --output ./dist/main.css --postcss`) + + let contents = await readOutputFile('main.css') + + expect(contents).toIncludeCss( + css` + .font-bold { + font-weight: 700; + } + ` + ) + + expect(contents).toContain(`/*# sourceMappingURL`) + }) + + test('--postcss supports process options with custom config', async () => { + await writeInputFile('index.html', html`
`) + + let customConfig = javascript` + let path = require('path') + let postcss = require('postcss') + + module.exports = { + map: { inline: true }, + plugins: [ + function tailwindcss() { + return require(path.resolve('..', '..')) + }, + ], + } + ` + + await writeInputFile('../custom.postcss.config.js', customConfig) + + await $(`${EXECUTABLE} --output ./dist/main.css --postcss ./custom.postcss.config.js`) + + let contents = await readOutputFile('main.css') + + expect(contents).toIncludeCss( + css` + .font-bold { + font-weight: 700; + } + ` + ) + + expect(contents).toContain(`/*# sourceMappingURL`) + }) + test('--help', async () => { let { combined } = await $(`${EXECUTABLE} --help`) diff --git a/src/cli.js b/src/cli.js index 5770546e89a8..b78b32bedac9 100644 --- a/src/cli.js +++ b/src/cli.js @@ -415,7 +415,7 @@ async function build() { async function loadPostCssPlugins() { let customPostCssPath = typeof args['--postcss'] === 'string' ? args['--postcss'] : undefined - let { plugins: configPlugins } = customPostCssPath + let config = customPostCssPath ? await (async () => { let file = path.resolve(customPostCssPath) @@ -431,10 +431,14 @@ async function build() { config.plugins = [] } - return { plugins: loadPlugins(config, file) } + let { plugins, ...options } = config + + return { options, plugins: loadPlugins(config, file) } })() : await postcssrc() + let configPlugins = config.plugins + let configPluginTailwindIdx = configPlugins.findIndex((plugin) => { if (typeof plugin === 'function' && plugin.name === 'tailwindcss') { return true @@ -454,7 +458,7 @@ async function build() { ? configPlugins : configPlugins.slice(configPluginTailwindIdx + 1) - return [beforePlugins, afterPlugins] + return [beforePlugins, afterPlugins, config.options] } function resolveConfig() { @@ -538,7 +542,7 @@ async function build() { tailwindPlugin.postcss = true - let [beforePlugins, afterPlugins] = includePostCss ? await loadPostCssPlugins() : [[], []] + let [beforePlugins, afterPlugins, postcssOptions] = includePostCss ? await loadPostCssPlugins() : [[], [], {}] let plugins = [ ...beforePlugins, @@ -573,7 +577,7 @@ async function build() { let start = process.hrtime.bigint() return Promise.resolve() .then(() => (output ? fs.promises.mkdir(path.dirname(output), { recursive: true }) : null)) - .then(() => processor.process(css, { from: input, to: output })) + .then(() => processor.process(css, { ...postcssOptions, from: input, to: output })) .then((result) => { if (!output) { return process.stdout.write(result.css)