Update dependency css-loader to v4

[renovate]

This PR contains the following updates:

Package	Type	Update	Change
css-loader	devDependencies	major	3.6.0 -> 4.3.0

---

Release Notes

webpack-contrib/css-loader

v4.3.0

Compare Source

Features

• the importLoaders can be string (#​1178) (ec58a7c)

Bug Fixes

• line breaks in url function (88b8ddc)

4.2.2 (2020-08-24)

Bug Fixes

• source maps generation, source from source maps are now relative to compiler.context and use webpack:// protocol (#​1169) (fb5c53d)

4.2.1 (2020-08-06)

Bug Fixes

• regression with the exportOnlyLocals option, now locals are not exported under the locals name, it was big regression, we apologize for that (24c0a12)

v4.2.2

Compare Source

v4.2.1

Compare Source

v4.2.0

Compare Source

Features

• add module.type option, the icss option is deprecated (#​1150) (68f72af)

4.1.1 (2020-07-30)

Bug Fixes

• remove unnecessary console call (#​1148) (b1b90ca)

v4.1.1

Compare Source

v4.1.0

Compare Source

Features

• add icss option (#​1140) (a8ec7da)
• support absolute paths (f9ba0ce)

Bug Fixes

• do not crash with data URLs (#​1142) (91bc64b)
• performance (#​1144) (4f1baa2)

v4.0.0

Compare Source

⚠ BREAKING CHANGES

• minimum required Node.js version is 10.13.0
• minimum required webpack version is 4.27.0
• the esModule option is true by default
• default value of the sourceMap option depends on the devtool option
• icss plugin disable by default, you need to setup the modules option to enable it
• the modules option is true by default for all files matching /\.module\.\w+$/i.test(filename) regular expression, module.auto is true by default
• the modules.context option was renamed to the modules.localIdentContext option
• default the modules.localIdentContext value is compiler.context for the module.getLocalIdent option
• the modules.hashPrefix option was renamed to the modules.localIdentHashPrefix option
• the localsConvention option was moved and renamed to the modules.exportLocalsConvention option
• the getLocalIndent option should be always Function and should always return String value
• the onlyLocals option was moved and renamed to the modules.exportOnlyLocals option
• function arguments of the import option were changed, it is now function(url, media, resourcePath) {}
• inline syntax was changed, please write ~ before the file request, i.e. rewrite url(~!!loader!package/img.png) to url(!!loader!~package/img.png)

Features

• @value supports importing url() (#​1126) (7f49a0a)
• improve url() resolving algorithm (bc19ddd)
• named export for locals (#​1108) (d139ec1)
• respected the style field from package.json (#​1099) (edf5347)
• support file: protocol (5604205)
• support server relative URLs

Bug Fixes

• resolution algorithm, you don't need ~ inside packages in node_modules (76f1480)

---

Renovate configuration

📅 Schedule: "before 9am on monday" (UTC).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻️ Rebasing: Renovate will not automatically rebase this PR, because other commits have been found.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

---

• If you want to rebase/retry this PR, check this box

---

This PR has been generated by WhiteSource Renovate. View repository job log here.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 8c6b2a7

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[spaceninja]

@calebeby and I dug into this a bit, and there seems to be two issues:

1. the updated version of css-loader doesn't like absolute url() values anymore. Not sure why, but we were able to confirm that switching from /clouds/clouds-hero-sm.svg to ../../../../static/clouds/clouds-hero-sm.svg fixed the build, but…

2. then the svg didn't work because webpack was converting it to a React component and injecting the React component into the url() value.

Two solutions we explored:

1. Disable url() handling in css-loader entirely. This seems non-optimal.

2. Find a way to make the svg-to-react handling in webpack more scoped in some way, to either only affect svgs in markup, or to exclude svgs in the static folder, or something like that.

I'm assigning this PR to @calebeby to continue digging into, with the understanding that it's lower priority than any client work.