Skip to content

fix(core): fix css url("image.png"), use css-loader v6 with esModules: false#6424

Merged
slorber merged 3 commits into
mainfrom
slorber/revert-css-loader
Jan 20, 2022
Merged

fix(core): fix css url("image.png"), use css-loader v6 with esModules: false#6424
slorber merged 3 commits into
mainfrom
slorber/revert-css-loader

Conversation

@slorber

@slorber slorber commented Jan 20, 2022

Copy link
Copy Markdown
Collaborator

Motivation

Fix #6408

Since css-loader 6.x (https://github.com/webpack-contrib/css-loader/releases/tag/v6.0.0), with esModules: true (default), url(./xyz.png) are handled differently and are using ES new URL() + new asset pipeline.

Code:

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

5.x (good):

.test1_src-pages-styles-module {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZ);
}

6.x (bad):

.test1_src-pages-styles-module {
    background-image: url(/3478086aa28a7459.svg);
}

Note it also works in 6.x + esModules = false,

Let's stick to 5.x for now. We'll upgrade to 6.x as part of #4708, while removing deprecated file-loader

Have you read the Contributing Guidelines on pull requests?

yes

Test Plan

none 😓 not even sure where we could dogfood this on our site in a place where missing images would be easily noticed

@alexander-akait

alexander-akait commented Jan 20, 2022

Copy link
Copy Markdown

6.x + esModules = false should have the same behavior as before, so you can keep this workaround

@netlify

netlify Bot commented Jan 20, 2022

Copy link
Copy Markdown

✔️ [V2]

🔨 Explore the source changes: 9f20ec9

🔍 Inspect the deploy log: https://app.netlify.com/sites/docusaurus-2/deploys/61e99901a8f3100007361b14

😎 Browse the preview: https://deploy-preview-6424--docusaurus-2.netlify.app

@github-actions

github-actions Bot commented Jan 20, 2022

Copy link
Copy Markdown

⚡️ Lighthouse report for the changes in this PR:

Category Score
🟠 Performance 52
🟢 Accessibility 100
🟢 Best practices 93
🟢 SEO 100
🟢 PWA 92

Lighthouse ran on https://deploy-preview-6424--docusaurus-2.netlify.app/

@github-actions

github-actions Bot commented Jan 20, 2022

Copy link
Copy Markdown

Size Change: -4 B (0%)

Total Size: 707 kB

ℹ️ View Unchanged
Filename Size Change
website/.docusaurus/globalData.json 43.5 kB 0 B
website/build/assets/css/styles.********.css 104 kB -4 B (0%)
website/build/assets/js/main.********.js 531 kB 0 B
website/build/index.html 29.6 kB 0 B

compressed-size-action

@slorber

slorber commented Jan 20, 2022

Copy link
Copy Markdown
Collaborator Author

6.x + esModules = false should have the same behavior as before, so you can keep this workaround

Thanks, will do that then.

I thought it could eventually have some unwanted side-effects, so it looked safer to stick to v5

@slorber slorber changed the title fix(core): revert css-loader to 5.x fix(core): fix css url("image.png"), use css-loader v6 with esModules: false Jan 20, 2022
@slorber slorber added the pr: bug fix This PR fixes a bug in a past release. label Jan 20, 2022
@slorber slorber merged commit 8a092f5 into main Jan 20, 2022
@slorber slorber deleted the slorber/revert-css-loader branch January 20, 2022 17:30
mrizwanashiq pushed a commit to mrizwanashiq/docusaurus that referenced this pull request Jun 25, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed Signed Facebook CLA pr: bug fix This PR fixes a bug in a past release.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

css-loader 6.5.1 breaks inline images

3 participants