Implement query option for image-trace-loader

lib/loaders/image-trace-loader.js

@@ -0,0 +1,15 @@
+/**
+ * Build options for the webpack image trace loader
+ *
+ * @param {object} nextConfig - next.js configuration
+ * @returns {object}
+ */
+const getImageTraceLoaderOptions = ({
+  imageTrace,
+}) => ({
+  ...(imageTrace || {}),
+});
+
+module.exports = {
+  getImageTraceLoaderOptions,
+};

lib/loaders/webp-loader.js

@@ -59,7 +59,7 @@ const applyWebpLoader = (webpackConfig, nextConfig, optimize, isServer, detectLo
  */
 const getWebpResourceQuery = (nextConfig, isServer) => {
   const urlLoaderOptions = getUrlLoaderOptions(nextConfig, isServer);
-  const imageName = urlLoaderOptions.name.indexOf('[ext]')
+  const imageName = urlLoaderOptions.name.indexOf('[ext]') >= 0
     ? urlLoaderOptions.name.replace('[ext]', '[ext].webp')
     : `${urlLoaderOptions.name}.webp`;
 

lib/resource-queries.js

@@ -2,6 +2,7 @@ const { getUrlLoaderOptions } = require('./loaders/url-loader');
 const { getFileLoaderOptions } = require('./loaders/file-loader');
 const { getLqipLoaderOptions } = require('./loaders/lqip-loader');
 const { getResponsiveLoaderOptions } = require('./loaders/responsive-loader');
+const { getImageTraceLoaderOptions } = require('./loaders/image-trace-loader');
 
 /**
  * Configure the common resource queries
@@ -75,6 +76,17 @@ const queries = [
     ],
     optimize: false,
   },
+
+  // ?trace: generate svg image traces for placeholders
+  {
+    test: 'trace',
+    loaders: [
+      'image-trace-loader',
+      'url-loader',
+    ],
+    optimize: true,
+    combinations: ['original'],
+  },
 ];
 
 /**
@@ -115,6 +127,7 @@ const getResourceQueries = (
     'file-loader': getFileLoaderOptions(nextConfig, isServer),
     'lqip-loader': getLqipLoaderOptions(nextConfig, isServer),
     'responsive-loader': getResponsiveLoaderOptions(nextConfig, isServer, detectLoaders),
+    'image-trace-loader': getImageTraceLoaderOptions(nextConfig),
   };
 
   return queries.map((queryConfig) => {