build(plugins): Add a browserslist environment for wpcom plugins (#51178)

scinos · web-flow · commit 231b226b022e · 2021-03-22T06:12:46.000+01:00
* Fix webpack 5
* Add browserslist env wpcom
* Don't set any default browserslist
diff --git a/apps/editing-toolkit/package.json b/apps/editing-toolkit/package.json
@@ -16,57 +16,57 @@
 	},
 	"homepage": "https://github.com/Automattic/wp-calypso",
 	"scripts": {
-		"dotcom-fse": "calypso-build --env source='dotcom-fse'",
+		"dotcom-fse": "BROWSERSLIST_ENV=wpcom calypso-build --env source='dotcom-fse'",
 		"dev:dotcom-fse": "yarn run dotcom-fse",
 		"build:dotcom-fse": "NODE_ENV=production yarn run dotcom-fse",
-		"posts-list-block": "calypso-build --env source='posts-list-block'",
+		"posts-list-block": "BROWSERSLIST_ENV=wpcom calypso-build --env source='posts-list-block'",
 		"dev:posts-list-block": "yarn run posts-list-block",
 		"build:posts-list-block": "NODE_ENV=production yarn run posts-list-block",
-		"common": "calypso-build --env source='common','common/data-stores','common/hide-plugin-buttons-mobile'",
+		"common": "BROWSERSLIST_ENV=wpcom calypso-build --env source='common','common/data-stores','common/hide-plugin-buttons-mobile'",
 		"dev:common": "yarn run common",
 		"build:common": "NODE_ENV=production yarn run common",
 		"editor-site-launch": "npm-run-all --parallel editor-site-launch-*",
-		"editor-site-launch-button": "calypso-build --env source='editor-site-launch/launch-button'",
-		"editor-site-launch-gutenboarding": "calypso-build --env source='editor-site-launch/gutenboarding-launch'",
-		"editor-site-launch-focused": "calypso-build --env source='editor-site-launch/focused-launch'",
+		"editor-site-launch-button": "BROWSERSLIST_ENV=wpcom calypso-build --env source='editor-site-launch/launch-button'",
+		"editor-site-launch-gutenboarding": "BROWSERSLIST_ENV=wpcom calypso-build --env source='editor-site-launch/gutenboarding-launch'",
+		"editor-site-launch-focused": "BROWSERSLIST_ENV=wpcom calypso-build --env source='editor-site-launch/focused-launch'",
 		"dev:editor-site-launch": "yarn run editor-site-launch",
 		"build:editor-site-launch": "NODE_ENV=production yarn run editor-site-launch",
 		"newspack-blocks": "npm run sync:newspack-blocks -- --nodemodules && npm-run-all --parallel newspack-blocks-*",
-		"newspack-blog-posts-block-editor": "calypso-build --env source='newspack-blocks/blog-posts-block-editor'",
-		"newspack-blog-posts-block-view": "calypso-build --env source='newspack-blocks/blog-posts-block-view'",
+		"newspack-blog-posts-block-editor": "BROWSERSLIST_ENV=wpcom calypso-build --env source='newspack-blocks/blog-posts-block-editor'",
+		"newspack-blog-posts-block-view": "BROWSERSLIST_ENV=wpcom calypso-build --env source='newspack-blocks/blog-posts-block-view'",
 		"newspack-blocks-blog-posts-block": "npm-run-all --parallel newspack-blog-posts-block-*",
-		"newspack-carousel-block-editor": "calypso-build --env source='newspack-blocks/carousel-block-editor'",
-		"newspack-carousel-block-view": "calypso-build --env source='newspack-blocks/carousel-block-view'",
+		"newspack-carousel-block-editor": "BROWSERSLIST_ENV=wpcom calypso-build --env source='newspack-blocks/carousel-block-editor'",
+		"newspack-carousel-block-view": "BROWSERSLIST_ENV=wpcom calypso-build --env source='newspack-blocks/carousel-block-view'",
 		"newspack-blocks-carousel-block": "npm-run-all --parallel newspack-carousel-block-*",
 		"dev:newspack-blocks": "yarn run newspack-blocks",
 		"build:newspack-blocks": "NODE_ENV=production yarn run newspack-blocks",
-		"starter-page-templates": "calypso-build --env source='starter-page-templates'",
+		"starter-page-templates": "BROWSERSLIST_ENV=wpcom calypso-build --env source='starter-page-templates'",
 		"dev:starter-page-templates": "yarn run starter-page-templates",
 		"build:starter-page-templates": "NODE_ENV=production yarn run starter-page-templates",
-		"event-countdown-block": "calypso-build --env source='event-countdown-block'",
+		"event-countdown-block": "BROWSERSLIST_ENV=wpcom calypso-build --env source='event-countdown-block'",
 		"dev:event-countdown-block": "yarn run event-countdown-block",
 		"build:event-countdown-block": "NODE_ENV=production yarn run event-countdown-block",
-		"global-styles": "calypso-build --env source='global-styles'",
+		"global-styles": "BROWSERSLIST_ENV=wpcom calypso-build --env source='global-styles'",
 		"build:global-styles": "NODE_ENV=production yarn run global-styles",
 		"dev:global-styles": "yarn run global-styles",
-		"jetpack-timeline": "calypso-build --env source='jetpack-timeline'",
+		"jetpack-timeline": "BROWSERSLIST_ENV=wpcom calypso-build --env source='jetpack-timeline'",
 		"dev:jetpack-timeline": "yarn run jetpack-timeline",
 		"build:jetpack-timeline": "NODE_ENV=production yarn run jetpack-timeline",
-		"wpcom-block-editor-nux": "calypso-build --env source='wpcom-block-editor-nux'",
+		"wpcom-block-editor-nux": "BROWSERSLIST_ENV=wpcom calypso-build --env source='wpcom-block-editor-nux'",
 		"dev:wpcom-block-editor-nux": "yarn run wpcom-block-editor-nux",
 		"build:wpcom-block-editor-nux": "NODE_ENV=production yarn run wpcom-block-editor-nux",
-		"wpcom-block-editor-welcome-tour": "calypso-build --env source='wpcom-block-editor-welcome-tour'",
+		"wpcom-block-editor-welcome-tour": "BROWSERSLIST_ENV=wpcom calypso-build --env source='wpcom-block-editor-welcome-tour'",
 		"block-inserter-modifications": "npm-run-all --parallel block-inserter-modifications-*",
-		"block-inserter-modifications-contextual-tips": "calypso-build --env source='block-inserter-modifications/contextual-tips'",
+		"block-inserter-modifications-contextual-tips": "BROWSERSLIST_ENV=wpcom calypso-build --env source='block-inserter-modifications/contextual-tips'",
 		"dev:block-inserter-modifications": "yarn run block-inserter-modifications",
 		"build:block-inserter-modifications": "NODE_ENV=production yarn run block-inserter-modifications",
-		"wpcom-block-editor-nav-sidebar": "calypso-build --env source='wpcom-block-editor-nav-sidebar'",
+		"wpcom-block-editor-nav-sidebar": "BROWSERSLIST_ENV=wpcom calypso-build --env source='wpcom-block-editor-nav-sidebar'",
 		"dev:wpcom-block-editor-nav-sidebar": "yarn run wpcom-block-editor-nav-sidebar",
 		"build:wpcom-block-editor-nav-sidebar": "NODE_ENV=production yarn run wpcom-block-editor-nav-sidebar",
-		"block-patterns": "calypso-build --env source='block-patterns'",
+		"block-patterns": "BROWSERSLIST_ENV=wpcom calypso-build --env source='block-patterns'",
 		"dev:block-patterns": "yarn run block-patterns",
 		"build:block-patterns": "NODE_ENV=production yarn run block-patterns",
-		"whats-new": "calypso-build --env source='whats-new'",
+		"whats-new": "BROWSERSLIST_ENV=wpcom calypso-build --env source='whats-new'",
 		"dev:whats-new": "yarn run whats-new",
 		"build:whats-new": "NODE_ENV=production yarn run whats-new",
 		"dev": "node bin/npm-run-build.js --dev",
diff --git a/apps/notifications/package.json b/apps/notifications/package.json
@@ -19,7 +19,7 @@
 	"scripts": {
 		"clean": "npx rimraf dist",
 		"prebuild": "yarn run clean",
-		"build": "calypso-build --config='./webpack.config.js'",
+		"build": "BROWSERSLIST_ENV=wpcom calypso-build --config='./webpack.config.js'",
 		"sync": "yarn run clean && yarn run build && sh ./bin/wpcom-watch-and-sync.sh"
 	},
 	"dependencies": {
diff --git a/apps/o2-blocks/package.json b/apps/o2-blocks/package.json
@@ -19,7 +19,7 @@
 	"scripts": {
 		"clean": "npx rimraf dist",
 		"prebuild": "yarn run clean",
-		"build": "calypso-build"
+		"build": "BROWSERSLIST_ENV=wpcom calypso-build"
 	},
 	"dependencies": {
 		"@automattic/calypso-build": "^7.0.0",
diff --git a/apps/wpcom-block-editor/package.json b/apps/wpcom-block-editor/package.json
@@ -16,8 +16,8 @@
 	},
 	"homepage": "https://github.com/Automattic/wp-calypso",
 	"scripts": {
-		"bundle": "calypso-build --env WP",
-		"build:dev": "npm run bundle --",
+		"bundle": "BROWSERSLIST_ENV=wpcom calypso-build --env WP",
+		"build:dev": "yarn run bundle --",
 		"build:prod": "NODE_ENV=production yarn run bundle --",
 		"build": "npm-run-all --parallel \"build:* -- {@}\" --",
 		"clean": "npx rimraf dist",
diff --git a/package.json b/package.json
@@ -26,6 +26,9 @@
 		"url": "https://github.com/Automattic/wp-calypso.git"
 	},
 	"browserslist": {
+		"wpcom": [
+			"extends @wordpress/browserslist-config"
+		],
 		"defaults": [
 			"extends @wordpress/browserslist-config"
 		],
diff --git a/packages/calypso-build/CHANGELOG.md b/packages/calypso-build/CHANGELOG.md
@@ -4,6 +4,8 @@
 
 - Breaking: Drop option `postCssConfig` for Sass loader. The property `postCssOptions` will be passed as is
   to `postcss-loader`. See the doc in <https://github.com/webpack-contrib/postcss-loader#postcssoptions>
+- Breaking: `calypso-build`, `transpile` and `webpack/minify` won't set `defaults` as browserslist environment anymore.
+  Instead they will fallback to the [default resolution methods from browserslist](https://github.com/browserslist/browserslist#queries)
 - Added: peer dependency postcss ^8.2.6
 - Updated dependencies:
   - postcss-custom-properties to ^11.0.0
diff --git a/packages/calypso-build/bin/transpile.js b/packages/calypso-build/bin/transpile.js
@@ -39,14 +39,13 @@ const baseCommand = `npx --no-install babel --presets="${ babelPresetFile }" --i
 
 if ( transpileAll || transpileESM ) {
 	execSync( `${ baseCommand } -d "${ outputDirESM }" "${ inputDir }"`, {
-		env: Object.assign( {}, process.env, { BROWSERSLIST_ENV: 'defaults' } ),
 		cwd: root,
 	} );
 }
 
 if ( transpileAll || transpileCJS ) {
 	execSync( `${ baseCommand } -d "${ outputDirCJS }" "${ inputDir }"`, {
-		env: Object.assign( {}, process.env, { BROWSERSLIST_ENV: 'defaults', MODULES: 'commonjs' } ),
+		env: Object.assign( {}, process.env, { MODULES: 'commonjs' } ),
 		cwd: root,
 	} );
 }
diff --git a/packages/calypso-build/webpack/minify.js b/packages/calypso-build/webpack/minify.js
@@ -6,7 +6,7 @@ const browserslist = require( 'browserslist' );
 const babelPlugins = require( '@babel/compat-data/plugins' );
 const semver = require( 'semver' );
 
-const supportedBrowsers = browserslist( null, { env: process.env.BROWSERSLIST_ENV || 'defaults' } );
+const supportedBrowsers = browserslist();
 
 // The list of browsers to check, that are supported by babel compat-data.
 // Babel compat-data also includes non-browser environments, which we want to exclude.
diff --git a/packages/wpcom.js/package.json b/packages/wpcom.js/package.json
@@ -12,7 +12,7 @@
 		"build": "run-s build:modules build:bundle",
 		"prepack": "yarn run clean && yarn run build",
 		"build:modules": "transpile",
-		"build:bundle": "webpack --display errors-only"
+		"build:bundle": "webpack --stats-preset errors-only"
 	},
 	"keywords": [
 		"wordpress",
diff --git a/packages/wpcom.js/webpack.config.js b/packages/wpcom.js/webpack.config.js
@@ -9,5 +9,5 @@ module.exports = {
 		libraryTarget: 'var',
 		library: 'WPCOM',
 	},
-	devtool: 'sourcemap',
+	devtool: 'source-map',
 };

Original file line number	Diff line number	Diff line change
@@ -39,14 +39,13 @@ const baseCommand = `npx --no-install babel --presets="${ babelPresetFile }" --i
`39`	`39`
`40`	`40`	`if ( transpileAll \|\| transpileESM ) {`
`41`	`41`	execSync( `${ baseCommand } -d "${ outputDirESM }" "${ inputDir }"`, {
`42`		`- env: Object.assign( {}, process.env, { BROWSERSLIST_ENV: 'defaults' } ),`
`43`	`42`	`cwd: root,`
`44`	`43`	`} );`
`45`	`44`	`}`
`46`	`45`
`47`	`46`	`if ( transpileAll \|\| transpileCJS ) {`
`48`	`47`	execSync( `${ baseCommand } -d "${ outputDirCJS }" "${ inputDir }"`, {
`49`		`- env: Object.assign( {}, process.env, { BROWSERSLIST_ENV: 'defaults', MODULES: 'commonjs' } ),`
	`48`	`+ env: Object.assign( {}, process.env, { MODULES: 'commonjs' } ),`
`50`	`49`	`cwd: root,`
`51`	`50`	`} );`
`52`	`51`	`}`