Overwrite nextjs builtin image handling in css files

lib/index.js

@@ -40,8 +40,29 @@ const withOptimizedImages = (nextConfig = {}, nextComposePlugins = {}) => {
  showWarning();
  }
 
+ // remove (unoptimized) builtin image processing introduced in next.js 9.2
+ if (enrichedConfig.module.rules) {
+ enrichedConfig.module.rules.forEach((rule) => {
+ if (rule.oneOf) {
+ // eslint-disable-next-line no-param-reassign
+ rule.oneOf = rule.oneOf.map((subRule) => {
+ if (
+ subRule.issuer && !subRule.test && !subRule.include && subRule.exclude
+ && subRule.use && subRule.use.options && subRule.use.options.name
+ ) {
+ if (String(subRule.issuer.test) === '/\\.(css|scss|sass)$/' && subRule.use.options.name.startsWith('static/media/')) {
+ return null;
+ }
+ }
+
+ return subRule;
+ }).filter(Boolean);
+ }
+ });
+ }
+
  // append loaders
- enrichedConfig = appendLoaders(config, getConfig(nextConfig), detectedLoaders,
+ enrichedConfig = appendLoaders(enrichedConfig, getConfig(nextConfig), detectedLoaders,
  isServer, optimizeInCurrentStep);
 
  if (typeof nextConfig.webpack === 'function') {

lib/loaders/img-loader.js

@@ -1,4 +1,3 @@
-const compareVersions = require('compare-versions');
 const { getResourceQueries } = require('../resource-queries');
 const { getWebpResourceQuery } = require('./webp-loader');
 const { getUrlLoaderOptions } = require('./url-loader');
@@ -75,44 +74,6 @@ const getHandledFilesRegex = (handledImageTypes) => {
  return new RegExp(`\\.(${handledFiles.filter(Boolean).join('|')})$`, 'i');
 };
 
-/**
-* Checks if a node module is installed in the current context
-*
-* @param {string} name - module name
-* @returns {boolean}
-*/
-const isModuleInstalled = (name) => {
- try {
- require.resolve(name);
-
- return true;
- } catch (e) {
- return false;
- }
-};
-
-/**
- * Checks if the plugin should get applied in CSS or not.
- * Since next.js version 9.2, they already handle images out of the box so it should temporarily
- * get disabled in that case to prevent breaking projects until a better solution is found.
- *
- * @return {boolean}
- */
-const applyInCss = () => {
- try {
- if (isModuleInstalled('@zeit/next-sass') || isModuleInstalled('@zeit/next-css')) {
- return true;
- }
-
- const nextJsVersion = require('next/package.json').version; // eslint-disable-line import/no-unresolved
-
- return compareVersions(nextJsVersion, '9.2.0') === -1;
- } catch (e) {
- // in case of any error, just assume the newest nextjs version is installed
- return false;
- }
-};
-
 /**
  * Apply the img loader to the webpack configuration
  *
@@ -136,10 +97,6 @@ const applyImgLoader = (
 
  webpackConfig.module.rules.push({
  test: getHandledFilesRegex(handledImageTypes),
- issuer: applyInCss() ? undefined : {
- // Next.js already handles url() in css/sass/scss files
- test: /\.\w+(?<!(s?c|sa)ss)$/i,
- },
  oneOf: [
  // add all resource queries
  ...getResourceQueries(nextConfig, isServer, optimize ? 'img-loader' : null, imgLoaderOptions, detectedLoaders),

package.json

@@ -33,7 +33,6 @@
  "homepage": "https://github.com/cyrilwanner/next-optimized-images#readme",
  "dependencies": {
  "chalk": "^2.4.2",
- "compare-versions": "^3.6.0",
  "figures": "^3.0.0",
  "file-loader": "^3.0.1",
  "imagemin": "^6.1.0",