@commercetools-frontend/mc-scripts 21.0.0-rc.7 → 21.0.1

package/build/config/create-postcss-config.js

@@ -23,15 +23,13 @@ const safeResolvePath = (packageName, fileRelativePath) => {
  * @param {string[]} options.postcssImportPaths[] - A list of paths where to look for files used by the `@import` statements.
  * @param {string[]} options.postcssCustomMediaPaths[] - A list of paths where to look for files with custom media queries.
  * @param {string[]} options.postcssCustomPropertiesPaths[] - A list of paths where to look for files with custom properties.
- * @param {string[]} options.postcssColorModPaths[] - A list of paths where to look for files with color-mod properties.
  */
 
 
 module.exports = function createPostcssConfig({
   postcssImportPaths = [],
   postcssCustomMediaPaths = [],
-  postcssCustomPropertiesPaths = [],
-  postcssColorModPaths = []
+  postcssCustomPropertiesPaths = []
 } = {}) {
   return {
     parser: false,
@@ -72,10 +70,6 @@ module.exports = function createPostcssConfig({
     require('postcss-custom-properties')({
       preserve: false,
       importFrom: [safeResolvePath('@commercetools-uikit/design-system', 'materials/custom-properties.css'), ...postcssCustomPropertiesPaths]
-    }), // TODO: we should deprecate/remove this, as it's not maintained and it doesn't
-    // officially support postcss v8 yet.
-    require('postcss-color-mod-function')({
-      importFrom: postcssColorModPaths
     }),
     /**
      * Plugin to `console.log()` the messages (warnings, etc.)

package/build/config/create-webpack-config-for-development.js

@@ -240,7 +240,7 @@ module.exports = function createWebpackConfigForDevelopment(options = {}) {
       // "css" loader resolves paths in CSS and adds assets as dependencies.
       // "style" loader turns CSS into JS modules that inject <style> tags.
       {
-        test: /\.mod\.css$/,
+        test: /\.(mod|module)\.css$/,
         include: mergedOptions.sourceFolders,
         use: [require.resolve('style-loader'), {
           loader: require.resolve('css-loader'),
@@ -248,7 +248,7 @@ module.exports = function createWebpackConfigForDevelopment(options = {}) {
             modules: {
               mode: 'local',
               localIdentName: '[name]__[local]___[hash:base64:5]',
-              localIdentHashPrefix: 'ct'
+              localIdentHashSalt: 'ct'
             },
             importLoaders: 1
           }
@@ -271,7 +271,15 @@ module.exports = function createWebpackConfigForDevelopment(options = {}) {
         oneOf: [{
           // Use "postcss" for all the included source folders.
           include: mergedOptions.sourceFolders,
-          use: [require.resolve('style-loader'), require.resolve('css-loader'), {
+          use: [require.resolve('style-loader'), {
+            loader: require.resolve('css-loader'),
+            options: {
+              modules: {
+                mode: 'icss'
+              },
+              importLoaders: 1
+            }
+          }, {
             loader: require.resolve('postcss-loader'),
             options: {
               postcssOptions: createPostcssConfig(mergedOptions.postcssOptions)
@@ -280,7 +288,15 @@ module.exports = function createWebpackConfigForDevelopment(options = {}) {
         }, {
           // For all other vendor CSS, do not use "postcss" loader.
           include: /node_modules/,
-          use: [require.resolve('style-loader'), require.resolve('css-loader')]
+          use: [require.resolve('style-loader'), {
+            loader: require.resolve('css-loader'),
+            options: {
+              modules: {
+                mode: 'icss'
+              },
+              importLoaders: 1
+            }
+          }]
         }]
       }, // Fix for react-intl
       // https://github.com/formatjs/formatjs/issues/143#issuecomment-518774786

package/build/config/create-webpack-config-for-production.js

@@ -254,8 +254,12 @@ module.exports = function createWebpackConfigForProduction(options = {}) {
       }, // "postcss" loader applies autoprefixer to our CSS
       // "css" loader resolves paths in CSS and adds assets as dependencies.
       // "style" loader turns CSS into JS modules that inject <style> tags.
+      // In production, we use MiniCSSExtractPlugin to extract that CSS
+      // to a file, but in development "style" loader enables hot editing
+      // of CSS.
+      // By default we support CSS Modules with the extension `.mod.css` and `.module.css`.
       {
-        test: /\.mod\.css$/,
+        test: /\.(mod|module)\.css$/,
         include: mergedOptions.sourceFolders,
         use: [mergedOptions.toggleFlags.enableExtractCss ? MiniCssExtractPlugin.loader : require.resolve('style-loader'), {
           loader: require.resolve('css-loader'),
@@ -263,7 +267,7 @@ module.exports = function createWebpackConfigForProduction(options = {}) {
             modules: {
               mode: 'local',
               localIdentName: '[name]__[local]___[hash:base64:5]',
-              localIdentHashPrefix: 'ct'
+              localIdentHashSalt: 'ct'
             },
             importLoaders: 1
           }
@@ -286,7 +290,15 @@ module.exports = function createWebpackConfigForProduction(options = {}) {
         oneOf: [{
           // Use "postcss" for all the included source folders.
           include: mergedOptions.sourceFolders,
-          use: [mergedOptions.toggleFlags.enableExtractCss ? MiniCssExtractPlugin.loader : require.resolve('style-loader'), require.resolve('css-loader'), {
+          use: [mergedOptions.toggleFlags.enableExtractCss ? MiniCssExtractPlugin.loader : require.resolve('style-loader'), {
+            loader: require.resolve('css-loader'),
+            options: {
+              modules: {
+                mode: 'icss'
+              },
+              importLoaders: 1
+            }
+          }, {
             loader: require.resolve('postcss-loader'),
             options: {
               postcssOptions: createPostcssConfig(mergedOptions.postcssOptions)
@@ -296,7 +308,15 @@ module.exports = function createWebpackConfigForProduction(options = {}) {
           // For all other vendor CSS, do not use "postcss" loader.
           // But still use MiniCssExtractPlugin :)
           include: /node_modules/,
-          use: [mergedOptions.toggleFlags.enableExtractCss ? MiniCssExtractPlugin.loader : require.resolve('style-loader'), require.resolve('css-loader')]
+          use: [mergedOptions.toggleFlags.enableExtractCss ? MiniCssExtractPlugin.loader : require.resolve('style-loader'), {
+            loader: require.resolve('css-loader'),
+            options: {
+              modules: {
+                mode: 'icss'
+              },
+              importLoaders: 1
+            }
+          }]
         }]
       }, // Fix for react-intl
       // https://github.com/formatjs/formatjs/issues/143#issuecomment-518774786

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/mc-scripts",
-  "version": "21.0.0-rc.7",
+  "version": "21.0.1",
   "description": "Configuration and scripts for developing a MC application",
   "bugs": "https://github.com/commercetools/merchant-center-application-kit/issues",
   "repository": {
@@ -28,18 +28,18 @@
   "dependencies": {
     "@babel/runtime": "^7.16.7",
     "@babel/runtime-corejs3": "^7.16.8",
-    "@commercetools-frontend/application-config": "21.0.0-rc.7",
-    "@commercetools-frontend/assets": "21.0.0-rc.1",
-    "@commercetools-frontend/babel-preset-mc-app": "21.0.0-rc.7",
-    "@commercetools-frontend/mc-dev-authentication": "21.0.0-rc.1",
-    "@commercetools-frontend/mc-html-template": "21.0.0-rc.7",
+    "@commercetools-frontend/application-config": "21.0.1",
+    "@commercetools-frontend/assets": "21.0.0",
+    "@commercetools-frontend/babel-preset-mc-app": "21.0.0",
+    "@commercetools-frontend/mc-dev-authentication": "21.0.0",
+    "@commercetools-frontend/mc-html-template": "21.0.1",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.4",
     "@svgr/webpack": "6.2.0",
-    "autoprefixer": "10.4.2",
+    "autoprefixer": "^10.4.2",
     "babel-loader": "8.2.3",
-    "browserslist": "4.19.1",
+    "browserslist": "^4.19.1",
     "core-js": "^3.20.3",
-    "css-loader": "5.2.7",
+    "css-loader": "6.5.1",
     "css-minimizer-webpack-plugin": "3.4.1",
     "dotenv": "10.0.0",
     "dotenv-expand": "5.1.0",
@@ -47,13 +47,12 @@
     "graphql-tag": "^2.12.6",
     "html-webpack-plugin": "5.5.0",
     "json-loader": "0.5.7",
-    "mini-css-extract-plugin": "1.6.2",
+    "mini-css-extract-plugin": "2.5.3",
     "moment-locales-webpack-plugin": "1.2.0",
     "mri": "1.2.0",
-    "postcss": "8.4.5",
-    "postcss-color-mod-function": "3.0.3",
+    "postcss": "8.4.6",
     "postcss-custom-media": "8.0.0",
-    "postcss-custom-properties": "11.0.0",
+    "postcss-custom-properties": "12.1.4",
     "postcss-import": "14.0.2",
     "postcss-loader": "6.2.1",
     "postcss-reporter": "7.0.5",