or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mdcustom-injection.mddevelopment-mode.mdindex.md
tile.json

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

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/vite-plugin-css-injected-by-js@3.5.x

To install, run

npx @tessl/cli install tessl/npm-vite-plugin-css-injected-by-js@3.5.0

index.mddocs/

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;