Example 14: CSS/JS Processing Types

SSI processes CSS and JavaScript files the same way it processes HTML — tokens in any text file are resolved by the include pipeline. This example demonstrates three approaches.

Three Approaches

Approach How When to use
type = "plain" + no-escape Token substitution in CSS/JS source files Per-page theme variables, environment-specific config
type = "raw" Verbatim content included via token (no escaping) Inline SVG, pre-formatted JSON, literal passthrough
processing = "copy" File copied as-is, referenced by URL Pre-minified vendor libraries

Config

The full ssi-config.toml for this site:

[[step]]
  emoji = "📄"
  path = "pages/"
  processing = "page"
  
  # CSS templates: each .css file in css/ is a page,
  # processed with per-page context from css-vars/.
  [[step]]
  emoji = "💅"
  path = "css/"
  processing = "page"
  
  # Per-page CSS variable values (no-escape preserves CSS syntax)
  [[step]]
  emoji = "🎨"
  path = "css-vars/"
  processing = "include"
  type = "plain"
  options = ["inline", "no-escape"]
  
  # Pre-minified vendor CSS: copied verbatim, never tokenized
  [[step]]
  emoji = "⚡"
  path = "minified/"
  processing = "copy"
  
  # SVG icons: type = "raw" means zero processing, inserted verbatim
  [[step]]
  emoji = "🖼️"
  path = "svg/"
  processing = "include"
  type = "raw"

CSS Template Example

The css/homepage-theme.css source file contains a colors token. The css-vars/homepage-theme/colors.txt file provides the CSS custom property values. SSI resolves the colors token at build time, producing a complete static CSS file for each theme variant.

/* css/homepage-theme.css */
  :root {
      /* Color values come from css-vars/homepage-theme/colors.txt */
      🎨colors
  }
  
  body {
      color: var(--text-color);
      background-color: var(--background-color);
  }
  
  .hero {
      background: linear-gradient(
          135deg,
          var(--primary-color) 0%,
          var(--secondary-color) 100%
      );
  }