Skip to content

Conversation

@slorber
Copy link
Collaborator

@slorber slorber commented Jan 20, 2022

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
Copy link

alexander-akait commented Jan 20, 2022

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

@netlify
Copy link

netlify bot commented Jan 20, 2022

✔️ [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
Copy link

github-actions bot commented Jan 20, 2022

⚡️ 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
Copy link

github-actions bot commented Jan 20, 2022

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
Copy link
Collaborator Author

slorber commented Jan 20, 2022

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
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

4 participants