vite-inline-css-plugin

0.0.1 verified Mon Apr 27 auth: no javascript

A Vite plugin that inlines imported CSS files as base64-encoded data URIs directly into JavaScript bundles. Current stable version is 0.0.1. It is a minimal, zero-config plugin designed for small to medium projects where reducing HTTP requests is desired. Unlike full-featured CSS-in-JS solutions or extractors, this plugin simply replaces CSS import paths with their base64 content. Ships TypeScript typings. Requires Vite ^7.2.7.

Common errors

error TypeError: inlineCssPlugin is not a function ↓

cause Using default import instead of named import.

fix

Change your import to: import { inlineCssPlugin } from 'vite-inline-css-plugin'

error Error: Cannot find module 'vite-inline-css-plugin' ↓

cause Package not installed or missing from node_modules.

fix

Run: npm install --save-dev vite-inline-css-plugin

Warnings

gotcha Large CSS files may significantly increase bundle size because base64 encoding inflates size by ~33%. Consider only inlining critical CSS. ↓

fix Use a plugin option (if available) to whitelist small CSS files, or avoid inlining large stylesheets.

gotcha Inline CSS via data URIs can cause content security policy (CSP) issues if 'style-src' does not include 'data:'. ↓

fix Update your CSP to allow data URIs for styles: style-src 'self' 'unsafe-inline' data:;

breaking Vite 7.2.7 or higher is required. Plugin may fail with older Vite versions. ↓

fix Upgrade Vite to ^7.2.7.

Install

npm install vite-inline-css-plugin

yarn add vite-inline-css-plugin

pnpm add vite-inline-css-plugin

Imports

inlineCssPlugin
wrong
```
import inlineCssPlugin from 'vite-inline-css-plugin'
```
correct
```
import { inlineCssPlugin } from 'vite-inline-css-plugin'
```
The package only exports a named export, not a default export. Using default import will result in undefined.
ViteInlineCssPlugin
wrong
```
import { ViteInlineCssPlugin } from 'vite-inline-css-plugin'
```
correct
```
import type { ViteInlineCssPlugin } from 'vite-inline-css-plugin'
```
TypeScript users may need to import the type separately if they want to reference the plugin type. It is not a value export.

Quickstart

Integrates the plugin into a Vite project. Import the named export and add it to the plugins array. CSS imports will now be inlined as base64 data URIs.

// vite.config.ts
import { defineConfig } from 'vite';
import { inlineCssPlugin } from 'vite-inline-css-plugin';

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