Plugin Configuration

/**
 * Main plugin configuration interface
 */
interface PluginConfiguration extends BaseOptions {
  /** Filter function to exclude specific CSS assets from injection */
  cssAssetsFilterFunction?: (chunk: OutputAsset) => boolean;
  /** Filter function to specify target JavaScript files for injection */
  jsAssetsFilterFunction?: (chunk: OutputChunk) => boolean;
  /** Pre-process CSS code before injection */
  preRenderCSSCode?: (cssCode: string) => string;
  /** Enable relative CSS injection per entry point */
  relativeCSSInjection?: boolean;
  /** Suppress warnings for unused CSS assets */
  suppressUnusedCssWarning?: boolean;
}

interface BaseOptions {
  /** Development mode configuration (experimental) */
  dev?: DevOptions;
  /** Custom CSS injection code function */
  injectCode?: InjectCode;
  /** Custom CSS injection runtime function */
  injectCodeFunction?: InjectCodeFunction;
  /** Format for injection code generation */
  injectionCodeFormat?: ModuleFormat;
  /** Custom style element ID or generator function */
  styleId?: string | (() => string);
  /** Execute CSS injection before app code */
  topExecutionPriority?: boolean;
  /** Enable strict CSP support with nonce */
  useStrictCSP?: boolean;
}

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

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

// Advanced configuration with filtering
export default defineConfig({
  plugins: [
    cssInjectedByJsPlugin({
      cssAssetsFilterFunction: (asset) => {
        // Only inject specific CSS files
        return asset.fileName.includes("critical");
      },
      jsAssetsFilterFunction: (chunk) => {
        // Target specific JavaScript files
        return chunk.fileName === "main.js";
      },
      preRenderCSSCode: (css) => {
        // Minify or transform CSS before injection
        return css.replace(/\s+/g, " ").trim();
      },
    }),
  ],
});

/**
 * Filter function to exclude specific CSS assets from injection
 * @param chunk - Output CSS asset to evaluate
 * @returns true to include asset, false to exclude
 */
cssAssetsFilterFunction?: (chunk: OutputAsset) => boolean;

// Include only specific CSS files
cssAssetsFilterFunction: (asset) => {
  return asset.fileName.includes("critical") || 
         asset.fileName.includes("main");
}

// Exclude third-party CSS
cssAssetsFilterFunction: (asset) => {
  return !asset.fileName.includes("vendor");
}

/**
 * Filter function to specify target JavaScript files for injection
 * @param chunk - Output JavaScript chunk to evaluate
 * @returns true to inject CSS into this chunk, false to skip
 */
jsAssetsFilterFunction?: (chunk: OutputChunk) => boolean;

// Inject into main entry point only
jsAssetsFilterFunction: (chunk) => {
  return chunk.fileName === "index.js";
}

// Inject into multiple specific files
jsAssetsFilterFunction: (chunk) => {
  return chunk.fileName === "main.js" || 
         chunk.fileName === "app.js";
}

/**
 * Pre-process CSS code before injection
 * @param cssCode - Raw CSS code extracted from build
 * @returns Modified CSS code to be injected
 */
preRenderCSSCode?: (cssCode: string) => string;

// Minify CSS before injection
preRenderCSSCode: (css) => {
  return css
    .replace(/\/\*[\s\S]*?\*\//g, "") // Remove comments
    .replace(/\s+/g, " ") // Collapse whitespace
    .trim();
}

// Add custom CSS transformations
preRenderCSSCode: (css) => {
  // Add custom prefix or modifications
  return `:root { --injected: true; }\n${css}`;
}

/**
 * Enable relative CSS injection per entry point
 * Requires build.cssCodeSplit to be true
 */
relativeCSSInjection?: boolean;

// Enable relative injection for multi-entry builds
export default defineConfig({
  build: {
    cssCodeSplit: true, // Required for relative injection
    rollupOptions: {
      input: {
        main: "src/main.ts",
        admin: "src/admin.ts",
      },
    },
  },
  plugins: [
    cssInjectedByJsPlugin({
      relativeCSSInjection: true,
      suppressUnusedCssWarning: true,
    }),
  ],
});

/**
 * Custom style element ID or generator function
 */
styleId?: string | (() => string);

// Static style ID
styleId: "my-app-styles"

// Dynamic style ID (useful with relative injection)
styleId: () => `styles-${Date.now()}`

// Random style ID for each injection
styleId: () => `app-${Math.random().toString(36).substr(2, 9)}`

/**
 * Execute CSS injection before app code
 * @default true
 */
topExecutionPriority?: boolean;

// Inject CSS after app initialization
topExecutionPriority: false

// Inject CSS before app code (default)
topExecutionPriority: true

/**
 * Enable strict CSP support with nonce
 * Requires <meta property="csp-nonce" content="nonce-value" /> in HTML
 */
useStrictCSP?: boolean;

// Enable CSP support
useStrictCSP: true

// HTML page must include:
// <meta property="csp-nonce" content="your-nonce-here" />

/**
 * Format for injection code generation
 * @default "iife"
 */
injectionCodeFormat?: ModuleFormat;

// Use IIFE format (default)
injectionCodeFormat: "iife"

// Use ES modules format
injectionCodeFormat: "es"

// Use CommonJS format
injectionCodeFormat: "cjs"