How to include/inline external CSS (npm | cdn)

[boeckMt]

Is it possible to include/inline non-local (css) styles so that they are all fetched at build time?
For example, the site depends on a CSS framework that is published on npm or at unpkg.com.

The ESbuild plugin already has the ability to import from npm: | jsr: | esm.sh
I tried to make it work by including the css file in ESbuild, but without success, maybe I am doing something wrong.

The other idea was to use the postcss includes, but there it is only possible to get content that is in the root folder.
Otherwise, it would be possible to get it from the deno cache or node_modules outside the root folder with something like

const userCache = join(Deno.env.get("LOCALAPPDATA") || "", "deno/npm/registry.npmjs.org");
site.use(postcss(
    { includes: userCache }
));

I tried site.fs.addEntry to get the external content available for site.getContent but also without success.

[oscarotero]

You can define external resources with remote files feature.
But providing support for npm and jsr files in CSS plugins (like esbuld does) is a great idea. I'll take a look to implement this.

[boeckMt]

Thanks for the hint with the remote files, did not think about it 👍

Support for npm and jsr in a CSS plugin or the SASS plugin would be really great.
Maybe like https://deno.land/x/[email protected]/plugins/esbuild.ts?source=#L155
Or as a PostCSS plugin like this postcss-import-url

[oscarotero]

I just added support for npm specifiers, so you can do this:

@import "npm:[email protected]";

It will be available in the next version of Lume. If you want to try it now, you can upgrade to the latest development version with deno task lume upgrade --dev.

[boeckMt]

Thanks, this is really great, I will test t.

[codelinde]

What is considered the current best practice for including CSS from an npm package as of Lume v3?

[oscarotero]

@codelinde There are no significant changes from Lume 2 to Lume 3. npm imports are still supported by Lightnincss and Postcss plugins (example: @import "npm:[email protected]";).

To simply add the file to the dest folder, you can write site.add("npm:[email protected]") in the _config.ts file.

[codelinde]

Thanks for the clarification!