@sylphx/silk-vite-plugin 2.0.2 → 2.2.0

package/dist/index.d.ts

@@ -1,64 +1,50 @@
 /**
  * @sylphx/silk-vite-plugin
- * Universal plugin for zero-runtime Silk CSS-in-TypeScript
+ * Zero-codegen Vite plugin using virtual CSS modules
  *
- * Uses unplugin for cross-bundler compatibility
+ * Architecture:
+ * 1. Scan source files for css() calls
+ * 2. Generate CSS via scanAndGenerate()
+ * 3. Create virtual 'silk.css' module
+ * 4. CSS flows through Vite's CSS pipeline (PostCSS, optimization, bundling)
  */
-export interface CompressionOptions {
+import type { Plugin } from 'vite';
+import { type GenerateOptions } from '@sylphx/silk/codegen';
+export interface SilkVitePluginOptions extends GenerateOptions {
     /**
-     * Enable Brotli compression (.css.br)
-     * @default true
+     * Source directory to scan for css() calls
+     * @default './src'
      */
-    brotli?: boolean;
+    srcDir?: string;
     /**
-     * Brotli quality (0-11)
-     * @default 11
-     */
-    brotliQuality?: number;
-    /**
-     * Enable gzip compression (.css.gz)
-     * @default true
-     */
-    gzip?: boolean;
-    /**
-     * Gzip level (0-9)
-     * @default 9
-     */
-    gzipLevel?: number;
-}
-export interface SilkPluginOptions {
-    /**
-     * Output CSS file path
+     * Virtual module ID (what users import)
      * @default 'silk.css'
      */
-    outputFile?: string;
+    virtualModuleId?: string;
     /**
-     * Minify CSS output
-     * @default true in production
+     * Enable debug logging
+     * @default false
      */
-    minify?: boolean;
-    /**
-     * Pre-compression options
-     */
-    compression?: CompressionOptions;
-    /**
-     * Babel plugin options
-     */
-    babelOptions?: {
-        production?: boolean;
-        classPrefix?: string;
-        importSources?: string[];
-        tokens?: Record<string, any>;
-        breakpoints?: Record<string, string>;
-    };
+    debug?: boolean;
 }
 /**
- * Silk unplugin instance
+ * Silk Vite plugin - Zero-codegen with virtual CSS module
+ *
+ * @example
+ * ```typescript
+ * // vite.config.ts
+ * import silk from '@sylphx/silk-vite-plugin'
+ *
+ * export default {
+ *   plugins: [silk()]
+ * }
+ * ```
+ *
+ * ```typescript
+ * // app.tsx
+ * import 'silk.css'  // Virtual module → Vite CSS pipeline
+ * ```
  */
-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;
+export default function silkPlugin(options?: SilkVitePluginOptions): Plugin;
+export { silkPlugin };
 //# 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;;;;;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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AACnC,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE7E,MAAM,WAAW,qBAAsB,SAAQ,eAAe;IAC5D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAID;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,OAAO,GAAE,qBAA0B,GAAG,MAAM,CAiG9E;AAGD,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/index.js

@@ -1,202 +1,113 @@
 /**
  * @sylphx/silk-vite-plugin
- * Universal plugin for zero-runtime Silk CSS-in-TypeScript
+ * Zero-codegen Vite plugin using virtual CSS modules
  *
- * Uses unplugin for cross-bundler compatibility
+ * Architecture:
+ * 1. Scan source files for css() calls
+ * 2. Generate CSS via scanAndGenerate()
+ * 3. Create virtual 'silk.css' module
+ * 4. CSS flows through Vite's CSS pipeline (PostCSS, optimization, bundling)
  */
-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();
+import { scanAndGenerate } from '@sylphx/silk/codegen';
+const VIRTUAL_MODULE_PREFIX = '\0virtual:';
 /**
- * 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
+ * Silk Vite plugin - Zero-codegen with virtual CSS module
+ *
+ * @example
+ * ```typescript
+ * // vite.config.ts
+ * import silk from '@sylphx/silk-vite-plugin'
+ *
+ * export default {
+ *   plugins: [silk()]
+ * }
+ * ```
+ *
+ * ```typescript
+ * // app.tsx
+ * import 'silk.css'  // Virtual module → Vite CSS pipeline
+ * ```
  */
-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 isProduction = false;
+export default function silkPlugin(options = {}) {
+    const { srcDir = './src', virtualModuleId = 'silk.css', debug = false, ...generateOptions } = options;
+    const resolvedVirtualModuleId = VIRTUAL_MODULE_PREFIX + virtualModuleId;
+    let generatedCSS = null;
+    let isDevMode = true;
     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;
+        name: 'vite-plugin-silk',
+        enforce: 'pre',
+        configResolved(config) {
+            isDevMode = config.command === 'serve';
+            if (debug) {
+                console.log(`[Silk] Mode: ${isDevMode ? 'development' : 'production'}`);
+                console.log(`[Silk] Scanning: ${srcDir}`);
             }
-            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;
-            }
+        async buildStart() {
+            // Generate CSS on build start
             try {
-                // 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;
+                if (debug) {
+                    console.log('[Silk] Generating CSS...');
                 }
-                // 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)}`);
-                    }
+                generatedCSS = await scanAndGenerate(srcDir, {
+                    ...generateOptions,
+                    minify: generateOptions.minify ?? !isDevMode,
+                    debug
+                });
+                if (debug) {
+                    console.log(`[Silk] Generated ${generatedCSS.length} bytes of CSS`);
                 }
-                return {
-                    code: result.code,
-                    map: result.map || undefined,
-                };
             }
             catch (error) {
-                console.error(`[Silk] Transform error in ${id}:`, error);
-                return null;
+                console.error('[Silk] CSS generation failed:', error);
+                generatedCSS = '/* Silk CSS generation failed */';
             }
         },
-        // 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);
+        resolveId(id) {
+            // Resolve virtual module
+            if (id === virtualModuleId) {
+                return resolvedVirtualModuleId;
             }
-            // Emit main CSS file
-            this.emitFile({
-                type: 'asset',
-                fileName: outputFile,
-                source: css,
-            });
-            // 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);
-                    }
-                }
-                // 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);
-                    }
+            return null;
+        },
+        load(id) {
+            // Load virtual module
+            if (id === resolvedVirtualModuleId) {
+                if (!generatedCSS) {
+                    return '/* No CSS generated */';
                 }
-                // Summary
-                console.log(`\n📦 Silk CSS Bundle:`);
-                console.log(`  Original: ${formatBytes(originalSize)} (${outputFile})`);
-                console.log(`  Rules: ${cssRules.size} atomic classes\n`);
+                return generatedCSS;
             }
+            return null;
         },
