css-loader 6.5.1 breaks inline images

[sparanoid]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

This bug seems to be introduced since this 95955ec commit (canary build 0.0.0-4414).

Steps to reproduce

See demo: https://stackblitz.com/edit/github-nbaeqd-js3wpw?file=src%2Fcomponents%2FHomepageFeatures.js

First, create a component with CSS inline image:

.demo {
	background-image: url('../../static/img/undraw_docusaurus_tree.svg');
}

<div className={styles.demo}>Inspect me</div>

Then inspect the element in your browser

Expected behavior

Inline SVG should be embedded correctly in Base64 format. As how previous versions did.

Actual behavior

The image is now no longer embedded but generated with a hash filename:

If you access this file in the browser you will get the following error:

The actual content of this image is:

export default __webpack_public_path__ + "assets/images/undraw_docusaurus_tree-1a17af96e3c13c3b6a5c862c0e13d742.svg";

Your environment

• Public source code: No public repo. Please see the demo above
• Public site URL: N/A
• Docusaurus version used: 0.0.0-4414
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome Version 97.0.4692.71 (Official Build) (arm64).
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): macOS 12.1 (21C52)

Reproducible demo

https://stackblitz.com/edit/github-nbaeqd-js3wpw?file=src%2Fcomponents%2FHomepageFeatures.js

Self-service

• I'd be willing to fix this bug myself.

[sparanoid]

Additonal info: I also find not only svg but also web fonts (and other media) are affected by this bug.

[slorber]

let me know if latest canary version works

[PatelN123]

Hey @slorber @Josh-Cena,

My issue: here still persists after this update.
An updated code and preview is shown here: PatelN123/Digital-Support-Notes#110

Not sure if this is still the same issue?

[Josh-Cena]

Your CSS is incorrect. Your background image is too big.

If you reduce your image width to 24px through CSS, you can see it displayed correctly.

[PatelN123]

Thanks, rookie mistake I guess