Only apply nextjs css fix for affected versions

lib/loaders/img-loader.js

@@ -1,3 +1,4 @@
+const compareVersions = require('compare-versions');
 const { getResourceQueries } = require('../resource-queries');
 const { getWebpResourceQuery } = require('./webp-loader');
 const { getUrlLoaderOptions } = require('./url-loader');
@@ -74,6 +75,24 @@ const getHandledFilesRegex = (handledImageTypes) => {
   return new RegExp(`\\.(${handledFiles.filter(Boolean).join('|')})$`, 'i');
 };
 
+/**
+ * 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 {
+    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
  *
@@ -97,7 +116,7 @@ const applyImgLoader = (
 
   webpackConfig.module.rules.push({
     test: getHandledFilesRegex(handledImageTypes),
-    issuer: {
+    issuer: applyInCss() ? undefined : {
       // Next.js already handles url() in css/sass/scss files
       test: /\.\w+(?<!(s?c|sa)ss)$/i,
     },

package.json

@@ -33,6 +33,7 @@
   "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",