-        // 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);
+        async handleHotUpdate({ file, server }) {
+            // Watch mode: regenerate CSS on file changes
+            if (!isDevMode)
+                return;
+            // Check if changed file is in srcDir and matches our patterns
+            if (file.includes(srcDir) && /\.[jt]sx?$/.test(file)) {
+                if (debug) {
+                    console.log(`[Silk] File changed: ${file}, regenerating CSS...`);
                 }
-                compilation.assets[outputFile] = {
-                    source: () => css,
-                    size: () => css.length,
-                };
-            });
-        },
+                try {
+                    generatedCSS = await scanAndGenerate(srcDir, {
+                        ...generateOptions,
+                        minify: false,
+                        debug
+                    });
+                    // Trigger HMR for the virtual module
+                    const module = server.moduleGraph.getModuleById(resolvedVirtualModuleId);
+                    if (module) {
+                        server.moduleGraph.invalidateModule(module);
+                        return [module];
+                    }
+                }
+                catch (error) {
+                    console.error('[Silk] CSS regeneration failed:', error);
+                }
+            }
+        }
     };
-});
-// 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;
+}
+// Named exports for clarity
+export { silkPlugin };

package/dist/index.old.d.ts

@@ -0,0 +1,109 @@
+/**
+ * @sylphx/silk-vite-plugin
+ * Universal plugin for zero-runtime Silk CSS-in-TypeScript
+ *
+ * Uses unplugin for cross-bundler compatibility
+ */
+export interface CompressionOptions {
+    /**
+     * Enable Brotli compression (.css.br)
+     * @default true
+     */
+    brotli?: boolean;
+    /**
+     * Brotli quality (0-11)
+     * @default 11
+     */
+    brotliQuality?: number;
+    /**
+     * Enable gzip compression (.css.gz)
+     * @default true
+     */
+    gzip?: boolean;
+    /**
+     * Gzip level (0-9)
+     * @default 9
+     */
+    gzipLevel?: number;
+}
+export interface PostCssOptions {
+    /**
+     * Enable PostCSS processing
+     * @default false
+     */
+    enable?: boolean;
+    /**
+     * PostCSS plugins (e.g., autoprefixer, cssnano)
+     * @example
+     * ```typescript
+     * import autoprefixer from 'autoprefixer'
+     *
+     * postCss: {
+     *   enable: true,
+     *   plugins: [
+     *     autoprefixer({ overrideBrowserslist: ['> 1%', 'last 2 versions'] })
+     *   ]
+     * }
+     * ```
+     */
+    plugins?: any[];
+    /**
+     * Generate source maps
+     * @default false
+     */
+    sourceMaps?: boolean;
+}
+export interface SilkPluginOptions {
+    /**
+     * Output CSS file path
+     * @default 'silk.css'
+     */
+    outputFile?: string;
+    /**
+     * Minify CSS output
+     * @default true in production
+     */
+    minify?: boolean;
+    /**
+     * Pre-compression options
+     */
+    compression?: CompressionOptions;
+    /**
+     * PostCSS processing (optional)
+     * Add autoprefixer for legacy browser support or custom PostCSS plugins
+     *
+     * @example
+     * ```typescript
+     * import autoprefixer from 'autoprefixer'
+     *
+     * {
+     *   postCss: {
+     *     enable: true,
+     *     plugins: [autoprefixer()],
+     *     sourceMaps: true
+     *   }
+     * }
+     * ```
+     */
+    postCss?: PostCssOptions;
+    /**
+     * Babel plugin options
+     */
+    babelOptions?: {
+        production?: boolean;
+        classPrefix?: string;
+        importSources?: string[];
+        tokens?: Record<string, any>;
+        breakpoints?: Record<string, string>;
+    };
+}
+/**
+ * Silk unplugin instance
+ */
+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) => import("unplugin").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.old.d.ts.map

