From c6e6d4bdf02e4a4adba1f74ef8afc229c803d584 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Thu, 28 Apr 2022 14:45:10 -0400 Subject: [PATCH] Support config options from postcss CLI --- .../tailwindcss-cli/tests/cli.test.js | 68 +++++++++++++++++++ src/cli.js | 19 ++++-- 2 files changed, 82 insertions(+), 5 deletions(-) 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..1fab938bab02 100644 --- a/src/cli.js +++ b/src/cli.js @@ -9,6 +9,7 @@ import fs from 'fs' import postcssrc from 'postcss-load-config' import { lilconfig } from 'lilconfig' import loadPlugins from 'postcss-load-config/src/plugins' // Little bit scary, looking at private/internal API +import loadOptions from 'postcss-load-config/src/options' // Little bit scary, looking at private/internal API import tailwind from './processTailwindFeatures' import resolveConfigInternal from '../resolveConfig' import fastGlob from 'fast-glob' @@ -415,7 +416,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 +432,16 @@ async function build() { config.plugins = [] } - return { plugins: loadPlugins(config, file) } + return { + file, + plugins: loadPlugins(config, file), + options: loadOptions(config, file), + } })() : await postcssrc() + let configPlugins = config.plugins + let configPluginTailwindIdx = configPlugins.findIndex((plugin) => { if (typeof plugin === 'function' && plugin.name === 'tailwindcss') { return true @@ -454,7 +461,7 @@ async function build() { ? configPlugins : configPlugins.slice(configPluginTailwindIdx + 1) - return [beforePlugins, afterPlugins] + return [beforePlugins, afterPlugins, config.options] } function resolveConfig() { @@ -538,7 +545,9 @@ async function build() { tailwindPlugin.postcss = true - let [beforePlugins, afterPlugins] = includePostCss ? await loadPostCssPlugins() : [[], []] + let [beforePlugins, afterPlugins, postcssOptions] = includePostCss + ? await loadPostCssPlugins() + : [[], [], {}] let plugins = [ ...beforePlugins, @@ -573,7 +582,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)