@commercetools-frontend/mc-scripts 21.7.0 → 21.8.0

package/dist/create-postcss-config-4cbe10ab.cjs.dev.js

@@ -0,0 +1,90 @@
+'use strict';
+
+var _toConsumableArray = require('@babel/runtime-corejs3/helpers/toConsumableArray');
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var path = require('path');
+var _package = require('./package-aaf61bf0.cjs.dev.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
+var path__default = /*#__PURE__*/_interopDefault(path);
+
+// This function aims to return the same result as `require.resolve`.
+// However, resolving a path to a `.css` file does not return the real
+// path when this file is executed within a Jest environment, because
+// of the `identity-obj-proxy` resolver.
+// Therefore, we trick it by resolving the package entry point and
+// constructing the real path manually.
+var safeResolvePath = function safeResolvePath(packageName, fileRelativePath) {
+  var defaultPackageEntryPoint = require.resolve(packageName);
+
+  var _defaultPackageEntryP = defaultPackageEntryPoint.split('dist'),
+      _defaultPackageEntryP2 = _slicedToArray(_defaultPackageEntryP, 1),
+      pathToPackage = _defaultPackageEntryP2[0];
+
+  return path__default["default"].join(pathToPackage, fileRelativePath);
+};
+
+function createPostcssConfig() {
+  var _context, _context2;
+
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref$postcssImportPat = _ref.postcssImportPaths,
+      postcssImportPaths = _ref$postcssImportPat === void 0 ? [] : _ref$postcssImportPat,
+      _ref$postcssCustomMed = _ref.postcssCustomMediaPaths,
+      postcssCustomMediaPaths = _ref$postcssCustomMed === void 0 ? [] : _ref$postcssCustomMed,
+      _ref$postcssCustomPro = _ref.postcssCustomPropertiesPaths,
+      postcssCustomPropertiesPaths = _ref$postcssCustomPro === void 0 ? [] : _ref$postcssCustomPro;
+
+  return {
+    parser: false,
+    map: false,
+    plugins: [
+    /**
+     * Plugin to transform `@import` rules by inlining content.
+     * https://github.com/postcss/postcss-import
+     */
+    require('postcss-import')({
+      path: postcssImportPaths
+    }),
+    /**
+     * Plugin to parse CSS and add vendor prefixes to CSS rules
+     * using values from "[Can I Use](https://caniuse.com/)".
+     * https://github.com/postcss/autoprefixer
+     */
+    require('autoprefixer')({
+      // Enables `-ms-` prefixes for Grid Layout including some
+      // limited autoplacement support.
+      // https://github.com/postcss/autoprefixer#grid-autoplacement-support-in-ie
+      grid: 'autoplace',
+      overrideBrowserslist: process.env.NODE_ENV === 'production' ? _package.pkgJson.browserslist.production : _package.pkgJson.browserslist.development
+    }),
+    /**
+     * Plugin to enable Custom Media Queries in CSS, following
+     * the [CSS Media Queries](https://drafts.csswg.org/mediaqueries-5/#custom-mq) specification.
+     * https://github.com/postcss/postcss-custom-media
+     */
+    require('postcss-custom-media')({
+      importFrom: _concatInstanceProperty__default["default"](_context = [safeResolvePath('@commercetools-frontend/application-components', 'materials/media-queries.css')]).call(_context, _toConsumableArray(postcssCustomMediaPaths))
+    }),
+    /**
+     * Plugin to enable Custom Properties in CSS, following
+     * the [CSS Custom Properties](https://www.w3.org/TR/css-variables-1/) specification.
+     * https://github.com/postcss/postcss-custom-properties
+     */
+    require('postcss-custom-properties')({
+      preserve: false,
+      importFrom: _concatInstanceProperty__default["default"](_context2 = [safeResolvePath('@commercetools-uikit/design-system', 'materials/custom-properties.css')]).call(_context2, _toConsumableArray(postcssCustomPropertiesPaths))
+    }),
+    /**
+     * Plugin to `console.log()` the messages (warnings, etc.)
+     * registered by other PostCSS plugins.
+     * https://github.com/postcss/postcss-reporter
+     */
+    require('postcss-reporter')()]
+  };
+}
+
+exports.createPostcssConfig = createPostcssConfig;

package/dist/create-postcss-config-8ea16440.cjs.prod.js

@@ -0,0 +1,90 @@
+'use strict';
+
+var _toConsumableArray = require('@babel/runtime-corejs3/helpers/toConsumableArray');
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var path = require('path');
+var _package = require('./package-b5c040f3.cjs.prod.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
+var path__default = /*#__PURE__*/_interopDefault(path);
+
+// This function aims to return the same result as `require.resolve`.
+// However, resolving a path to a `.css` file does not return the real
+// path when this file is executed within a Jest environment, because
+// of the `identity-obj-proxy` resolver.
+// Therefore, we trick it by resolving the package entry point and
+// constructing the real path manually.
+var safeResolvePath = function safeResolvePath(packageName, fileRelativePath) {
+  var defaultPackageEntryPoint = require.resolve(packageName);
+
+  var _defaultPackageEntryP = defaultPackageEntryPoint.split('dist'),
+      _defaultPackageEntryP2 = _slicedToArray(_defaultPackageEntryP, 1),
+      pathToPackage = _defaultPackageEntryP2[0];
+
+  return path__default["default"].join(pathToPackage, fileRelativePath);
+};
+
+function createPostcssConfig() {
+  var _context, _context2;
+
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref$postcssImportPat = _ref.postcssImportPaths,
+      postcssImportPaths = _ref$postcssImportPat === void 0 ? [] : _ref$postcssImportPat,
+      _ref$postcssCustomMed = _ref.postcssCustomMediaPaths,
+      postcssCustomMediaPaths = _ref$postcssCustomMed === void 0 ? [] : _ref$postcssCustomMed,
+      _ref$postcssCustomPro = _ref.postcssCustomPropertiesPaths,
+      postcssCustomPropertiesPaths = _ref$postcssCustomPro === void 0 ? [] : _ref$postcssCustomPro;
+
+  return {
+    parser: false,
+    map: false,
+    plugins: [
+    /**
+     * Plugin to transform `@import` rules by inlining content.
+     * https://github.com/postcss/postcss-import
+     */
+    require('postcss-import')({
+      path: postcssImportPaths
+    }),
+    /**
+     * Plugin to parse CSS and add vendor prefixes to CSS rules
+     * using values from "[Can I Use](https://caniuse.com/)".
+     * https://github.com/postcss/autoprefixer
+     */
+    require('autoprefixer')({
+      // Enables `-ms-` prefixes for Grid Layout including some
+      // limited autoplacement support.
+      // https://github.com/postcss/autoprefixer#grid-autoplacement-support-in-ie
+      grid: 'autoplace',
+      overrideBrowserslist: _package.pkgJson.browserslist.production 
+    }),
+    /**
+     * Plugin to enable Custom Media Queries in CSS, following
+     * the [CSS Media Queries](https://drafts.csswg.org/mediaqueries-5/#custom-mq) specification.
+     * https://github.com/postcss/postcss-custom-media
+     */
+    require('postcss-custom-media')({
+      importFrom: _concatInstanceProperty__default["default"](_context = [safeResolvePath('@commercetools-frontend/application-components', 'materials/media-queries.css')]).call(_context, _toConsumableArray(postcssCustomMediaPaths))
+    }),
+    /**
+     * Plugin to enable Custom Properties in CSS, following
+     * the [CSS Custom Properties](https://www.w3.org/TR/css-variables-1/) specification.
+     * https://github.com/postcss/postcss-custom-properties
+     */
+    require('postcss-custom-properties')({
+      preserve: false,
+      importFrom: _concatInstanceProperty__default["default"](_context2 = [safeResolvePath('@commercetools-uikit/design-system', 'materials/custom-properties.css')]).call(_context2, _toConsumableArray(postcssCustomPropertiesPaths))
+    }),
+    /**
+     * Plugin to `console.log()` the messages (warnings, etc.)
+     * registered by other PostCSS plugins.
+     * https://github.com/postcss/postcss-reporter
+     */
+    require('postcss-reporter')()]
+  };
+}
+
+exports.createPostcssConfig = createPostcssConfig;

package/{build/config/create-postcss-config.js → dist/create-postcss-config-c1aa3525.esm.js}

@@ -1,36 +1,36 @@
-"use strict";
+import _toConsumableArray from '@babel/runtime-corejs3/helpers/esm/toConsumableArray';
+import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
+import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
+import path from 'path';
+import { p as pkgJson } from './package-a98de907.esm.js';
 
-const path = require('path');
-
-const {
-  browserslist
-} = require('../../package.json'); // This function aims to return the same result as `require.resolve`.
+// This function aims to return the same result as `require.resolve`.
 // However, resolving a path to a `.css` file does not return the real
 // path when this file is executed within a Jest environment, because
 // of the `identity-obj-proxy` resolver.
 // Therefore, we trick it by resolving the package entry point and
 // constructing the real path manually.
+var safeResolvePath = function safeResolvePath(packageName, fileRelativePath) {
+  var defaultPackageEntryPoint = require.resolve(packageName);
 
+  var _defaultPackageEntryP = defaultPackageEntryPoint.split('dist'),
+      _defaultPackageEntryP2 = _slicedToArray(_defaultPackageEntryP, 1),
+      pathToPackage = _defaultPackageEntryP2[0];
 
-const safeResolvePath = (packageName, fileRelativePath) => {
-  const defaultPackageEntryPoint = require.resolve(packageName);
-
-  const [pathToPackage] = defaultPackageEntryPoint.split('dist');
   return path.join(pathToPackage, fileRelativePath);
 };
-/**
- * @param {Object} options - Configuration options to extend the default configuration
- * @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.
- */
 
+function createPostcssConfig() {
+  var _context, _context2;
+
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref$postcssImportPat = _ref.postcssImportPaths,
+      postcssImportPaths = _ref$postcssImportPat === void 0 ? [] : _ref$postcssImportPat,
+      _ref$postcssCustomMed = _ref.postcssCustomMediaPaths,
+      postcssCustomMediaPaths = _ref$postcssCustomMed === void 0 ? [] : _ref$postcssCustomMed,
+      _ref$postcssCustomPro = _ref.postcssCustomPropertiesPaths,
+      postcssCustomPropertiesPaths = _ref$postcssCustomPro === void 0 ? [] : _ref$postcssCustomPro;
 
-module.exports = function createPostcssConfig({
-  postcssImportPaths = [],
-  postcssCustomMediaPaths = [],
-  postcssCustomPropertiesPaths = []
-} = {}) {
   return {
     parser: false,
     map: false,
@@ -52,7 +52,7 @@ module.exports = function createPostcssConfig({
       // limited autoplacement support.
       // https://github.com/postcss/autoprefixer#grid-autoplacement-support-in-ie
       grid: 'autoplace',
-      overrideBrowserslist: process.env.NODE_ENV === 'production' ? browserslist.production : browserslist.development
+      overrideBrowserslist: process.env.NODE_ENV === 'production' ? pkgJson.browserslist.production : pkgJson.browserslist.development
     }),
     /**
      * Plugin to enable Custom Media Queries in CSS, following
@@ -60,7 +60,7 @@ module.exports = function createPostcssConfig({
      * https://github.com/postcss/postcss-custom-media
      */
     require('postcss-custom-media')({
-      importFrom: [safeResolvePath('@commercetools-frontend/application-components', 'materials/media-queries.css'), ...postcssCustomMediaPaths]
+      importFrom: _concatInstanceProperty(_context = [safeResolvePath('@commercetools-frontend/application-components', 'materials/media-queries.css')]).call(_context, _toConsumableArray(postcssCustomMediaPaths))
     }),
     /**
      * Plugin to enable Custom Properties in CSS, following
@@ -69,7 +69,7 @@ module.exports = function createPostcssConfig({
      */
     require('postcss-custom-properties')({
       preserve: false,
-      importFrom: [safeResolvePath('@commercetools-uikit/design-system', 'materials/custom-properties.css'), ...postcssCustomPropertiesPaths]
+      importFrom: _concatInstanceProperty(_context2 = [safeResolvePath('@commercetools-uikit/design-system', 'materials/custom-properties.css')]).call(_context2, _toConsumableArray(postcssCustomPropertiesPaths))
     }),
     /**
      * Plugin to `console.log()` the messages (warnings, etc.)
@@ -78,4 +78,6 @@ module.exports = function createPostcssConfig({
      */
     require('postcss-reporter')()]
   };
-};
+}
+
+export { createPostcssConfig as c };

package/{build/config/create-webpack-config-for-development.js → dist/create-webpack-config-for-development-8a8b84d6.esm.js}

@@ -1,35 +1,74 @@
-"use strict";
+import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
+import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
+import _Object$getOwnPropertyDescriptor from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor';
+import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/for-each';
+import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
+import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
+import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
+import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
+import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
+import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
+import _JSON$stringify from '@babel/runtime-corejs3/core-js-stable/json/stringify';
+import _endsWithInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/ends-with';
+import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
+import path from 'path';
+import webpack from 'webpack';
+import WebpackBar from 'webpackbar';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import MomentLocalesPlugin from 'moment-locales-webpack-plugin';
+import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
+import _classCallCheck from '@babel/runtime-corejs3/helpers/esm/classCallCheck';
+import _createClass from '@babel/runtime-corejs3/helpers/esm/createClass';
+import _Object$assign from '@babel/runtime-corejs3/core-js-stable/object/assign';
+import { processConfig } from '@commercetools-frontend/application-config';
+import { replaceHtmlPlaceholders } from '@commercetools-frontend/mc-html-template';
+import { p as paths } from './paths-ed23d5a1.esm.js';
+import { v as vendorsToTranspile } from './vendors-to-transpile-68e03526.esm.js';
+import { c as createPostcssConfig } from './create-postcss-config-c1aa3525.esm.js';
+import { h as hasJsxRuntime } from './has-jsx-runtime-8314226e.esm.js';
 
-/* eslint-disable prettier/prettier */
-const path = require('path');
+var LocalHtmlWebpackPlugin = /*#__PURE__*/function () {
+  function LocalHtmlWebpackPlugin() {
+    _classCallCheck(this, LocalHtmlWebpackPlugin);
+  }
 
-const webpack = require('webpack');
+  _createClass(LocalHtmlWebpackPlugin, [{
+    key: "apply",
+    value: function apply(compiler) {
+      compiler.hooks.compilation.tap('LocalHtmlWebpackPlugin', function (compilation) {
+        HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync('LocalHtmlWebpackPlugin', function (data, cb) {
+          var applicationConfig = processConfig();
 
-const WebpackBar = require('webpackbar');
+          var enhancedLocalEnv = _Object$assign({}, applicationConfig.env, // Now that the app config is defined as a `env.json`, when we start the FE app
+          // to point to the local backend API by passing the `MC_API_URL` env does not
+          // work anymore). To make it work again, we can override the `env.json` config
+          // with the env variable before injecting the values into the index.html.
+          // NOTE: this is only necessary for development.
+          process.env.MC_API_URL ? {
+            mcApiUrl: process.env.MC_API_URL
+          } : {});
 
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-
-const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
-
-const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
-
-const paths = require('./paths');
-
-const vendorsToTranspile = require('./vendors-to-transpile');
+          data.html = replaceHtmlPlaceholders(data.html, {
+            env: enhancedLocalEnv,
+            headers: {}
+          });
+          cb(null, data);
+        });
+      });
+    }
+  }]);
 
-const createPostcssConfig = require('./create-postcss-config');
+  return LocalHtmlWebpackPlugin;
+}();
 
-const hasJsxRuntime = require('./has-jsx-runtime');
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-const defaultToggleFlags = {
-  // Allow to disable index.html generation in case it's not necessary (e.g. for Storybook)
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context6, _context7; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context6 = ownKeys(Object(source), !0)).call(_context6, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context7 = ownKeys(Object(source))).call(_context7, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var defaultToggleFlags = {
   generateIndexHtml: true,
-  // Some environemnts do not require `core-js` and can hence disable
-  // it explicitely. This will disable `core-js` for `preset-env` and the
-  // `plugin-transform-runtime`.
   disableCoreJs: false
 };
-const defaultOptions = {
+var defaultOptions = {
   entryPoint: paths.entryPoint,
   sourceFolders: paths.sourceFolders,
   postcssOptions: {},
@@ -37,32 +76,28 @@ const defaultOptions = {
 }; // Whether or not `react-refresh` is enabled, `react-refresh` is not 100% stable at this time,
 // which is why it's disabled by default.
 
-const hasReactRefresh = process.env.FAST_REFRESH === 'true';
+var hasReactRefresh = process.env.FAST_REFRESH === 'true';
 
-const webpackDevClientEntry = require.resolve('react-dev-utils/webpackHotDevClient');
+var webpackDevClientEntry = require.resolve('react-dev-utils/webpackHotDevClient');
 
-const reactRefreshOverlayEntry = require.resolve('react-dev-utils/refreshOverlayInterop');
+var reactRefreshOverlayEntry = require.resolve('react-dev-utils/refreshOverlayInterop');
 /**
  * This is a factory function to create the default webpack config
  * for a MC Application in `development` mode.
  * The function requires the file path to the related application
  * "entry point".
- *
- * @param {Object} options - Options to configure the Webpack config
- * @param {string} options.entryPoint - The absolute path to the application entry point file.
- * @param {string[]} options.sourceFolders[] - A list of folders where Webpack should look for source files.
- * @param {Object} options.postcssOptions - Options related to Postcss plugins. See `createPostcssConfig` function.
- * @param {Object} options.toggleFlags - Options to enable/disable certain functionalities of the Webpack config.
  */
 
 
-module.exports = function createWebpackConfigForDevelopment(options = {}) {
-  const mergedOptions = { ...defaultOptions,
-    ...options,
-    toggleFlags: { ...defaultToggleFlags,
-      ...options.toggleFlags
-    }
-  };
+function createWebpackConfigForDevelopment() {
+  var _context, _context2, _context3, _context4, _context5;
+
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  var mergedOptions = _objectSpread(_objectSpread(_objectSpread({}, defaultOptions), options), {}, {
+    toggleFlags: _objectSpread(_objectSpread({}, defaultToggleFlags), options.toggleFlags)
+  });
+
   return {
     // https://webpack.js.org/concepts/#mode
     mode: 'development',
@@ -96,7 +131,9 @@ module.exports = function createWebpackConfigForDevelopment(options = {}) {
       // https://github.com/facebook/create-react-app/issues/290
       // `web` extension prefixes have been added for better support
       // for React Native Web.
-      extensions: ['js', 'mjs', 'cjs', 'ts', 'tsx', 'json', 'jsx'].map(ext => `.${ext}`),
+      extensions: _mapInstanceProperty(_context = ['js', 'mjs', 'cjs', 'ts', 'tsx', 'json', 'jsx']).call(_context, function (ext) {
+        return ".".concat(ext);
+      }),
       // NOTE: this is meant to be a temporary list of fallback/polyfills for certain
       // nodejs modules. With Webpack <5 these polyfills were included by default in Webpack,
       // however now it's not the case anymore.
@@ -107,7 +144,7 @@ module.exports = function createWebpackConfigForDevelopment(options = {}) {
       }
     },
     entry: {
-      app: [require.resolve('./application-runtime'), !mergedOptions.toggleFlags.disableCoreJs && require.resolve('core-js/stable'), // When using the experimental `react-refresh` integration,
+      app: _filterInstanceProperty(_context2 = [require.resolve('@commercetools-frontend/mc-scripts/application-runtime'), !mergedOptions.toggleFlags.disableCoreJs && require.resolve('core-js/stable'), // When using the experimental `react-refresh` integration,
       // the webpack plugin takes care of injecting the dev client for us.
       !hasReactRefresh && // Include an alternative client for WebpackDevServer. A client's job is to
       // connect to WebpackDevServer by a socket and get notified about changes.
@@ -124,7 +161,7 @@ module.exports = function createWebpackConfigForDevelopment(options = {}) {
       mergedOptions.entryPoint // We include the app code last so that if there is a runtime error during
       // initialization, it doesn't blow up the WebpackDevServer client, and
       // changing JS code would still trigger a refresh.
-      ].filter(Boolean)
+      ]).call(_context2, Boolean)
     },
     output: {
       // This does not produce a real file. It's just the virtual path that is
@@ -140,9 +177,11 @@ module.exports = function createWebpackConfigForDevelopment(options = {}) {
       // This is the URL that app is served from. We use "/" in development.
       publicPath: '/',
       // Point sourcemap entries to the original disk location (format as URL on Windows)
-      devtoolModuleFilenameTemplate: info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')
+      devtoolModuleFilenameTemplate: function devtoolModuleFilenameTemplate(info) {
+        return path.resolve(info.absoluteResourcePath).replace(/\\/g, '/');
+      }
     },
-    plugins: [new WebpackBar(), // Allows to "assign" custom options to the `webpack` object.
+    plugins: _filterInstanceProperty(_context3 = [new WebpackBar(), // Allows to "assign" custom options to the `webpack` object.
     // At the moment, this is used to share some props with `postcss.config`.
     new webpack.LoaderOptionsPlugin({
       options: {
@@ -154,18 +193,13 @@ module.exports = function createWebpackConfigForDevelopment(options = {}) {
     new webpack.DefinePlugin({
       __DEV__: 'true',
       'process.env': {
-        NODE_ENV: JSON.stringify('development')
+        NODE_ENV: _JSON$stringify('development')
       }
     }), mergedOptions.toggleFlags.generateIndexHtml && new HtmlWebpackPlugin({
       inject: false,
       filename: paths.appIndexHtml,
       template: require.resolve('@commercetools-frontend/mc-html-template/webpack')
-    }), mergedOptions.toggleFlags.generateIndexHtml && (() => {
-      // eslint-disable-next-line global-require
-      const LocalHtmlWebpackPlugin = require('../webpack-plugins/local-html-webpack-plugin');
-
-      return new LocalHtmlWebpackPlugin();
-    })(), // Strip all locales except `en`, `de`
+    }), mergedOptions.toggleFlags.generateIndexHtml && new LocalHtmlWebpackPlugin(), // Strip all locales except `en`, `de`
     // (`en` is built into Moment and can't be removed).
     new MomentLocalesPlugin({
       localesToKeep: ['de', 'es', 'fr', 'zh-cn', 'ja']
@@ -182,7 +216,7 @@ module.exports = function createWebpackConfigForDevelopment(options = {}) {
         // the bundled socket handling logic can be eliminated.
         sockIntegration: false
       }
-    })].filter(Boolean),
+    })]).call(_context3, Boolean),
     module: {
       // Makes missing exports an error instead of warning.
       strictExportPresence: true,
@@ -227,7 +261,7 @@ module.exports = function createWebpackConfigForDevelopment(options = {}) {
         test: function testForNormalSvgFiles(fileName) {
           return (// Use this only for plain SVG.
             // For SVG as React components, see loader above.
-            fileName.endsWith('.svg') && !fileName.endsWith('.react.svg')
+            _endsWithInstanceProperty(fileName).call(fileName, '.svg') && !_endsWithInstanceProperty(fileName).call(fileName, '.react.svg')
           );
         },
         use: [{
@@ -262,7 +296,7 @@ module.exports = function createWebpackConfigForDevelopment(options = {}) {
         test: function testForNormalCssFiles(fileName) {
           return (// Use this only for plain CSS.
             // For css-modules, see loader above.
-            fileName.endsWith('.css') && !(fileName.endsWith('.mod.css') || fileName.endsWith('.module.css'))
+            _endsWithInstanceProperty(fileName).call(fileName, '.css') && !(_endsWithInstanceProperty(fileName).call(fileName, '.mod.css') || _endsWithInstanceProperty(fileName).call(fileName, '.module.css'))
           );
         },
         // "postcss" loader applies autoprefixer to our CSS.
@@ -327,7 +361,7 @@ module.exports = function createWebpackConfigForDevelopment(options = {}) {
             presets: [[require.resolve('@commercetools-frontend/babel-preset-mc-app'), {
               runtime: hasJsxRuntime() ? 'automatic' : 'classic'
             }]],
-            plugins: [hasReactRefresh && require.resolve('react-refresh/babel')].filter(Boolean),
+            plugins: _filterInstanceProperty(_context4 = [hasReactRefresh && require.resolve('react-refresh/babel')]).call(_context4, Boolean),
             // This is a feature of `babel-loader` for webpack (not Babel itself).
             // It enables caching results in ./node_modules/.cache/babel-loader/
             // directory for faster rebuilds.
@@ -335,7 +369,7 @@ module.exports = function createWebpackConfigForDevelopment(options = {}) {
             highlightCode: true
           }
         }],
-        include: mergedOptions.sourceFolders.concat(vendorsToTranspile),
+        include: _concatInstanceProperty(_context5 = mergedOptions.sourceFolders).call(_context5, vendorsToTranspile),
         // Disable require.ensure as it's not a standard language feature.
         parser: {
           requireEnsure: false
@@ -355,4 +389,6 @@ module.exports = function createWebpackConfigForDevelopment(options = {}) {
       level: 'none'
     }
   };
-};
+}
+
+export { createWebpackConfigForDevelopment as c };