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. + @@ -23,3 +25,13 @@ export const docusaurusRequire = require('@site/static/img/docusaurus.png'); + +## CSS Image + +import './img-tests.css'; + +This should display a div with have a background image + +