Update all style packages to the latest version

client/package.json

@@ -199,7 +199,7 @@
 		"redux-thunk": "^2.3.0",
 		"refx": "^3.1.1",
 		"resize-observer-polyfill": "^1.5.1",
-		"rtlcss": "^2.4.0",
+		"rtlcss": "^3.1.2",
 		"semver": "^7.3.2",
 		"sinon": "^10.0.0",
 		"social-logos": "^2.1.0",
@@ -236,7 +236,7 @@
 		"@testing-library/jest-dom": "^5.11.10",
 		"@testing-library/react": "^11.2.6",
 		"@testing-library/react-hooks": "5.1.2",
-		"autoprefixer": "^9.7.3",
+		"autoprefixer": "^10.2.5",
 		"component-event": "^0.2.0",
 		"component-query": "^0.0.3",
 		"react-test-renderer": "^16.12.0",

package.json

@@ -180,8 +180,6 @@
 		"@babel/register": "^7.13.16",
 		"@babel/runtime": "^7.14.0",
 		"@signal-noise/stylelint-scales": "^2.0.0",
-		"@storybook/addon-actions": "^6.1.10",
-		"@storybook/preset-scss": "^1.0.3",
 		"@storybook/react": "^6.1.10",
 		"@types/classnames": "^2.3.0",
 		"@types/cookie": "^0.4.0",
@@ -218,7 +216,7 @@
 		"@wordpress/jest-preset-default": "^7.0.3",
 		"@wordpress/npm-package-json-lint-config": "^4.0.3",
 		"@wordpress/url": "^2.22.2",
-		"autoprefixer": "^9.7.3",
+		"autoprefixer": "^10.2.5",
 		"babel-jest": "^26.3.0",
 		"babel-loader": "^8.2.2",
 		"babel-plugin-dynamic-import-node": "^2.3.0",
@@ -277,17 +275,17 @@
 		"loader-utils": "^1.2.3",
 		"lodash": "^4.17.21",
 		"lunr": "^2.3.8",
-		"mini-css-extract-plugin": "^1.3.5",
+		"mini-css-extract-plugin": "^1.6.0",
 		"mixedindentlint": "^1.2.0",
 		"mkdirp": "^1.0.4",
 		"ncp": "^2.0.0",
 		"nock": "^12.0.3",
-		"node-sass": "^4.13.0",
+		"node-sass": "^6.0.0",
 		"node-sass-package-importer": "^5.3.2",
 		"npm-merge-driver": "^2.3.5",
 		"npm-run-all": "^4.1.5",
 		"photon": "^4.0.0",
-		"postcss": "^8.2.6",
+		"postcss": "^8.2.15",
 		"postcss-cli": "^8.3.1",
 		"postcss-custom-properties": "^11.0.0",
 		"prettier": "npm:[email protected]",

packages/calypso-build/CHANGELOG.md

@@ -3,6 +3,13 @@
 ## trunk
 
 - Updated dependencies
+  - autoprefixer to ^10.2.5
+  - css-loader to ^5.2.4
+  - mini-css-extract-plugin to ^1.6.0
+  - node-sass to ^6.0.0
+  - postcss to ^8.2.15
+  - postcss-loader to ^5.3.0
+  - sass-loader to ^11.1.1
   - thread-loader to ^3.0.4
 
 ## 8.0.0

packages/calypso-build/package.json

@@ -49,12 +49,12 @@
 		"@wordpress/babel-plugin-import-jsx-pragma": "^3.0.3",
 		"@wordpress/browserslist-config": "^3.0.3",
 		"@wordpress/dependency-extraction-webpack-plugin": "^3.1.2",
-		"autoprefixer": "^9.7.3",
+		"autoprefixer": "^10.2.5",
 		"babel-jest": "^26.3.0",
 		"babel-loader": "^8.2.2",
 		"browserslist": "^4.8.2",
 		"cache-loader": "^4.1.0",
-		"css-loader": "^3.4.2",
+		"css-loader": "^5.2.4",
 		"css-minimizer-webpack-plugin": "^1.3.0",
 		"duplicate-package-checker-webpack-plugin": "^3.0.0",
 		"enzyme-adapter-react-16": "^1.15.1",
@@ -63,12 +63,12 @@
 		"jest-config": "^26.4.0",
 		"jest-emotion": "^10.0.27",
 		"jest-enzyme": "^7.1.2",
-		"mini-css-extract-plugin": "^1.3.5",
-		"node-sass": "^4.13.0",
+		"mini-css-extract-plugin": "^1.6.0",
+		"node-sass": "^6.0.0",
 		"postcss-custom-properties": "^11.0.0",
-		"postcss-loader": "^5.0.0",
+		"postcss-loader": "^5.3.0",
 		"recursive-copy": "^2.0.10",
-		"sass-loader": "^8.0.0",
+		"sass-loader": "^11.1.1",
 		"semver": "^7.3.2",
 		"terser-webpack-plugin": "^5.1.1",
 		"thread-loader": "^3.0.4",
