Registry / web-framework / vite-plugin-css-injected-by-js

vite-plugin-css-injected-by-js

library5.0.1jsnpmunverified

A Vite plugin that injects all CSS into the JavaScript bundle at build time, eliminating separate CSS files and enabling single-file deployments. Current stable version is 5.0.1, requiring Vite >8.0.0-0 (major breaking from v4 which supported Vite 4-7). It provides a virtual module for on-demand injection and supports custom injection targets like Shadow DOM. Key differentiator: unlike Vite's default CSS extraction, it bundles styles into JS, useful for widgets, libraries, or deployments where a single JS file is preferred. Ships TypeScript types. Active development with frequent releases.

web-framework

npm install vite-plugin-css-injected-by-js

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-CSS-IN

vite-plugin-css-injected-by-js

web-frameworkjavascriptv5.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.

default

✓ import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'

✗ import { cssInjectedByJsPlugin } from 'vite-plugin-css-injected-by-js'

The plugin is exported as default; named export also exists but default is typical.

injectCSS

✓ import { injectCSS } from 'virtual:css-injected-by-js'

✗ import { injectCSS } from 'vite-plugin-css-injected-by-js'

injectCSS is a virtual module export, not from the package itself.

removeCSS

✓ import { removeCSS } from 'virtual:css-injected-by-js'

✗ import { removeCSS } from 'vite-plugin-css-injected-by-js'

Also part of the virtual module for cleanup.

Basic setup: install plugin, import default export, add to Vite config, and build to get a single JS file with CSS injected.

// vite.config.ts import { defineConfig } from 'vite' import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js' export default defineConfig({ plugins: [ // Removes external CSS files and injects all CSS into the JS bundle cssInjectedByJsPlugin({ topExecutionPriority: true }) ] })

Debug

Known issues

breakingVersion 5.0.0 requires Vite >8.0.0-0, dropping support for Vite 4-7. Upgrade your Vite version or stay on v4.

fix

Update Vite to version 8+ or use vite-plugin-css-injected-by-js@^4

affects: >=5.0.0

breakingVersion 4.0.0 drops Node.js 14 support and changes plugin behavior for rolldown compatibility.

fix

Ensure Node.js >=16 and review any rolldown-specific configurations

affects: >=4.0.0 <5.0.0

gotchaWhen using virtual:css-injected-by-js module, topExecutionPriority option is ignored. The plugin forces injection payload to the top of chunks.

fix

If you rely on topExecutionPriority, avoid using the virtual module.

affects: >=3.4.0

gotcharemoveCSS() uses MutationObserver and fails if custom injectCode uses async logic, different target element, or Constructable Stylesheets.

fix

Ensure custom injection is synchronous, targets the same element, and uses DOM nodes, not CSSStyleSheet.

affects: >=3.4.0

deprecatedThe 'uniqueCSS' option was removed in v3.0.0. CSS is always unique now.

fix

Remove uniqueCSS option from plugin configuration.

affects: <3.0.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'plugin')

Trying to import the plugin as a named export instead of default.

fix

Use `import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'` (no destructuring).

Error: The virtual module 'virtual:css-injected-by-js' cannot be resolved.

The plugin is not added to Vite plugins array or is added incorrectly.

fix

Ensure `cssInjectedByJsPlugin()` is in the plugins list in vite.config.ts.

[vite] Internal server error: Unknown plugin option: topExecutionPriority

Using an old option that was renamed or removed in current version.

fix

Check the documentation for v5 options; topExecutionPriority is still valid but verify usage.

Module '"fsevents"' has not been loaded yet...

Running on a non-macOS platform or missing native dependencies.

fix

Install optional dependencies with `npm install` or use `pnpm install --shamefully-hoist`.

Upgrade

Version history

5.0.1latest on npm

Audit

Dependencies

viterequiredPeer dependency; version must satisfy >8.0.0-0

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/marco-prontera/vite-plugin-css-injected-by-js ↗

packagehttps://www.npmjs.com/package/vite-plugin-css-injected-by-js ↗