@sylphx/silk-vite-plugin 1.1.1 → 2.0.0

package/dist/index.d.ts

@@ -1,24 +1,22 @@
 /**
  * @sylphx/silk-vite-plugin
- * Build-time CSS extraction with pre-compression (15-25% smaller)
+ * Universal plugin for zero-runtime Silk CSS-in-TypeScript
+ *
+ * Uses unplugin for cross-bundler compatibility
  */
-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)
+     * Brotli quality (0-11)
      * @default 11
      */
     brotliQuality?: number;
     /**
      * Enable gzip compression (.css.gz)
-     * Fallback for older servers
      * @default true
      */
     gzip?: boolean;
@@ -30,37 +28,37 @@ export interface CompressionOptions {
 }
 export interface SilkPluginOptions {
     /**
-     * Output CSS file path (relative to outDir)
+     * Output CSS file path
      * @default 'silk.css'
      */
     outputFile?: string;
-    /**
-     * Include CSS in HTML automatically
-     * @default true
-     */
-    inject?: boolean;
     /**
      * Minify CSS output
      * @default true in production
      */
     minify?: boolean;
     /**
-     * Watch mode for development
-     * @default true
+     * Pre-compression options
      */
-    watch?: boolean;
+    compression?: CompressionOptions;
     /**
-     * Pre-compression options (Brotli + gzip)
-     * Generates .br and .gz files for web servers
-     * @default { brotli: true, gzip: true }
+     * Babel plugin options
      */
-    compression?: CompressionOptions;
+    babelOptions?: {
+        production?: boolean;
+        classPrefix?: string;
+        importSources?: string[];
+        tokens?: Record<string, any>;
+        breakpoints?: Record<string, string>;
+    };
 }
-export declare function silk(options?: SilkPluginOptions): Plugin;
-export default silk;
 /**
- * Client-side script for hot CSS updates
- * This should be imported in the app entry point
+ * Silk unplugin instance
  */
-export declare const silkClient = "\nif (import.meta.hot) {\n  import.meta.hot.on('silk:update', ({ css }) => {\n    let style = document.querySelector('style[data-silk]')\n    if (!style) {\n      style = document.createElement('style')\n      style.setAttribute('data-silk', '')\n      document.head.appendChild(style)\n    }\n    style.textContent = css\n  })\n}\n";
+export declare const unpluginSilk: import("unplugin").UnpluginInstance<SilkPluginOptions, boolean>;
+export declare const vite: (options: SilkPluginOptions) => import("vite").Plugin<any> | import("vite").Plugin<any>[];
+export declare const webpack: (options: SilkPluginOptions) => WebpackPluginInstance;
+export declare const rollup: (options: SilkPluginOptions) => import("rollup").Plugin<any> | import("rollup").Plugin<any>[];
+export declare const esbuild: (options: SilkPluginOptions) => import("unplugin").EsbuildPlugin;
+export default vite;
 //# sourceMappingURL=index.d.ts.map

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;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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAWH,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB;;;OAGG;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;;OAEG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAA;IAEhC;;OAEG;IACH,YAAY,CAAC,EAAE;QACb,UAAU,CAAC,EAAE,OAAO,CAAA;QACpB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;QACxB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;QAC5B,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KACrC,CAAA;CACF;AAyBD;;GAEG;AACH,eAAO,MAAM,YAAY,iEA0LvB,CAAA;AAGF,eAAO,MAAM,IAAI,2FAAoB,CAAA;AACrC,eAAO,MAAM,OAAO,uDAAuB,CAAA;AAC3C,eAAO,MAAM,MAAM,+FAAsB,CAAA;AACzC,eAAO,MAAM,OAAO,kEAAuB,CAAA;AAG3C,eAAe,IAAI,CAAA"}

package/dist/index.js

@@ -1,216 +1,202 @@
 /**
  * @sylphx/silk-vite-plugin
- * Build-time CSS extraction with pre-compression (15-25% smaller)
+ * Universal plugin for zero-runtime Silk CSS-in-TypeScript
+ *
+ * Uses unplugin for cross-bundler compatibility
  */
