@sylphx/silk-vite-plugin

Vite plugin for Silk - enables build-time CSS extraction and optimization.

Installation

npm install @sylphx/silk @sylphx/silk-vite-plugin
# or
bun add @sylphx/silk @sylphx/silk-vite-plugin

Quick Start

vite.config.ts:

import { defineConfig } from 'vite'
import { silk } from '@sylphx/silk-vite-plugin'

export default defineConfig({
  plugins: [
    silk({
      outputFile: 'silk.css',  // Output CSS file
      inject: true,            // Auto-inject CSS
      minify: true,            // Minify CSS in production
      watch: true              // Watch for changes
    })
  ]
})

Import CSS in your app:

import './silk.css'

Features

• ✅ Build-time Extraction - Zero runtime CSS-in-JS overhead
• ✅ Auto Injection - Automatically inject CSS into HTML
• ✅ Production Optimization - Minification and deduplication
• ✅ Hot Module Replacement - Watch mode for development
• ✅ TypeScript Support - Full type safety

Options

interface SilkPluginOptions {
  outputFile?: string    // Output CSS file (default: 'silk.css')
  inject?: boolean       // Auto-inject CSS (default: true)
  minify?: boolean       // Minify CSS (default: based on mode)
  watch?: boolean        // Watch for changes (default: true)
}

Ecosystem

Core

• @sylphx/silk - Core styling system

Framework Integrations

• @sylphx/silk-react - React bindings
• @sylphx/silk-vue - Vue 3 Composition API
• @sylphx/silk-svelte - Svelte reactive stores
• @sylphx/silk-solid - Solid.js fine-grained reactivity
• @sylphx/silk-qwik - Qwik resumability & zero hydration
• @sylphx/silk-preact - Preact 3KB React alternative

Meta-Framework Plugins

• @sylphx/silk-nextjs - Next.js App Router & RSC
• @sylphx/silk-remix - Remix streaming SSR
• @sylphx/silk-astro - Astro islands architecture

Design System Presets

• @sylphx/silk-preset-material - Material Design 3 preset (~2KB)
• @sylphx/silk-preset-minimal - Minimal design system (~1KB)

Documentation

Full documentation: GitHub Repository

License

MIT © SylphX Ltd