From cd2792775e379f9583385a8fb7b03e74c0f8853e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Lorber?= <slorber@users.noreply.github.com>
Date: Thu, 6 Feb 2025 14:13:46 +0100
Subject: [PATCH] fix(ideal-image): Add issuer to ideal-image Webpack loader
 (#10910)

---
 .../docusaurus-plugin-ideal-image/src/index.ts    |   6 ++++++
 .../_docs tests/tests/images/img-tests.css        |  11 +++++++++++
 .../tests/{ => images}/img/oss_logo (2).png       | Bin
 .../tests/{ => images}/img/oss_logo.png           | Bin
 .../tests/{img-tests.mdx => images/index.mdx}     |  14 +++++++++++++-
 5 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 website/_dogfooding/_docs tests/tests/images/img-tests.css
 rename website/_dogfooding/_docs tests/tests/{ => images}/img/oss_logo (2).png (100%)
 rename website/_dogfooding/_docs tests/tests/{ => images}/img/oss_logo.png (100%)
 rename website/_dogfooding/_docs tests/tests/{img-tests.mdx => images/index.mdx} (62%)

diff --git a/packages/docusaurus-plugin-ideal-image/src/index.ts b/packages/docusaurus-plugin-ideal-image/src/index.ts
index 4b8862171859..66c3c92c44d7 100644
--- a/packages/docusaurus-plugin-ideal-image/src/index.ts
+++ b/packages/docusaurus-plugin-ideal-image/src/index.ts
@@ -54,6 +54,12 @@ export default function pluginIdealImage(
           rules: [
             {
               test: /\.(?:png|jpe?g)$/i,
+              // We don't want to use the image loader for non-React source code
+              // ie we don't want to use ideal image loader for CSS files...
+              // See https://github.com/facebook/docusaurus/issues/10862
+              issuer: {
+                and: [/\.(?:tsx?|jsx?|mdx?)$/i],
+              },
               use: [
                 require.resolve('@docusaurus/lqip-loader'),
                 {
diff --git a/website/_dogfooding/_docs tests/tests/images/img-tests.css b/website/_dogfooding/_docs tests/tests/images/img-tests.css
new file mode 100644
index 000000000000..1c042465d0aa
--- /dev/null
+++ b/website/_dogfooding/_docs tests/tests/images/img-tests.css	
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.dogfood-image-test-css {
+  background-image: url('./img/oss_logo.png');
+  background-size: contain;
+}
diff --git a/website/_dogfooding/_docs tests/tests/img/oss_logo (2).png b/website/_dogfooding/_docs tests/tests/images/img/oss_logo (2).png
similarity index 100%
rename from website/_dogfooding/_docs tests/tests/img/oss_logo (2).png
rename to website/_dogfooding/_docs tests/tests/images/img/oss_logo (2).png
diff --git a/website/_dogfooding/_docs tests/tests/img/oss_logo.png b/website/_dogfooding/_docs tests/tests/images/img/oss_logo.png
similarity index 100%
rename from website/_dogfooding/_docs tests/tests/img/oss_logo.png
rename to website/_dogfooding/_docs tests/tests/images/img/oss_logo.png
diff --git a/website/_dogfooding/_docs tests/tests/img-tests.mdx b/website/_dogfooding/_docs tests/tests/images/index.mdx
similarity index 62%
rename from website/_dogfooding/_docs tests/tests/img-tests.mdx
rename to website/_dogfooding/_docs tests/tests/images/index.mdx
index bddaf876340e..77621a12b712 100644
--- a/website/_dogfooding/_docs tests/tests/img-tests.mdx	
+++ b/website/_dogfooding/_docs tests/tests/images/index.mdx	
@@ -2,7 +2,7 @@
 image: ./img/oss_logo.png
 ---
 
-# Image tests
+# Image Tests
 
 import Image from '@theme/IdealImage';
 
@@ -14,6 +14,8 @@ export const docusaurusRequire = require('@site/static/img/docusaurus.png');
 
 ## Regular images
 
+Those only render in DEV when IdealImage plugin is disabled.
+
 <img src={docusaurusImport} />
 
 <img src={docusaurusRequire.default} />
@@ -23,3 +25,13 @@ export const docusaurusRequire = require('@site/static/img/docusaurus.png');
 <Image img={docusaurusImport} />
 
 <Image img={docusaurusRequire} />
+
+## CSS Image
+
+import './img-tests.css';
+
+This should display a div with have a background image
+
+<div
+  className="dogfood-image-test-css"
+  style={{border: 'solid', height: '10rem'}}></div>