Manually resolved path in CSS url()

[joelmoss]

So I have a plugin that resolves all CSS url() directives to a custom URL path. For example:

body {
  background: url('./user/avatar.png');
}

Which should return:

body {
  background: url('/images/user/avatar.png');
}

Now I know the files loader will rewrite the image file name, but I do not want that, and need to maintain the path structure, while also resolving relative and absolute paths.

The problem I have is that the resulting CSS ends up being:

body {
  background: url(data:text/plain;base64,L2xpYi9hdmF0YXIucG5n);
}

Which is incorrect.

Here's my plugin:

    build.onResolve({ filter: /\.png$/ }, args => {
      return {
        path: resolve(args.resolveDir, args.path),
        namespace: 'image'
      }
    })

    build.onLoad({ filter: /\.png$/, namespace: 'image' }, args => {
      console.log(args)

      return {
        contents: args.path.slice(absWorkingDir.length),
        loader: 'text'
      }
    })

So even though I'm returning the text loader, it's converting it to a data URL. Is that expected behaviour?

thanks in advance

[evanw]

Once you get to the point where an onLoad callback is being called, your import has already been set to be included in the bundle. It sounds like you don't even want to get to that point because you don't want the file in the bundle. In that case you should be returning external: true from your onResolve callback. That should prevent onLoad from being called in the first place and will make sure the file is excluded from the bundle.

[joelmoss]

Ah but that would mean the path returned will be untouched.

I need './user/avatar.png' to be rewritten to '/images/user/avatar.png'.

It works when importing into JS...

import img from './user/avatar.png'

will end with img equalling /images/user/avatar.png. which is what I want.

Not sure if that explained it any better

[evanw]

You can do both. You can return a modified path and mark that modified path as external:

build.onResolve({ filter: /\.png$/ }, args => {
  let absPath = require('path').resolve(args.resolveDir, args.path)
  return {
    path: absPath.slice(absWorkingDir.length),
    external: true,
  }
})

[joelmoss]

Worked perfectly! Thank you!