[Breaking changes] Bump several major dependencies

packages/mc-scripts/package.json

@@ -37,30 +37,28 @@
     "@commercetools-frontend/babel-preset-mc-app": "18.7.0",
     "@commercetools-frontend/mc-dev-authentication": "18.5.4",
     "@commercetools-frontend/mc-html-template": "18.7.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.0-beta.1",
     "@svgr/webpack": "5.5.0",
     "autoprefixer": "10.2.5",
     "babel-loader": "8.2.2",
     "browserslist": "4.16.3",
     "core-js": "3.10.0",
     "css-loader": "5.2.0",
-    "cssnano": "4.1.10",
+    "css-minimizer-webpack-plugin": "1.3.0",
     "fs-extra": "9.1.0",
     "graphql-tag": "^2.11.0",
     "html-webpack-plugin": "5.3.1",
     "json-loader": "0.5.7",
     "mini-css-extract-plugin": "1.4.0",
     "moment-locales-webpack-plugin": "1.2.0",
     "mri": "1.1.6",
-    "optimize-css-assets-webpack-plugin": "5.0.4",
     "postcss": "8.2.9",
     "postcss-color-mod-function": "3.0.3",
     "postcss-custom-media": "8.0.0",
     "postcss-custom-properties": "11.0.0",
     "postcss-import": "14.0.1",
     "postcss-loader": "5.2.0",
     "postcss-reporter": "7.0.2",
-    "postcss-safe-parser": "5.0.2",
     "react-dev-utils": "11.0.4",
     "react-refresh": "0.10.0",
     "semver": "7.3.5",

packages/mc-scripts/src/config/create-webpack-config-for-development.js

@@ -56,6 +56,8 @@ module.exports = function createWebpackConfigForDevelopment(options = {}) {
   };
 
   return {
+    target: 'web',
+
     // https://webpack.js.org/concepts/#mode
     mode: 'development',
 
@@ -256,9 +258,6 @@ module.exports = function createWebpackConfigForDevelopment(options = {}) {
             },
           ],
         },
-        // "url" loader works like "file" loader except that it embeds assets
-        // smaller than specified limit in bytes as data URLs to avoid requests.
-        // A missing `test` is equivalent to a match.
         {
           test: /\.png$/,
           type: 'asset/resource',
@@ -397,7 +396,7 @@ module.exports = function createWebpackConfigForDevelopment(options = {}) {
 
     // For dev server
     infrastructureLogging: {
-      level: 'warn',
+      level: 'none',
     },
   };
 };

packages/mc-scripts/src/config/create-webpack-config-for-production.js

@@ -1,38 +1,18 @@
 /* eslint-disable prettier/prettier */
 const webpack = require('webpack');
-const cssnano = require('cssnano');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const safeParser = require('postcss-safe-parser');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
 // const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-// as "aliasing v1.0.0 as webpack.optimize.UglifyJsPlugin is scheduled for
-// webpack v4.0.0" (https://webpack.js.org/plugins/uglifyjs-webpack-plugin/)
-// we need to explicitly use the library to be using the newest version
 const TerserPlugin = require('terser-webpack-plugin');
 const FinalStatsWriterPlugin = require('../webpack-plugins/final-stats-writer-plugin');
 const paths = require('./paths');
 const vendorsToTranspile = require('./vendors-to-transpile');
 const createPostcssConfig = require('./create-postcss-config');
 const hasJsxRuntime = require('./has-jsx-runtime');
 
