{"id":22565,"library":"vite-inline-css-plugin","title":"vite-inline-css-plugin","description":"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.","status":"active","version":"0.0.1","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/vite-inline-css-plugin","tags":["javascript","vite","css","base64","plugin","typescript"],"install":[{"cmd":"npm install vite-inline-css-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add vite-inline-css-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-inline-css-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required for plugin to function","package":"vite","optional":false}],"imports":[{"note":"The package only exports a named export, not a default export. Using default import will result in undefined.","wrong":"import inlineCssPlugin from 'vite-inline-css-plugin'","symbol":"inlineCssPlugin","correct":"import { inlineCssPlugin } from 'vite-inline-css-plugin'"},{"note":"TypeScript users may need to import the type separately if they want to reference the plugin type. It is not a value export.","wrong":"import { ViteInlineCssPlugin } from 'vite-inline-css-plugin'","symbol":"ViteInlineCssPlugin","correct":"import type { ViteInlineCssPlugin } from 'vite-inline-css-plugin'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport { inlineCssPlugin } from 'vite-inline-css-plugin';\n\nexport default defineConfig({\n  plugins: [inlineCssPlugin()],\n});","lang":"typescript","description":"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."},"warnings":[{"fix":"Use a plugin option (if available) to whitelist small CSS files, or avoid inlining large stylesheets.","message":"Large CSS files may significantly increase bundle size because base64 encoding inflates size by ~33%. Consider only inlining critical CSS.","severity":"gotcha","affected_versions":"*"},{"fix":"Update your CSP to allow data URIs for styles: style-src 'self' 'unsafe-inline' data:;","message":"Inline CSS via data URIs can cause content security policy (CSP) issues if 'style-src' does not include 'data:'.","severity":"gotcha","affected_versions":"*"},{"fix":"Upgrade Vite to ^7.2.7.","message":"Vite 7.2.7 or higher is required. Plugin may fail with older Vite versions.","severity":"breaking","affected_versions":"<7.2.7"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Change your import to: import { inlineCssPlugin } from 'vite-inline-css-plugin'","cause":"Using default import instead of named import.","error":"TypeError: inlineCssPlugin is not a function"},{"fix":"Run: npm install --save-dev vite-inline-css-plugin","cause":"Package not installed or missing from node_modules.","error":"Error: Cannot find module 'vite-inline-css-plugin'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}