Scripts: Add support for postcss.config.js

[ocean90]

Description

This is a follow-up for #21730 and the comments from #21730 (comment)

Currently the @wordpress/postcss-config gets imported right into the webpack.config.js file. How can we make it as easy as possible to extend or override this config? It would be awesome if we could allow for just adding a postcss.config.js file to be root of the project and the script then referencing that one instead of the one from the @wordpress/postcss-config package.

I wasn't aware that postcss.config.js is a thing :) It looks like it's standardized: https://github.com/michael-ciniawsky/postcss-load-config. I'm more than happy to add support for it in a follow-up PR. It will be very similar to how we handle all other configs (Babel, ESLint, etc.) 👍

I was playing around with the new version and really like it. postcss.config.js was the only thing that's missing.

Here's an example of such a postcss.config.js:

module.exports = ( ctx ) => {
	const config = {
		plugins: {
			'postcss-import': {} ,
			'postcss-mixins': {} ,
			'postcss-nested': {} ,
			'postcss-preset-env': {
				stage: 0,
				preserve: false, // Omit pre-polyfilled CSS.
				features: {
					'nesting-rules': false, /* Uses postcss-nesting which doesn't behave like Sass. */
				},
				autoprefixer: {
					grid: true,
				},
			} ,
			'postcss-hexrgba': {} ,
			'css-mqpacker': {
				sort: true,
			} ,
		}
	};

	if ( 'development' === ctx.env ) {
		config.map = true;
	} else {
		config.map = false;
		config.plugins['cssnano'] = {
			safe: true,
		}
	}

	return config;
};

@gziolo I'm assuming you haven't played with that yet? Happy to give it a try.

[gziolo]

@ocean90, thanks for converting those comments into an issue, much appreciated. The idea aligns very much with all other configs we provide with defaults, e.g.:

gutenberg/packages/scripts/config/webpack.config.js

Lines 70 to 80 in 7b10c30

	// Provide a fallback configuration if there's not
	// one explicitly available in the project.
	...( ! hasBabelConfig() && {
	babelrc: false,
	configFile: false,
	presets: [
	require.resolve(
	'@wordpress/babel-preset-default'
	),
	],
	} ),

Feel free to work on it, I'm happy to help with review and testing 👍

[codetot]

I found an error with compiled postcss source. #22735