-const optimizeCSSConfig = {
-  // Since css-loader uses cssnano v3.1.0, it's best to stick with the
-  // same version here
-  cssProcessor: cssnano,
-  // This safe condition is necessary (as of v3 of cssnano) else we will run into
-  // problems, learn more👇
-  // https://github.com/NMFR/optimize-css-assets-webpack-plugin/issues/28
-  cssProcessorOptions: {
-    // The previous safe option has been removed this is a fix from
-    // https://github.com/NMFR/optimize-css-assets-webpack-plugin/issues/65#issuecomment-405721294
-    parser: safeParser,
-    discardComments: { removeAll: true },
-  },
-};
-
 const defaultToggleFlags = {
   // Allow to disable CSS extraction in case it's not necessary (e.g. for Storybook)
   enableExtractCss: true,
@@ -135,17 +115,8 @@ module.exports = function createWebpackConfigForProduction(options = {}) {
           // Default number of concurrent runs: os.cpus().length - 1
           parallel: mergedOptions.toggleFlags.parallelism,
         }),
-        mergedOptions.toggleFlags.enableExtractCss &&
-          new OptimizeCSSAssetsPlugin(optimizeCSSConfig),
+        mergedOptions.toggleFlags.enableExtractCss && new CssMinimizerPlugin(),
       ].filter(Boolean),
