Inlining css with type="style" option skips processing url(...)

[linasburneika]

If you use this plugin with type="css" option then the default 'css' loader of esbuild is used to process rendered css text, which in turn can use other loaders to handle fonts or images defined in url(...)

In case type is "style" then the rendered css text is embeded into the bundle without any further processing. It doesn't give any build errors, but at runtime you may see missing images and fonts.

I tried several postcss plugins to extract css assets, but no luck so far. Any ideas?

[cnshenj]

I have a repro here: https://github.com/cnshenj/azdo-ext. Just comment out the sassPlugin() line it works fine. With the plugin the font file in url() is not processed.

[linasburneika]

got it working finally, it's a matter of specifying correctly 'base' and 'to' properties to get proper paths in the output.
This case should be documented in the readme, it's far from being intuitive.

import {sassPlugin} from 'esbuild-sass-plugin'
import postcss from 'postcss';
import copyAssets from 'postcss-copy-assets';
...
sassPlugin({
    type: 'style',
    async transform(source, resolveDir, filePath) {
        const {css} = await postcss().use(copyAssets({base: `public`})).process(source, {from: filePath, to: `public/index.css`});
        return css;
      }
}),

[cnshenj]

Is there a way to still pass url() to esbuild for processing (e.g. dataurl, file), rather than processing it using a separate library in transform?

[glromeo]

@cnshenj unfortunately not, the only way to have esbuild handle CSS features is with type: "css"

@linasburneika thank you so much for getting to the bottom of your issue... I improved the README hoping that it will help other people in the future

[aak-lear]

Want to share one more example.
I'm using postcss modules and need to inline all urls as base64, when bundling sass with type="style". This can be achieved using plugin postcss-url.

The example below works fine for me:

import { postcssModules, sassPlugin } from 'esbuild-sass-plugin';
import postcssUrl from 'postcss-url';

...
sassPlugin({
  type: 'style',
  transform: postcssModules(
    { /* some options */ },
    [ postcssUrl({ url: 'inline' }) ]
  )
})