@sylphx/silk-vite-plugin 1.0.0 → 1.1.0

package/README.md

@@ -0,0 +1,80 @@
+# @sylphx/silk-vite-plugin
+
+Vite plugin for Silk - enables build-time CSS extraction and optimization.
+
+## Installation
+
+```bash
+npm install @sylphx/silk @sylphx/silk-vite-plugin
+# or
+bun add @sylphx/silk @sylphx/silk-vite-plugin
+```
+
+## Quick Start
+
+**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'
+```
+
+## 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
+
+```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)
+}
+```
+
+## Ecosystem
+
+### Core
+- **[@sylphx/silk](https://www.npmjs.com/package/@sylphx/silk)** - Core styling system
+
+### Framework Integrations
+- **[@sylphx/silk-react](https://www.npmjs.com/package/@sylphx/silk-react)** - React bindings
+- **[@sylphx/silk-vue](https://www.npmjs.com/package/@sylphx/silk-vue)** - Vue 3 Composition API
+- **[@sylphx/silk-svelte](https://www.npmjs.com/package/@sylphx/silk-svelte)** - Svelte reactive stores
+- **[@sylphx/silk-solid](https://www.npmjs.com/package/@sylphx/silk-solid)** - Solid.js fine-grained reactivity
+
+### Meta-Framework Plugins
+- **[@sylphx/silk-nextjs](https://www.npmjs.com/package/@sylphx/silk-nextjs)** - Next.js App Router & RSC
+- **[@sylphx/silk-remix](https://www.npmjs.com/package/@sylphx/silk-remix)** - Remix streaming SSR
+- **[@sylphx/silk-astro](https://www.npmjs.com/package/@sylphx/silk-astro)** - Astro islands architecture
+
+## Documentation
+
+Full documentation: [GitHub Repository](https://github.com/sylphxltd/silk)
+
+## License
+
+MIT © [SylphX Ltd](https://sylphx.com)

package/dist/index.d.ts

@@ -1,8 +1,33 @@
 /**
  * @sylphx/silk-vite-plugin
- * Build-time CSS extraction for zero runtime overhead
+ * Build-time CSS extraction with pre-compression (15-25% smaller)
  */
 import type { Plugin } from 'vite';
+export interface CompressionOptions {
+    /**
+     * Enable Brotli compression (.css.br)
+     * 15-25% smaller than gzip, 70% compression for CSS
+     * @default true
+     */
+    brotli?: boolean;
+    /**
+     * Brotli quality (0-11, higher = better compression but slower)
+     * Use 11 for production (static compression, no runtime cost)
+     * @default 11
+     */
+    brotliQuality?: number;
+    /**
+     * Enable gzip compression (.css.gz)
+     * Fallback for older servers
+     * @default true
+     */
+    gzip?: boolean;
+    /**
+     * Gzip level (0-9)
+     * @default 9
+     */
+    gzipLevel?: number;
+}
 export interface SilkPluginOptions {
     /**
      * Output CSS file path (relative to outDir)
@@ -24,6 +49,12 @@ export interface SilkPluginOptions {
      * @default true
      */
     watch?: boolean;
+    /**
+     * Pre-compression options (Brotli + gzip)
+     * Generates .br and .gz files for web servers
+     * @default { brotli: true, gzip: true }
+     */
+    compression?: CompressionOptions;
 }
 export declare function silk(options?: SilkPluginOptions): Plugin;
 export default silk;

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAiB,MAAM,MAAM,CAAA;AAKjD,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,wBAAgB,IAAI,CAAC,OAAO,GAAE,iBAAsB,GAAG,MAAM,CAyI5D;AAED,eAAe,IAAI,CAAA;AAEnB;;;GAGG;AACH,eAAO,MAAM,UAAU,iVAYtB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAiB,MAAM,MAAM,CAAA;AAOjD,MAAM,WAAW,kBAAkB;IACjC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IAEf;;;;OAIG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAA;CACjC;AAED,wBAAgB,IAAI,CAAC,OAAO,GAAE,iBAAsB,GAAG,MAAM,CAoN5D;AAED,eAAe,IAAI,CAAA;AAEnB;;;GAGG;AACH,eAAO,MAAM,UAAU,iVAYtB,CAAA"}

package/dist/index.js

@@ -1,13 +1,56 @@
 /**
  * @sylphx/silk-vite-plugin
- * Build-time CSS extraction for zero runtime overhead
+ * Build-time CSS extraction with pre-compression (15-25% smaller)
  */
 import { cssRules } from '@sylphx/silk';
+import { compress } from 'brotli-wasm';
+import { gzipSync } from 'node:zlib';
 export function silk(options = {}) {
-    const { outputFile = 'silk.css', inject = true, minify, watch = true } = options;
+    const { outputFile = 'silk.css', inject = true, minify, watch = true, compression = {} } = options;
+    const compressionConfig = {
+        brotli: compression.brotli ?? true,
+        brotliQuality: compression.brotliQuality ?? 11,
+        gzip: compression.gzip ?? true,
+        gzipLevel: compression.gzipLevel ?? 9,
+    };
     let server;
     let isBuild = false;
     const cssCache = new Set();
+    /**
+     * Generate compressed versions of CSS
+     */
+    async function generateCompressedAssets(css, fileName) {
+        const outputs = [];
+        // Generate Brotli (.br)
+        if (compressionConfig.brotli) {
+            try {
+                const compressed = await compress(Buffer.from(css, 'utf-8'), {
+                    quality: compressionConfig.brotliQuality,
+                });
+                outputs.push({
+                    fileName: `${fileName}.br`,
+                    source: Buffer.from(compressed),
+                });
+            }
+            catch (error) {
+                console.warn('Brotli compression failed:', error);
+            }
+        }
+        // Generate gzip (.gz)
+        if (compressionConfig.gzip) {
+            try {
+                const compressed = gzipSync(css, { level: compressionConfig.gzipLevel });
+                outputs.push({
+                    fileName: `${fileName}.gz`,
+                    source: compressed,
+                });
+            }
+            catch (error) {
+                console.warn('Gzip compression failed:', error);
+            }
+        }
+        return outputs;
+    }
     /**
      * Collect CSS rules from runtime
      */
@@ -81,18 +124,40 @@ export function silk(options = {}) {
                 return `${styleTag}\n${html}`;
             },
         },
-        generateBundle(_, bundle) {
+        async generateBundle(_, bundle) {
             if (!isBuild)
                 return;
             const css = generateCSS();
             if (!css)
                 return;
-            // Emit CSS file
+            // Emit main CSS file
             this.emitFile({
                 type: 'asset',
                 fileName: outputFile,
                 source: css,
             });
+            // Generate and emit compressed versions
+            const compressedAssets = await generateCompressedAssets(css, outputFile);
+            for (const asset of compressedAssets) {
+                this.emitFile({
+                    type: 'asset',
+                    fileName: asset.fileName,
+                    source: asset.source,
+                });
+            }
+            // Log compression results
+            if (compressedAssets.length > 0) {
+                const originalSize = Buffer.byteLength(css, 'utf-8');
+                console.log('\n📦 Silk CSS Bundle:');
+                console.log(`  Original: ${formatBytes(originalSize)} (${outputFile})`);
+                for (const asset of compressedAssets) {
+                    const compressedSize = asset.source.length;
+                    const savings = ((1 - compressedSize / originalSize) * 100).toFixed(1);
+                    const ext = asset.fileName.split('.').pop();
+                    console.log(`  ${ext?.toUpperCase()}: ${formatBytes(compressedSize)} (-${savings}%)`);
+                }
+                console.log('');
+            }
             // Update HTML to reference external CSS file
             for (const fileName in bundle) {
                 const chunk = bundle[fileName];
@@ -139,3 +204,13 @@ if (import.meta.hot) {
   })
 }
 `;
+/**
+ * Format bytes to human-readable format
+ */
+function formatBytes(bytes) {
+    if (bytes < 1024)
+        return `${bytes}B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(1)}KB`;
+    return `${(bytes / 1024 / 1024).toFixed(1)}MB`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sylphx/silk-vite-plugin",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Vite plugin for Silk - Build-time CSS extraction with production optimizations",
   "keywords": [
     "silk",
@@ -43,6 +43,7 @@
     "@sylphx/silk": "workspace:*"
   },
   "devDependencies": {
+    "brotli-wasm": "^3.0.1",
     "typescript": "^5.3.0",
     "vite": "^5.0.0"
   },