[@vanilla-extract/next-plugin] css-loader `url` option not respected

[GeeWizWow]

Describe the bug

Using the newer @vanilla-extract/next-plugin versions 2.2.0 or 2.2.1, it appears that the css-loader loader used by vanilla extract:

https://github.com/vanilla-extract-css/vanilla-extract/blob/40d7e72c041989a4dc847dc66b94a4c680b5536e/packages/next-plugin/src/index.ts#L58

no longer respects/ uses the url option setup by next, which is defined here:

• usage: https://github.com/vercel/next.js/blob/a4f2bbbe2047d4ed88e9b6f32f6b0adfc8d0c46a/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L35-L36
• definition: https://github.com/vercel/next.js/blob/a4f2bbbe2047d4ed88e9b6f32f6b0adfc8d0c46a/packages/next/src/build/webpack/config/blocks/css/loaders/file-resolve.ts#L1-L13

This leads to the following css failing to build with a failed to resolve module error:

export const test = style({
    background: 'url("/foo/bar.png")',
});

likewise for anything that uses url, such as fontFace:

import { fontFace } from '@vanilla-extract/css';

const comicSans = fontFace({
  src: 'url("Comic Sans MS")'
});

Reproduction

https://codesandbox.io/p/sandbox/withered-bush-5yt993

System Info

reproduceable on code sandbox

Used Package Manager

npm

Logs

./node_modules/@vanilla-extract/webpack-plugin/extracted.js:4:0
Module not found: Can't resolve '/workspace/hello/world.png'

Validations

• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[GeeWizWow]

Providing a patch for anyone running into this issue, can be used with patch-package

1. create patches/@vanilla-extract+next-plugin+2.2.1.patch with the content below
2. npm install --save-dev patch-package
3. In package.json

       "scripts": {
   +       "postinstall": "patch-package"
        }

diff --git a/node_modules/@vanilla-extract/next-plugin/dist/vanilla-extract-next-plugin.cjs.dev.js b/node_modules/@vanilla-extract/next-plugin/dist/vanilla-extract-next-plugin.cjs.dev.js
index fc2b24b..4d11d27 100644
--- a/node_modules/@vanilla-extract/next-plugin/dist/vanilla-extract-next-plugin.cjs.dev.js
+++ b/node_modules/@vanilla-extract/next-plugin/dist/vanilla-extract-next-plugin.cjs.dev.js
@@ -7,6 +7,7 @@ var browserslist = require('browserslist');
 var css = require('next/dist/build/webpack/config/blocks/css');
 var findPagesDir = require('next/dist/lib/find-pages-dir');
 var NextMiniCssExtractPluginDefault = require('next/dist/build/webpack/plugins/mini-css-extract-plugin');
+var nextFileResolve = require('next/dist/build/webpack/config/blocks/css/loaders/file-resolve');

 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

@@ -50,7 +51,9 @@ const getVanillaExtractCssLoaders = (options, assetPrefix) => {
     options: {
       postcss,
       importLoaders: 1,
-      modules: false
+      modules: false,
+      url: (url, resourcePath) => nextFileResolve.cssFileResolve(url, resourcePath, options.config.experimental.urlImports),
+      import: (url, _, resourcePath) => nextFileResolve.cssFileResolve(url, resourcePath, options.config.experimental.urlImports),
     }
   });

diff --git a/node_modules/@vanilla-extract/next-plugin/dist/vanilla-extract-next-plugin.cjs.prod.js b/node_modules/@vanilla-extract/next-plugin/dist/vanilla-extract-next-plugin.cjs.prod.js
index fc2b24b..4d11d27 100644
--- a/node_modules/@vanilla-extract/next-plugin/dist/vanilla-extract-next-plugin.cjs.prod.js
+++ b/node_modules/@vanilla-extract/next-plugin/dist/vanilla-extract-next-plugin.cjs.prod.js
@@ -7,6 +7,7 @@ var browserslist = require('browserslist');
 var css = require('next/dist/build/webpack/config/blocks/css');
 var findPagesDir = require('next/dist/lib/find-pages-dir');
 var NextMiniCssExtractPluginDefault = require('next/dist/build/webpack/plugins/mini-css-extract-plugin');
+var nextFileResolve = require('next/dist/build/webpack/config/blocks/css/loaders/file-resolve');

 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

@@ -50,7 +51,9 @@ const getVanillaExtractCssLoaders = (options, assetPrefix) => {
     options: {
       postcss,
       importLoaders: 1,
-      modules: false
+      modules: false,
+      url: (url, resourcePath) => nextFileResolve.cssFileResolve(url, resourcePath, options.config.experimental.urlImports),
+      import: (url, _, resourcePath) => nextFileResolve.cssFileResolve(url, resourcePath, options.config.experimental.urlImports),
     }
   });