Build Tooling: Update development tools to work with PostCSS (try 2)

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.5",
+		"@storybook/addon-docs": "6.2.5",
+		"@storybook/addon-knobs": "6.2.5",
+		"@storybook/addon-storysource": "6.2.5",
+		"@storybook/addon-viewport": "6.2.5",
+		"@storybook/react": "6.2.5",
 		"@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": "5.1.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.12",
-		"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"
 	},

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

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"

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

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"

packages/scripts/CHANGELOG.md

@@ -2,10 +2,23 @@
 
 ## 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)).
+
 ### New Features
 
 -   `build` and `start` command now bundle files ending with `.module.css` as CSS modules and extracts `style.module.css` ([#29182](https://github.com/WordPress/gutenberg/pull/29182)).
 
+### 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)).
+
 ## 14.1.0 (2021-04-06)
 
 ### Enhancements

packages/scripts/config/webpack.config.js

@@ -46,8 +46,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,
+				},
 			} ),
 		},
 	},
@@ -221,7 +223,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

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",

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',

webpack.config.js

@@ -291,7 +291,7 @@ module.exports = {
 		new DependencyExtractionWebpackPlugin( { injectPolyfill: true } ),
 	].filter( Boolean ),
 	watchOptions: {
-		ignored: '!packages/*/build-module/**/*',
+		ignored: [ '**/node_modules', '**/packages/*/src' ],
 		aggregateTimeout: 500,
 	},
 	devtool,