@@ -78,7 +78,7 @@
 	"peerDependencies": {
 		"enzyme": "^3.11.0",
 		"jest": ">=26.4.0",
-		"postcss": "^8.2.6",
+		"postcss": "^8.2.15",
 		"react": "^16.0.0",
 		"react-dom": "^16.0.0",
 		"webpack": "^5.36.2"

packages/calypso-build/webpack/sass.js

@@ -5,7 +5,7 @@ const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
 const WebpackRTLPlugin = require( '@automattic/webpack-rtl-plugin' );
 
 /**
- * Internal dependnecies
+ * Internal dependencies
  */
 const MiniCSSWithRTLPlugin = require( './mini-css-with-rtl' );
 
@@ -38,6 +38,11 @@ module.exports.loader = ( { includePaths, prelude, postCssOptions, cacheDirector
 			loader: require.resolve( 'css-loader' ),
 			options: {
 				importLoaders: 2,
+				// We do not want css-loader to resolve absolute paths. We
+				// typically use `/` to indicate the start of the base URL,
+				// but starting with css-loader v4, it started trying to handle
+				// absolute paths itself.
+				url: ( path ) => ! path.startsWith( '/' ),
 			},
 		},
 		{
@@ -49,14 +54,15 @@ module.exports.loader = ( { includePaths, prelude, postCssOptions, cacheDirector
 		{
 			loader: require.resolve( 'sass-loader' ),
 			options: {
-				prependData: prelude,
+				additionalData: prelude,
 				sassOptions: {
 					includePaths,
 				},
 			},
 		},
 	],
 } );
+
 /**
  * Return an array of styling relevant webpack plugin objects.
  *

packages/calypso-color-schemes/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Release Notes
 
+## trunk
+
+- Updated dependencies:
+  - postcss to ^8.2.15
+  - node-sass to ^6.0.0
+
 ## 2.1.1
 
 - Updated the color palette to the most recent version.

packages/calypso-color-schemes/package.json

@@ -28,8 +28,8 @@
 		"prepare": "node bin/prepare-sass-assets.js && node bin/build-css.js"
 	},
 	"devDependencies": {
-		"postcss": "^8.2.6",
+		"postcss": "^8.2.15",
 		"postcss-custom-properties": "^11.0.0",
-		"node-sass": "^4.13.0"
+		"node-sass": "^6.0.0"
 	}
 }

packages/components/package.json

@@ -43,6 +43,8 @@
 	},
 	"devDependencies": {
 		"@storybook/addon-actions": "^6.1.10",
+		"@storybook/preset-scss": "^1.0.3",
+		"sass-loader": "^10.1.1",
 		"enzyme": "^3.11.0"
 	},
 	"scripts": {

packages/composite-checkout/package.json

@@ -50,13 +50,16 @@
 	"devDependencies": {
 		"@automattic/calypso-build": "^8.0.0",
 		"@automattic/calypso-polyfills": "^1.0.0",
+		"@storybook/addon-actions": "^6.1.10",
+		"@storybook/preset-scss": "^1.0.3",
 		"@testing-library/jest-dom": "^5.11.10",
 		"@testing-library/react": "^11.2.6",
 		"enzyme": "^3.11.0",
 		"jest": "^26.4.0",
-		"postcss": "^8.2.6",
+		"postcss": "^8.2.15",
 		"react": "^16.12.0",
 		"react-dom": "^16.12.0",
+		"sass-loader": "^10.1.1",
 		"webpack": "^5.36.2"
 	},
 	"peerDependencies": {

packages/search/package.json

@@ -44,11 +44,13 @@
 	},
 	"devDependencies": {
 		"@storybook/addon-actions": "^6.1.10",
+		"@storybook/preset-scss": "^1.0.3",
 		"@testing-library/react": "^11.2.6",
 		"@testing-library/user-event": "^12.8.3",
 		"@testing-library/dom": "^7.28.1",
 		"react": "^16.12.0",
-		"react-dom": "^16.12.0"
+		"react-dom": "^16.12.0",
+		"sass-loader": "^10.1.1"
 	},
 	"scripts": {
 		"clean": "tsc --build ./tsconfig.json ./tsconfig-cjs.json --clean && npx rimraf dist",

packages/webpack-rtl-plugin/CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+- Updated dependencies:
+  - css-loader to ^5.2.4
+  - mini-css-extract-plugin to ^1.6.0
+  - rtlcss to ^3.1.2
+- Removed unused dependency cssnano.
+
 ## 5.0.0 - 2021-03-26
 
 ### Breaking

packages/webpack-rtl-plugin/package.json

@@ -25,8 +25,8 @@
 	],
 	"license": "GPL-2.0-or-later",
 	"devDependencies": {
-		"css-loader": "^3.4.2",
-		"mini-css-extract-plugin": "^1.3.5",
+		"css-loader": "^5.2.4",
+		"mini-css-extract-plugin": "^1.6.0",
 		"webpack": "^5.36.2"
 	},
 	"peerDependencies": {
@@ -35,7 +35,6 @@
 	"dependencies": {
 		"@romainberger/css-diff": "^1.0.3",
 		"async": "^2.0.0",
-		"cssnano": "^4.1.10",
-		"rtlcss": "^2.4.0"
+		"rtlcss": "^3.1.2"
 	}
 }