CSS imports from URL not working with experimental.urlImports enabled

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #46~20.04.1-Ubuntu SMP Wed Apr 20 13:16:21 UTC 2022
Binaries:
  Node: 18.2.0
  npm: 8.9.0
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 12.1.7-canary.24
  react: 18.1.0
  react-dom: 18.1.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Importing CSS from a URL doesn't appear to work if experimental.urlImports are enabled. This happens in both CSS (eg @import url(https://...)) and JS (eg import 'https://...')

Potentially related to https://github.com/vercel/next.js/issues/30522

css-loader appears to have some newer code for Webpack's buildHttp which doesn't seem to be in the Next.js version of css-loader: https://github.com/webpack-contrib/css-loader/pull/1389/files

Expected Behavior

CSS imported from a URL w/o erroring

To Reproduce

1. npx create-next-app
2. add experimental: { urlImports: ['https://cdn.jsdelivr.net'] } to next.config.js
3. add @import url('https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css'); to top of globals.css
4. try loading site

Should give error:

error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[2]!./styles/globals.css
Error: Can't resolve 'https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css' in '/home/austin/misc_git/test3/styles'

Removing urlImports: [...] from next.config.js causes it to work again.

Same thing happens when trying to import via JS (eg import 'https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css')

The error for importing from JS might be more helpful:

./https:/cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css:1:0
Module not found: Can't resolve '!../../../../../../node_modules/next/dist/build/webpack/loaders/next-style-loader/runtime/injectStylesIntoStyleTag.js'

Reproduce the issue with next.config.js enabling experimental.urlImports and the @import in styles/globals.css. Start by tracing the css-loader and postcss-loader path, then compare the referenced webpack buildHttp changes. Done means CSS imported from the configured URL loads without an error, including the JavaScript import case.