{"id":22855,"library":"vite-plugin-style-inject","title":"vite-plugin-style-inject","description":"A Vite plugin that injects CSS into JavaScript bundle files instead of generating separate CSS files, eliminating the need for external CSS imports. Currently at v0.0.1, it targets library authors who want to distribute self-contained components without requiring consumers to import a separate CSS file. Different from CSS-in-JS solutions, this plugin works with traditional CSS files and transforms them into inline styles at build time. It requires Vite ^2.0.0 as a peer dependency and ships TypeScript definitions. Release cadence is unknown as the package is very new.","status":"active","version":"0.0.1","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","typescript"],"install":[{"cmd":"npm install vite-plugin-style-inject","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-style-inject","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-style-inject","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required to function as a Vite plugin","package":"vite","optional":false}],"imports":[{"note":"Default export; CommonJS require is not supported.","wrong":"const { VitePluginStyleInject } = require('vite-plugin-style-inject')","symbol":"VitePluginStyleInject","correct":"import VitePluginStyleInject from 'vite-plugin-style-inject'"},{"note":"The package exports a default export only. Named import will result in undefined.","wrong":"import { VitePluginStyleInject } from 'vite-plugin-style-inject'","symbol":"vite-plugin-style-inject (default)","correct":"import VitePluginStyleInject from 'vite-plugin-style-inject'"},{"note":"TypeScript types are bundled with the package. No additional @types package required.","wrong":"import VitePluginStyleInject from 'vite-plugin-style-inject' // no separate type import needed","symbol":"type definitions","correct":"import VitePluginStyleInject from 'vite-plugin-style-inject' // types included"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport VitePluginStyleInject from 'vite-plugin-style-inject';\n\nexport default defineConfig({\n  plugins: [VitePluginStyleInject()]\n});\n\n// After building, your library will have CSS inlined into the JS bundle.\n// No need for consumers to import a separate CSS file.","lang":"typescript","description":"Shows how to add the plugin to Vite config and explains that CSS will be inlined into JS, removing the need for separate CSS imports."},"warnings":[{"fix":"Consider using separate CSS files for large stylesheets to allow parallel loading and caching.","message":"Plugin injects CSS into JS, which may increase bundle size and delay render of styles. Not recommended for large CSS.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use this plugin only when building a library (e.g., `build.lib` option in Vite config). For apps, leave CSS as separate files.","message":"Plugin only works for Vite library mode (build.lib). Not intended for application builds.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"N/A","message":"No deprecations known for this early version.","severity":"deprecated","affected_versions":"none"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run `npm install vite-plugin-style-inject --save-dev`","cause":"The package is not installed or not in node_modules.","error":"Error: Cannot find module 'vite-plugin-style-inject'"},{"fix":"Use `import VitePluginStyleInject from 'vite-plugin-style-inject'`","cause":"Using named import { VitePluginStyleInject } instead of default import.","error":"TypeError: vitePluginStyleInject is not a function"},{"fix":"Upgrade Vite to version 2.0.0 or higher.","cause":"Vite version is lower than 2.0.0.","error":"ERROR: [vite] The plugin \"vite-plugin-style-inject\" requires Vite ^2.0.0"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}