apostrophe 4.7.2 → 4.8.1

package/CHANGELOG.md

@@ -1,10 +1,32 @@
 # Changelog
 
-## 4.7.2 (2024-10-09)
+## 4.8.1 (2024-10-09)
+
+* Correct a race condition that can cause a crash at startup when custom `uploadfs` options are present in some environments.
+
+## 4.8.0 (2024-10-03)
+
+### Adds
+
+* Adds a mobile preview feature to the admin UI. The feature can be enabled using the `@apostrophecms/asset` module's new `breakpointPreviewMode` option. Once enabled, the asset build process will duplicate existing media queries as container queries. There are some limitations in the equivalence between media queries and container queries. You can refer to the [CSS @container at-rule](https://developer.mozilla.org/en-US/docs/Web/CSS/@container) documentation for more information. You can also enable `breakpointPreviewMode.debug` to be notified in the console when the build encounters an unsupported media query.
+* Apostrophe now automatically adds the appropriate default values for new properties in the schema, even for existing documents in the database. This is done automatically during the migration phase of startup.
+* Adds focus states for media library's Uploader tile.
+* Adds focus states file attachment's input UI.
+* Simplified importing rich text widgets via the REST API. If you  you have HTML that contains `img` tags pointing to existing images, you can now import them all quickly. When supplying the rich text widget object, include an `import` property with an `html` subproperty, rather than the usual `content` property. You can optionally provide a `baseUrl` subproperty as well. Any images present in `html` will be imported automatically and the correct `figure` tags will be added to the new rich text widget, along with any other markup acceptable to the widget's configuration.
+
+### Changes
+
+* The various implementations of `newInstance` found in Apostrophe, e.g. for widgets, array items, relationship fields and documents themselves, have been consolidated in one implementation. The same code is now reused both on the front and the back end, ensuring the same result without the need to introduce additional back end API calls.
 
 ### Fixes
 
