Skip to content
staticview

Staticview Vite Plugin

A Vite plugin for compiling web components with @staticview/core.

The plugin:

  • Transforms matching .ts files into bundled web components
  • Watches embedded HTML and CSS dependencies
  • Triggers full page reloads when component dependencies change
  • Supports PostCSS integration
  • Supports optional IIFE output mode

Installation

Terminal window
npm install @staticview/vite-plugin

Options

export interface StaticViewVitePluginOptions {
  /** Glob patterns for web component `.ts` files to process. */
  include: string[];


  /** Glob patterns for files to exclude from processing. */
  exclude?: string[];


  /** Forces the plugin to run in production mode regardless of environment. */
  forceProduction?: boolean;


  /** Loads the local PostCSS config file and applies its plugins. */
  loadPostcssConfig?: boolean;


  /** Additional PostCSS plugins to apply during processing. */
  postcssPlugins?: readonly AcceptedPlugin[];


  /**
   * Wraps the generated component bundle in an IIFE.
   *
   * @default true
   */
  iife?: boolean;


  /**
   * Minifies component CSS, CSS classes, CSS variables, HTML, and JS output.
   *
   * Defaults to `true` in production mode.
   */
  minify?: boolean;


  /**
   * Minifies component CSS output.
   *
   * Defaults to the value of `minify`.
   */
  minifyCSS?: boolean;


  /**
   * Minifies component HTML output.
   *
   * Defaults to the value of `minify`.
   */
  minifyHTML?: boolean;


  /**
   * Minifies generated CSS class names.
   *
   * Defaults to the value of `minify`.
   */
  minifyCssClasses?: boolean;


  /**
   * Ignore CSS classes with these prefixes when minifying CSS classes.
   *
   * @default ["_"]
   */
  minifyCssClassesIgnorePrefix?: string[];


  /**
   * Minifies generated CSS variable names.
   *
   * Defaults to the value of `minify`.
   */
  minifyCssVariables?: boolean;


  /**
   * Ignore CSS variables with these prefixes when minifying CSS variables.
   *
   * @default ["sv-", "_"]
   */
  minifyCssVariablesIgnorePrefix?: string[];


  /**
   * Minifies generated JavaScript output.
   *
   * Defaults to the value of `minify`.
   */
  minifyJS?: boolean;
}

Example

import staticviewVitePlugin from "@staticview/vite-plugin";
import autoprefixer from "autoprefixer";
import { defineConfig } from "vite";


export default defineConfig({
  plugins: [
    staticviewVitePlugin({
      include: ["src/components/**/*.ts"],
      loadPostcssConfig: true,
      postcssPlugins: [autoprefixer()],
      iife: false,
    }),
  ],
});