Build Tooling: Update development tools to work with PostCSS 8 (#27821)

* Update `postcss-loader` dependency to `^4.1.0`. * Upgrade more scripts dependencies * Downgrade sass-loader to the last version working with webpack 4 * Downgrade postcss-loader to the last version working with webpack 4 * Update Storybook to v6.2.x * Upgrade Storybook to 6.2.0-rc.8 * Remove deduplicate Storybook dependencies Co-authored-by: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
WordPress · Mar 25, 2021 · b90e38c · b90e38c
1 parent c0bbc50
commit b90e38c
Show file tree

Hide file tree

Showing 10 changed files with 16,833 additions and 13,428 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -91,12 +91,12 @@
 		"@babel/traverse": "7.13.0",
 		"@octokit/rest": "16.26.0",
 		"@octokit/webhooks": "7.1.0",
-		"@storybook/addon-a11y": "6.1.11",
-		"@storybook/addon-docs": "6.1.11",
-		"@storybook/addon-knobs": "6.1.11",
-		"@storybook/addon-storysource": "6.1.11",
-		"@storybook/addon-viewport": "6.1.11",
-		"@storybook/react": "6.1.11",
+		"@storybook/addon-a11y": "6.2.0-rc.8",
+		"@storybook/addon-docs": "6.2.0-rc.8",
+		"@storybook/addon-knobs": "6.2.0-rc.8",
+		"@storybook/addon-storysource": "6.2.0-rc.8",
+		"@storybook/addon-viewport": "6.2.0-rc.8",
+		"@storybook/react": "6.2.0-rc.8",
 		"@testing-library/jest-dom": "5.11.9",
 		"@testing-library/react": "11.2.2",
 		"@types/classnames": "2.2.10",
@@ -155,7 +155,7 @@
 		"concurrently": "3.5.0",
 		"copy-webpack-plugin": "4.5.2",
 		"cross-env": "3.2.4",
-		"css-loader": "3.5.2",
+		"css-loader": "5.1.3",
 		"cssnano": "4.1.10",
 		"deep-freeze": "0.0.1",
 		"enzyme": "3.11.0",
@@ -183,8 +183,8 @@
 		"nock": "12.0.3",
 		"node-watch": "0.7.0",
 		"patch-package": "6.2.2",
-		"postcss": "7.0.32",
-		"postcss-loader": "3.0.0",
+		"postcss": "8.2.2",
+		"postcss-loader": "4.2.0",
 		"prettier": "npm:wp-prettier@2.2.1-beta-1",
 		"progress": "2.0.3",
 		"react": "16.13.1",
@@ -194,18 +194,18 @@
 		"rimraf": "3.0.2",
 		"rtlcss": "2.6.2",
 		"sass": "1.26.11",
-		"sass-loader": "8.0.2",
+		"sass-loader": "10.1.1",
 		"semver": "7.3.2",
 		"simple-git": "^2.35.0",
 		"snapshot-diff": "0.8.1",
 		"source-map-loader": "0.2.4",
 		"sprintf-js": "1.1.1",
-		"style-loader": "1.0.0",
+		"style-loader": "2.0.0",
 		"terser-webpack-plugin": "3.0.3",
 		"typescript": "4.1.3",
 		"uuid": "8.3.0",
 		"wd": "1.12.1",
-		"webpack": "4.42.0",
+		"webpack": "4.46.0",
 		"webpack-bundle-analyzer": "4.2.0",
 		"worker-farm": "1.7.0"
 	},

diff --git a/packages/postcss-plugins-preset/CHANGELOG.md b/packages/postcss-plugins-preset/CHANGELOG.md
@@ -2,6 +2,11 @@
 
 ## Unreleased
 