-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, compression = {} } = options;
+import { createUnplugin } from 'unplugin';
+import * as path from 'node:path';
+import { gzipSync, brotliCompressSync, constants } from 'node:zlib';
+// @ts-ignore - Babel preset types not needed
+import presetReact from '@babel/preset-react';
+// @ts-ignore - Babel preset types not needed
+import presetTypeScript from '@babel/preset-typescript';
+// Global CSS registry
+const cssRules = new Map();
+/**
+ * Minify CSS
+ */
+function minifyCSS(css) {
+    return css
+        .replace(/\s+/g, ' ')
+        .replace(/\s*([{}:;,])\s*/g, '$1')
+        .replace(/;}/g, '}')
+        .trim();
+}
+/**
+ * Format bytes
+ */
+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`;
+}
+/**
+ * Silk unplugin instance
+ */
+export const unpluginSilk = createUnplugin((options = {}) => {
+    const { outputFile = 'silk.css', minify: shouldMinify, compression = {}, babelOptions = {}, } = 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),
-                });
+    let isProduction = false;
+    return {
+        name: 'unplugin-silk',
+        enforce: 'pre', // Run before other plugins
+        // Only transform TypeScript/JSX files
+        transformInclude(id) {
+            // Skip node_modules and virtual modules
+            if (id.includes('node_modules') || id.includes('\0')) {
+                return false;
             }
-            catch (error) {
-                console.warn('Brotli compression failed:', error);
+            return /\.[jt]sx?$/.test(id);
+        },
+        // Transform code with Babel
+        async transform(code, id) {
+            // Skip if no silk imports
+            if (!code.includes('@sylphx/silk')) {
+                return null;
             }
-        }
-        // Generate gzip (.gz)
-        if (compressionConfig.gzip) {
             try {
-                const compressed = gzipSync(css, { level: compressionConfig.gzipLevel });
-                outputs.push({
-                    fileName: `${fileName}.gz`,
-                    source: compressed,
+                // Dynamic import to avoid bundling
+                const { transformSync } = await import('@babel/core');
+                const babelPluginSilk = (await import('@sylphx/babel-plugin-silk')).default;
+                // Set production mode if not explicitly set
+                const babelOpts = {
+                    ...babelOptions,
+                    production: babelOptions.production ?? isProduction,
+                };
+                // Transform with Babel plugin
+                const result = transformSync(code, {
+                    filename: id,
+                    presets: [
+                        [presetReact, { runtime: 'automatic' }],
+                        [presetTypeScript, { isTSX: true, allExtensions: true }],
+                    ],
+                    plugins: [[babelPluginSilk, babelOpts]],
+                    sourceMaps: true,
+                    configFile: false,
+                    babelrc: false,
                 });
+                if (!result || !result.code) {
+                    return null;
+                }
+                // Extract CSS from metadata
+                const metadata = result.metadata;
+                if (metadata?.silk?.cssRules) {
+                    for (const [className, rule] of metadata.silk.cssRules) {
+                        cssRules.set(className, rule);
+                    }
+                    // Log in dev mode
+                    if (!isProduction && metadata.silk.cssRules.length > 0) {
+                        console.log(`[Silk] Compiled ${metadata.silk.cssRules.length} CSS rules from ${path.basename(id)}`);
+                    }
+                }
+                return {
+                    code: result.code,
+                    map: result.map || undefined,
+                };
             }
             catch (error) {
-                console.warn('Gzip compression failed:', error);
+                console.error(`[Silk] Transform error in ${id}:`, error);
+                return null;
             }
-        }
-        return outputs;
-    }
-    /**
-     * Collect CSS rules from runtime
-     */
-    function collectCSS() {
-        const rules = [];
-        for (const [className, rule] of cssRules) {
-            if (!cssCache.has(className)) {
-                rules.push(rule);
-                cssCache.add(className);
-            }
-        }
-        return rules.join('\n');
-    }
-    /**
-     * Minify CSS (basic implementation)
-     */
-    function minifyCSS(css) {
-        return css
-            .replace(/\s+/g, ' ')
-            .replace(/\s*([{}:;,])\s*/g, '$1')
-            .replace(/;}/g, '}')
-            .trim();
-    }
-    /**
-     * Generate CSS output
-     */
-    function generateCSS() {
-        let css = collectCSS();
-        if (minify ?? isBuild) {
-            css = minifyCSS(css);
-        }
-        return css;
-    }
-    return {
-        name: 'silk',
-        configResolved(config) {
-            isBuild = config.command === 'build';
-        },
-        configureServer(_server) {
-            server = _server;
-            // Hot reload CSS in dev mode
-            if (watch) {
-                const watcher = setInterval(() => {
-                    const newCSS = collectCSS();
-                    if (newCSS) {
-                        server?.ws.send({
-                            type: 'custom',
-                            event: 'silk:update',
-                            data: { css: newCSS },
-                        });
-                    }
-                }, 100);
-                server.httpServer?.on('close', () => {
-                    clearInterval(watcher);
-                });
-            }
-        },
-        transformIndexHtml: {
-            order: 'post',
-            handler(html) {
-                if (!inject)
-                    return html;
-                const css = generateCSS();
-                if (!css)
-                    return html;
-                // Inject CSS into head
-                const styleTag = `<style data-silk>${css}</style>`;
-                if (html.includes('</head>')) {
-                    return html.replace('</head>', `${styleTag}\n</head>`);
-                }
-                return `${styleTag}\n${html}`;
-            },
         },
-        async generateBundle(_, bundle) {
-            if (!isBuild)
-                return;
-            const css = generateCSS();
-            if (!css)
+        // Universal hook - works for all bundlers
+        async generateBundle() {
+            if (cssRules.size === 0)
                 return;
+            // Generate CSS
+            let css = Array.from(cssRules.values()).join('\n');
+            if (shouldMinify ?? isProduction) {
+                css = minifyCSS(css);
+            }
             // 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}%)`);
