Support postcss config options in config file in the CLI (#8226)

* Support config options from postcss CLI

* Update changelog

Author: thecrypticace

CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Allow arbitrary values with commas in `@apply` ([#8125](https://github.com/tailwindlabs/tailwindcss/pull/8125))
 - Fix intellisense for plugins with multiple `@apply` rules ([#8213](https://github.com/tailwindlabs/tailwindcss/pull/8213))
 - Improve type detection for arbitrary color values ([#8201](https://github.com/tailwindlabs/tailwindcss/pull/8201))
+- Support PostCSS config options in config file in CLI ([#8226](https://github.com/tailwindlabs/tailwindcss/pull/8226))
 
 ### Added
 

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`<div class="font-bold"></div>`)
+
+    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`<div class="font-bold"></div>`)
+
+    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`)
 

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)