-      // Automatically split vendor and commons
-      // https://twitter.com/wSokra/status/969633336732905474
-      // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
-      splitChunks: {
-        chunks: 'all',
-        // NOTE: if you enable `cacheGroups` for CSS, remember to toggle it with
-        // the `mergedToggleFlags.enableExtractCss`
-      },
       // Keep the runtime chunk separated to enable long term caching
       runtimeChunk: {
         name: 'runtime',
@@ -154,6 +125,16 @@ module.exports = function createWebpackConfigForProduction(options = {}) {
       chunkIds: 'deterministic',
     },
 
+    resolve: {
+      // These are the reasonable defaults supported by the Node ecosystem.
+      // We also include JSX as a common component filename extension to support
+      // some tools, although we do not recommend using it, see:
+      // https://github.com/facebook/create-react-app/issues/290
+      // `web` extension prefixes have been added for better support
+      // for React Native Web.
+      extensions: ['js', 'ts', 'tsx', 'json', 'jsx'].map((ext) => `.${ext}`),
+    },
+
     // In production, we only want to load the polyfills and the app code.
     entry: {
       app: [
@@ -175,16 +156,6 @@ module.exports = function createWebpackConfigForProduction(options = {}) {
       publicPath: '',
     },
 
-    resolve: {
-      // These are the reasonable defaults supported by the Node ecosystem.
-      // We also include JSX as a common component filename extension to support
-      // some tools, although we do not recommend using it, see:
-      // https://github.com/facebook/create-react-app/issues/290
-      // `web` extension prefixes have been added for better support
-      // for React Native Web.
-      extensions: ['js', 'ts', 'tsx', 'json', 'jsx'].map((ext) => `.${ext}`),
-    },
-
     plugins: [
       // new CleanWebpackPlugin({
       //   dangerouslyAllowCleanPatternsOutsideProject: true,
@@ -303,9 +274,6 @@ module.exports = function createWebpackConfigForProduction(options = {}) {
             },
           ],
         },
-        // "url" loader works like "file" loader except that it embeds assets
-        // smaller than specified limit in bytes as data URLs to avoid requests.
-        // A missing `test` is equivalent to a match.
         {
           test: /\.png$/,
           type: 'asset/resource',

packages/mc-scripts/src/config/webpack-dev-server.config.js

@@ -1,7 +1,7 @@
+const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
 const { processConfig } = require('@commercetools-frontend/application-config');
 const { processHeaders } = require('@commercetools-frontend/mc-html-template');
 const devAuthentication = require('@commercetools-frontend/mc-dev-authentication');
-const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
 
 // Feature flags
 const isOidcForDevelopmentEnabled =
@@ -16,8 +16,6 @@ const host = process.env.HOST || '0.0.0.0';
 
 module.exports = ({ allowedHost, contentBase, port, publicPath }) => ({
   client: {
-    host,
-    port,
     overlay: false,
   },
   // Enable gzip compression of generated files.
@@ -42,7 +40,11 @@ module.exports = ({ allowedHost, contentBase, port, publicPath }) => ({
   injectClient: false,
   port,
   public: allowedHost,
-  static: contentBase,
+  static: {
+    directory: contentBase,
+    publicPath: [publicPath],
+    watch: true,
+  },
   // Enable HTTPS if the HTTPS environment variable is set to 'true'
   // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
   onBeforeSetupMiddleware({ app }) {

yarn.lock

@@ -6043,7 +6043,20 @@
   dependencies:
     "@percy/logger" "^1.0.0-beta.44"
 
-"@pmmmwh/[email protected]", "@pmmmwh/react-refresh-webpack-plugin@^0.4.3":
+"@pmmmwh/[email protected]":
+  version "0.5.0-beta.1"
+  resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.0-beta.1.tgz#8399a7c18d6bea0bee77d06a77410a635af19828"
+  integrity sha512-AnFkt6vpvT9fQQemNX/QkRKy2+kLbFNSO0MAy6/LvHXu6FyMtJC8qWmrZzjUq14wu/g9M/sLcy6gch/XQvymcQ==
+  dependencies:
+    ansi-html "^0.0.7"
+    core-js-pure "^3.8.1"
+    error-stack-parser "^2.0.6"
+    html-entities "^2.1.0"
+    native-url "^0.3.4"
+    schema-utils "^3.0.0"
+    source-map "^0.7.3"
+
+"@pmmmwh/react-refresh-webpack-plugin@^0.4.3":
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.4.3.tgz#1eec460596d200c0236bf195b078a5d1df89b766"
   integrity sha512-br5Qwvh8D2OQqSXpd1g/xqXKnK0r+Jz6qVKBbWmpUcrbGOxUrf39V5oZ1876084CGn18uMdR5uvPqBv9UqtBjQ==
@@ -10323,7 +10336,7 @@ core-js-compat@^3.8.1, core-js-compat@^3.9.0:
     browserslist "^4.16.3"
     semver "7.0.0"
 
-core-js-pure@^3.0.0:
+core-js-pure@^3.0.0, core-js-pure@^3.8.1:
   version "3.10.0"
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.10.0.tgz#dab9d6b141779b622b40567e7a536d2276646c15"
   integrity sha512-CC582enhrFZStO4F8lGI7QL3SYx7/AIRc+IdSi3btrQGrVsTawo5K/crmKbRrQ+MOMhNX4v+PATn0k2NN6wI7A==
@@ -10566,7 +10579,7 @@ css-loader@^5.0.1:
     schema-utils "^3.0.0"
     semver "^7.3.4"
 
-css-minimizer-webpack-plugin@^1.3.0:
+css-minimizer-webpack-plugin@1.3.0, css-minimizer-webpack-plugin@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-1.3.0.tgz#d867b4a54ca9920125b30263505e8cca72bc8cf1"
   integrity sha512-jFa0Siplmfef4ndKglpVaduY47oHQwioAOEGK0f0vAX0s+vc+SmP6cCMoc+8Adau5600RnOEld5VVdC8CQau7w==
@@ -10735,7 +10748,7 @@ cssnano-util-same-parent@^4.0.0:
   resolved "https://registry.yarnpkg.com/cssnano-util-same-parent/-/cssnano-util-same-parent-4.0.1.tgz#574082fb2859d2db433855835d9a8456ea18bbf3"
   integrity sha512-WcKx5OY+KoSIAxBW6UBBRay1U6vkYheCdjyVNDm85zt5K9mHoGOfsOsqIszfAqrQQFIIKgjh2+FDgIj/zsl21Q==
 
-cssnano@4.1.10, cssnano@^4.1.10:
+cssnano@^4.1.10:
   version "4.1.10"
   resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-4.1.10.tgz#0ac41f0b13d13d465487e111b778d42da631b8b2"
   integrity sha512-5wny+F6H4/8RgNlaqab4ktc3e0/blKutmq8yNlBFXA//nSFFAqAngjNVRzUvCgYROULmZZUoosL/KSoZo5aUaQ==
@@ -17988,14 +18001,6 @@ language-tags@^1.0.5:
   dependencies:
     language-subtag-registry "~0.3.2"
 
-last-call-webpack-plugin@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/last-call-webpack-plugin/-/last-call-webpack-plugin-3.0.0.tgz#9742df0e10e3cf46e5c0381c2de90d3a7a2d7555"
-  integrity sha512-7KI2l2GIZa9p2spzPIVZBYyNKkN+e/SQPpnjlTiPhdbDW3F86tdKKELxKpzJ5sgU19wQWsACULZmpTPYHeWO5w==
-  dependencies:
-    lodash "^4.17.5"
-    webpack-sources "^1.1.0"
-
 [email protected], latest-version@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-5.1.0.tgz#119dfe908fe38d15dfa43ecd13fa12ec8832face"
@@ -18582,7 +18587,7 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
 
-[email protected], [email protected], lodash@^4.1.1, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.7.0, lodash@~4.17.20:
+[email protected], [email protected], lodash@^4.1.1, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0, lodash@~4.17.20:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -19710,6 +19715,13 @@ native-url@^0.2.6:
   dependencies:
     querystring "^0.2.0"
 
+native-url@^0.3.4:
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/native-url/-/native-url-0.3.4.tgz#29c943172aed86c63cee62c8c04db7f5756661f8"
+  integrity sha512-6iM8R99ze45ivyH8vybJ7X0yekIcPf5GgLV5K0ENCbmRcaRIDoj37BC8iLEmaaBfqqb8enuZ5p0uhY+lVAbAcA==
+  dependencies:
+    querystring "^0.2.0"
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
@@ -20333,14 +20345,6 @@ optimism@^0.15.0:
     "@wry/context" "^0.6.0"
     "@wry/trie" "^0.3.0"
 
-[email protected]:
-  version "5.0.4"
-  resolved "https://registry.yarnpkg.com/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-5.0.4.tgz#85883c6528aaa02e30bbad9908c92926bb52dc90"
-  integrity sha512-wqd6FdI2a5/FdoiCNNkEvLeA//lHHfG24Ln2Xm2qqdIk4aOlsR18jwpyOihqQ8849W3qu2DX8fOYxpvTMj+93A==
-  dependencies:
-    cssnano "^4.1.10"
-    last-call-webpack-plugin "^3.0.0"
-
 optionator@^0.8.1:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.3.tgz#84fa1d036fe9d3c7e21d99884b601167ec8fb495"
@@ -21606,13 +21610,6 @@ postcss-resolve-nested-selector@^0.1.1:
   resolved "https://registry.yarnpkg.com/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz#29ccbc7c37dedfac304e9fff0bf1596b3f6a0e4e"
   integrity sha1-Kcy8fDfe36wwTp//C/FZaz9qDk4=
 
-[email protected]:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-5.0.2.tgz#459dd27df6bc2ba64608824ba39e45dacf5e852d"
-  integrity sha512-jDUfCPJbKOABhwpUKcqCVbbXiloe/QXMcbJ6Iipf3sDIihEzTqRCeMBfRaOHxhBuTYqtASrI1KJWxzztZU4qUQ==
-  dependencies:
-    postcss "^8.1.0"
-
 postcss-safe-parser@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-4.0.2.tgz#a6d4e48f0f37d9f7c11b2a581bf00f8ba4870b96"
@@ -21751,7 +21748,7 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
-postcss@^8.1.0, postcss@^8.1.10, postcss@^8.2.8:
+postcss@^8.1.10, postcss@^8.2.8:
   version "8.2.8"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.8.tgz#0b90f9382efda424c4f0f69a2ead6f6830d08ece"
   integrity sha512-1F0Xb2T21xET7oQV9eKuctbM9S7BC0fetoHCc4H13z0PT6haiRLP4T0ZY4XWh7iLP0usgqykT6p9B2RtOf4FPw==