apostrophe 3.21.0 → 3.21.1-alpha.2022060701

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## UNRELEASED
+
+### Adds
+
+* Possibility to pass options to webpack extensions from any module.
+
+### Fixes
+
+* Fix a Webpack cache issue leading to modules symlinked in `node_modules` not being rebuilt. 
+* Fixes login maximum attempts error message that wasn't showing the plural when lockoutMinutes is more than 1.
+* Fixes the text color of the current array item's slat label in the array editor modal 
+* Fixes the maximum width of an array item's slat label so as to not obscure the Remove button in narrow viewports
+
+### Changes
+
+* If an array field's titleField option is set to a select field, use the selected option's label as the slat label rather it's value.
+* Disable the slat controls of the attachment component while uploading.
+* Fixes bug when re-attaching the same file won't trigger an upload.
+* AposSlat now fully respects the disabled state.
+
+## 3.21.1 (2022-06-04)
+
+### Fixes
+
+* Work around backwards compatibility break in `sass` module by pinning to `sass` `1.50.x` while we investigate. If you saw the error `RangeError: Invalid value: Not in inclusive range 0..145: -1` you can now fix that by upgrading with `npm update`. If it does not immediately clear up the issue in development, try `node app @apostrophecms/asset:clear-cache`.
+ 
 ## 3.21.0 (2022-05-25)
 
 ### Adds

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

