@oazmi/esbuild-plugin-css

Import CSS files in your javascript, and have them bundled by esbuild, either as css files or as a javascript style injection code. Works in Browser and Deno environments, and does not have any dependencies.

Example

suppose you've got the following two files in your current working directory:

/* FILE: ./my_styles.css */
@import url("https://unpkg.com/[email protected]/some-library.css");

#mydiv {
	width: 100vw;
	background-color: red;
}

// FILE: ./my_module.ts
import "./my_styles.css"
import "https://cdnjs.cloudflare.com/ajax/libs/[email protected]/some-other-library.css"

const my_div = document.createElement("div")
my_div.id = "mydiv"
document.body.append(my_div)

Bundle imported css files with Deno as a separate file

// FILE: ./build.ts
import * as esbuild from "https://deno.land/x/[email protected]/mod.js"
import { denoPlugins } from "jsr:@luca/[email protected]"
import { cssPlugin } from "jsr:@oazmi/esbuild-plugin-css"

const result = await esbuild.build({
	plugins: [cssPlugin({}), ...denoPlugins()],
	entryPoints: ["./my_module.ts"],
	outdir: "./dist/",
	bundle: true,
	// minify: true // this will also minify the css
})

esbuild.stop()

now, in your terminal, run:

deno run -A "./build.ts"

which will output:

// index.ts
var my_div = document.createElement("div");
my_div.id = "mydiv";
document.body.append(my_div);

/* oazmi-css:https://unpkg.com/[email protected]/some-library.css */
/*
  BUNDLED CONTENTS OF https://unpkg.com/[email protected]/some-library.css
*/

/* oazmi-css:file:///D:/projects/2024/esbuild-plugin-css/test/1/styles.css */
#mydiv {
  width: 100vw;
  background-color: red;
}

/* oazmi-css:https://cdnjs.cloudflare.com/ajax/libs/[email protected]/some-other-library.css */
/*
  BUNDLED CONTENTS OF https://cdnjs.cloudflare.com/ajax/libs/[email protected]/some-other-library.css
*/

Bundle imported css files with Deno as javascript injection code

Use the { mode: "inject" } plugin option to to have the bundled css become an injection code that'll inject the style tags into your document.

// FILE: ./build.ts
import * as esbuild from "https://deno.land/x/[email protected]/mod.js"
import { denoPlugins } from "jsr:@luca/[email protected]"
import { cssPlugin } from "jsr:@oazmi/esbuild-plugin-css"

const result = await esbuild.build({
	plugins: [cssPlugin({ mode: "inject" }), ...denoPlugins()],
	entryPoints: ["./my_module.ts"],
	outdir: "./dist/",
	bundle: true,
	// minify: true // this will also minify the css
})

esbuild.stop()

now, in your terminal, run:

deno run -A "./build.ts"

which will output:

// oazmi-css:file:///D:/projects/2024/esbuild-plugin-css/test/1/styles.css
var style_dom = document.createElement("style");
style_dom.textContent = `/* oazmi-css:https://unpkg.com/[email protected]/some-library.css */
/*
  BUNDLED CONTENTS OF https://unpkg.com/[email protected]/some-library.css
*/

/* oazmi-css:file:///D:/projects/2024/esbuild-plugin-css/test/1/styles.css */
#mydiv {
  width: 100vw;
  background-color: red;
}
`;
document.head.append(style_dom);

// oazmi-css:https://cdnjs.cloudflare.com/ajax/libs/[email protected]/some-other-library.css
var style_dom2 = document.createElement("style");
style_dom2.textContent = `/* oazmi-css:https://cdnjs.cloudflare.com/ajax/libs/[email protected]/some-other-library.css */
/*
  BUNDLED CONTENTS OF https://cdnjs.cloudflare.com/ajax/libs/[email protected]/some-other-library.css
*/
`;
document.head.append(style_dom2);

// my_module.ts
var my_div = document.createElement("div");
my_div.id = "mydiv";
document.body.append(my_div);