From 6a3bd9698e08999bde5cc048a27d9038eaa3f789 Mon Sep 17 00:00:00 2001
From: Hongbo Miao <Hongbo.Miao@outlook.com>
Date: Wed, 9 Sep 2020 07:09:41 +0800
Subject: [PATCH 1/5] feat(type): add AVIF

---
 packages/react-scripts/lib/react-app.d.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/react-scripts/lib/react-app.d.ts b/packages/react-scripts/lib/react-app.d.ts
index 981cd73472c..624c875ec80 100644
--- a/packages/react-scripts/lib/react-app.d.ts
+++ b/packages/react-scripts/lib/react-app.d.ts
@@ -9,6 +9,11 @@ declare namespace NodeJS {
   }
 }
 
+declare module '*.avif' {
+  const src: string;
+  export default src;
+}
+
 declare module '*.bmp' {
   const src: string;
   export default src;

From f5fd2d97fe5347efd3c9ba8102d2d712fc12d251 Mon Sep 17 00:00:00 2001
From: Hongbo Miao <Hongbo.Miao@outlook.com>
Date: Mon, 14 Sep 2020 15:11:22 +0800
Subject: [PATCH 2/5] feat(webpack): add avif in url-loader

---
 packages/react-scripts/config/webpack.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 5e1935d8a0e..801c8b49f2e 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -388,7 +388,7 @@ module.exports = function (webpackEnv) {
             // smaller than specified limit in bytes as data URLs to avoid requests.
             // A missing `test` is equivalent to a match.
             {
-              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+              test: [/\.avif$/, /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
               loader: require.resolve('url-loader'),
               options: {
                 limit: imageInlineSizeLimit,

From 7e3cb58d17a5c2ac0ccb7a2751b43e99d55ca173 Mon Sep 17 00:00:00 2001
From: Ian Schmitz <ianschmitz@gmail.com>
Date: Wed, 30 Sep 2020 10:53:14 -0700
Subject: [PATCH 3/5] Add avif loader config

---
 packages/react-scripts/config/webpack.config.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 801c8b49f2e..5d26e6503ee 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -384,6 +384,21 @@ module.exports = function (webpackEnv) {
           // match the requirements. When no loader matches it will fall
           // back to the "file" loader at the end of the loader list.
           oneOf: [
+          // "oneOf" will traverse all following loaders until one will
+          // match the requirements. When no loader matches it will fall
+          // back to the "file" loader at the end of the loader list.
+          oneOf: [
+            // TODO: Merge this config once `image/avif` is in the mime-db
+            // https://github.com/jshttp/mime-db
+            {
+              test: [/\.avif$/],
+              loader: require.resolve('url-loader'),
+              options: {
+                limit: imageInlineSizeLimit,
+                mimetype: 'image/avif',
+                name: 'static/media/[name].[hash:8].[ext]',
+              },
+            },
             // "url" loader works like "file" loader except that it embeds assets
             // smaller than specified limit in bytes as data URLs to avoid requests.
             // A missing `test` is equivalent to a match.

From ddcb441b27421661f88bdabed62054f96cb33c14 Mon Sep 17 00:00:00 2001
From: Ian Schmitz <ianschmitz@gmail.com>
Date: Wed, 30 Sep 2020 10:53:40 -0700
Subject: [PATCH 4/5] Remove avif test from existing loader

---
 packages/react-scripts/config/webpack.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 5d26e6503ee..07828fc0abe 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -403,7 +403,7 @@ module.exports = function (webpackEnv) {
             // smaller than specified limit in bytes as data URLs to avoid requests.
             // A missing `test` is equivalent to a match.
             {
-              test: [/\.avif$/, /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
               loader: require.resolve('url-loader'),
               options: {
                 limit: imageInlineSizeLimit,

From 8f4340fdd6651af2a35108dbc920c3c457f19f60 Mon Sep 17 00:00:00 2001
From: Ian Schmitz <ianschmitz@gmail.com>
Date: Wed, 30 Sep 2020 10:54:12 -0700
Subject: [PATCH 5/5] Fix typo

---
 packages/react-scripts/config/webpack.config.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 07828fc0abe..c88bdb9809e 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -380,10 +380,6 @@ module.exports = function (webpackEnv) {
           include: paths.appSrc,
         },
         {
-          // "oneOf" will traverse all following loaders until one will
-          // match the requirements. When no loader matches it will fall
-          // back to the "file" loader at the end of the loader list.
-          oneOf: [
           // "oneOf" will traverse all following loaders until one will
           // match the requirements. When no loader matches it will fall
           // back to the "file" loader at the end of the loader list.