@@ -49,13 +49,16 @@ module.exports = {
     self.configureBuilds();
     self.initUploadfs();
 
-    const { extensions, verifiedBundles } = await getWebpackExtensions({
+    const {
+      extensions = {}, extensionOptions = {}, verifiedBundles = {}
+    } = await getWebpackExtensions({
       getMetadata: self.apos.synth.getMetadata,
       modulesToInstantiate: self.apos.modulesToBeInstantiated()
     });
 
     self.extraBundles = fillExtraBundles(verifiedBundles);
     self.webpackExtensions = extensions;
+    self.webpackExtensionOptions = extensionOptions;
     self.verifiedBundles = verifiedBundles;
     self.buildWatcherEnable = process.env.APOS_ASSET_WATCH !== '0' && self.options.watch !== false;
     self.buildWatcherDebounceMs = parseInt(self.options.watchDebounceMs || 1000, 10);
@@ -125,6 +128,7 @@ module.exports = {
           const buildDir = `${self.apos.rootDir}/apos-build/${namespace}`;
           const bundleDir = `${self.apos.rootDir}/public/apos-frontend/${namespace}`;
           const modulesToInstantiate = self.apos.modulesToBeInstantiated();
+          const symLinkModules = await findNodeModulesSymlinks(self.apos.npmRootDir);
           // Make it clear if builds should detect changes
           const detectChanges = typeof argv.changes === 'string';
           // Remove invalid changes. `argv.changes` is a comma separated list of relative
@@ -353,9 +357,16 @@ module.exports = {
                 ? webpackMerge(webpackInstanceConfig, ...Object.values(self.webpackExtensions))
                 : webpackInstanceConfig;
 
-              // Inject the cache location at the end - we need the merged
-              const cacheMeta = await computeCacheMeta(name, webpackInstanceConfigMerged);
+              // Inject the cache location at the end - we need the merged config
+              const cacheMeta = await computeCacheMeta(name, webpackInstanceConfigMerged, symLinkModules);
               webpackInstanceConfigMerged.cache.cacheLocation = cacheMeta.location;
+              // Exclude symlinked modules from the cache managedPaths, no other way for now
+              // https://github.com/webpack/webpack/issues/12112
+              if (cacheMeta.managedPathsRegex) {
+                webpackInstanceConfigMerged.snapshot = {
+                  managedPaths: [ cacheMeta.managedPathsRegex ]
+                };
+              }
 
               const result = await webpack(webpackInstanceConfigMerged);
               await writeCacheMeta(name, cacheMeta);
@@ -716,7 +727,7 @@ module.exports = {
           // but it can be overridden by an APOS_ASSET_CACHE environment.
           // In order to compute an accurate hash, this helper needs
           // the final, merged webpack configuration.
-          async function computeCacheMeta(name, webpackConfig) {
+          async function computeCacheMeta(name, webpackConfig, symLinkModules) {
             const cacheBase = self.getCacheBasePath();
 
             if (!packageLockContentCached) {
@@ -759,10 +770,22 @@ module.exports = {
             );
             const location = path.resolve(cacheBase, hash);
 
+            // Retrieve symlinkModules and convert them to managedPaths regex rule
+            let managedPathsRegex;
+            if (symLinkModules.length > 0) {
+              const regex = symLinkModules
+                .map(m => self.apos.util.regExpQuote(m))
+                .join('|');
+              managedPathsRegex = new RegExp(
+                '^(.+?[\\/]node_modules)[\\/]((?!' + regex + ')).*[\\/]*'
+              );
+            }
+
             return {
               base: cacheBase,
               hash,
-              location
+              location,
+              managedPathsRegex
             };
           }
 

package/modules/@apostrophecms/asset/lib/webpack/utils.js

@@ -3,7 +3,8 @@ const path = require('path');
 
 module.exports = {
   checkModulesWebpackConfig(modules, t) {
-    const allowedProperties = [ 'extensions', 'bundles' ];
+    const allowedProperties = [ 'extensions', 'extensionOptions', 'bundles' ];
+
     for (const mod of Object.values(modules)) {
       const webpackConfig = mod.__meta.webpack[mod.__meta.name];
 
@@ -18,7 +19,8 @@ module.exports = {
         Object.keys(webpackConfig).some((prop) => !allowedProperties.includes(prop))
       ) {
         const error = t('apostrophe:assetWebpackConfigWarning', {
-          module: mod.__meta.name
+          module: mod.__meta.name,
+          properties: allowedProperties.join(', ')
         });
 
         throw new Error(error);
@@ -51,7 +53,9 @@ module.exports = {
     const modulesMeta = modulesToInstantiate
       .map((name) => getMetadata(name));
 
-    const { extensions, foundBundles } = getModulesWebpackConfigs(
+    const {
+      extensions, extensionOptions, foundBundles
+    } = getModulesWebpackConfigs(
       modulesMeta
     );
 
@@ -59,6 +63,7 @@ module.exports = {
 
     return {
       extensions,
+      extensionOptions,
       verifiedBundles
     };
   },
@@ -173,42 +178,58 @@ async function findSymlinks(where, sub = '') {
 }
 
 function getModulesWebpackConfigs (modulesMeta) {
-  const { extensions, bundles } = modulesMeta.reduce((acc, meta) => {
+  const {
+    extensions, extensionOptions, bundles
+  } = modulesMeta.reduce((modulesAcc, meta) => {
     const { webpack, __meta } = meta;
 
     const configs = formatConfigs(__meta.chain, webpack);
 
     if (!configs.length) {
-      return acc;
+      return modulesAcc;
     }
 
-    const moduleBundles = configs.reduce((acc, conf) => {
-      return {
+    const reduce = (list, prop) => {
+      return list.reduce((acc, cur) => ({
         ...acc,
-        ...conf.bundles
-      };
-    }, {});
+        ...cur[prop] || {}
+      }), {});
+    };
+
+    const extensionOptions = configs.reduce((acc, { extensionOptions = {} }) => {
+      return [
+        ...acc,
+        extensionOptions
+      ];
+    }, []);
 
     return {
       extensions: {
-        ...acc.extensions,
-        ...configs.reduce((acc, config) => ({
-          ...acc,
-          ...config.extensions
-        }), {})
+        ...modulesAcc.extensions,
+        ...reduce(configs, 'extensions')
       },
+      extensionOptions: [
+        ...modulesAcc.extensionOptions,
+        ...extensionOptions
+      ],
       bundles: {
-        ...acc.bundles,
-        ...moduleBundles
+        ...modulesAcc.bundles,
+        ...reduce(configs, 'bundles')
       }
     };
   }, {
     extensions: {},
+    extensionOptions: [],
     bundles: {}
   });
 
+  const formattedOptions = formatExtensionsOptions(extensionOptions);
+
+  const { exts, options } = fillExtensionsOptions(extensions, formattedOptions);
+
   return {
-    extensions,
+    extensions: exts,
+    extensionOptions: options,
     foundBundles: flattenBundles(bundles)
   };
 };
@@ -223,8 +244,8 @@ async function verifyBundlesEntryPoints (bundles) {
 
     return {
       bundleName,
-      ...jsFileExists && { jsPath: jsPath },
-      ...scssFileExists && { scssPath: scssPath }
+      ...jsFileExists && { jsPath },
+      ...scssFileExists && { scssPath }
     };
   });
 
@@ -263,10 +284,13 @@ function formatConfigs (chain, webpackConfigs) {
         return null;
       }
 
-      const { bundles = {}, extensions = {} } = config;
+      const {
+        bundles = {}, extensions = {}, extensionOptions = {}
+      } = config;
 
       return {
         extensions,
+        extensionOptions,
         bundles: {
           [name]: {
             bundleNames: Object.keys(bundles),
@@ -289,3 +313,66 @@ function flattenBundles (bundles) {
       ];
     }, []);
 }
+
+function fillExtensionsOptions (extensions, options) {
+  const isObject = (val) => val &&
+    typeof val === 'object' && !Array.isArray(val);
+
+  return Object.entries(extensions).reduce((acc, [ name, config ]) => {
+    if (isObject(config)) {
+      return {
+        ...acc,
+        exts: {
+          ...acc.exts,
+          [name]: config
+        }
+      };
+    }
+
+    if (typeof config !== 'function') {
+      return acc;
+    }
+
+    const computedOptions = computeOptions(options[name] || [], isObject);
+
+    return {
+      exts: {
+        ...acc.exts,
+        [name]: config(computedOptions)
+      },
+      options: {
+        ...acc.options,
+        [name]: computedOptions
+      }
+    };
+  }, {
+    exts: {},
+    options: {}
+  });
+
+  function computeOptions (options, isObject) {
+    return options.reduce((acc, option) => {
+      if (!isObject(option) && typeof option !== 'function') {
+        return acc;
+      }
+
+      return {
+        ...acc,
+        ...isObject(option) ? option : option(acc)
+      };
+    }, {});
+  }
+}
+
+function formatExtensionsOptions (options) {
+  return options.reduce(
+    (acc, current) => {
+      return {
+        ...acc,
+        ...Object.fromEntries(Object.entries(current)
+          .map(([ ext, option ]) => [ ext, [ option, ...(acc[ext] || []) ] ]))
+      };
+    },
+    {}
+  );
+}

package/modules/@apostrophecms/i18n/i18n/en.json

@@ -33,7 +33,7 @@
   "aspectRatioWarning": "The aspect ratio cannot be changed for this widget",
   "assetTypeBuildComplete": "👍 {{ label }} is complete!",
   "assetTypeBuilding": "🧑‍💻 Building the {{ label }}...",
-  "assetWebpackConfigWarning": "⚠️ In the module {{ module }}, your webpack config is incorrect. It must be an object and should contain only two properties extensions and bundles.",
+  "assetWebpackConfigWarning": "⚠️ In the module {{ module }}, your webpack config is incorrect. It must be an object and should contain only the properties: {{ properties }}.",
   "assetWebpackBundlesWarning": "⚠️ In the module {{ module }} your webpack config is incorrect. Each bundle can only have one property 'templates' that must be an array of strings.",
   "assetWebpackCacheCleared": "Build cache cleared.",
   "assetBuildWatchStarted": "Watching for UI changes...",
@@ -121,6 +121,7 @@
   "errorCount": "{{ count }} error remaining",
   "errorCount_plural": "{{ count }} errors remaining",
   "errorCreatingNewContent": "Error while creating new, empty content.",
+  "errorFetchingTitleFieldChoicesByMethod": "An error occurred while fetching the choices for the titleField {{ name }}",
   "errorWhileRestoring": "An error occurred while restoring the previously published version.",
   "errorWhileUnpublishing": "An error occurred while unpublishing the document.",
   "errorWhileArchiving": "An error occurred while moving the document to the archive.",

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

@@ -202,7 +202,9 @@ module.exports = {
             .checkLoginAttempts(user.username, loginNamespace);
 
           if (reached) {
-            throw self.apos.error('invalid', req.t('apostrophe:loginMaxAttemptsReached'));
+            throw self.apos.error('invalid', req.t('apostrophe:loginMaxAttemptsReached', {
+              count: self.options.throttle.lockoutMinutes
+            }));
           }
 
           try {

package/modules/@apostrophecms/schema/ui/apos/components/AposArrayEditor.vue

@@ -121,6 +121,7 @@ export default {
         type: 'overlay',
         showModal: false
       },
+      titleFieldChoices: null,
       // If we don't clone, then we're making
       // permanent modifications whether the user
       // clicks save or not
@@ -210,6 +211,8 @@ export default {
       await this.nextTick();
       aposSchema.scrollFieldIntoView(name);
     }
+    this.titleFieldChoices = await this.getTitleFieldChoices();
+
   },
   methods: {
     async select(_id) {
@@ -354,7 +357,19 @@ export default {
     label(item) {
       let candidate;
       if (this.field.titleField) {
+
+        // Initial field value
         candidate = get(item, this.field.titleField);
+
+        // If the titleField references a select input, use the
+        // select label as the slat label, rather than the value.
+        if (this.titleFieldChoices) {
+          const choice = this.titleFieldChoices.find(choice => choice.value === candidate);
+          if (choice && choice.label) {
+            candidate = choice.label;
+          }
+        }
+
       } else if (this.schema.find(field => field.name === 'title') && (item.title !== undefined)) {
         candidate = item.title;
       }
@@ -374,6 +389,42 @@ export default {
         title: this.label(item)
       }));
       return result;
+    },
+    async getTitleFieldChoices() {
+      // If the titleField references a select input, get it's choices
+      // to use as labels for the slat UI
+
+      let choices = null;
+      const titleField = this.schema.find(field => field.name === this.field.titleField);
+
+      // The titleField is a select
+      if (titleField?.choices) {
+
+        // Choices are provided by a method
+        if (typeof titleField.choices === 'string') {
+          const action = `${this.moduleOptions.action}/choices`;
+          try {
+            const result = await apos.http.get(
+              action,
+              {
+                qs: {
+                  fieldId: titleField._id
+                }
+              }
+            );
+            if (result && result.choices) {
+              choices = result.choices;
+            }
+          } catch (e) {
+            console.error(this.$t('apostrophe:errorFetchingTitleFieldChoicesByMethod', { name: titleField.name }));
+          }
+
+        // Choices are a normal, hardcoded array
+        } else if (Array.isArray(titleField.choices)) {
+          choices = titleField.choices;
+        }
+      }
+      return choices;
     }
   }
 };

package/modules/@apostrophecms/ui/ui/apos/components/AposFile.vue

@@ -24,6 +24,7 @@
         </template>
       </p>
       <input
+        ref="uploadField"
         type="file"
         class="apos-sr-only"
         :disabled="disabled || fileOrAttachment"
@@ -35,7 +36,7 @@
       <AposSlatList
         :value="[fileOrAttachment]"
         @input="update"
-        :disabled="readOnly"
+        :disabled="attachmentDisabled"
       />
     </div>
   </div>
@@ -77,10 +78,13 @@ export default {
     };
   },
   computed: {
-    fileOrAttachment () {
+    fileOrAttachment() {
       return this.selectedFile || this.attachment;
     },
-    messages () {
+    attachmentDisabled() {
+      return this.uploading || this.readOnly || this.disabled;
+    },
+    messages() {
       const msgs = {
         primary: 'Drop a file here or',
         highlighted: 'click to open the file explorer'
@@ -100,6 +104,7 @@ export default {
     async uploadFile ({ target, dataTransfer }) {
       this.dragging = false;
       const [ file ] = target.files ? target.files : (dataTransfer.files || []);
+      this.resetField();
 
       const extension = file.name.split('.').pop();
       const allowedFile = await this.checkFileGroup(`.${extension}`);
@@ -117,6 +122,9 @@ export default {
 
       this.$emit('upload-file', file);
     },
+    resetField() {
+      this.$refs.uploadField.value = null;
+    },
     dragHandler (event) {
       event.preventDefault();
 

package/modules/@apostrophecms/ui/ui/apos/components/AposSlat.vue

@@ -8,7 +8,8 @@
       :class="{
         'apos-is-engaged': engaged,
         'apos-is-only-child': slatCount === 1,
-        'apos-is-selected': selected
+        'apos-is-selected': selected,
+        'apos-is-disabled': disabled,
       }"
       @keydown.prevent.space="toggleEngage"
       @keydown.prevent.enter="toggleEngage"
@@ -33,6 +34,7 @@
           @item-clicked="$emit('item-clicked', item)"
           menu-placement="bottom-start"
           menu-offset="40, 10"
+          disabled="disabled"
         />
         <AposButton
           class="apos-slat__editor-btn"
@@ -46,6 +48,7 @@
           :icon-only="true"
           :modifiers="['inline']"
           @click="$emit('item-clicked', item)"
+          disabled="disabled"
         />
         <a
           class="apos-slat__control apos-slat__control--view"
@@ -222,6 +225,12 @@ export default {
     color: var(--a-text-primary);
     @include apos-transition();
 
+    &.apos-is-disabled {
+      .apos-slat__control--view {
+        pointer-events: none;
+      }
+    }
+
     &:hover {
       cursor: grab;
       background-color: var(--a-base-7);
@@ -262,6 +271,9 @@ export default {
     &:hover {
       background-color: var(--a-primary-dark-10);
     }
+    .apos-slat__label {
+      color: var(--a-white);
+    }
   }
 
   .apos-slat-list__item--disabled {
@@ -274,6 +286,7 @@ export default {
   .apos-slat__main {
     display: flex;
     align-items: center;
+    max-width: 75%;
     & ::v-deep .trigger {
       /* This gets inline positioned and has doesn't provide an extra class to beef up, sorry */
       /* stylelint-disable-next-line declaration-no-important */
@@ -285,7 +298,6 @@ export default {
     @include type-small;
     overflow: hidden;
     margin-left: 5px;
-    max-width: 220px;
     white-space: nowrap;
     text-overflow: ellipsis;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apostrophe",
-  "version": "3.21.0",
+  "version": "3.21.1-alpha.2022060701",
   "description": "The Apostrophe Content Management System.",
   "main": "index.js",
   "scripts": {
@@ -103,7 +103,7 @@
     "resolve": "^1.19.0",
     "resolve-from": "^5.0.0",
     "sanitize-html": "^2.0.0",
-    "sass": "^1.50.1",
+    "sass": "1.52.1",
     "sass-loader": "^10.1.1",
     "server-destroy": "^1.0.1",
     "sluggo": "^0.3.0",
@@ -132,6 +132,7 @@
     "@babel/eslint-parser": "^7.17.0",
     "eslint": "^7.25.0",
     "eslint-config-apostrophe": "^3.4.0",
+    "eslint-plugin-n": "^15.2.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-vue": "^7.9.0",
     "mocha": "^9.1.2",

package/test/assets.js

@@ -145,7 +145,9 @@ describe('Assets', function() {
       modules
     });
 
-    const { extensions, verifiedBundles } = await getWebpackExtensions({
+    const {
+      extensions, verifiedBundles
+    } = await getWebpackExtensions({
       name: 'src',
       getMetadata: apos.synth.getMetadata,
       modulesToInstantiate: apos.modulesToBeInstantiated()
@@ -465,6 +467,7 @@ describe('Assets', function() {
     });
 
     const { meta, folders } = getCacheMeta();
+
     assert.equal(folders.length, 11);
     assert.equal(Object.keys(meta).length, 11);
     assert(!meta['default:apos_3']);
@@ -594,7 +597,7 @@ describe('Assets', function() {
     const assetPathAposJs = path.join(rootPath, 'test/public/apos-frontend/default/apos-module-bundle.js');
     const assetPathAposCss = path.join(rootPath, 'test/public/apos-frontend/default/apos-bundle.css');
     const assetContentJs = 'export default () => {};\n';
-    const assetContentScss = '.default-page {color:red};\n';
+    const assetContentScss = '.default-page {color:red;}\n';
     // Resurrect the default assets content if test has failed
     fs.writeFileSync(assetPathJs, assetContentJs, 'utf8');
     fs.writeFileSync(assetPathScss, assetContentScss, 'utf8');
@@ -633,7 +636,7 @@ describe('Assets', function() {
     );
     fs.writeFileSync(
       assetPathScss,
-      '.default-page-watcher-test-src{color:red};\n',
+      '.default-page-watcher-test-src{color:red;}\n',
       'utf8'
     );
 
@@ -719,7 +722,7 @@ describe('Assets', function() {
     const assetPathAposJs = path.join(rootPath, 'test/public/apos-frontend/default/apos-module-bundle.js');
     const assetPathAposCss = path.join(rootPath, 'test/public/apos-frontend/default/apos-bundle.css');
     const assetContentJs = 'export default () => {};\n';
-    const assetContentScss = '.default-page {color:red};\n';
+    const assetContentScss = '.default-page {color:red;}\n';
     // Resurrect the default assets content if test has failed
     fs.writeFileSync(assetPathJs, assetContentJs, 'utf8');
     fs.writeFileSync(assetPathCss, assetContentScss, 'utf8');
@@ -758,7 +761,7 @@ describe('Assets', function() {
     );
     fs.writeFileSync(
       assetPathCss,
-      '.default-page-watcher-test-public{color:red};\n',
+      '.default-page-watcher-test-public{color:red;}\n',
       'utf8'
     );
 
@@ -934,7 +937,7 @@ describe('Assets', function() {
     const assetPathScss = path.join(rootPath, 'test/modules/default-page/ui/src/index.scss');
     const assetPathPublicCss = path.join(rootPath, 'test/public/apos-frontend/default/public-bundle.css');
     const assetPathAposCss = path.join(rootPath, 'test/public/apos-frontend/default/apos-bundle.css');
-    const assetContentScss = '.default-page {color:red};\n';
+    const assetContentScss = '.default-page {color:red;}\n';
     // Resurrect the default assets content if test has failed
     fs.writeFileSync(assetPathScss, assetContentScss, 'utf8');
 
@@ -987,7 +990,7 @@ describe('Assets', function() {
     // * modify assets and recover
     fs.writeFileSync(
       assetPathScss,
-      '.default-page-watcher-test-recover{color:red};\n',
+      '.default-page-watcher-test-recover{color:red;}\n',
       'utf8'
     );
 
@@ -1060,7 +1063,7 @@ describe('Assets', function() {
     const assetPathAposJs = path.join(rootPath, 'test/public/apos-frontend/default/apos-module-bundle.js');
     const assetPathAposCss = path.join(rootPath, 'test/public/apos-frontend/default/apos-bundle.css');
     const assetContentJs = 'export default () => {};\n';
-    const assetContentScss = '.default-page {color:red};\n';
+    const assetContentScss = '.default-page {color:red;}\n';
     // Resurrect the default assets content if test has failed
     fs.writeFileSync(assetPathJs, assetContentJs, 'utf8');
     fs.writeFileSync(assetPathScss, assetContentScss, 'utf8');
@@ -1099,7 +1102,7 @@ describe('Assets', function() {
     );
     fs.writeFileSync(
       assetPathScss,
-      '.default-page-watcher-test-src{color:red};\n',
+      '.default-page-watcher-test-src{color:red;}\n',
       'utf8'
     );
 
@@ -1215,6 +1218,7 @@ describe('Assets', function() {
       );
       await Promise.delay(300);
     }
+
     await retryAssertTrue(
       async () => (await fs.readFile(assetPathPublic, 'utf8')).match(/bundle-page-watcher-test-3/),
       'Unable to verify public asset rebuilding by the watcher',
@@ -1245,8 +1249,8 @@ describe('Assets', function() {
       10000
     );
     await retryAssertTrue(
-      () => timesRebuilt === 2,
-      `Expected to rebuild 2 times, got ${timesRebuilt}`,
+      () => timesRebuilt === 3,
+      `Expected to rebuild 3 times, got ${timesRebuilt}`,
       100,
       5000
     );
@@ -1257,7 +1261,6 @@ describe('Assets', function() {
   });
 
   it('should be able to setup the debounce time', async function() {
-    await t.destroy(apos);
 
     apos = await t.create({
       root: module,
@@ -1346,6 +1349,69 @@ describe('Assets', function() {
     });
     assert(!apos.asset.buildWatcher);
     process.env.NODE_ENV = 'development';
+
+    await t.destroy(apos);
+  });
+
+  it('should pass the right options to webpack extensions from all modules', async function() {
+    const { extConfig1, extConfig2 } = getWebpackConfigsForExtensionOptions();
+
+    apos = await t.create({
+      root: module,
+      modules: {
+        'test-widget': {
+          extend: '@apostrophecms/widget-type',
+          webpack: extConfig1
+        },
+        test: {
+          extend: '@apostrophecms/piece-type',
+          webpack: extConfig2
+        }
+      }
+    });
+
+    const {
+      extensions, extensionOptions
+    } = await getWebpackExtensions({
+      name: 'src',
+      getMetadata: apos.synth.getMetadata,
+      modulesToInstantiate: apos.modulesToBeInstantiated()
+    });
+
+    assertWebpackExtensionOptions(extensions, extensionOptions);
+
+    await t.destroy(apos);
+  });
+
+  it('should allow two modules extending each others to pass options to the same webpack extension', async function() {
+    const { extConfig1, extConfig2 } = getWebpackConfigsForExtensionOptions();
+
+    apos = await t.create({
+      root: module,
+      modules: {
+        'test-widget': {
+          extend: '@apostrophecms/widget-type',
+          instantiate: false,
+          webpack: extConfig1
+        },
+        'test-widget-special': {
+          extend: 'test-widget',
+          webpack: extConfig2
+        }
+      }
+    });
+
+    assert(!apos.modules['test-widget']);
+
+    const {
+      extensions, extensionOptions
+    } = await getWebpackExtensions({
+      name: 'src',
+      getMetadata: apos.synth.getMetadata,
+      modulesToInstantiate: apos.modulesToBeInstantiated()
+    });
+
+    assertWebpackExtensionOptions(extensions, extensionOptions);
   });
 });
 
@@ -1441,3 +1507,82 @@ function loadUtils () {
     retryAssertTrue
   };
 }
+
+function assertWebpackExtensionOptions(extensions, extensionOptions) {
+  assert(extensions.ext1.mode === 'production');
+  assert(extensions.ext1.resolve.alias.testAlias === 'test-path');
+  assert(extensions.ext1.resolve.alias.ext1 === 'ext1-path');
+
+  assert(extensions.ext2.resolve.alias.ext2 === 'ext2-path');
+  assert(extensions.ext2.resolve.alias.newAlias1 === 'new-path1');
+  assert(extensions.ext2.resolve.alias.newAlias2 === 'new-path2');
+
+  assert(extensionOptions.ext1.mode === 'production');
+  assert(extensionOptions.ext1.alias.testAlias === 'test-path');
+
+  assert(extensionOptions.ext2.alias.newAlias1 === 'new-path1');
+  assert(extensionOptions.ext2.alias.newAlias2 === 'new-path2');
+}
+
+function getWebpackConfigsForExtensionOptions () {
+  return {
+    extConfig1: {
+      extensions: {
+        ext1 ({ mode, alias = {} }) {
+          return {
+            mode,
+            resolve: {
+              alias: {
+                ext1: 'ext1-path',
+                ...alias
+              }
+            }
+          };
+        },
+        ext2 ({ alias = {} }) {
+          return {
+            resolve: {
+              alias: {
+                ext2: 'ext2-path',
+                ...alias
+              }
+            }
+          };
+        }
+      },
+      extensionOptions: {
+        ext1: {
+          mode: 'production'
+        },
+        ext2 (options) {
+          return {
+            alias: {
+              newAlias1: 'new-path1',
+              ...options.alias || {}
+            }
+          };
+        }
+      }
+    },
+    extConfig2: {
+      extensionOptions: {
+        ext1(options) {
+          return {
+            alias: {
+              ...options.alias || {},
+              testAlias: 'test-path'
+            }
+          };
+        },
+        ext2 (options) {
+          return {
+            alias: {
+              newAlias2: 'new-path2',
+              ...options.alias || {}
+            }
+          };
+        }
+      }
+    }
+  };
+}

package/test/modules/default-page/ui/public/index.css

@@ -1 +1 @@
-.default-page {color:red};
+.default-page {color:red;}

package/test/modules/default-page/ui/src/index.scss

@@ -1 +1 @@
-.default-page {color:red};
+.default-page {color:red;}

package/test/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "test",
+  "dependencies": {
+    "apostrophe": "^3.0.0",
+    "improve-global": "1.0.0",
+    "improve-piece-type": "1.0.0"
+  },
+  "devDependencies": {
+    "test-bundle": "1.0.0"
+  }
+}