Registry / devops / esbuild-plugin-inline-css

esbuild-plugin-inline-css

library0.0.1jsnpmunverified

A lightweight esbuild plugin that bundles and inlines CSS into JavaScript files during the build process. Currently at version 0.0.1, this plugin provides a simple integration for developers who want to avoid separate CSS files by embedding styles directly into their JS bundles. It supports CommonJS and is intended for esbuild-based projects. Unlike more comprehensive solutions like esbuild-style-plugin, it focuses solely on CSS inlining without additional features like minification or CSS modules. The release cadence is unclear given the early version.

devops

npm install esbuild-plugin-inline-css

package ↗

INSTALL

IMPORT

SIG · ESBUILD-PLUGIN-INL

esbuild-plugin-inline-css

devopsjavascriptv0.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

InlineCSSPlugin

✓ const InlineCSSPlugin = require('esbuild-plugin-inline-css');

✗ import InlineCSSPlugin from 'esbuild-plugin-inline-css';

This package is CommonJS only; ESM import may fail in some environments.

InlineCSSPlugin

✓ import pkg from 'esbuild-plugin-inline-css'; const InlineCSSPlugin = pkg;

If using ESM, use default import and then call as a function.

InlineCSSPlugin call

✓ InlineCSSPlugin()

✗ new InlineCSSPlugin()

Plugin is a factory function, not a constructor.

Shows how to bundle and inline CSS into a single JS output using esbuild and the plugin.

const esbuild = require('esbuild'); const InlineCSSPlugin = require('esbuild-plugin-inline-css'); esbuild.build({ entryPoints: ['app.js'], bundle: true, outfile: 'out.js', plugins: [ InlineCSSPlugin() ] }).catch(() => process.exit(1)); // app.js (example): import './styles.css';

Debug

Known issues

gotchaThe plugin may not handle CSS imports with ?raw or other query parameters correctly.

fix

Use plain CSS imports without query parameters.

affects: >=0.0.0

gotchaPlugin returns a function that must be called (e.g., InlineCSSPlugin()), not instantiated with new.

fix

Use InlineCSSPlugin() instead of new InlineCSSPlugin()

affects: >=0.0.0

breakingThe plugin relies on esbuild's onResolve and onLoad hooks; custom resolve plugins may conflict.

fix

Ensure this plugin is placed after any resolve-altering plugins.

affects: >=0.0.0

Errors

Common errors & fixes

Error: Cannot find module 'esbuild-plugin-inline-css'

Package not installed.

fix

Run npm install -D esbuild-plugin-inline-css

TypeError: InlineCSSPlugin is not a constructor

Using new InlineCSSPlugin() incorrectly.

fix

Use InlineCSSPlugin() (no new).

Error: [esbuild] Resolve error: Could not resolve './styles.css'

CSS file not found or path is incorrect.

fix

Ensure the CSS file exists and the import path is correct.

Upgrade

Version history

0.0.1latest on npm

Audit

Dependencies

esbuildrequiredpeer dependency required for plugin to function

Agent activity

4 hits · last 30 days

node

Resources

packagehttps://www.npmjs.com/package/esbuild-plugin-inline-css ↗