Update @wordpress/scripts and eslint and stylint configurations (https://github.com/woocommerce/woocommerce-blocks/pull/3749)

* implement prettier config for importing wordpress/prettier config

* update packages

This updates @wordpress/scripts to latest version so we are using the latest `@wordpress/eslint-plugin` rules.
Also installs a new required dependency due to the above update.

* temporarily convert new rules to warnings to handle in followups.

* fix stylint configuration and temporarily block rule

Latest @wordpress/scripts update requires the `@wordpress/stylelint-config` package instead of the previous builtin configuration. So applies a fix needed from that change.

* update puppeteer dependency version

* package-lock update

plugins/woocommerce-blocks/.eslintrc.js

@@ -25,6 +25,11 @@ module.exports = {
 		'react-hooks/exhaustive-deps': 'error',
 		'react/jsx-fragments': [ 'error', 'syntax' ],
 		'@wordpress/no-global-active-element': 'warn',
+		// @todo Remove temporary conversion of eslint rules to warn instead of error.
+		//       These are new rules surfacing as a result of a eslint plugin update and the intent
+		//       is to update them in their own individual prs to make for easier review.
+		'import/no-extraneous-dependencies': 'warn',
+		'import/no-unresolved': 'warn',
 	},
 	overrides: [
 		{

plugins/woocommerce-blocks/.prettierrc

@@ -1,10 +0,0 @@
-useTabs: true
-tabWidth: 4
-printWidth: 80
-singleQuote: true
-trailingComma: es5
-bracketSpacing: true
-parenSpacing: true
-jsxBracketSameLine: false
-semi: true
-arrowParens: always

plugins/woocommerce-blocks/.prettierrc.js

@@ -0,0 +1,3 @@
+// Import the default config file and expose it in the project root.
+// Useful for editor integrations.
+module.exports = require( '@wordpress/prettier-config' );

plugins/woocommerce-blocks/.stylelintrc.json

@@ -1,11 +1,12 @@
 {
-	"extends": "stylelint-config-wordpress",
+	"extends": "@wordpress/stylelint-config",
 	"rules": {
 		"at-rule-empty-line-before": null,
 		"at-rule-no-unknown": null,
 		"comment-empty-line-before": null,
 		"declaration-block-no-duplicate-properties": null,
 		"declaration-property-unit-whitelist": null,
+		"declaration-property-unit-allowed-list": null,
 		"font-weight-notation": null,
 		"max-line-length": null,
 		"no-descending-specificity": null,

plugins/woocommerce-blocks/package.json

@@ -104,7 +104,7 @@
 		"@wordpress/html-entities": "2.8.0",
 		"@wordpress/i18n": "3.15.0",
 		"@wordpress/is-shallow-equal": "1.8.0",
-		"@wordpress/scripts": "12.2.1",
+		"@wordpress/scripts": "^13.0.0",
 		"autoprefixer": "10.2.3",
 		"axios": "0.21.1",
 		"babel-plugin-transform-async-generator-functions": "6.24.1",
@@ -119,6 +119,7 @@
 		"cross-env": "6.0.3",
 		"cssnano": "4.1.10",
 		"deep-freeze": "0.0.1",
+		"eslint-plugin-import": "^2.22.1",
 		"eslint-plugin-woocommerce": "file:bin/eslint-plugin-woocommerce",
 		"eslint-plugin-you-dont-need-lodash-underscore": "6.10.0",
 		"fs-extra": "9.1.0",
@@ -136,7 +137,7 @@
 		"prettier": "npm:wp-prettier@2.0.5",
 		"progress-bar-webpack-plugin": "2.1.0",
 		"promptly": "3.2.0",
-		"puppeteer": "npm:puppeteer-core@3.0.0",
+		"puppeteer": "npm:puppeteer-core@5.5.0",
 		"react-test-renderer": "17.0.1",
 		"request-promise": "4.2.6",
 		"rimraf": "3.0.2",