package/dist/index.old.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.old.d.ts","sourceRoot":"","sources":["../src/index.old.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAYH,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,cAAc;IAC7B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,EAAE,GAAG,EAAE,CAAA;IAEf;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;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;;;;;;;;;;;;;;;;OAgBG;IACH,OAAO,CAAC,EAAE,cAAc,CAAA;IAExB;;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;AA0DD;;GAEG;AACH,eAAO,MAAM,YAAY,iEAkPvB,CAAA;AAGF,eAAO,MAAM,IAAI,2FAAoB,CAAA;AACrC,eAAO,MAAM,OAAO,0EAAuB,CAAA;AAC3C,eAAO,MAAM,MAAM,+FAAsB,CAAA;AACzC,eAAO,MAAM,OAAO,kEAAuB,CAAA;AAG3C,eAAe,IAAI,CAAA"}

package/dist/index.old.js

@@ -0,0 +1,279 @@
+/**
+ * @sylphx/silk-vite-plugin
+ * Universal plugin for zero-runtime Silk CSS-in-TypeScript
+ *
+ * Uses unplugin for cross-bundler compatibility
+ */
+import { createUnplugin } from 'unplugin';
+import * as path from 'node:path';
+import { gzipSync, brotliCompressSync, constants } from 'node:zlib';
+import { createHash } from 'node:crypto';
+// @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`;
+}
+/**
+ * Process CSS with PostCSS (optional)
+ */
+async function processWithPostCss(css, postCssOptions) {
+    if (!postCssOptions?.enable || !postCssOptions?.plugins?.length) {
+        return { css };
+    }
+    try {
+        // Dynamic import to avoid forcing PostCSS as a dependency
+        const postcss = await import('postcss').then(m => m.default || m);
+        const result = await postcss(postCssOptions.plugins).process(css, {
+            from: undefined,
+            map: postCssOptions.sourceMaps ? { inline: false } : false
+        });
+        return {
+            css: result.css,
+            map: result.map?.toString()
+        };
+    }
+    catch (error) {
+        if (error?.code === 'ERR_MODULE_NOT_FOUND') {
+            console.warn('[Silk] PostCSS enabled but not installed. Run: npm install postcss');
+            return { css };
+        }
+        throw error;
+    }
+}
+/**
+ * Silk unplugin instance
+ */
+export const unpluginSilk = createUnplugin((options = {}) => {
+    const { outputFile = 'silk.css', minify: shouldMinify, compression = {}, babelOptions = {}, postCss, } = options;
+    const compressionConfig = {
+        brotli: compression.brotli ?? true,
+        brotliQuality: compression.brotliQuality ?? 11,
+        gzip: compression.gzip ?? true,
+        gzipLevel: compression.gzipLevel ?? 9,
+    };
+    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;
+            }
+            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;
+            }
+            try {
+                // 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.error(`[Silk] Transform error in ${id}:`, error);
+                return null;
+            }
+        },
+        // 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 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);
+                    }
+                }
+                // 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`);
+            }
+        },
+        // 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');
+                let sourceMap;
+                // Minify CSS
+                if (shouldMinify ?? true) {
+                    css = minifyCSS(css);
+                }
+                // PostCSS processing (optional)
+                if (postCss?.enable) {
+                    const result = await processWithPostCss(css, postCss);
+                    css = result.css;
+                    sourceMap = result.map;
+                }
+                // Generate content hash for cache busting
+                const hash = createHash('md5').update(css).digest('hex').slice(0, 8);
+                const baseName = outputFile.replace('.css', '');
+                const hashedFileName = `${baseName}.${hash}.css`;
+                // Emit to both locations for Next.js compatibility
+                compilation.assets[outputFile] = {
+                    source: () => css,
+                    size: () => css.length,
+                };
+                // Emit with content hash to static/css directory (production)
+                const staticCssPath = `static/css/${hashedFileName}`;
+                compilation.assets[staticCssPath] = {
+                    source: () => css,
+                    size: () => css.length,
+                };
+                // Also emit non-hashed version for backwards compatibility
+                const staticCssPathLegacy = `static/css/${outputFile}`;
+                compilation.assets[staticCssPathLegacy] = {
+                    source: () => css,
+                    size: () => css.length,
+                };
+                // Emit source map if PostCSS generated one
+                if (sourceMap) {
+                    compilation.assets[`${staticCssPath}.map`] = {
+                        source: () => sourceMap,
+                        size: () => sourceMap.length,
+                    };
+                    compilation.assets[`${outputFile}.map`] = {
+                        source: () => sourceMap,
+                        size: () => sourceMap.length,
+                    };
+                }
+                console.log(`[Silk] Emitted CSS:`);
+                console.log(`  • ${outputFile} (${css.length} bytes)`);
+                console.log(`  • ${staticCssPath} (content-hashed, cacheable)`);
+                console.log(`  • ${staticCssPathLegacy} (legacy, no hash)`);
+                if (postCss?.enable) {
+                    console.log(`  • PostCSS: ${postCss.plugins?.length || 0} plugins applied`);
+                }
+                if (sourceMap) {
+                    console.log(`  • Source map generated`);
+                }
+                // Store the hashed filename for potential use in HTML injection
+                ;
+                compilation.__silkCssFileName = hashedFileName;
+            });
+        },
+    };
+});
+// 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": "2.0.2",
+  "version": "2.2.0",
   "description": "Vite plugin for Silk - Build-time CSS extraction with production optimizations",
   "keywords": [
     "silk",
@@ -40,20 +40,14 @@
     "prepublishOnly": "bun run build"
   },
   "dependencies": {
-    "@babel/core": "^7.23.0",
-    "@babel/preset-react": "^7.23.0",
-    "@babel/preset-typescript": "^7.23.0",
-    "@sylphx/babel-plugin-silk": "^2.0.0",
-    "@sylphx/silk": "^2.0.0",
-    "unplugin": "^2.3.10"
+    "@sylphx/silk": "workspace:*"
   },
   "devDependencies": {
-    "@types/babel__core": "^7.20.5",
     "typescript": "^5.3.0",
     "vite": "^5.0.0"
   },
   "peerDependencies": {
-    "vite": "^4.0.0 || ^5.0.0"
+    "vite": "^4.0.0 || ^5.0.0 || ^6.0.0"
   },
   "publishConfig": {
     "access": "public"