`url()` references in css files do not use `assetPrefix` in transformed urls

[genetschneider]

What version of Next.js are you using?

10.2.0

What version of Node.js are you using?

14.16.0

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

npm run dev (with custom express server)

Describe the Bug

Custom assetPrefix does not prefix reference urls that have been automatically transformed in css files. If a css file references a font for example, the transformed url font will not use assetPrefix even though a proper value for assetPrefix has been set

The url transformation seems to be happening here here

Expected Behavior

Transformed urls in css will use assetPrefix similar to other static assets when assetPrefix is defined.

// in custom server server.js
// Set asset prefix
app.setAssetPrefix('/prefix-a');

// Use local font
@font-face {
  font-family: custom-font;
  src: url("./fonts/Itim-Regular.ttf");
}

body {
  font-family: custom-font;
}

Font should be loaded as (assetPrefix exists in url) http://localhost:3000/prefix-a/_next/static/media/Itim-Regular.f70e0d25637f63995673d4cb6429d3ab.ttf

But it's actually loaded as (no assetPrefix in url) http://localhost:3000/_next/static/media/Itim-Regular.f70e0d25637f63995673d4cb6429d3ab.ttf

To Reproduce

Repository with full reproduction can be found here. Just npm run build and npm run dev and you'll notice the issue immediately.

[genetschneider]

Seems to be related to this although the reproduction example I provided still sees faulty media paths

[mbagsik00]

@genetschneider Are you able to resolve this?

[florian-milky]

I found a related error and experienced this bug as well. My workaround should fix both, have a look: https://github.com/vercel/next.js/issues/39722#issuecomment-1293538586 You might need to adapt it a little bit as in my case I'm loading from a different host

[andersonba]

+1

[addy-pathania]

+1

[mikey0000]

Also broken for output: export seeing file:///.../dist/_next/static/css/_next/static/media/TASAOrbiterVF.d0de5139.woff2

path on url is _next/static/media/TASAOrbiterVF.d0de5139.woff2 when it should be ./_next/static/media/TASAOrbiterVF.d0de5139.woff2

[Tomkanovik]

I stopped on this issue as well. Has he got a solution yet?

[mikey0000]

Gave up and moved to straight react and vite

[Tomkanovik]

I'll take that as a last resort.

[JuniorTour]

According to Doc of assetPrefix, The assetPrefix not work for /public folder files seems to be a feature, not a BUG?

It is a pain point for deploy Next.js APP to /subpath.

Is there any workaround that we can add prefix path to files from /public folder?

Usage Examples:

.css {
  url('/vercel.svg')
}

<img src="'/vercel.svg'" alt="">