Vite plugin for Silk - Build-time CSS extraction with production optimizations
npm install @sylphx/silk-vite-pluginVite plugin for Silk - enables build-time CSS extraction and optimization.
``bash`
npm install @sylphx/silk @sylphx/silk-vite-pluginor
bun add @sylphx/silk @sylphx/silk-vite-plugin
vite.config.ts:
`typescript
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:
`typescript`
import './silk.css'
- ✅ 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
`typescript``
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)
}
Full documentation: GitHub Repository
MIT © SylphX Ltd