fix: handle only image file extensions with the next image loader

fixes #15

examples/nextv12/pages/index.js

@@ -14,6 +14,7 @@ export default function Home() {
           Click on any one of these links to see supported features in action
         </h1>
         <Links />
+        <p className="icons"> </p>
       </main>
     </div>
   )

examples/nextv12/styles/globals.css

@@ -1,3 +1,20 @@
 main {
   font-size: 1.25rem;
 }
+
+@font-face {
+  font-family: 'iconfont';
+  src: url('../public/font/iconfont.eot?72359833');
+  src: url('../public/font/iconfont.eot?72359833#iefix')
+      format('embedded-opentype'),
+    url('../public/font/iconfont.woff2?72359833') format('woff2'),
+    url('../public/font/iconfont.woff?72359833') format('woff'),
+    url('../public/font/iconfont.ttf?72359833') format('truetype'),
+    url('../public/font/iconfont.svg?72359833#iconfont') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.icons {
+  font-family: 'iconfont';
+}

src/css/webpack.ts

@@ -20,7 +20,22 @@ export const configureCss = (
           {
             loader: 'css-loader',
             options: {
-              modules: { auto: true, getLocalIdent: getCssModuleLocalIdent }
+              // this is what nextjs is doing
+              // https://github.com/vercel/next.js/blob/b7725133f867b5e530dd4bb5d1fd8d5d389e3364/packages/next/build/webpack/config/blocks/css/loaders/global.ts#L32
+              // https://github.com/vercel/next.js/blob/b7725133f867b5e530dd4bb5d1fd8d5d389e3364/packages/next/build/webpack/config/blocks/css/loaders/file-resolve.ts
+              url: (url: string) => {
+                if (url.startsWith('/')) {
+                  return false
+                }
+                if (/^[a-z][a-z0-9+.-]*:/i.test(url)) {
+                  return false
+                }
+                return true
+              },
+              modules: {
+                auto: true,
+                getLocalIdent: getCssModuleLocalIdent
+              }
             }
           },
           'postcss-loader'
@@ -35,7 +50,7 @@ export const configureCss = (
       {
         loader: 'css-loader',
         options: {
-          modules: { auto: true, getLocalIdent: getCssModuleLocalIdent}
+          modules: { auto: true, getLocalIdent: getCssModuleLocalIdent }
         }
       },
       'postcss-loader',

src/images/webpack.ts

@@ -1,5 +1,5 @@
 import semver from 'semver'
-import { Configuration as WebpackConfig } from 'webpack'
+import { Configuration as WebpackConfig, RuleSetRule } from 'webpack'
 import { addScopedAlias, getNextjsVersion } from '../utils'
 
 export const configureImages = (baseConfig: WebpackConfig): void => {
@@ -12,23 +12,23 @@ const configureStaticImageImport = (baseConfig: WebpackConfig): void => {
   if (semver.lt(version, '11.0.0')) return
 
   const rules = baseConfig.module?.rules
-  rules?.forEach((rule, i) => {
-    if (
+  const assetRule = rules?.find(
+    rule =>
       typeof rule !== 'string' &&
       rule.test instanceof RegExp &&
       rule.test.test('test.jpg')
-    ) {
-      rules[i] = {
-        test: rule.test,
-        use: [
-          {
-            loader: require.resolve('./next-image-loader-stub'),
-            options: {
-              filename: rule.generator?.filename
-            }
-          }
-        ]
+  ) as RuleSetRule
+  assetRule.test = /\.(apng|eot|otf|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/
+  rules?.push({
+    test: /\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i,
+    issuer: { not: /\.(css|scss|sass)$/ },
+    use: [
+      {
+        loader: require.resolve('./next-image-loader-stub'),
+        options: {
+          filename: assetRule.generator?.filename
+        }
       }
-    }
+    ]
   })
 }