Upgrade all dependencies to latest.

Co-authored-by: Jonathan Bardo <[email protected]>

.dev/config/webpack.common.js

@@ -1,14 +1,14 @@
 /* global process, module, require */
 
 const path = require( 'path' );
-const CleanWebpackPlugin = require( 'clean-webpack-plugin' );
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
-const FixStyleOnlyEntriesPlugin = require( 'webpack-fix-style-only-entries' );
 const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
 const StyleLintPlugin = require( 'stylelint-webpack-plugin' );
 const WebpackBar = require( 'webpackbar' );
 const isProduction = 'production' === process.env.NODE_ENV;
 const settings = require( './webpack.settings.js' );
+const ESLintPlugin = require('eslint-webpack-plugin');
 
 /**
  * Configure entries.
@@ -49,16 +49,6 @@ module.exports = {
 	// Build rules to handle asset files.
 	module: {
 		rules: [
-			// Lint JS.
-			{
-				test: /\.js$/,
-				enforce: 'pre',
-				loader: 'eslint-loader',
-				options: {
-					fix: true
-				}
-			},
-
 			// Scripts.
 			{
 				test: /\.js$/,
@@ -117,12 +107,6 @@ module.exports = {
 
 	plugins: [
 
-		// Remove the extra JS files Webpack creates for CSS entries.
-		// This should be fixed in Webpack 5.
-		new FixStyleOnlyEntriesPlugin( {
-			silent: true,
-		} ),
-
 		// Clean the `dist` folder on build.
 		new CleanWebpackPlugin( {
 			cleanStaleWebpackAssets: false,
@@ -135,13 +119,14 @@ module.exports = {
 		} ),
 
 		// Copy static assets to the `dist` folder.
-		new CopyWebpackPlugin( [
-			{
+		new CopyWebpackPlugin( {
+			patterns:[{
 				from: settings.copyWebpackConfig.from,
 				to: settings.copyWebpackConfig.to,
-				transformPath: settings.copyWebpackConfig.transformPath,
-			}
-		] ),
+			}]
+		} ),
+
+		new ESLintPlugin(),
 
 		// Lint SCSS.
 		// new StyleLintPlugin( {

.dev/config/webpack.dev.js

@@ -1,9 +1,9 @@
 /* global module, require */
 
-const merge = require( 'webpack-merge' );
+const { merge } = require( 'webpack-merge' );
 const common = require( './webpack.common.js' );
 const BrowserSyncPlugin = require( 'browser-sync-webpack-plugin' );
-const OptimizeCssAssetsPlugin = require( 'optimize-css-assets-webpack-plugin' );
+const CssMinimizerPlugin = require( 'css-minimizer-webpack-plugin' );
 const RtlCssPlugin = require( 'rtlcss-webpack-plugin' );
 const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
 const settings = require( './webpack.settings.js' );
@@ -24,16 +24,14 @@ module.exports = merge( common, {
 				injectCss: true,
 				reload: false,
 			}
-		),
-		new OptimizeCssAssetsPlugin( {
-			assetNameRegExp: /\.*\.css$/g,
-			cssProcessor: require( 'cssnano' ),
-			cssProcessorPluginOptions: {
-				preset: [ 'default' ],
-			},
-			canPrint: true
-		} ),
+		)
 	],
