Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Jan 20, 2022

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