Skip to main content

Import CSS files in your javascript, and have them bundled by esbuild. compatible with Web Browsers and Deno.

Works with
It is unknown whether this package works with Bun
It is unknown whether this package works with Cloudflare Workers
It is unknown whether this package works with Node.js
This package works with Deno
This package works with Browsers
JSR Score
94%
Published
2 months ago (0.1.1)

@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/some-library@0.1.0/some-library.css");

#mydiv {
	width: 100vw;
	background-color: red;
}
// FILE: ./my_module.ts
import "./my_styles.css"
import "https://cdnjs.cloudflare.com/ajax/libs/some-other-library@0.2.0/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/esbuild@v0.20.1/mod.js"
import { denoPlugins } from "jsr:@luca/esbuild-deno-loader@0.9.0"
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:

./dist/my_module.js
// index.ts
var my_div = document.createElement("div");
my_div.id = "mydiv";
document.body.append(my_div);
./dist/my_module.css
/* oazmi-css:https://unpkg.com/some-library@0.1.0/some-library.css */
/*
  BUNDLED CONTENTS OF https://unpkg.com/some-library@0.1.0/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/some-other-library@0.2.0/some-other-library.css */
/*
  BUNDLED CONTENTS OF https://cdnjs.cloudflare.com/ajax/libs/some-other-library@0.2.0/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/esbuild@v0.20.1/mod.js"
import { denoPlugins } from "jsr:@luca/esbuild-deno-loader@0.9.0"
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:

./dist/my_module.js
// 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/some-library@0.1.0/some-library.css */
/*
  BUNDLED CONTENTS OF https://unpkg.com/some-library@0.1.0/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/some-other-library@0.2.0/some-other-library.css
var style_dom2 = document.createElement("style");
style_dom2.textContent = `/* oazmi-css:https://cdnjs.cloudflare.com/ajax/libs/some-other-library@0.2.0/some-other-library.css */
/*
  BUNDLED CONTENTS OF https://cdnjs.cloudflare.com/ajax/libs/some-other-library@0.2.0/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);

Add Package

deno add @oazmi/esbuild-plugin-css

Import symbol

import * as mod from "@oazmi/esbuild-plugin-css";

Add Package

npx jsr add @oazmi/esbuild-plugin-css

Import symbol

import * as mod from "@oazmi/esbuild-plugin-css";

Add Package

yarn dlx jsr add @oazmi/esbuild-plugin-css

Import symbol

import * as mod from "@oazmi/esbuild-plugin-css";

Add Package

pnpm dlx jsr add @oazmi/esbuild-plugin-css

Import symbol

import * as mod from "@oazmi/esbuild-plugin-css";

Add Package

bunx jsr add @oazmi/esbuild-plugin-css

Import symbol

import * as mod from "@oazmi/esbuild-plugin-css";