+	optimization: {
+		minimizer: [
+			`...`,
+			new CssMinimizerPlugin(),
+		]
+	}
 } );
 
 if ( 'development' === process.env.NODE_ENV ) {

.dev/config/webpack.prod.js

@@ -1,48 +1,12 @@
 /* global module, require */
 
-const merge = require( 'webpack-merge' );
+const { merge } = require( 'webpack-merge' );
 const common = require( './webpack.common.js' );
-const TerserPlugin = require( 'terser-webpack-plugin' );
 
 module.exports = merge( common, {
 	mode: 'production',
 
 	optimization: {
-		minimizer: [
-			new TerserPlugin( {
-				cache: true,
-				parallel: true,
-				sourceMap: false,
-				terserOptions: {
-					parse: {
-						// We want terser to parse ecma 8 code. However, we don't want it
-						// to apply any minfication steps that turns valid ecma 5 code
-						// into invalid ecma 5 code. This is why the 'compress' and 'output'
-						// sections only apply transformations that are ecma 5 safe
-						// https://github.com/facebook/create-react-app/pull/4234
-						ecma: 8
-					},
-					compress: {
-						ecma: 5,
-						warnings: false,
-						// Disabled because of an issue with Uglify breaking seemingly valid code:
-						// https://github.com/facebook/create-react-app/issues/2376
-						// Pending further investigation:
-						// https://github.com/mishoo/UglifyJS2/issues/2011
-						comparisons: false,
-						// Disabled because of an issue with Terser breaking valid code:
-						// https://github.com/facebook/create-react-app/issues/5250
-						// Pending futher investigation:
-						// https://github.com/terser-js/terser/issues/120
-						inline: 2
-					},
-					output: {
-						ecma: 5,
-						comments: false
-					},
-					ie8: false
-				}
-			} )
-		],
+		minimize: true,
 	},
 } );

.dev/config/webpack.settings.js

@@ -56,7 +56,6 @@ module.exports = {
 	stats: {
 		all: false,
 		errors: true,
-		maxModules: 0,
 		modules: true,
 		warnings: true,
 		assets: true,
@@ -67,10 +66,9 @@ module.exports = {
 	},
 	copyWebpackConfig: {
 		from: '.dev/assets/**/*.{jpg,jpeg,png,gif,svg}',
-		to: 'images/[path][name].[ext]',
-		transformPath: ( targetPath ) => {
-			return 'images/' + targetPath.replace( /(\.dev\/assets\/|images\/|shared\/)/g, '' );
-		},
+		to({ context, absoluteFilename }) {
+			return 'images/' + absoluteFilename.replace( /^.*(\.dev\/assets\/|images\/|shared\/)/g, '' );
+        },
 	},
 	BrowserSyncConfig: {
 		host: 'localhost',

.dev/deploy-scripts/tweak-css-files.sh

@@ -8,13 +8,6 @@ do
 	./node_modules/.bin/perfectionist $f $f
 done
 
-# Group similar media queries using mqpicker package
-for f in $(find ./dist/css -type f -name '*.css' ! -name '*.min.css')
-do
-	echo "Grouping like media queries in $f..."
-	./node_modules/.bin/mqpacker $f $f
-done
-
 # Generate a -rtl file
 for f in $(find ./dist/css -type f -name '*.css')
 do

.dev/tests/cypress/helpers.js

@@ -17,16 +17,18 @@ export function captureDocument( path = '' ) {
         // { label: 'go-small', width: 600, height: 1080 },
 
     ].forEach( viewport => {
-        // cy.viewport( viewport.width, viewport.height );
-
         // Scroll to the bottom to get lazy loaded images loading fully
         cy.window().then( cyWindow => scrollToBottom( { remoteWindow: cyWindow } ) );
 
         // Wait for any animations to finish for those we're unable to prevent right now.
         cy.wait( 1500 );
 
+        cy.viewport( viewport.width, viewport.height );
+
         // Take the full-page screenshot
-        cy.matchImageSnapshot( `${path}/${viewport.label}` );
+        cy.matchImageSnapshot( `${path}/${viewport.label}`, {
+          customDiffConfig: { threshold: 0.5 }
+        } );
     } );
 }
 

.dev/tests/cypress/plugins/index.js

@@ -6,9 +6,29 @@ module.exports = (on, config) => {
 	addMatchImageSnapshotPlugin(on, config);
 
 	on( 'before:browser:launch', ( browser, launchOptions ) => {
-		if ( browser.family === 'chromium' && browser.name !== 'electron' && browser.isHeadless ) {
-			launchOptions.args.push( '--window-size=1920,1080' );
+		if ( ! browser.isHeadless ) {
 			return launchOptions;
 		}
+
+		switch (browser.name) {
+			case 'chrome': {
+				launchOptions.args.push('--window-size=1920,1080');
+				// force screen to be non-retina (1920 size)
+				launchOptions.args.push('--force-device-scale-factor=1');
+				break;
+			}
+			case 'electron': {
+				launchOptions.preferences.width = 1920;
+				launchOptions.preferences.height = 1080;
+				break;
+			}
+			case 'firefox': {
+				launchOptions.args.push('--width=1920');
+				launchOptions.args.push('--height=1080');
+				break;
+			}
+		}
+
+		return launchOptions;
 	} );
-};
+};

.dev/tests/cypress/support/commands.js

@@ -3,4 +3,14 @@ import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
 addMatchImageSnapshotCommand( {
     failureThreshold: 0.25,
     failureThresholdType: 'percent',
-} );
+} );
+
+/**
+ * Starting in Cypress 8.1.0 Unhandled Exceptions now cause tests to fail.
+ * Sometimes unhandled exceptions occur in Core that do not effect the UX created by CoBlocks.
+ * We discard unhandled exceptions and pass the test as long as assertions continue expectedly.
+ */
+ Cypress.on( 'uncaught:exception', () => {
+	// returning false here prevents Cypress from failing the test.
+	return false;
+} );

.stylelintrc

@@ -1,3 +1,4 @@
 {
-	"extends": "@godaddy-wordpress/stylelint-config"
+	"extends": "@godaddy-wordpress/stylelint-config",
+	customSyntax: 'postcss-scss'
 }

Gruntfile.js

@@ -87,7 +87,7 @@ module.exports = function( grunt ) {
 
 	} );
 
-	require( 'matchdep' ).filterDev( 'grunt-*' ).forEach( grunt.loadNpmTasks );
+	require( 'load-grunt-tasks' )( grunt );
 
 	grunt.registerTask( 'default', [ 'version' ] );
 	grunt.registerTask( 'version', [ 'replace' ] );