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.
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)// 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:
./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/[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
*/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:
./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/[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);
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent