Update postcss-loader configs (#31583)

A few years ago postcss-loader added the ability to specify plugins as an array of plugin objects rather than as an object mapping plugin names to configs. Taking advantage of this lets us not have to use `NODE_PATH` for webpack invocations all over the place to allow postcss-loader to find its plugins.
Automattic · Jun 27, 2023 · abe75af · abe75af
1 parent 31f026a
commit abe75af
Show file tree

Hide file tree

Showing 40 changed files with 121 additions and 86 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/projects/js-packages/storybook/changelog/update-postcss-configs b/projects/js-packages/storybook/changelog/update-postcss-configs
@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Postcss config no longer needs NODE_PATH, but storybook still does. Update comment accordingly. No change to the project itself.
+
+
diff --git a/projects/js-packages/storybook/package.json b/projects/js-packages/storybook/package.json
@@ -15,7 +15,7 @@
 	"license": "GPL-2.0-or-later",
 	"author": "Automattic",
 	"scripts": {
-		"//": "# We set NODE_PATH here so postcss-loader can find its plugins with pnpm 7. See https://github.com/pnpm/pnpm/discussions/3536#discussioncomment-2688984",
+		"//": "# We set NODE_PATH here so storybook can find its plugins with pnpm 7. See https://github.com/pnpm/pnpm/discussions/3536#discussioncomment-2688984",
 		"storybook:build": "NODE_PATH=\"$PWD/node_modules\" storybook build -c ./storybook -o ./docs",
 		"storybook:dev": "NODE_PATH=\"$PWD/node_modules\" storybook dev -c ./storybook -p 50240",
 		"test": "jest tests/"

diff --git a/projects/packages/action-bar/changelog/update-postcss-configs b/projects/packages/action-bar/changelog/update-postcss-configs
@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Remove unneeded `NODE_PATH` incorrectly copy-pasted from elsewhere. (Correct copy-pasting would have had it before the `webpack`, not before the `pnpm run clean`...)
+
+
diff --git a/projects/packages/action-bar/package.json b/projects/packages/action-bar/package.json
@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-action-bar",
-	"version": "0.1.20",
+	"version": "0.1.21-alpha",
 	"description": "An easy way for visitors to follow, like, and comment on your WordPress site.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/packages/action-bar/#readme",
 	"bugs": {
@@ -15,7 +15,7 @@
 	"license": "GPL-2.0-or-later",
 	"author": "Automattic",
 	"scripts": {
-		"build": "NODE_PATH=\"$PWD/node_modules\" pnpm run clean && webpack --config ./webpack.config.action-bar.js",
+		"build": "pnpm run clean && webpack --config ./webpack.config.action-bar.js",
 		"build-production": "NODE_ENV=production BABEL_ENV=production pnpm run build && pnpm run validate",
 		"clean": "rm -rf build/ .cache/",
 		"validate": "pnpm exec validate-es --no-error-on-unmatched-pattern build/",

diff --git a/projects/packages/blaze/changelog/update-postcss-configs b/projects/packages/blaze/changelog/update-postcss-configs
@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Remove unneeded `NODE_PATH` incorrectly copy-pasted from elsewhere. (Correct copy-pasting would have had it before the `webpack`, not before the `pnpm run clean`...)
+
+
diff --git a/projects/packages/blaze/package.json b/projects/packages/blaze/package.json
@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-blaze",
-	"version": "0.7.1",
+	"version": "0.7.2-alpha",
 	"description": "Attract high-quality traffic to your site using Blaze. Using this service, you can advertise a post or page on some of the millions of pages across WordPress.com and Tumblr from just $5 per day.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/packages/blaze/#readme",
 	"bugs": {
@@ -15,7 +15,7 @@
 	"license": "GPL-2.0-or-later",
 	"author": "Automattic",
 	"scripts": {
-		"build": "NODE_PATH=\"$PWD/node_modules\" pnpm run clean && webpack",
+		"build": "pnpm run clean && webpack",
 		"build-production": "NODE_ENV=production BABEL_ENV=production pnpm run build && pnpm run validate",
 		"clean": "rm -rf build/ .cache/",
 		"validate": "pnpm exec validate-es --no-error-on-unmatched-pattern build/",

diff --git a/projects/packages/blaze/src/class-dashboard.php b/projects/packages/blaze/src/class-dashboard.php
@@ -21,7 +21,7 @@ class Dashboard {
 	 *
 	 * @var string
 	 */
-	const PACKAGE_VERSION = '0.7.1';
+	const PACKAGE_VERSION = '0.7.2-alpha';
 
 	/**
 	 * List of dependencies needed to render the dashboard in wp-admin.

diff --git a/projects/packages/forms/changelog/update-postcss-configs b/projects/packages/forms/changelog/update-postcss-configs
@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Update postcss configs to use array syntax for plugins. No change to the project itself.
+
+
diff --git a/projects/packages/forms/package.json b/projects/packages/forms/package.json
@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-forms",
-	"version": "0.19.5",
+	"version": "0.19.6-alpha",
 	"description": "Jetpack Forms",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/packages/forms/#readme",
 	"bugs": {
@@ -17,9 +17,9 @@
 	"scripts": {
 		"build": "pnpm run clean && pnpm run build:blocks && pnpm run build:contact-form && pnpm run build:dashboard",
 		"build-production": "NODE_ENV=production BABEL_ENV=production pnpm run build && pnpm run validate",
-		"build:blocks": "NODE_PATH=\"$PWD/node_modules\" webpack --config ./tools/webpack.config.blocks.js",
-		"build:contact-form": "NODE_PATH=\"$PWD/node_modules\" webpack --config ./tools/webpack.config.contact-form.js",
-		"build:dashboard": "NODE_PATH=\"$PWD/node_modules\" webpack --config ./tools/webpack.config.dashboard.js",
+		"build:blocks": "webpack --config ./tools/webpack.config.blocks.js",
+		"build:contact-form": "webpack --config ./tools/webpack.config.contact-form.js",
+		"build:dashboard": "webpack --config ./tools/webpack.config.dashboard.js",
 		"clean": "rm -rf dist/ .cache/",
 		"test": "jest",
 		"validate": "pnpm exec validate-es --no-error-on-unmatched-pattern dist/",

diff --git a/projects/packages/forms/src/class-jetpack-forms.php b/projects/packages/forms/src/class-jetpack-forms.php
@@ -15,7 +15,7 @@
  */
 class Jetpack_Forms {
 
-	const PACKAGE_VERSION = '0.19.5';
+	const PACKAGE_VERSION = '0.19.6-alpha';
 
 	/**
 	 * Load the contact form module.

diff --git a/projects/packages/forms/tools/webpack.config.blocks.js b/projects/packages/forms/tools/webpack.config.blocks.js
@@ -66,7 +66,7 @@ const sharedWebpackConfig = {
 						loader: 'postcss-loader',
 						options: {
 							// postcssOptions: { config: path.join( __dirname, 'postcss.config.js' ) },
-							postcssOptions: { plugins: { autoprefixer: {} } },
+							postcssOptions: { plugins: [ require( 'autoprefixer' ) ] },
 						},
 					},
 					'sass-loader',

diff --git a/projects/packages/forms/tools/webpack.config.contact-form.js b/projects/packages/forms/tools/webpack.config.contact-form.js
@@ -43,7 +43,7 @@ const sharedWebpackConfig = {
 					{
 						loader: 'postcss-loader',
 						options: {
-							postcssOptions: { plugins: { autoprefixer: {} } },
+							postcssOptions: { plugins: [ require( 'autoprefixer' ) ] },
 						},
 					},
 					{

diff --git a/projects/packages/publicize/changelog/update-postcss-configs b/projects/packages/publicize/changelog/update-postcss-configs
@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Update postcss configs to use array syntax for plugins. No change to the project itself.
+
+
diff --git a/projects/packages/publicize/package.json b/projects/packages/publicize/package.json
@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-publicize",
-	"version": "0.30.2",
+	"version": "0.30.3-alpha",
 	"description": "Publicize makes it easy to share your site’s posts on several social media networks automatically when you publish a new post.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/packages/publicize/#readme",
 	"bugs": {
@@ -16,13 +16,12 @@
 	"author": "Automattic",
 	"scripts": {
 		"build": "pnpm run clean && pnpm run build-client",
-		"//": "# We set NODE_PATH here so postcss-loader can find its plugins with pnpm 7. See https://github.com/pnpm/pnpm/discussions/3536#discussioncomment-2688984",
-		"build-client": "NODE_PATH=\"$PWD/node_modules\" webpack",
+		"build-client": "webpack",
 		"build-concurrently": "pnpm run clean && concurrently 'pnpm:build-client' 'pnpm:build-php'",
 		"build-production-concurrently": "pnpm run clean && concurrently 'NODE_ENV=production BABEL_ENV=production pnpm run build-client' && pnpm run validate",
 		"clean": "rm -rf build/",
 		"validate": "pnpm exec validate-es build/",
-		"watch": "pnpm run build && NODE_PATH=\"$PWD/node_modules\" webpack watch"
+		"watch": "pnpm run build && webpack watch"
 	},
 	"browserslist": [
 		"extends @wordpress/browserslist-config"

diff --git a/projects/packages/search/changelog/update-postcss-configs b/projects/packages/search/changelog/update-postcss-configs
@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Update postcss configs to use array syntax for plugins. No change to the project itself.
+
+
diff --git a/projects/packages/search/package.json b/projects/packages/search/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "jetpack-search",
-	"version": "0.37.3",
+	"version": "0.37.4-alpha",
 	"description": "Package for Jetpack Search products",
 	"main": "main.js",
 	"directories": {
@@ -10,9 +10,8 @@
 		"build": "pnpm run clean && pnpm run build-instant && pnpm run build-customberg && pnpm run build-dashboard",
 		"build-production": "NODE_ENV=production BABEL_ENV=production pnpm run build && pnpm run validate",
 		"build-development": "NODE_ENV=development BABEL_ENV=development pnpm run build",
-		"//": "# We set NODE_PATH here so postcss-loader can find its plugins with pnpm 7. See https://github.com/pnpm/pnpm/discussions/3536#discussioncomment-2688984",
-		"build-instant": "NODE_PATH=\"$PWD/node_modules\" webpack --config ./tools/webpack.instant.config.js",
-		"build-customberg": "NODE_PATH=\"$PWD/node_modules\" webpack --config ./tools/webpack.customberg.config.js",
+		"build-instant": "webpack --config ./tools/webpack.instant.config.js",
+		"build-customberg": "webpack --config ./tools/webpack.customberg.config.js",
 		"build-dashboard": "webpack --config ./tools/webpack.dashboard.config.js",
 		"clean": "rm -rf build/ .cache/",
 		"test": "concurrently 'pnpm:test-scripts' 'pnpm:test-size'",

diff --git a/projects/packages/search/postcss.config.js b/projects/packages/search/postcss.config.js
@@ -1,13 +1,13 @@
 // Uses Jetpack plugin's postcss config.
 module.exports = () => ( {
-	plugins: {
-		'postcss-custom-properties': {
+	plugins: [
+		require( 'postcss-custom-properties' )( {
 			importFrom: [ require.resolve( '@automattic/calypso-color-schemes' ) ],
 			// @TODO: Drop `preserve: false` workaround if possible
 			// See https://github.com/Automattic/jetpack/pull/13854#issuecomment-550898168
 			preserve: false,
 			disableDeprecationNotice: true,
-		},
-		autoprefixer: {},
-	},
+		} ),
+		require( 'autoprefixer' ),
+	],
 } );
diff --git a/projects/packages/search/src/class-package.php b/projects/packages/search/src/class-package.php
@@ -11,7 +11,7 @@
  * Search package general information
  */
 class Package {
-	const VERSION = '0.37.3';
+	const VERSION = '0.37.4-alpha';
 	const SLUG    = 'search';
 
 	/**

diff --git a/projects/packages/videopress/changelog/update-postcss-configs b/projects/packages/videopress/changelog/update-postcss-configs
@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Update postcss configs to use array syntax for plugins. No change to the project itself.
+
+
diff --git a/projects/packages/videopress/package.json b/projects/packages/videopress/package.json
@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-videopress",
-	"version": "0.14.7",
+	"version": "0.14.8-alpha",
 	"description": "VideoPress package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/packages/videopress/#readme",
 	"bugs": {
@@ -16,7 +16,7 @@
 	"author": "Automattic",
 	"scripts": {
 		"build": "pnpm run clean && pnpm run build-client",
-		"build-client": "NODE_PATH=\"$PWD/node_modules\" webpack",
+		"build-client": "webpack",
 		"clean": "rm -rf build/",
 		"validate": "pnpm exec validate-es build/",
 		"watch": "pnpm build && pnpm build-client --watch",

diff --git a/projects/packages/videopress/postcss.config.js b/projects/packages/videopress/postcss.config.js
@@ -1,6 +1,6 @@
 module.exports = () => ( {
-	plugins: {
-		'postcss-custom-properties': {
+	plugins: [
+		require( 'postcss-custom-properties' )( {
 			importFrom: [ require.resolve( '@automattic/calypso-color-schemes' ) ],
 			// Use of `preserve: false` dates back to when we still used @automattic/calypso-build.
 			// Ideally we'd get rid of it to properly make use of CSS vars, but first we have to
@@ -13,7 +13,7 @@ module.exports = () => ( {
 			// including a postcss.config.js like this by default.
 			preserve: false,
 			disableDeprecationNotice: true,
-		},
-		autoprefixer: {},
-	},
+		} ),
+		require( 'autoprefixer' ),
+	],
 } );
diff --git a/projects/packages/videopress/src/class-package-version.php b/projects/packages/videopress/src/class-package-version.php
@@ -11,7 +11,7 @@
  * The Package_Version class.
  */
 class Package_Version {
-	const PACKAGE_VERSION = '0.14.7';
+	const PACKAGE_VERSION = '0.14.8-alpha';
 
 	const PACKAGE_SLUG = 'videopress';
 

diff --git a/projects/packages/wordads/changelog/update-postcss-configs b/projects/packages/wordads/changelog/update-postcss-configs
@@ -0,0 +1,5 @@
+Significance: patch
+Type: removed
+Comment: Remove unused postcss deps and config. No change to the package itself.
+
+
diff --git a/projects/packages/wordads/package.json b/projects/packages/wordads/package.json
@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-wordads",
-	"version": "0.2.44",
+	"version": "0.2.45-alpha",
 	"description": "Earn income by allowing Jetpack to display high quality ads.",
 	"main": "main.js",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/packages/wordads/#readme",
@@ -79,8 +79,6 @@
 		"core-js": "3.23.5",
 		"jest": "29.4.3",
 		"jest-environment-jsdom": "29.4.3",
-		"postcss": "8.4.21",
-		"postcss-loader": "6.2.0",
 		"prettier": "npm:[email protected]",
 		"sass": "1.43.3",
 		"sass-loader": "12.4.0",

diff --git a/projects/packages/wordads/postcss.config.js b/projects/packages/wordads/postcss.config.js
diff --git a/projects/packages/wordads/src/class-package.php b/projects/packages/wordads/src/class-package.php
@@ -11,7 +11,7 @@
  * WordAds package general information
  */
 class Package {
-	const VERSION = '0.2.44';
+	const VERSION = '0.2.45-alpha';
 	const SLUG    = 'wordads';
 
 	/**

diff --git a/projects/packages/yoast-promo/changelog/update-postcss-configs b/projects/packages/yoast-promo/changelog/update-postcss-configs
@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Remove unneeded `NODE_PATH` incorrectly copy-pasted from elsewhere. (Correct copy-pasting would have had it before the `webpack`, not before the `pnpm run clean`...)
+
+
diff --git a/projects/packages/yoast-promo/package.json b/projects/packages/yoast-promo/package.json
@@ -15,7 +15,7 @@
 	"license": "GPL-2.0-or-later",
 	"author": "Automattic",
 	"scripts": {
-		"build": "NODE_PATH=\"$PWD/node_modules\" pnpm run clean && webpack",
+		"build": "pnpm run clean && webpack",
 		"build-production": "NODE_ENV=production BABEL_ENV=production pnpm run build && pnpm run validate",
 		"clean": "rm -rf build/ .cache/",
 		"validate": "pnpm exec validate-es --no-error-on-unmatched-pattern build/",

diff --git a/projects/plugins/crm/changelog/update-postcss-configs b/projects/plugins/crm/changelog/update-postcss-configs
@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Update postcss configs to use array syntax for plugins. No change to the project itself.
+
+
diff --git a/projects/plugins/crm/package.json b/projects/plugins/crm/package.json
@@ -6,11 +6,11 @@
 	"license": "GPL-2.0",
 	"scripts": {
 		"build": "pnpm run clean && pnpm run build-client",
-		"build-client": "NODE_PATH=\"$PWD/node_modules\" webpack",
+		"build-client": "webpack",
 		"build-production": "NODE_ENV=production BABEL_ENV=production pnpm run build",
 		"clean": "rm -rf build css/*.map.css css/*.min.css* css/*.min.rtl.css css/*.rtl.css css/welcome-to-zbs/*.min.css* css/welcome-to-zbs/*.min.rtl.css js/*.min.js* js/welcome-to-zbs/wizard2.min.js*",
 		"test": "jest",
-		"watch": "pnpm run build && NODE_PATH=\"$PWD/node_modules\" webpack watch"
+		"watch": "pnpm run build && webpack watch"
 	},
 	"repository": {
 		"type": "git",

diff --git a/projects/plugins/jetpack/changelog/update-postcss-configs b/projects/plugins/jetpack/changelog/update-postcss-configs
@@ -0,0 +1,5 @@
+Significance: patch
+Type: other
+Comment: Update postcss configs to use array syntax for plugins. No change to the project itself.
+
+
diff --git a/projects/plugins/jetpack/package.json b/projects/plugins/jetpack/package.json
@@ -17,16 +17,15 @@
 	"scripts": {
 		"build": "pnpm run clean && pnpm run build-client && pnpm run build-extensions && pnpm run build-widget-visibility && pnpm run build-asset-cdn-json",
 		"build-asset-cdn-json": "php tools/build-asset-cdn-json.php",
-		"//": "# We set NODE_PATH here (and in other 'build-' scripts) so postcss-loader can find its plugins with pnpm 7. See https://github.com/pnpm/pnpm/discussions/3536#discussioncomment-2688984",
-		"build-client": "NODE_PATH=\"$PWD/node_modules\" concurrently --names js,css,masterbar,module-headings 'webpack --config ./tools/webpack.config.js' 'webpack --config ./tools/webpack.config.css.js' 'webpack --config ./tools/webpack.config.masterbar.js' 'php tools/build-module-headings-translations.php'",
+		"build-client": "concurrently --names js,css,masterbar,module-headings 'webpack --config ./tools/webpack.config.js' 'webpack --config ./tools/webpack.config.css.js' 'webpack --config ./tools/webpack.config.masterbar.js' 'php tools/build-module-headings-translations.php'",
 		"build-concurrently": "pnpm run clean && concurrently 'pnpm:compile-ts' 'pnpm:build-client' 'pnpm:build-extensions' 'pnpm:build-widget-visibility' && pnpm run build-asset-cdn-json",
-		"build-extensions": "NODE_PATH=\"$PWD/node_modules\" webpack --config ./tools/webpack.config.extensions.js && tools/check-block-assets.php",
+		"build-extensions": "webpack --config ./tools/webpack.config.extensions.js && tools/check-block-assets.php",
 		"build-production": "pnpm run clean && pnpm run build-production-client && pnpm run build-production-extensions && pnpm run build-production-widget-visibility && pnpm run build-asset-cdn-json",
 		"build-production-concurrently": "pnpm run clean && concurrently 'pnpm:compile-ts' 'pnpm:build-production-client' 'pnpm:build-production-extensions' 'pnpm:build-production-widget-visibility' && pnpm run build-asset-cdn-json",
 		"build-production-client": "NODE_ENV=production BABEL_ENV=production pnpm run build-client && pnpm exec validate-es ./_inc/build/",
 		"build-production-extensions": "NODE_ENV=production BABEL_ENV=production pnpm run build-extensions && pnpm exec validate-es ./_inc/blocks",
 		"build-production-widget-visibility": "NODE_ENV=production BABEL_ENV=production pnpm run build-widget-visibility && pnpm exec validate-es ./_inc/build/widget-visibility/editor",
-		"build-widget-visibility": "NODE_PATH=\"$PWD/node_modules\" webpack --config ./tools/webpack.config.widget-visibility.js",
+		"build-widget-visibility": "webpack --config ./tools/webpack.config.widget-visibility.js",
 		"clean": "pnpm run clean-client && pnpm run clean-extensions",
 		"clean-client": "rm -rf _inc/build/ css/",
 		"clean-extensions": "rm -rf _inc/blocks/ ",
@@ -38,7 +37,7 @@
 		"test-client": "NODE_PATH=tests:_inc/client jest --config=tests/jest.config.client.js",
 		"test-extensions": "TZ=UTC jest --config=tests/jest.config.extensions.js",
 		"test-gui": "NODE_PATH=tests:_inc/client jest --config=tests/jest.config.gui.js",
-		"watch": "NODE_PATH=\"$PWD/node_modules\" concurrently --names client-js,client-css,masterbar,extensions,widget-visibility 'webpack watch --config ./tools/webpack.config.js' 'webpack watch --config ./tools/webpack.config.css.js' 'webpack watch --config ./tools/webpack.config.masterbar.js' 'webpack watch --config ./tools/webpack.config.extensions.js' 'webpack watch --config ./tools/webpack.config.widget-visibility.js'"
+		"watch": "concurrently --names client-js,client-css,masterbar,extensions,widget-visibility 'webpack watch --config ./tools/webpack.config.js' 'webpack watch --config ./tools/webpack.config.css.js' 'webpack watch --config ./tools/webpack.config.masterbar.js' 'webpack watch --config ./tools/webpack.config.extensions.js' 'webpack watch --config ./tools/webpack.config.widget-visibility.js'"
 	},
 	"browserslist": [
 		"extends @wordpress/browserslist-config"