From abe75afc3404318215b096102c1de0727781ea2a Mon Sep 17 00:00:00 2001 From: Brad Jorsch Date: Tue, 27 Jun 2023 14:11:16 -0400 Subject: [PATCH] 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. --- pnpm-lock.yaml | 6 ------ .../storybook/changelog/update-postcss-configs | 5 +++++ projects/js-packages/storybook/package.json | 2 +- .../action-bar/changelog/update-postcss-configs | 5 +++++ projects/packages/action-bar/package.json | 4 ++-- .../packages/blaze/changelog/update-postcss-configs | 5 +++++ projects/packages/blaze/package.json | 4 ++-- projects/packages/blaze/src/class-dashboard.php | 2 +- .../packages/forms/changelog/update-postcss-configs | 5 +++++ projects/packages/forms/package.json | 8 ++++---- projects/packages/forms/src/class-jetpack-forms.php | 2 +- .../packages/forms/tools/webpack.config.blocks.js | 2 +- .../forms/tools/webpack.config.contact-form.js | 2 +- .../publicize/changelog/update-postcss-configs | 5 +++++ projects/packages/publicize/package.json | 7 +++---- .../search/changelog/update-postcss-configs | 5 +++++ projects/packages/search/package.json | 7 +++---- projects/packages/search/postcss.config.js | 10 +++++----- projects/packages/search/src/class-package.php | 2 +- .../videopress/changelog/update-postcss-configs | 5 +++++ projects/packages/videopress/package.json | 4 ++-- projects/packages/videopress/postcss.config.js | 10 +++++----- .../videopress/src/class-package-version.php | 2 +- .../wordads/changelog/update-postcss-configs | 5 +++++ projects/packages/wordads/package.json | 4 +--- projects/packages/wordads/postcss.config.js | 13 ------------- projects/packages/wordads/src/class-package.php | 2 +- .../yoast-promo/changelog/update-postcss-configs | 5 +++++ projects/packages/yoast-promo/package.json | 2 +- .../plugins/crm/changelog/update-postcss-configs | 5 +++++ projects/plugins/crm/package.json | 4 ++-- .../jetpack/changelog/update-postcss-configs | 5 +++++ projects/plugins/jetpack/package.json | 9 ++++----- projects/plugins/jetpack/tools/postcss.config.js | 10 +++++----- .../plugins/jetpack/tools/webpack.config.css.js | 2 +- .../jetpack/tools/webpack.config.masterbar.js | 2 +- .../plugins/social/changelog/update-postcss-configs | 5 +++++ projects/plugins/social/package.json | 5 ++--- projects/plugins/social/postcss.config.js | 10 +++++----- projects/plugins/social/webpack.config.js | 10 +++++----- 40 files changed, 121 insertions(+), 86 deletions(-) create mode 100644 projects/js-packages/storybook/changelog/update-postcss-configs create mode 100644 projects/packages/action-bar/changelog/update-postcss-configs create mode 100644 projects/packages/blaze/changelog/update-postcss-configs create mode 100644 projects/packages/forms/changelog/update-postcss-configs create mode 100644 projects/packages/publicize/changelog/update-postcss-configs create mode 100644 projects/packages/search/changelog/update-postcss-configs create mode 100644 projects/packages/videopress/changelog/update-postcss-configs create mode 100644 projects/packages/wordads/changelog/update-postcss-configs delete mode 100644 projects/packages/wordads/postcss.config.js create mode 100644 projects/packages/yoast-promo/changelog/update-postcss-configs create mode 100644 projects/plugins/crm/changelog/update-postcss-configs create mode 100644 projects/plugins/jetpack/changelog/update-postcss-configs create mode 100644 projects/plugins/social/changelog/update-postcss-configs diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7f08c0cf33cfb..a7209096c31c4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2410,12 +2410,6 @@ importers: jest-environment-jsdom: specifier: 29.4.3 version: 29.4.3 - postcss: - specifier: 8.4.21 - version: 8.4.21 - postcss-loader: - specifier: 6.2.0 - version: 6.2.0(postcss@8.4.21)(webpack@5.76.0) prettier: specifier: npm:wp-prettier@2.8.5 version: /wp-prettier@2.8.5 diff --git a/projects/js-packages/storybook/changelog/update-postcss-configs b/projects/js-packages/storybook/changelog/update-postcss-configs new file mode 100644 index 0000000000000..f81c28a1d9bd3 --- /dev/null +++ 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 index 8675ec7705da5..e695742b79c0d 100644 --- 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 new file mode 100644 index 0000000000000..6756170b202fa --- /dev/null +++ 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 index 6329ae89bf930..c9fc92f573470 100644 --- 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 new file mode 100644 index 0000000000000..6756170b202fa --- /dev/null +++ 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 index 30375867cfe4d..efdd88cf3b2d4 100644 --- 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 index 309818bfc13a2..74473726bd93e 100644 --- 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 new file mode 100644 index 0000000000000..4c64b8c5bafb3 --- /dev/null +++ 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 index 49ed7ce298489..dce593adb5139 100644 --- 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 index 7c3f1c76ae527..926dcb03ddcd5 100644 --- 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 index 7e9ca618472df..08fdc5aeda2a7 100644 --- 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 index 80f47cc3df3c1..26de76acfe7df 100644 --- 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 new file mode 100644 index 0000000000000..4c64b8c5bafb3 --- /dev/null +++ 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 index d3c7bccaa9028..3fa0b4bebffe7 100644 --- 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 new file mode 100644 index 0000000000000..4c64b8c5bafb3 --- /dev/null +++ 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 index 9f2b6ed7d9f92..541192dba583c 100644 --- 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 index edb956f47a896..73afafc623ae8 100644 --- 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 index cca6d3a50b343..27b629d053fa3 100644 --- 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 new file mode 100644 index 0000000000000..4c64b8c5bafb3 --- /dev/null +++ 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 index e456467644558..2d37c4accc1e5 100644 --- 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 index 4ceb954764cce..2320d73f9e7cc 100644 --- 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 index 65168eeec96e1..892383adb634e 100644 --- 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 new file mode 100644 index 0000000000000..91f492431c4e5 --- /dev/null +++ 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 index b00b63d05bba2..8e6e939759cec 100644 --- 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:wp-prettier@2.8.5", "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 deleted file mode 100644 index edb956f47a896..0000000000000 --- a/projects/packages/wordads/postcss.config.js +++ /dev/null @@ -1,13 +0,0 @@ -// Uses Jetpack plugin's postcss config. -module.exports = () => ( { - plugins: { - '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: {}, - }, -} ); diff --git a/projects/packages/wordads/src/class-package.php b/projects/packages/wordads/src/class-package.php index 5851ebdc1677c..25acceec847ae 100644 --- 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 new file mode 100644 index 0000000000000..6756170b202fa --- /dev/null +++ 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 index 5a61e3265f914..3bb585b12fe4f 100644 --- 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 new file mode 100644 index 0000000000000..4c64b8c5bafb3 --- /dev/null +++ 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 index 730638e804bab..484ecd2ebcbd0 100644 --- 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 new file mode 100644 index 0000000000000..53250b5afabcb --- /dev/null +++ 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 index b153f2a086e53..131a39bb68882 100644 --- 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" diff --git a/projects/plugins/jetpack/tools/postcss.config.js b/projects/plugins/jetpack/tools/postcss.config.js index 4ceb954764cce..2320d73f9e7cc 100644 --- a/projects/plugins/jetpack/tools/postcss.config.js +++ b/projects/plugins/jetpack/tools/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/plugins/jetpack/tools/webpack.config.css.js b/projects/plugins/jetpack/tools/webpack.config.css.js index ce1aa4945fd06..dea5c49b509c2 100644 --- a/projects/plugins/jetpack/tools/webpack.config.css.js +++ b/projects/plugins/jetpack/tools/webpack.config.css.js @@ -47,7 +47,7 @@ const sharedWebpackConfig = { { loader: 'postcss-loader', options: { - postcssOptions: { plugins: { autoprefixer: {} } }, + postcssOptions: { plugins: [ require( 'autoprefixer' ) ] }, }, }, { diff --git a/projects/plugins/jetpack/tools/webpack.config.masterbar.js b/projects/plugins/jetpack/tools/webpack.config.masterbar.js index dc2ba6a3291d2..f02e03fe79e47 100644 --- a/projects/plugins/jetpack/tools/webpack.config.masterbar.js +++ b/projects/plugins/jetpack/tools/webpack.config.masterbar.js @@ -33,7 +33,7 @@ module.exports = { { loader: 'postcss-loader', options: { - postcssOptions: { plugins: { autoprefixer: {} } }, + postcssOptions: { plugins: [ require( 'autoprefixer' ) ] }, }, }, 'sass-loader', diff --git a/projects/plugins/social/changelog/update-postcss-configs b/projects/plugins/social/changelog/update-postcss-configs new file mode 100644 index 0000000000000..4c64b8c5bafb3 --- /dev/null +++ b/projects/plugins/social/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/social/package.json b/projects/plugins/social/package.json index 272f51715c9fb..21af4cb1d0c1d 100644 --- a/projects/plugins/social/package.json +++ b/projects/plugins/social/package.json @@ -14,14 +14,13 @@ "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/", "test": "jest --passWithNoTests", "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/plugins/social/postcss.config.js b/projects/plugins/social/postcss.config.js index 4ceb954764cce..2320d73f9e7cc 100644 --- a/projects/plugins/social/postcss.config.js +++ b/projects/plugins/social/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/plugins/social/webpack.config.js b/projects/plugins/social/webpack.config.js index f8fa55fb87c20..3dd841fd306e0 100644 --- a/projects/plugins/social/webpack.config.js +++ b/projects/plugins/social/webpack.config.js @@ -87,12 +87,12 @@ module.exports = [ loader: 'postcss-loader', options: { postcssOptions: { - plugins: { - 'postcss-custom-properties': { + plugins: [ + require( 'postcss-custom-properties' )( { disableDeprecationNotice: true, - }, - autoprefixer: {}, - }, + } ), + require( 'autoprefixer' ), + ], }, }, },