+### Breaking Changes
+
+-   The bundled `autoprefixer` dependency has been updated from requiring `^9.8.6` to requiring `^10.2.5` (see [Breaking Changes](https://github.com/postcss/autoprefixer/releases/tag/10.0.0), [#27821](https://github.com/WordPress/gutenberg/pull/27821)).
+-   The bundled `postcss-custom-properties` dependency has been updated from requiring `^10.0.0` to requiring `^11.0.0` (see [Breaking Changes](https://github.com/postcss/postcss-custom-properties/releases/tag/11.0.0), [#27821](https://github.com/WordPress/gutenberg/pull/27821)).
+
 ## 2.0.0 (2021-01-21)
 
 ### Breaking Changes

diff --git a/packages/postcss-plugins-preset/package.json b/packages/postcss-plugins-preset/package.json
@@ -31,8 +31,8 @@
 	"dependencies": {
 		"@wordpress/base-styles": "file:../base-styles",
 		"@wordpress/postcss-themes": "file:../postcss-themes",
-		"autoprefixer": "^9.8.6",
-		"postcss-custom-properties": "^10.0.0"
+		"autoprefixer": "^10.2.5",
+		"postcss-custom-properties": "^11.0.0"
 	},
 	"publishConfig": {
 		"access": "public"

diff --git a/packages/postcss-themes/CHANGELOG.md b/packages/postcss-themes/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Breaking Changes
+
+-   The bundled `postcss` dependency requiring `^7.0.32` has been replaced with a peer dependency requiring `^8.0.0` (see [Breaking Changes](https://github.com/postcss/postcss/releases/tag/8.0.0), [#27821](https://github.com/WordPress/gutenberg/pull/27821)).
+
 ## 3.0.0 (2021-01-21)
 
 ### Breaking Changes

diff --git a/packages/postcss-themes/package.json b/packages/postcss-themes/package.json
@@ -30,8 +30,8 @@
 		"index.js"
 	],
 	"main": "index.js",
-	"dependencies": {
-		"postcss": "^7.0.32"
+	"peerDependencies": {
+		"postcss": "^8.0.0"
 	},
 	"publishConfig": {
 		"access": "public"

diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md
@@ -2,8 +2,18 @@
 
 ## Unreleased
 
+### Breaking Changes
+
+-   The bundled `css-loader` dependency has been updated from requiring `^3.5.2` to requiring `^5.1.3` ([#27821](https://github.com/WordPress/gutenberg/pull/27821)).
+-   The bundled `mini-css-extract-plugin` dependency has been updated from requiring `^0.9.0` to requiring `^1.3.9` ([#27821](https://github.com/WordPress/gutenberg/pull/27821)).
+-   The bundled `postcss-loader` dependency has been updated from requiring `^3.0.0` to requiring `^4.2.0` ([#27821](https://github.com/WordPress/gutenberg/pull/27821)).
+-   The bundled `sass-loader` dependency has been updated from requiring `^8.0.2` to requiring `^10.1.1` ([#27821](https://github.com/WordPress/gutenberg/pull/27821)).
+-   The bundled `thread-loader` dependency has been updated from requiring `^2.1.3` to requiring `^3.0.1` ([#27821](https://github.com/WordPress/gutenberg/pull/27821)).
+-   The bundled `url-loader` dependency has been updated from requiring `^3.0.0` to requiring `^4.1.1` ([#27821](https://github.com/WordPress/gutenberg/pull/27821)).
+
 ### Enhancements
 
+-   The bundled `webpack` dependency has been updated from requiring `4.42.0` to requiring `^4.46.0` ([#27821](https://github.com/WordPress/gutenberg/pull/27821)).
 -   The bundled `babel-loader` dependency has been updated from requiring `^8.1.0` to requiring `^8.2.2` ([#30018](https://github.com/WordPress/gutenberg/pull/30018)).
 
 ## 14.0.0 (2021-03-17)

diff --git a/packages/scripts/config/webpack.config.js b/packages/scripts/config/webpack.config.js
@@ -43,8 +43,10 @@ const cssLoaders = [
 			// Provide a fallback configuration if there's not
 			// one explicitly available in the project.
 			...( ! hasPostCSSConfig() && {
-				ident: 'postcss',
-				plugins: postcssPlugins,
+				postcssOptions: {
+					ident: 'postcss',
+					plugins: postcssPlugins,
+				},
 			} ),
 		},
 	},
@@ -218,7 +220,7 @@ const config = {
 		// bundle content as a convenient interactive zoomable treemap.
 		process.env.WP_BUNDLE_ANALYZER && new BundleAnalyzerPlugin(),
 		// MiniCSSExtractPlugin to extract the CSS thats gets imported into JavaScript.
-		new MiniCSSExtractPlugin( { esModule: false, filename: '[name].css' } ),
+		new MiniCSSExtractPlugin( { filename: '[name].css' } ),
 		// MiniCSSExtractPlugin creates JavaScript assets for CSS that are
 		// obsolete and should be removed. Related webpack issue:
 		// https://github.com/webpack-contrib/mini-css-extract-plugin/issues/85

diff --git a/packages/scripts/package.json b/packages/scripts/package.json
@@ -47,7 +47,7 @@
 		"check-node-version": "^4.1.0",
 		"clean-webpack-plugin": "^3.0.0",
 		"cross-spawn": "^5.1.0",
-		"css-loader": "^3.5.2",
+		"css-loader": "^5.1.3",
 		"cwd": "^0.10.0",
 		"dir-glob": "^3.0.1",
 		"eslint": "^7.17.0",
@@ -61,22 +61,22 @@
 		"markdownlint": "^0.18.0",
 		"markdownlint-cli": "^0.21.0",
 		"merge-deep": "^3.0.3",
-		"mini-css-extract-plugin": "^0.9.0",
+		"mini-css-extract-plugin": "^1.3.9",
 		"minimist": "^1.2.0",
 		"npm-package-json-lint": "^5.0.0",
-		"postcss-loader": "^3.0.0",
+		"postcss-loader": "^4.2.0",
 		"prettier": "npm:wp-prettier@2.2.1-beta-1",
 		"puppeteer-core": "^5.5.0",
 		"read-pkg-up": "^1.0.1",
 		"resolve-bin": "^0.4.0",
 		"sass": "^1.26.11",
-		"sass-loader": "^8.0.2",
+		"sass-loader": "^10.1.1",
 		"source-map-loader": "^0.2.4",
 		"stylelint": "^13.8.0",
 		"terser-webpack-plugin": "^3.0.3",
-		"thread-loader": "^2.1.3",
-		"url-loader": "^3.0.0",
-		"webpack": "^4.42.0",
+		"thread-loader": "^3.0.1",
+		"url-loader": "^4.1.1",
+		"webpack": "^4.46.0",
 		"webpack-bundle-analyzer": "^4.2.0",
 		"webpack-cli": "^3.3.11",
 		"webpack-livereload-plugin": "^2.3.0",

diff --git a/storybook/webpack.config.js b/storybook/webpack.config.js
@@ -23,8 +23,10 @@ module.exports = ( { config } ) => {
 				{
 					loader: 'postcss-loader',
 					options: {
-						ident: 'postcss',
-						plugins: postcssPlugins,
+						postcssOptions: {
+							ident: 'postcss',
+							plugins: postcssPlugins,
+						},
 					},
 				},
 				'sass-loader',