{"id":22628,"library":"vite-plugin-css-injected-by-js","title":"vite-plugin-css-injected-by-js","description":"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.","status":"active","version":"5.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/marco-prontera/vite-plugin-css-injected-by-js","tags":["javascript","vite","vite-plugin","plugin","typescript","css-injected-by-js","single-js-file","css","js"],"install":[{"cmd":"npm install vite-plugin-css-injected-by-js","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-css-injected-by-js","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-css-injected-by-js","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; version must satisfy >8.0.0-0","package":"vite","optional":false}],"imports":[{"note":"The plugin is exported as default; named export also exists but default is typical.","wrong":"import { cssInjectedByJsPlugin } from 'vite-plugin-css-injected-by-js'","symbol":"default","correct":"import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'"},{"note":"injectCSS is a virtual module export, not from the package itself.","wrong":"import { injectCSS } from 'vite-plugin-css-injected-by-js'","symbol":"injectCSS","correct":"import { injectCSS } from 'virtual:css-injected-by-js'"},{"note":"Also part of the virtual module for cleanup.","wrong":"import { removeCSS } from 'vite-plugin-css-injected-by-js'","symbol":"removeCSS","correct":"import { removeCSS } from 'virtual:css-injected-by-js'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite'\nimport cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'\n\nexport default defineConfig({\n  plugins: [\n    // Removes external CSS files and injects all CSS into the JS bundle\n    cssInjectedByJsPlugin({ topExecutionPriority: true })\n  ]\n})","lang":"typescript","description":"Basic setup: install plugin, import default export, add to Vite config, and build to get a single JS file with CSS injected."},"warnings":[{"fix":"Update Vite to version 8+ or use vite-plugin-css-injected-by-js@^4","message":"Version 5.0.0 requires Vite >8.0.0-0, dropping support for Vite 4-7. Upgrade your Vite version or stay on v4.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Ensure Node.js >=16 and review any rolldown-specific configurations","message":"Version 4.0.0 drops Node.js 14 support and changes plugin behavior for rolldown compatibility.","severity":"breaking","affected_versions":">=4.0.0 <5.0.0"},{"fix":"If you rely on topExecutionPriority, avoid using the virtual module.","message":"When using virtual:css-injected-by-js module, topExecutionPriority option is ignored. The plugin forces injection payload to the top of chunks.","severity":"gotcha","affected_versions":">=3.4.0"},{"fix":"Ensure custom injection is synchronous, targets the same element, and uses DOM nodes, not CSSStyleSheet.","message":"removeCSS() uses MutationObserver and fails if custom injectCode uses async logic, different target element, or Constructable Stylesheets.","severity":"gotcha","affected_versions":">=3.4.0"},{"fix":"Remove uniqueCSS option from plugin configuration.","message":"The 'uniqueCSS' option was removed in v3.0.0. CSS is always unique now.","severity":"deprecated","affected_versions":"<3.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Use `import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'` (no destructuring).","cause":"Trying to import the plugin as a named export instead of default.","error":"TypeError: Cannot read properties of undefined (reading 'plugin')"},{"fix":"Ensure `cssInjectedByJsPlugin()` is in the plugins list in vite.config.ts.","cause":"The plugin is not added to Vite plugins array or is added incorrectly.","error":"Error: The virtual module 'virtual:css-injected-by-js' cannot be resolved."},{"fix":"Check the documentation for v5 options; topExecutionPriority is still valid but verify usage.","cause":"Using an old option that was renamed or removed in current version.","error":"[vite] Internal server error: Unknown plugin option: topExecutionPriority"},{"fix":"Install optional dependencies with `npm install` or use `pnpm install --shamefully-hoist`.","cause":"Running on a non-macOS platform or missing native dependencies.","error":"Module '\"fsevents\"' has not been loaded yet..."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}