Bump wp-scripts to 22.1.0 and webpack config to v5

.eslintrc.js

@@ -1,3 +1,25 @@
+const webpackConfig = require( './webpack.config' );
+
+const webpackResolver = {
+	config: {
+		resolve: {
+			...webpackConfig.resolve,
+			/**
+			 * Make eslint correctly resolve files that omit the .js extensions.
+			 * The default value `'...'` doesn't work before the current eslint support for webpack v5.
+			 * Ref: https://webpack.js.org/configuration/resolve/#resolveextensions
+			 */
+			extensions: [ '.js' ],
+			/**
+			 * Make eslint be able to resolve the exports config of `use-debounce`.
+			 * The `exports` config of package.json doesn't work before the current eslint support it.
+			 * Ref: https://github.com/xnimorz/use-debounce/blob/5.2.0/package.json#L8-L14
+			 */
+			conditionNames: [ 'import', 'require' ],
+		},
+	},
+};
+
 module.exports = {
 	extends: [
 		'plugin:@woocommerce/eslint-plugin/recommended',
@@ -7,7 +29,8 @@ module.exports = {
 		jsdoc: {
 			mode: 'typescript',
 		},
-		'import/resolver': 'webpack',
+		'import/core-modules': [ 'webpack' ],
+		'import/resolver': { webpack: webpackResolver },
 	},
 	rules: {
 		'@wordpress/no-unsafe-wp-apis': 1,

.stylelintrc.json

@@ -1,5 +1,8 @@
 {
-	"extends": "@wordpress/stylelint-config",
+	"extends": [
+		"stylelint-config-standard-scss",
+		"@wordpress/stylelint-config"
+	],
 	"rules": {
 		"at-rule-empty-line-before": null,
 		"at-rule-no-unknown": null,

jest.config.js

@@ -4,6 +4,7 @@ const defaultConfig = require( '@wordpress/scripts/config/jest-unit.config' );
 
 module.exports = {
 	...defaultConfig,
+	testEnvironment: 'jsdom',
 	moduleNameMapper: {
 		'\\.svg$': '<rootDir>/tests/mocks/assets/svgrMock.js',
 		'\\.scss$': '<rootDir>/tests/mocks/assets/styleMock.js',

js/src/components/app-button/index.scss

@@ -6,7 +6,7 @@
 		max-height: inherit;
 
 		circle {
-			stroke: currentColor;
+			stroke: currentcolor;
 		}
 	}
 

js/src/components/app-input-link-control/index.scss

@@ -5,6 +5,6 @@
 		display: block;
 		margin: 6px;
 		margin-right: 0;
-		fill: currentColor;
+		fill: currentcolor;
 	}
 }

js/src/components/app-modal/index.scss

@@ -7,7 +7,7 @@
 		gap: calc(var(--main-gap) / 2);
 		margin-top: calc(var(--main-gap));
 
-		@include break-mobile() {
+		@include break-mobile {
 			flex-direction: row;
 			justify-content: flex-end;
 		}

js/src/components/app-radio-content-control/index.scss

@@ -1,6 +1,7 @@
 .app-radio-content-control {
 	display: grid;
 	grid-template-columns: [input-start] auto [text-start] 1fr;
+
 	// Make browser without `column-gap` (mobile Opera and Samsung) use same gap, for both.
 	gap: $grid-unit-10;
 	column-gap: 10px;
@@ -11,7 +12,6 @@
 	.components-base-control__field,
 	.components-radio-control__option {
 		display: contents;
-
 	}
 	.components-radio-control__input[type="radio"] {
 		margin: 0;

js/src/components/app-sub-nav/index.scss

@@ -10,6 +10,7 @@
 		// https://github.com/WordPress/wordpress-develop/blob/5.8.1/src/wp-admin/css/common.css#L448-L451
 		font-weight: 600;
 		border: none;
+
 		// https://github.com/WordPress/wordpress-develop/blob/5.8.1/src/wp-admin/css/common.css#L683-L685
 		color: #000;
 	}

js/src/components/app-tab-nav/index.scss

@@ -14,7 +14,6 @@
 		padding: 3px $grid-unit-20; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
 		margin-left: 0;
 		font-weight: 500;
-		//transition: box-shadow 0.1s linear;
 		box-sizing: border-box;
 
 		// This pseudo-element "duplicates" the tab label and sets the text to bold.
@@ -35,7 +34,7 @@
 
 		&.is-active {
 			// The transparent shadow ensures no jumpiness when focus animates on an active tab.
-			box-shadow: inset 0 0 0 $border-width-focus transparent, inset 0 0 -$border-width-tab 0 0 var(--wp-admin-theme-color);
+			box-shadow: inset 0 0 0 $border-width-focus transparent, inset 0 0 - $border-width-tab 0 0 var(--wp-admin-theme-color);
 			position: relative;
 
 			// This border appears in Windows High Contrast mode instead of the box-shadow.
@@ -55,7 +54,7 @@
 		}
 
 		&.is-active:focus {
-			box-shadow: inset 0 0 0 $border-width-focus var(--wp-admin-theme-color), inset 0 0 -$border-width-tab 0 0 var(--wp-admin-theme-color);
+			box-shadow: inset 0 0 0 $border-width-focus var(--wp-admin-theme-color), inset 0 0 - $border-width-tab 0 0 var(--wp-admin-theme-color);
 		}
 	}
 }

js/src/components/connected-icon-label/index.scss

@@ -1,5 +1,5 @@
 .gla-connected-icon-label {
-	fill: currentColor;
+	fill: currentcolor;
 	color: #23a713;
 
 	svg {

js/src/components/contact-information/contact-information-preview-card.scss

@@ -13,7 +13,8 @@
 	}
 
 	&__placeholder {
-		@include placeholder();
+		@include placeholder;
+
 		display: inline-block;
 		width: 18em;
 	}

js/src/components/free-listings/configure-product-listings/shipping-rate/shipping-rate-setup/index.scss

@@ -21,6 +21,7 @@
 	.components-base-control__field {
 		display: grid;
 		grid-template-columns: [input-start] auto [text-start] 1fr;
+
 		// Make browser without `column-gap` (mobile Opera and Samsung) use same gap, for both.
 		gap: $grid-unit-10;
 		column-gap: 10px;

js/src/components/help-popover/index.scss

@@ -16,18 +16,18 @@ $button-color: #949494;
 		cursor: pointer;
 
 		&:hover {
-			fill: darken($color: $button-color, $amount: 20%);
+			fill: color.adjust($button-color, $lightness: -20%);
 		}
 	}
 
 	.components-popover__content {
 		width: 300px;
 
-		@include break-large() {
+		@include break-large {
 			width: 360px;
 		}
 
-		@include break-xlarge() {
+		@include break-xlarge {
 			width: 480px;
 		}
 

js/src/components/loading-label/loading-label.scss

@@ -11,7 +11,7 @@
 		min-width: 24px;
 
 		&__circle {
-			stroke: currentColor;
+			stroke: currentcolor;
 			stroke-width: 8px;
 		}
 	}

js/src/css/abstracts/_mixins.scss

@@ -6,7 +6,7 @@
 // Adds animation to placeholder section
 // Copied from WC-admin
 // https://github.com/woocommerce/woocommerce-admin/blob/9f68059c7df466ee7a559c555bcb5a7b9e421e6d/packages/style-build/abstracts/_mixins.scss#L22-L35
-@mixin placeholder( $lighten-percentage: 30% ) {
+@mixin placeholder($lighten-percentage: 30%) {
 	animation: loading-fade 1.6s ease-in-out infinite;
 	background-color: $gray-100;
 	color: transparent;
@@ -15,7 +15,7 @@
 		content: "\00a0";
 	}
 
-	@media screen and ( prefers-reduced-motion: reduce ) {
+	@media screen and (prefers-reduced-motion: reduce) {
 		animation: none;
 	}
 }

js/src/css/index.scss

@@ -3,7 +3,7 @@
 @import "node_modules/@wordpress/base-styles/default-custom-properties";
 
 // Import Gutenberg components that aren't already imported in the lowest WC Admin version we support
-@import "./shared/gutenberg-components.scss";
+@import "./shared/gutenberg-components";
 
 // Import GLA-wise styling that based on woocommerce-admin styles.
-@import "./shared/woocommerce-admin.scss";
+@import "./shared/woocommerce-admin";

js/src/css/shared/_gutenberg-components.scss

@@ -51,7 +51,7 @@
 	}
 
 	&__frame {
-		@include break-small() {
+		@include break-small {
 			transform: initial;
 			position: relative;
 			top: 0;

js/src/css/shared/_woocommerce-admin.scss

@@ -49,7 +49,6 @@
 
 			.woocommerce-layout__main {
 				padding: 0;
-
 			}
 		}
 	}

js/src/dashboard/all-programs-table-card/edit-program-button/edit-program-prompt-modal/index.scss

@@ -1,5 +1,5 @@
 .gla-edit-program-prompt-modal {
-	@include break-small() {
+	@include break-small {
 		max-width: 360px;
 	}
 }

js/src/dashboard/all-programs-table-card/program-toggle/pause-program-modal/index.scss

@@ -1,5 +1,5 @@
 .gla-pause-program-modal {
-	@include break-small() {
+	@include break-small {
 		max-width: 360px;
 	}
 }

js/src/dashboard/all-programs-table-card/remove-program-button/remove-program-modal/index.scss

@@ -1,5 +1,5 @@
 .gla-remove-program-modal {
-	@include break-small() {
+	@include break-small {
 		max-width: 360px;
 	}
 }

js/src/dashboard/campaign-creation-success-guide/index.scss

@@ -1,5 +1,5 @@
 .gla-campaign-creation-success-guide {
-	@include break-small() {
+	@include break-small {
 		max-width: 517px;
 	}
 

js/src/dashboard/index.scss

@@ -5,15 +5,15 @@
 		align-items: flex-end;
 		margin-bottom: var(--main-gap);
 
-		@include break-medium() {
+		@include break-medium {
 			flex-direction: row;
 			justify-content: space-between;
 		}
 
 		.woocommerce-filters-filter {
 			margin-bottom: calc(var(--main-gap) / 2);
 
-			@include break-medium() {
+			@include break-medium {
 				margin-bottom: 0;
 			}
 		}
@@ -25,7 +25,7 @@
 		gap: var(--main-gap);
 		margin-bottom: var(--main-gap);
 
-		@include break-medium() {
+		@include break-medium {
 			flex-direction: row;
 		}
 

js/src/dashboard/summary-section/summary-card.scss

@@ -7,6 +7,7 @@
 	&__body {
 		// Make card contents within a row have the same height
 		flex: 1;
+
 		// This could be just display: flex, but since Safari 14.0 is still supported,
 		// and does not support gap for flexbox, we use grid instead.
 		display: grid;
@@ -19,10 +20,10 @@
 		background-color: #f8f9fa;
 		color: #757575;
 		text-align: center;
+
 		// Make it match the SummaryNumber placeholder's height
 		// not to make the UI jumpy once preloaders is replaced with an error.
 		min-height: 117px;
-
 		gap: $grid-unit-20;
 
 		& > * {

js/src/data/test/reducer.test.js

@@ -503,14 +503,14 @@ describe( 'reducer', () => {
 				orderby: 'title',
 				per_page: 2,
 				total: 7,
-				pages: { '1': [ '#1', '#2' ] },
+				pages: { 1: [ '#1', '#2' ] },
 			} );
 			expect( pageFourState ).toHaveProperty( path, {
 				order: 'asc',
 				orderby: 'title',
 				per_page: 2,
 				total: 7,
-				pages: { '1': [ '#1', '#2' ], '4': [ '#7' ] },
+				pages: { 1: [ '#1', '#2' ], 4: [ '#7' ] },
 			} );
 		} );
 
@@ -529,7 +529,7 @@ describe( 'reducer', () => {
 				const initValue = {
 					...baseQuery,
 					total: 7,
-					pages: { '1': [ '#1', '#2' ], '4': [ '#7' ] },
+					pages: { 1: [ '#1', '#2' ], 4: [ '#7' ] },
 				};
 				const originalState = prepareState( path, initValue, [
 					path,
@@ -554,7 +554,7 @@ describe( 'reducer', () => {
 					...baseQuery,
 					[ key ]: value,
 					total: 7,
-					pages: { '2': [ '#3', '#4' ] },
+					pages: { 2: [ '#3', '#4' ] },
 				} );
 			}
 		);

js/src/get-started-page/get-started-card/index.scss

@@ -3,7 +3,7 @@
 		flex-direction: column;
 		align-items: flex-end;
 
-		@include break-large() {
+		@include break-large {
 			flex-direction: row;
 			align-items: center;
 		}
@@ -24,7 +24,7 @@
 			text-align: right;
 			margin-bottom: -4px;
 
-			@include break-large() {
+			@include break-large {
 				margin-top: calc(var(--main-gap) * 1.5);
 			}
 		}

js/src/get-started-page/unsupported-notices/index.scss

@@ -12,7 +12,7 @@
 	}
 
 	&__link {
-		color: currentColor;
+		color: currentcolor;
 	}
 
 	&__icon {

js/src/product-attributes/index.scss

@@ -4,6 +4,7 @@
 			overflow: hidden;
 			clear: both;
 			border: 1px solid $gray-300;
+
 			// using !important to override the WooCommerce style for meta boxes
 			margin: $grid-unit-20 0 !important;
 

js/src/product-feed/product-feed-table-card/index.scss

@@ -9,7 +9,6 @@
 			> div {
 				width: auto;
 			}
-
 		}
 	}
 

js/src/product-feed/product-statistics/index.scss

@@ -49,7 +49,7 @@
 			&:nth-child(2) {
 				display: inline-flex;
 				align-items: center;
-				fill: currentColor;
+				fill: currentcolor;
 				color: #008a20;
 			}