esbuild-plugin-inline-css

0.0.1 verified Mon Apr 27 auth: no javascript

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.

Common errors

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

cause Package not installed.

fix

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

error TypeError: InlineCSSPlugin is not a constructor ↓

cause Using new InlineCSSPlugin() incorrectly.

fix

Use InlineCSSPlugin() (no new).

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

cause CSS file not found or path is incorrect.

fix

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

Warnings

gotcha The plugin may not handle CSS imports with ?raw or other query parameters correctly. ↓

fix Use plain CSS imports without query parameters.

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

fix Use InlineCSSPlugin() instead of new InlineCSSPlugin()

breaking The 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.

Install

npm install esbuild-plugin-inline-css

yarn add esbuild-plugin-inline-css

pnpm add esbuild-plugin-inline-css

Imports

InlineCSSPlugin

wrong

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

correct

const InlineCSSPlugin = require('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
wrong
```
new InlineCSSPlugin()
```
correct
```
InlineCSSPlugin()
```
Plugin is a factory function, not a constructor.

Quickstart

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';