+            // Generate compressed versions
+            if (isProduction) {
+                const cssBuffer = Buffer.from(css, 'utf-8');
+                const originalSize = cssBuffer.length;
+                // Brotli compression
+                if (compressionConfig.brotli) {
+                    try {
+                        const compressed = brotliCompressSync(cssBuffer, {
+                            params: {
+                                [constants.BROTLI_PARAM_QUALITY]: compressionConfig.brotliQuality,
+                            },
+                        });
+                        this.emitFile({
+                            type: 'asset',
+                            fileName: `${outputFile}.br`,
+                            source: compressed,
+                        });
+                        const savings = ((1 - compressed.length / originalSize) * 100).toFixed(1);
+                        console.log(`[Silk] Brotli: ${formatBytes(compressed.length)} (-${savings}%)`);
+                    }
+                    catch (error) {
+                        console.warn('[Silk] Brotli compression failed:', error);
+                    }
                 }
-                console.log('');
-            }
-            // Update HTML to reference external CSS file
-            for (const fileName in bundle) {
-                const chunk = bundle[fileName];
-                if (chunk && chunk.type === 'asset' && fileName.endsWith('.html')) {
-                    const asset = chunk; // OutputAsset type
-                    const html = asset.source;
-                    const linkTag = `<link rel="stylesheet" href="/${outputFile}">`;
-                    // Replace inline style with link tag
-                    asset.source = html
-                        .replace(/<style data-silk>[\s\S]*?<\/style>/, linkTag)
-                        .replace('</head>', `${linkTag}\n</head>`);
+                // Gzip compression
+                if (compressionConfig.gzip) {
+                    try {
+                        const compressed = gzipSync(cssBuffer, {
+                            level: compressionConfig.gzipLevel,
+                        });
+                        this.emitFile({
+                            type: 'asset',
+                            fileName: `${outputFile}.gz`,
+                            source: compressed,
+                        });
+                        const savings = ((1 - compressed.length / originalSize) * 100).toFixed(1);
+                        console.log(`[Silk] Gzip: ${formatBytes(compressed.length)} (-${savings}%)`);
+                    }
+                    catch (error) {
+                        console.warn('[Silk] Gzip compression failed:', error);
+                    }
                 }
+                // Summary
+                console.log(`\n📦 Silk CSS Bundle:`);
+                console.log(`  Original: ${formatBytes(originalSize)} (${outputFile})`);
+                console.log(`  Rules: ${cssRules.size} atomic classes\n`);
             }
         },
-        // Handle hot updates in dev mode
-        handleHotUpdate({ file, server }) {
-            if (file.endsWith('.ts') || file.endsWith('.tsx')) {
-                // Trigger CSS update
-                const css = generateCSS();
-                server.ws.send({
-                    type: 'custom',
-                    event: 'silk:update',
-                    data: { css },
-                });
-            }
+        // Vite-specific hooks
+        vite: {
+            configResolved(config) {
+                isProduction = config.command === 'build' && config.mode === 'production';
+            },
+        },
+        // Webpack-specific hooks
+        webpack(compiler) {
+            compiler.hooks.emit.tapPromise('SilkPlugin', async (compilation) => {
+                if (cssRules.size === 0)
+                    return;
+                let css = Array.from(cssRules.values()).join('\n');
+                if (shouldMinify ?? true) {
+                    css = minifyCSS(css);
+                }
+                compilation.assets[outputFile] = {
+                    source: () => css,
+                    size: () => css.length,
+                };
+            });
         },
     };
-}
-export default silk;
-/**
- * Client-side script for hot CSS updates
- * This should be imported in the app entry point
- */
-export const silkClient = `
-if (import.meta.hot) {
-  import.meta.hot.on('silk:update', ({ css }) => {
-    let style = document.querySelector('style[data-silk]')
-    if (!style) {
-      style = document.createElement('style')
-      style.setAttribute('data-silk', '')
-      document.head.appendChild(style)
-    }
-    style.textContent = css
-  })
-}
-`;
-/**
- * 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`;
-}
+});
+// Export for different bundlers
+export const vite = unpluginSilk.vite;
+export const webpack = unpluginSilk.webpack;
+export const rollup = unpluginSilk.rollup;
+export const esbuild = unpluginSilk.esbuild;
+// Default export for Vite
+export default vite;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sylphx/silk-vite-plugin",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "description": "Vite plugin for Silk - Build-time CSS extraction with production optimizations",
   "keywords": [
     "silk",
@@ -40,10 +40,15 @@
     "prepublishOnly": "bun run build"
   },
   "dependencies": {
-    "@sylphx/silk": "workspace:*"
+    "@babel/core": "^7.23.0",
+    "@babel/preset-react": "^7.23.0",
+    "@babel/preset-typescript": "^7.23.0",
+    "@sylphx/babel-plugin-silk": "workspace:*",
+    "@sylphx/silk": "workspace:*",
+    "unplugin": "^2.3.10"
   },
   "devDependencies": {
-    "brotli-wasm": "^3.0.1",
+    "@types/babel__core": "^7.20.5",
     "typescript": "^5.3.0",
     "vite": "^5.0.0"
   },