Registry / devops / vite-plugin-style-inject

vite-plugin-style-inject

library0.0.1jsnpmunverified

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.

devops

npm install vite-plugin-style-inject

package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-STYLE-

vite-plugin-style-inject

devopsjavascriptv0.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.

VitePluginStyleInject

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

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

Default export; CommonJS require is not supported.

vite-plugin-style-inject (default)

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

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

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

type definitions

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

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

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

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.

Debug

Known issues

gotchaPlugin 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.

affects: >=0.0.0

gotchaPlugin 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.

affects: >=0.0.0

deprecatedNo deprecations known for this early version.

fix

N/A

affects: none

Errors

Common errors & fixes

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

The package is not installed or not in node_modules.

fix

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

TypeError: vitePluginStyleInject is not a function

Using named import { VitePluginStyleInject } instead of default import.

fix

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

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

Vite version is lower than 2.0.0.

fix

Upgrade Vite to version 2.0.0 or higher.

Upgrade

Version history

0.0.1latest on npm

Audit

Dependencies

viterequiredpeer dependency required to function as a Vite plugin

Agent activity

4 hits · last 30 days

node

Resources

packagehttps://www.npmjs.com/package/vite-plugin-style-inject ↗