{"id":21253,"library":"esbuild-plugin-inline-css","title":"esbuild-plugin-inline-css","description":"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.","status":"active","version":"0.0.1","language":"javascript","source_language":"en","source_url":null,"tags":["javascript"],"install":[{"cmd":"npm install esbuild-plugin-inline-css","lang":"bash","label":"npm"},{"cmd":"yarn add esbuild-plugin-inline-css","lang":"bash","label":"yarn"},{"cmd":"pnpm add esbuild-plugin-inline-css","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required for plugin to function","package":"esbuild","optional":false}],"imports":[{"note":"This package is CommonJS only; ESM import may fail in some environments.","wrong":"import InlineCSSPlugin from 'esbuild-plugin-inline-css';","symbol":"InlineCSSPlugin","correct":"const InlineCSSPlugin = require('esbuild-plugin-inline-css');"},{"note":"If using ESM, use default import and then call as a function.","wrong":"","symbol":"InlineCSSPlugin","correct":"import pkg from 'esbuild-plugin-inline-css'; const InlineCSSPlugin = pkg;"},{"note":"Plugin is a factory function, not a constructor.","wrong":"new InlineCSSPlugin()","symbol":"InlineCSSPlugin call","correct":"InlineCSSPlugin()"}],"quickstart":{"code":"const esbuild = require('esbuild');\nconst InlineCSSPlugin = require('esbuild-plugin-inline-css');\n\nesbuild.build({\n  entryPoints: ['app.js'],\n  bundle: true,\n  outfile: 'out.js',\n  plugins: [\n    InlineCSSPlugin()\n  ]\n}).catch(() => process.exit(1));\n\n// app.js (example): import './styles.css';","lang":"javascript","description":"Shows how to bundle and inline CSS into a single JS output using esbuild and the plugin."},"warnings":[{"fix":"Use plain CSS imports without query parameters.","message":"The plugin may not handle CSS imports with ?raw or other query parameters correctly.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use InlineCSSPlugin() instead of new InlineCSSPlugin()","message":"Plugin returns a function that must be called (e.g., InlineCSSPlugin()), not instantiated with new.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Ensure this plugin is placed after any resolve-altering plugins.","message":"The plugin relies on esbuild's onResolve and onLoad hooks; custom resolve plugins may conflict.","severity":"breaking","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run npm install -D esbuild-plugin-inline-css","cause":"Package not installed.","error":"Error: Cannot find module 'esbuild-plugin-inline-css'"},{"fix":"Use InlineCSSPlugin() (no new).","cause":"Using new InlineCSSPlugin() incorrectly.","error":"TypeError: InlineCSSPlugin is not a constructor"},{"fix":"Ensure the CSS file exists and the import path is correct.","cause":"CSS file not found or path is incorrect.","error":"Error: [esbuild] Resolve error: Could not resolve './styles.css'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}