Access asset URL from CSS import

[lxsmnsyc]

Is there any way to do something like this? (at least in plugins?)

import styleURL from './styles.css';

Using "file" loader would definitely work for providing the asset URL however it skips the bundling process and thus causes a lot of fallthroughs (e.g. at-rule imports, fonts, images, etc.). I wanted to access the asset URL while bundling the imported CSS file.

[evanw]

If you want to bundle the imported CSS file, you can write a plugin that invokes esbuild recursively to bundle the CSS file and then return the bundled CSS from the plugin so it can be imported. Plugin documentation is here: https://esbuild.github.io/plugins/#load-callbacks.

[lxsmnsyc]

Thanks for the response Evan

Would this produce any asset conflicts if one or more build instances share the same output directory?

[vcaballero-salle]

@lxsmnsyc I don't know if this will answer your question. With esbuild I am bundling from multiple CSS root files (files with css imports) and the output directory is the same for all of them, I just need to change the output file name.

[lxsmnsyc]

@vcaballero-salle Thanks for the response. However, it doesn't fit what I currently need right now and is counter-intuitive on how I load the CSS. The reason I wanted to acquire the URL is so that I know which CSS file to load for at that part of code.

[evanw]

Would this produce any asset conflicts if one or more build instances share the same output directory?

You can use write: false to have esbuild bundle into memory without writing the result to the file system, which is useful for using esbuild to bundle from within a plugin. See
https://esbuild.github.io/api/#write.

[lxsmnsyc]

Neat! I didn't know that! Thank you