Fix build issues for production builds (https://github.com/woocommerce/woocommerce-blocks/pull/2042)

* add payment-methods-demo config to sideEffects and install @wordpress/icons and @wordpress/primitives to be used directly.

* configure dependency extraction to ignore imports we want to use directly

* fix style issues for production builds

It looks like when a style is imported on the entrypoint of a component (or in a file with just exports), it get’s treeshaken from the final build _regardless of exception rules_.

* fix style imports from wordpress components

* fix loading skeleton showing on production builds

* fix block skeleton showing on production builds for cart

* import side effectful code

* add treatment for `@wordpress/warning` too

* fix typo

* exclude `settings/block` from sideEffects

* rollback `wordpress-components` update and keep sideEffects fixes

* remove unnecessary handle handling

Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>

plugins/woocommerce-blocks/assets/js/base/components/payment-methods/express-checkout.js

@@ -8,6 +8,7 @@ import { useExpressPaymentMethods } from '@woocommerce/base-hooks';
  * Internal dependencies
  */
 import ExpressPaymentMethods from './express-payment-methods';
+import './style.scss';
 
 const ExpressCheckoutContainer = ( { children } ) => {
 	return (

plugins/woocommerce-blocks/assets/js/base/components/payment-methods/index.js

@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import './style.scss';
-
 export { default as PaymentMethods } from './payment-methods';
 export { default as ExpressPaymentMethods } from './express-payment-methods';
 export { default as ExpressCheckoutFormControl } from './express-checkout';

plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/index.js

@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import './style.scss';
-
 export { default as Sidebar } from './sidebar';
 export { default as Main } from './main';
 export { default as SidebarLayout } from './sidebar-layout';

plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/sidebar-layout.js

@@ -4,6 +4,11 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
 const SidebarLayout = ( { children, className } ) => {
 	return (
 		<div className={ classNames( 'wc-block-sidebar-layout', className ) }>

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/style.scss

@@ -152,10 +152,10 @@ table.wc-block-cart-items {
 		min-height: 460px;
 	}
 }
-.wc-block-cart--skeleton {
+.wc-block-sidebar-layout.wc-block-cart--skeleton {
 	display: none;
 }
-.is-loading + .wc-block-cart--skeleton {
+.is-loading + .wc-block-sidebar-layout.wc-block-cart--skeleton {
 	display: flex;
 }
 

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/style.scss

@@ -154,10 +154,10 @@
 		min-height: 460px;
 	}
 }
-.wc-block-checkout--skeleton {
+.wc-block-sidebar-layout.wc-block-checkout--skeleton {
 	display: none;
 }
-.is-loading + .wc-block-checkout--skeleton {
+.is-loading + .wc-block-sidebar-layout.wc-block-checkout--skeleton {
 	display: flex;
 }
 

plugins/woocommerce-blocks/assets/js/settings/blocks/index.js

@@ -1,3 +1,7 @@
-export * from './store-api-nonce';
+/**
+ * Internal dependencies
+ */
+import './store-api-nonce';
+
 export * from './constants';
 export { ENDPOINTS } from './endpoints';

plugins/woocommerce-blocks/assets/js/settings/blocks/store-api-nonce.js

@@ -46,7 +46,7 @@ const setNonce = ( headers ) => {
  *
  * @return {*} The evaluated result of the remaining middleware chain.
  */
-export const storeNonceMiddleware = ( options, next ) => {
+const storeNonceMiddleware = ( options, next ) => {
 	if ( isStoreApiGetRequest( options ) ) {
 		const existingHeaders = options.headers || {};
 		options.headers = {

plugins/woocommerce-blocks/bin/webpack-helpers.js

@@ -105,15 +105,15 @@ const stableMainEntry = {
 	blocks: './assets/js/index.js',
 
 	// @wordpress/components styles
-	'panel-style': './node_modules/@wordpress/components/src/panel/style.scss',
+	'panel-style': './node_modules/wordpress-components/src/panel/style.scss',
 	'custom-select-control-style':
-		'./node_modules/@wordpress/components/src/custom-select-control/style.scss',
+		'./node_modules/wordpress-components/src/custom-select-control/style.scss',
 	'checkbox-control-style':
-		'./node_modules/@wordpress/components/src/checkbox-control/style.scss',
+		'./node_modules/wordpress-components/src/checkbox-control/style.scss',
 	'spinner-style':
-		'./node_modules/@wordpress/components/src/spinner/style.scss',
+		'./node_modules/wordpress-components/src/spinner/style.scss',
 	'snackbar-notice-style':
-		'./node_modules/@wordpress/components/src/snackbar/style.scss',
+		'./node_modules/wordpress-components/src/snackbar/style.scss',
 
 	// Blocks
 	'handpicked-products': './assets/js/blocks/handpicked-products/index.js',

plugins/woocommerce-blocks/package-lock.json

@@ -5293,7 +5293,6 @@
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/@wordpress/element/-/element-2.10.0.tgz",
       "integrity": "sha512-CedhhFfcubM/lsluY7JPC49VG0/Ee0chOBJ1vyDEvIJmQk0bM3sLfgt5qVK773yivVOqD9blQMO+JihnaMXF8w==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.4.4",
         "@wordpress/escape-html": "^1.6.0",
@@ -5366,7 +5365,6 @@
       "version": "3.8.0",
       "resolved": "https://registry.npmjs.org/@wordpress/i18n/-/i18n-3.8.0.tgz",
       "integrity": "sha512-SXheA3E2aA/w5/cubrIho3fCLY5Jb7zdpg7NGS3DFXYEe5VICMdmgNxeYFoeyNSw2IkNmphJhsZXzVIMf92dYQ==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.4.4",
         "gettext-parser": "^1.3.1",
@@ -5406,7 +5404,6 @@
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/@wordpress/is-shallow-equal/-/is-shallow-equal-1.7.0.tgz",
       "integrity": "sha512-fRHTAivQlWOQVn8wu8NHM8D5sacSvY6upJ+MgWSu1Q7pqy51zaCPE2T9lhym3GC1QzABus6VjDctR8jwfNfd/g==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.4.4"
       }
@@ -29487,8 +29484,8 @@
             "@wordpress/is-shallow-equal": "^1.8.0",
             "lodash": "^4.17.15",
             "mousetrap": "^1.6.2"
-          }
           },
+          "dependencies": {
             "@wordpress/element": {
               "version": "2.11.0",
               "resolved": "https://registry.npmjs.org/@wordpress/element/-/element-2.11.0.tgz",
@@ -29501,6 +29498,26 @@
                 "react-dom": "^16.9.0"
               }
             },
+            "@wordpress/is-shallow-equal": {
+              "version": "1.8.0",
+              "resolved": "https://registry.npmjs.org/@wordpress/is-shallow-equal/-/is-shallow-equal-1.8.0.tgz",
+              "integrity": "sha512-OV3qJqP9LhjuOzt85TsyBwv+//CvC8Byf/81D3NmjPKlstLaD/bBCC5nBhH6dKAv4bShYtQ2Hmut+V4dZnOM1A==",
+              "requires": {
+                "@babel/runtime": "^7.8.3"
+              }
+            }
+          }
+        },
+        "@wordpress/keycodes": {
+          "version": "2.9.0",
+          "resolved": "https://registry.npmjs.org/@wordpress/keycodes/-/keycodes-2.9.0.tgz",
+          "integrity": "sha512-m9SO9eYbzuGv5kNZLimL2O7khDddb+uNAkCJC7juD9K/a+l2LiXSLJRm6gAmnBdrGP8UrTudR0oLaPZLcKXYZA==",
+          "requires": {
+            "@babel/runtime": "^7.8.3",
+            "@wordpress/i18n": "^3.9.0",
+            "lodash": "^4.17.15"
+          },
+          "dependencies": {
             "@wordpress/i18n": {
               "version": "3.9.0",
               "resolved": "https://registry.npmjs.org/@wordpress/i18n/-/i18n-3.9.0.tgz",
@@ -29513,23 +29530,7 @@
                 "sprintf-js": "^1.1.1",
                 "tannin": "^1.1.0"
               }
-        },
-        "@wordpress/is-shallow-equal": {
-          "version": "1.8.0",
-          "resolved": "https://registry.npmjs.org/@wordpress/is-shallow-equal/-/is-shallow-equal-1.8.0.tgz",
-          "integrity": "sha512-OV3qJqP9LhjuOzt85TsyBwv+//CvC8Byf/81D3NmjPKlstLaD/bBCC5nBhH6dKAv4bShYtQ2Hmut+V4dZnOM1A==",
-          "requires": {
-            "@babel/runtime": "^7.8.3"
             }
-        },
-        "@wordpress/keycodes": {
-          "version": "2.9.0",
-          "resolved": "https://registry.npmjs.org/@wordpress/keycodes/-/keycodes-2.9.0.tgz",
-          "integrity": "sha512-m9SO9eYbzuGv5kNZLimL2O7khDddb+uNAkCJC7juD9K/a+l2LiXSLJRm6gAmnBdrGP8UrTudR0oLaPZLcKXYZA==",
-          "requires": {
-            "@babel/runtime": "^7.8.3",
-            "@wordpress/i18n": "^3.9.0",
-            "lodash": "^4.17.15"
           }
         },
         "downshift": {

plugins/woocommerce-blocks/package.json

@@ -14,7 +14,9 @@
 		"*.css",
 		"*.scss",
 		"./assets/js/atomic/blocks/product/**",
-		"./assets/js/filters/**"
+		"./assets/js/filters/**",
+		"./assets/js/payment-methods-demo/**",
+		"./assets/js/settings/blocks/**"
 	],
 	"repository": {
 		"type": "git",