vite-plugin-style-inject

0.0.1 verified Mon Apr 27 auth: no javascript

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.

Common errors

error Error: Cannot find module 'vite-plugin-style-inject' ↓

cause The package is not installed or not in node_modules.

fix

Run npm install vite-plugin-style-inject --save-dev

error TypeError: vitePluginStyleInject is not a function ↓

cause Using named import { VitePluginStyleInject } instead of default import.

fix

Use import VitePluginStyleInject from 'vite-plugin-style-inject'

error ERROR: [vite] The plugin "vite-plugin-style-inject" requires Vite ^2.0.0 ↓

cause Vite version is lower than 2.0.0.

fix

Upgrade Vite to version 2.0.0 or higher.

Warnings

gotcha Plugin injects CSS into JS, which may increase bundle size and delay render of styles. Not recommended for large CSS. ↓

fix Consider using separate CSS files for large stylesheets to allow parallel loading and caching.

gotcha Plugin only works for Vite library mode (build.lib). Not intended for application builds. ↓

fix Use this plugin only when building a library (e.g., `build.lib` option in Vite config). For apps, leave CSS as separate files.

deprecated No deprecations known for this early version. ↓

fix N/A

Install

npm install vite-plugin-style-inject

yarn add vite-plugin-style-inject

pnpm add vite-plugin-style-inject

Imports

VitePluginStyleInject

wrong

const { VitePluginStyleInject } = require('vite-plugin-style-inject')

correct

import VitePluginStyleInject from 'vite-plugin-style-inject'

Default export; CommonJS require is not supported.

vite-plugin-style-inject (default)

wrong

import { VitePluginStyleInject } from 'vite-plugin-style-inject'

correct

import VitePluginStyleInject from 'vite-plugin-style-inject'

The package exports a default export only. Named import will result in undefined.

type definitions

wrong

import VitePluginStyleInject from 'vite-plugin-style-inject' // no separate type import needed

correct

import VitePluginStyleInject from 'vite-plugin-style-inject' // types included

TypeScript types are bundled with the package. No additional @types package required.

Quickstart

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.

// vite.config.ts
import { defineConfig } from 'vite';
import VitePluginStyleInject from 'vite-plugin-style-inject';

export default defineConfig({
  plugins: [VitePluginStyleInject()]
});

// After building, your library will have CSS inlined into the JS bundle.
// No need for consumers to import a separate CSS file.