Inline the PostCSS config file into the webpack config (#45030)

* Specify autoprefixer and postcss-custom-properties plugins as top-level dependencies

They were specified only in `calypso-build/package.json` until now, which is not entirely
correct. The packages are used a lot outside the `calypso-build` context.

* calypso-build: add new postCssOptions option to the SASS loader

Allows for more powerful configuration of the PostCSS pipeline, e.g., inlining
the config completely instead of loading it from file.

* Remove client/postcss.config.js in favor of inline config in webpack.config.js

The config file doesn't need to be loaded 800+ times for every .scss compilation.
It's created only once when loading the webpack config.

* Change the plugins function into a simple static array

client/webpack.config.js

@@ -29,6 +29,8 @@ const {
 	shouldTranspileDependency,
 } = require( '@automattic/calypso-build/webpack/util' );
 const ExtensiveLodashReplacementPlugin = require( '@automattic/webpack-extensive-lodash-replacement-plugin' );
+const autoprefixerPlugin = require( 'autoprefixer' );
+const postcssCustomPropertiesPlugin = require( 'postcss-custom-properties' );
 
 /**
  * Internal dependencies
@@ -221,12 +223,12 @@ const webpackConfig = {
 			} ),
 			SassConfig.loader( {
 				includePaths: [ __dirname ],
-				postCssConfig: {
-					path: __dirname,
-					ctx: {
-						transformCssProperties: browserslistEnv === 'defaults',
-						customProperties: calypsoColorSchemes,
-					},
+				postCssOptions: {
+					plugins: [
+						autoprefixerPlugin(),
+						browserslistEnv === 'defaults' &&
+							postcssCustomPropertiesPlugin( { importFrom: [ calypsoColorSchemes ] } ),
+					].filter( Boolean ),
 				},
 				prelude: `@import '${ path.join( __dirname, 'assets/stylesheets/shared/_utils.scss' ) }';`,
 				cacheDirectory: path.resolve( cachePath, 'css-loader' ),

package.json

@@ -265,6 +265,7 @@
 		"@wordpress/url": "^2.17.0",
 		"@wordpress/viewport": "^2.21.3",
 		"acorn": "^7.1.1",
+		"autoprefixer": "^9.7.3",
 		"babel-eslint": "^10.1.0",
 		"babel-jest": "^26.3.0",
 		"babel-plugin-add-module-exports": "^1.0.2",
@@ -343,6 +344,7 @@
 		"npm-run-all": "^4.1.5",
 		"photon": "^3.0.0",
 		"postcss-cli": "^6.1.3",
+		"postcss-custom-properties": "^9.1.1",
 		"prettier": "npm:wp-prettier@2.0.5",
 		"qs": "^6.9.1",
 		"react": "^16.12.0",

packages/calypso-build/CHANGELOG.md

@@ -1,3 +1,8 @@
+# 6.3.0 (next)
+
+- add new `postCssOptions` option for the SASS loader, allowing more powerful customization of the
+  PostCSS loader, deprecating the less capable `postCssConfig` option
+
 # 6.2.0
 
 - Set `strictExportPresence` in webpack so missing exports error the build.

packages/calypso-build/webpack/sass.js

@@ -11,12 +11,19 @@ const WebpackRTLPlugin = require( 'webpack-rtl-plugin' );
  * @param  {object}    _                              Options
  * @param  {string[]}  _.includePaths                 Sass files lookup paths
  * @param  {string}    _.prelude                      String to prepend to each Sass file
- * @param  {object}    _.postCssConfig                PostCSS config
+ * @param  {object}    _.postCssOptions               PostCSS options
+ * @param  {object}    _.postCssConfig                PostCSS config (deprecated)
  * @param  {object}    _.cacheDirectory               Directory used to store the cache
  *
  * @returns {object}                                  webpack loader object
  */
-module.exports.loader = ( { includePaths, prelude, postCssConfig = {}, cacheDirectory } ) => ( {
+module.exports.loader = ( {
+	includePaths,
+	prelude,
+	postCssOptions,
+	postCssConfig = {},
+	cacheDirectory,
+} ) => ( {
 	test: /\.(sc|sa|c)ss$/,
 	use: [
 		MiniCssExtractPluginWithRTL.loader,
@@ -44,9 +51,7 @@ module.exports.loader = ( { includePaths, prelude, postCssConfig = {}, cacheDire
 		},
 		{
 			loader: require.resolve( 'postcss-loader' ),
-			options: {
-				config: postCssConfig,
-			},
+			options: postCssOptions || { config: postCssConfig },
 		},
 		{
 			loader: require.resolve( 'sass-loader' ),