fix(ideal-image): Add issuer to ideal-image Webpack loader (#10910)

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'),
                 {

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;
+}

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>