CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-vite-plugin-css-injected-by-js

A Vite plugin that injects CSS into JavaScript bundles for single-file applications.

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

Vite Plugin CSS Injected by JS

A Vite plugin that eliminates separate CSS files by injecting CSS directly into the JavaScript bundle, enabling single-file JavaScript applications. The plugin offers comprehensive configuration options, seamless Vite integration, and supports both development and production modes.

Package Information

  • Package Name: vite-plugin-css-injected-by-js
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install vite-plugin-css-injected-by-js

Core Imports

import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";

For TypeScript usage with type annotations:

import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";

// Types are inferred from the function parameter
const config: Parameters<typeof cssInjectedByJsPlugin>[0] = {
  styleId: "my-styles",
  topExecutionPriority: false,
};

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

For CommonJS:

const cssInjectedByJsPlugin = require("vite-plugin-css-injected-by-js");

Basic Usage

import { defineConfig } from "vite";
import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";

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

Simple configuration with style ID:

export default defineConfig({
  plugins: [
    cssInjectedByJsPlugin({
      styleId: "my-app-styles",
      topExecutionPriority: false,
    }),
  ],
});

Architecture

The plugin operates by intercepting CSS files during the Vite build process and converting them into JavaScript code that injects the styles at runtime. Key components:

  • Build Plugin: Processes CSS assets and injects them into JavaScript bundles
  • Injection System: Runtime code that creates and inserts style elements into the DOM
  • Asset Processing: CSS filtering, concatenation, and transformation pipeline
  • Development Support: Experimental hot-reload functionality for development mode

The plugin supports two injection modes:

  • Global Injection: All CSS injected into the main entry point (default)
  • Relative Injection: CSS injected per entry point based on import relationships

Capabilities

Main Plugin Function

Core plugin function that creates Vite plugins for CSS injection.

export default function cssInjectedByJsPlugin(
  config?: PluginConfiguration
): Plugin[];

Plugin Configuration

Development Mode Support

Experimental development server integration with hot-reload support for CSS injection.

interface DevOptions {
  enableDev?: boolean;
  removeStyleCode?: (id: string) => string;
  removeStyleCodeFunction?: (id: string) => void;
}

Development Mode

Custom Injection Functions

Advanced customization of CSS injection behavior with custom JavaScript code.

type InjectCode = (cssCode: string, options: InjectCodeOptions) => string;
type InjectCodeFunction = (cssCode: string, options: InjectCodeOptions) => void;

interface InjectCodeOptions {
  styleId?: string | (() => string);
  useStrictCSP?: boolean;
  attributes?: { [key: string]: string };
}

Custom Injection

Types

interface PluginConfiguration extends BaseOptions {
  cssAssetsFilterFunction?: (chunk: OutputAsset) => boolean;
  jsAssetsFilterFunction?: (chunk: OutputChunk) => boolean;
  preRenderCSSCode?: (cssCode: string) => string;
  relativeCSSInjection?: boolean;
  suppressUnusedCssWarning?: boolean;
}

interface BaseOptions {
  dev?: DevOptions;
  injectCode?: InjectCode;
  injectCodeFunction?: InjectCodeFunction;
  injectionCodeFormat?: ModuleFormat;
  styleId?: string | (() => string);
  topExecutionPriority?: boolean;
  useStrictCSP?: boolean;
}

// External types from dependencies
type Plugin = import('vite').Plugin;
type OutputAsset = import('rollup').OutputAsset;
type OutputChunk = import('rollup').OutputChunk;
type ModuleFormat = import('rollup').ModuleFormat;
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/vite-plugin-css-injected-by-js@3.5.x
Publish Source
CLI
Badge
tessl/npm-vite-plugin-css-injected-by-js badge