-* Correct a race condition that can cause a crash at startup when custom `uploadfs` options are present in some specific cloud environments e.g. when using Azure Blob Storage.
+* Apostrophe's migration logic is no longer executed twice on every startup and three times in the migration task. It is executed exactly once, always at the same point in the startup process. This bug did not cause significant performance issues because migrations were always only executed once, but there is a small performance improvement due to not checking for them more than once.
+* The `@apostrophecms/page` module APIs no longer allow a page to become a child of itself. Thanks to [Maarten Marx](https://github.com/Pixelguymm) for reporting the issue.
+* Uploaded SVGs now permit `<use>` tags granted their `xlink:href` property is a local reference and begins with the `#` character. This improves SVG support while mitgating XSS vulnerabilities.
+* Default properties of object fields present in a widget now populate correctly even if never focused in the editor.
+* Fixed the "choices" query builder to correctly support dynamic choices, ensuring compatibility with the [`piecesFilters`](https://docs.apostrophecms.org/reference/modules/piece-page-type.html#piecesfilters) feature when using dynamic choices.
+* Fix a reordering issue for arrays when dragging and dropping items in the admin UI.
+* The inline array item extract the label now using `title` as `titleField` value by default (consistent with the Slat list).
 
 ## 4.7.1 (2024-09-20)
 
@@ -14,6 +36,10 @@
 
 ## 4.7.0 (2024-09-05)
 
+### Changes
+
+* UI and UX of inline arrays and their table styles
+
 ### Adds
 
 * To aid debugging, when a file extension is unacceptable as an Apostrophe attachment the rejected extension is now printed as part of the error message.
@@ -51,6 +77,9 @@ This resolves the issue for new uploads.
 * Fix widget focus state so that the in-context Add Content menu stays visible during animation.
 * Fix UI of areas in schemas so that their context menus are layered overtop sibling schema fields UI.
 
+### Removes
+* Inline array option for `alwaysOpen` replaced with UI toggles
+
 ## 4.6.0 (2024-08-08)
 
 ### Adds
@@ -78,6 +107,7 @@ The shape of the relationship field is still validated.
 
 ### Fixes
 
+* Fixes the rendering of conditional fields in arrays where the `inline: true` option is used.
 * Fixes the rich text link tool's detection and display of the Remove Link button for removing existing links
 * Fixes the rich text link tool's detection and display of Apostrophe Page relationship field.
 * Overriding standard Vue.js components with `editorModal` and `managerModal` are now applied all the time.

package/index.js

@@ -300,7 +300,7 @@ async function apostrophe(options, telemetry, rootSpan) {
     self.apos.schema.validateAllSchemas();
     self.apos.schema.registerAllSchemas();
     await self.apos.lock.withLock('@apostrophecms/migration:migrate', async () => {
-      await self.apos.migration.migrate(); // emits before and after events, inside the lock
+      await self.apos.migration.migrate(self.argv);
       // Inserts the global doc in the default locale if it does not exist; same for other
       // singleton piece types registered by other modules
       for (const module of Object.values(self.modules)) {

package/lib/moog.js

@@ -170,7 +170,7 @@ module.exports = function(options) {
       }
       for (const key of Object.keys(step)) {
         if (!(validKeys.includes(key) || cascades.includes(key))) {
-          const message = upgradeHints[key] || `${key} is not a valid top level property for an Apostrophe 3.x module. Make sure you nest regular module options in the new "options" property.`;
+          const message = upgradeHints[key] || `${key} is not a valid top level property for an Apostrophe module. Make sure you nest regular module options in the "options" property.`;
           throw `${clarifyModuleName(step.__meta.name)}: ${message}`;
         }
       }

package/modules/@apostrophecms/admin-bar/index.js

@@ -14,6 +14,56 @@ module.exports = {
     pageTree: true
   },
   commands(self) {
+    const breakpointPreviewModeScreens = (
+      self.apos.asset.options.breakpointPreviewMode?.enable &&
+      self.apos.asset.options.breakpointPreviewMode?.screens
+    ) || {};
+    const breakpointPreviewModeCommands = {
+      [`${self.__meta.name}:toggle-breakpoint-preview-mode:exit`]: {
+        type: 'item',
+        label: {
+          key: 'apostrophe:commandMenuToggleBreakpointPreviewMode',
+          breakpoint: '$t(apostrophe:breakpointPreviewExit)'
+        },
+        action: {
+          type: 'command-menu-admin-bar-toggle-breakpoint-preview-mode',
+          payload: {
+            mode: null,
+            width: null,
+            height: null
+          }
+        },
+        shortcut: 'P,0'
+      }
+    };
+    let index = 1;
+    for (const [ name, screen ] of Object.entries(breakpointPreviewModeScreens)) {
+      // Up to 9 shortcuts available
+      if (index === 9) {
+        break;
+      }
+
+      breakpointPreviewModeCommands[`${self.__meta.name}:toggle-breakpoint-preview-mode:${name}`] = {
+        type: 'item',
+        label: {
+          key: 'apostrophe:commandMenuToggleBreakpointPreviewMode',
+          breakpoint: `$t(${screen.label})`
+        },
+        action: {
+          type: 'command-menu-admin-bar-toggle-breakpoint-preview-mode',
+          payload: {
+            mode: name,
+            label: `$t(${screen.label})`,
+            width: screen.width,
+            height: screen.height
+          }
+        },
+        shortcut: `P,${index}`
+      };
+
+      index += 1;
+    };
+
     return {
       add: {
         [`${self.__meta.name}:undo`]: {
@@ -63,7 +113,8 @@ module.exports = {
             type: 'command-menu-admin-bar-toggle-publish-draft'
           },
           shortcut: 'Ctrl+Shift+D Meta+Shift+D'
-        }
+        },
+        ...breakpointPreviewModeCommands
       },
       modal: {
         default: {
@@ -80,7 +131,8 @@ module.exports = {
             label: 'apostrophe:commandMenuMode',
             commands: [
               `${self.__meta.name}:toggle-edit-preview-mode`,
-              `${self.__meta.name}:toggle-published-draft-document`
+              `${self.__meta.name}:toggle-published-draft-document`,
+              ...Object.keys(breakpointPreviewModeCommands)
             ]
           }
         }
@@ -355,6 +407,13 @@ module.exports = {
             aposLocale: context.aposLocale,
             aposDocId: context.aposDocId
           },
+          breakpointPreviewMode: self.apos.asset.options.breakpointPreviewMode ||
+            {
+              enable: false,
+              debug: false,
+              resizable: false,
+              screens: {}
+            },
           // Base API URL appropriate to the context document
           contextBar: context && self.apos.doc.getManager(context.type).options.contextBar,
           showAdminBar: self.getShowAdminBar(req),

package/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextBreakpointPreviewMode.vue

@@ -0,0 +1,166 @@
+<template>
+  <div
+    data-apos-test="breakpointPreviewMode"
+    class="apos-admin-bar__breakpoint-preview-mode"
+  >
+    <component
+      :is="'AposButton'"
+      v-for="(screen, name) in screens"
+      :key="name"
+      :data-apos-test="`breakpointPreviewMode:${name}`"
+      :modifiers="['small', 'no-motion']"
+      :label="screen.label"
+      :title="$t(screen.label)"
+      :icon="screen.icon"
+      :icon-only="true"
+      type="subtle"
+      class="apos-admin-bar__breakpoint-preview-mode-button"
+      :class="{ 'apos-is-active': mode === name }"
+      @click="toggleBreakpointPreviewMode({ mode: name, label: screen.label, width: screen.width, height: screen.height })"
+    />
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'TheAposContextBreakpointPreviewMode',
+  props: {
+    // { screenName: { label: string, width: string, height: string, icon: string } }
+    screens: {
+      type: Object,
+      validator(value, props) {
+        return Object.values(value).every(screen =>
+          typeof screen.label === 'string' &&
+          typeof screen.width === 'string' &&
+          typeof screen.height === 'string' &&
+          typeof screen.icon === 'string'
+        );
+      },
+      default: () => {
+        return {};
+      }
+    },
+    resizable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: [ 'switch-breakpoint-preview-mode', 'reset-breakpoint-preview-mode' ],
+  data() {
+    return {
+      mode: null,
+      originalBodyBackground: null
+    };
+  },
+  mounted() {
+    apos.bus.$on('command-menu-admin-bar-toggle-breakpoint-preview-mode', this.toggleBreakpointPreviewMode);
+
+    this.originalBodyBackground = window.getComputedStyle(document.querySelector('body'))?.background ||
+      '#fff';
+
+    const state = this.loadState();
+    if (state.mode) {
+      this.toggleBreakpointPreviewMode(state);
+    }
+  },
+  unmounted() {
+    apos.bus.$off('command-menu-admin-bar-toggle-breakpoint-preview-mode', this.toggleBreakpointPreviewMode);
+  },
+  methods: {
+    switchBreakpointPreviewMode({
+      mode,
+      label,
+      width,
+      height
+    }) {
+      document.querySelector('body').setAttribute('data-breakpoint-preview-mode', mode);
+      document.querySelector('[data-apos-refreshable]').setAttribute('data-resizable', this.resizable);
+      document.querySelector('[data-apos-refreshable]').setAttribute('data-label', this.$t(label));
+      document.querySelector('[data-apos-refreshable]').style.width = width;
+      document.querySelector('[data-apos-refreshable]').style.height = height;
+      document.querySelector('[data-apos-refreshable]').style.background = this.originalBodyBackground;
+
+      this.mode = mode;
+      this.$emit('switch-breakpoint-preview-mode', {
+        mode,
+        label,
+        width,
+        height
+      });
+      this.saveState({
+        mode,
+        label,
+        width,
+        height
+      });
+    },
+    toggleBreakpointPreviewMode({
+      mode,
+      label,
+      width,
+      height
+    }) {
+      if (this.mode === mode || mode === null) {
+        document.querySelector('body').removeAttribute('data-breakpoint-preview-mode');
+        document.querySelector('[data-apos-refreshable]').removeAttribute('data-resizable');
+        document.querySelector('[data-apos-refreshable]').removeAttribute('data-label');
+        document.querySelector('[data-apos-refreshable]').style.removeProperty('width');
+        document.querySelector('[data-apos-refreshable]').style.removeProperty('height');
+        document.querySelector('[data-apos-refreshable]').style.removeProperty('background');
+
+        this.mode = null;
+        this.$emit('reset-breakpoint-preview-mode');
+        this.saveState({ mode: this.mode });
+
+        return;
+      }
+
+      this.switchBreakpointPreviewMode({
+        mode,
+        label,
+        width,
+        height
+      });
+    },
+    loadState() {
+      return JSON.parse(sessionStorage.getItem('aposBreakpointPreviewMode') || '{}');
+    },
+    saveState({
+      mode = null,
+      label = null,
+      width = null,
+      height = null
+    } = {}) {
+      const state = this.loadState();
+      if (state.mode !== mode) {
+        sessionStorage.setItem(
+          'aposBreakpointPreviewMode',
+          JSON.stringify({
+            mode,
+            label,
+            width,
+            height
+          })
+        );
+      }
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.apos-admin-bar__breakpoint-preview-mode {
+  display: flex;
+  gap: $spacing-half;
+  margin-left: $spacing-double;
+}
+
+.apos-admin-bar__breakpoint-preview-mode-button {
+  &.apos-is-active {
+    color: var(--a-text-primary);
+    text-decoration: none;
+    background-color: var(--a-base-10);
+    border-radius: var(--a-border-radius);
+    outline: 1px solid var(--a-base-7);
+  }
+}
+</style>

package/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextTitle.vue

@@ -50,6 +50,13 @@
         :tooltip="tooltip"
         :modifiers="modifiers"
       />
+      <TheAposContextBreakpointPreviewMode
+        v-if="isBreakpointPreviewModeEnabled"
+        :screens="breakpointPreviewModeScreens"
+        :resizable="breakpointPreviewModeResizable"
+        @switch-breakpoint-preview-mode="addContextLabel"
+        @reset-breakpoint-preview-mode="removeContextLabel"
+      />
     </span>
   </transition-group>
 </template>
@@ -94,6 +101,15 @@ export default {
     isUnpublished() {
       return !this.context.lastPublishedAt;
     },
+    isBreakpointPreviewModeEnabled() {
+      return this.moduleOptions.breakpointPreviewMode.enable || false;
+    },
+    breakpointPreviewModeScreens() {
+      return this.moduleOptions.breakpointPreviewMode.screens || {};
+    },
+    breakpointPreviewModeResizable() {
+      return this.moduleOptions.breakpointPreviewMode.resizable || false;
+    },
     docTooltip() {
       return {
         key: 'apostrophe:lastUpdatedBy',
@@ -142,6 +158,15 @@ export default {
     },
     switchDraftMode(mode) {
       this.$emit('switch-draft-mode', mode);
+    },
+    addContextLabel({
+      label
+    }) {
+      document.querySelector('[data-apos-context-label]')
+        ?.replaceChildren(document.createTextNode(this.$t(label)));
+    },
+    removeContextLabel() {
+      document.querySelector('[data-apos-context-label]')?.replaceChildren();
     }
   }
 };

package/modules/@apostrophecms/area/ui/apos/components/AposAreaEditor.vue

@@ -75,6 +75,7 @@
 import { createId } from '@paralleldrive/cuid2';
 import { klona } from 'klona';
 import AposThemeMixin from 'Modules/@apostrophecms/ui/mixins/AposThemeMixin';
+import newInstance from 'apostrophe/modules/@apostrophecms/schema/lib/newInstance.js';
 
 export default {
   name: 'AposAreaEditor',
@@ -595,21 +596,11 @@ export default {
     // Return a new widget object in which defaults are fully populated,
     // especially valid sub-area objects, so that nested edits work on the page
     newWidget(type) {
+      const schema = apos.modules[apos.area.widgetManagers[type]].schema;
       const widget = {
+        ...newInstance(schema),
         type
       };
-      const schema = apos.modules[apos.area.widgetManagers[type]].schema;
-      schema.forEach(field => {
-        if (field.type === 'area') {
-          widget[field.name] = {
-            _id: createId(),
-            metaType: 'area',
-            items: []
-          };
-        } else {
-          widget[field.name] = field.def ? klona(field.def) : field.def;
-        }
-      });
       return widget;
     }
   }

package/modules/@apostrophecms/asset/index.js

@@ -44,7 +44,47 @@ module.exports = {
     rebundleModules: undefined,
     // In case of external front end like Astro, this option allows to
     // disable the build of the public UI assets.
-    publicBundle: true
+    publicBundle: true,
+    // Breakpoint preview in the admin UI.
+    // NOTE: the whole breakpointPreviewMode option must be carried over
+    // to the project for overrides to work properly.
+    // Nested object options are not deep merged in Apostrophe.
+    breakpointPreviewMode: {
+      // Enable breakpoint preview mode
+      enable: true,
+      // Warn during build about unsupported media queries.
+      debug: false,
+      // If we can resize the preview container?
+      resizable: false,
+      // Screens with icons
+      // For adding icons, please refer to the icons documentation
+      // https://docs.apostrophecms.org/reference/module-api/module-overview.html#icons
+      screens: {
+        desktop: {
+          label: 'apostrophe:breakpointPreviewDesktop',
+          width: '1440px',
+          height: '900px',
+          icon: 'monitor-icon'
+        },
+        tablet: {
+          label: 'apostrophe:breakpointPreviewTablet',
+          width: '1024px',
+          height: '768px',
+          icon: 'tablet-icon'
+        },
+        mobile: {
+          label: 'apostrophe:breakpointPreviewMobile',
+          width: '414px',
+          height: '896px',
+          icon: 'cellphone-icon'
+        }
+      },
+      // Transform method used on media feature
+      // Can be either:
+      // - (mediaFeature) => { return mediaFeature.replaceAll('xx', 'yy'); }
+      // - null
+      transform: null
+    }
   },
 
   async init(self) {

package/modules/@apostrophecms/asset/lib/globalIcons.js

@@ -11,12 +11,15 @@ module.exports = {
   'apple-keyboard-shift': 'AppleKeyboardShift',
   'archive-arrow-down-icon': 'ArchiveArrowDown',
   'archive-arrow-up-icon': 'ArchiveArrowUp',
+  'arrow-collapse-vertical-icon': 'ArrowCollapseVertical',
   'arrow-down-icon': 'ArrowDown',
+  'arrow-expand-vertical-icon': 'ArrowExpandVertical',
   'arrow-left-icon': 'ArrowLeft',
   'arrow-right-icon': 'ArrowRight',
   'arrow-up-icon': 'ArrowUp',
   'binoculars-icon': 'Binoculars',
   'calendar-icon': 'Calendar',
+  'cellphone-icon': 'Cellphone',
   'check-all-icon': 'CheckAll',
   'check-bold-icon': 'CheckBold',
   'check-circle-icon': 'CheckCircle',
@@ -96,6 +99,7 @@ module.exports = {
   'menu-down-icon': 'MenuDown',
   'minus-box-icon': 'MinusBox',
   'minus-icon': 'Minus',
+  'monitor-icon': 'Monitor',
   'paperclip-icon': 'Paperclip',
   'pencil-icon': 'Pencil',
   'phone-icon': 'Phone',
@@ -105,8 +109,10 @@ module.exports = {
   'refresh-icon': 'Refresh',
   'shape-icon': 'Shape',
   'sign-text-icon': 'SignText',
+  'tablet-icon': 'Tablet',
   'tag-icon': 'Tag',
   'text-box-icon': 'TextBox',
+  'text-box-multiple-icon': 'TextBoxMultiple',
   'text-box-remove-icon': 'TextBoxRemove',
   'trash-can-icon': 'TrashCan',
   'trash-can-outline-icon': 'TrashCanOutline',

package/modules/@apostrophecms/asset/lib/webpack/apos/webpack.scss.js

@@ -1,4 +1,16 @@
+const path = require('path');
+
 module.exports = (options, apos) => {
+  const mediaToContainerQueriesLoader = apos.asset.options.breakpointPreviewMode?.enable === true
+    ? {
+      loader: path.resolve(__dirname, '../media-to-container-queries-loader.js'),
+      options: {
+        debug: apos.asset.options.breakpointPreviewMode?.debug === true,
+        transform: apos.asset.options.breakpointPreviewMode?.transform || null
+      }
+    }
+    : '';
+
   return {
     module: {
       rules: [
@@ -6,28 +18,16 @@ module.exports = (options, apos) => {
           test: /\.css$/,
           use: [
             'vue-style-loader',
-            // https://github.com/vuejs/vue-style-loader/issues/46#issuecomment-670624576
-            {
-              loader: 'css-loader',
-              options: {
-                esModule: false,
-                sourceMap: true
-              }
-            }
+            mediaToContainerQueriesLoader,
+            'css-loader'
           ]
         },
-        // https://github.com/vuejs/vue-style-loader/issues/46#issuecomment-670624576
         {
           test: /\.s[ac]ss$/,
           use: [
             'vue-style-loader',
-            {
-              loader: 'css-loader',
-              options: {
-                esModule: false,
-                sourceMap: true
-              }
-            },
+            mediaToContainerQueriesLoader,
+            'css-loader',
             {
               loader: 'postcss-loader',
               options: {

package/modules/@apostrophecms/asset/lib/webpack/media-to-container-queries-loader.js

@@ -0,0 +1,94 @@
+const postcss = require('postcss');
+
+module.exports = function (source) {
+  const schema = {
+    title: 'Media to Container Queries Loader options',
+    type: 'object',
+    properties: {
+      debug: {
+        type: 'boolean'
+      },
+      transform: {
+        anyOf: [
+          { type: 'null' },
+          { instanceof: 'Function' }
+        ]
+      }
+    }
+  };
+  const options = this.getOptions(schema);
+
+  const mediaQueryRegex = /@media[^{]*{([\s\S]*?})\s*(\\n)*}/g;
+
+  const convertToContainerQuery = (mediaFeature) => {
+    // NOTE: media queries does not work with the combo
+    // - min-width, max-width, min-height, max-height
+    // - lower than equal, greater than equal
+    const DESCRIPTORS = [
+      'min-width',
+      'max-width',
+      'min-height',
+      'max-height'
+    ];
+    const OPERATORS = [
+      '>=',
+      '<='
+    ];
+
+    const containerFeature = typeof options.transform === 'function'
+      ? options.transform(mediaFeature)
+      : mediaFeature;
+
+    if (
+      options.debug &&
+      DESCRIPTORS.some(descriptor => containerFeature.includes(descriptor)) &&
+      OPERATORS.some(operator => containerFeature.includes(operator))
+    ) {
+      console.warn('[mediaToContainerQueryLoader] Unsupported media query', containerFeature);
+    }
+
+    return containerFeature;
+  };
+
+  // Prepend container query to media queries
+  const modifiedSource = source.replace(mediaQueryRegex, (match) => {
+    const root = postcss.parse(match.replaceAll(/(?<!\\)\\[frntv]/g, ''));
+    root.walkAtRules('media', atRule => {
+      if (
+        atRule.params.includes('print') &&
+        (!atRule.params.includes('all') || !atRule.params.includes('screen'))
+      ) {
+        return;
+      }
+
+      // Container query
+      const containerAtRule = atRule.clone({
+        name: 'container',
+        params: convertToContainerQuery(atRule.params)
+          .replaceAll(/(only\s*)?(all|screen|print)(,)?(\s)*(and\s*)?/g, '')
+      });
+
+      // Media query
+      // Only apply when data-breakpoint-preview-mode is not set
+      atRule.walkRules(rule => {
+        const newRule = rule.clone({
+          selectors: rule.selectors.map(selector => {
+            if (selector.startsWith('body')) {
+              return selector.replace('body', ':where(body:not([data-breakpoint-preview-mode]))');
+            }
+
+            return `:where(body:not([data-breakpoint-preview-mode])) ${selector}`;
+          })
+        });
+
+        rule.replaceWith(newRule);
+      });
+
+      root.append(containerAtRule);
+    });
+
+    return root.toString();
+  });
+
+  return modifiedSource;
+};

package/modules/@apostrophecms/asset/lib/webpack/src/webpack.scss.js

@@ -1,6 +1,17 @@
+const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = (options, apos, srcBuildNames) => {
+  const mediaToContainerQueriesLoader = apos.asset.options.breakpointPreviewMode?.enable === true
+    ? {
+      loader: path.resolve(__dirname, '../media-to-container-queries-loader.js'),
+      options: {
+        debug: apos.asset.options.breakpointPreviewMode?.debug === true,
+        transform: apos.asset.options.breakpointPreviewMode?.transform || null
+      }
+    }
+    : '';
+
   return {
     module: {
       rules: [
@@ -9,6 +20,7 @@ module.exports = (options, apos, srcBuildNames) => {
           use: [
             // Instead of style-loader, to avoid FOUC
             MiniCssExtractPlugin.loader,
+            mediaToContainerQueriesLoader,
             // Parses CSS imports and make css-loader ignore urls. Urls will still be handled by webpack
             {
               loader: 'css-loader',