@sylphx/silk-vite-plugin 2.0.2 → 2.1.0

package/dist/index.d.ts

@@ -26,6 +26,33 @@ export interface CompressionOptions {
      */
     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
@@ -41,6 +68,24 @@ export interface SilkPluginOptions {
      * 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
      */
@@ -57,7 +102,7 @@ export interface SilkPluginOptions {
  */
 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 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;

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;;;;;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.js

@@ -7,6 +7,7 @@
 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
@@ -33,11 +34,38 @@ function formatBytes(bytes) {
         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 = {}, } = options;
+    const { outputFile = 'silk.css', minify: shouldMinify, compression = {}, babelOptions = {}, postCss, } = options;
     const compressionConfig = {
         brotli: compression.brotli ?? true,
         brotliQuality: compression.brotliQuality ?? 11,
@@ -182,13 +210,62 @@ export const unpluginSilk = createUnplugin((options = {}) => {
                 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;
             });
         },
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sylphx/silk-vite-plugin",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "Vite plugin for Silk - Build-time CSS extraction with production optimizations",
   "keywords": [
     "silk",
@@ -43,17 +43,29 @@
     "@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/babel-plugin-silk": "^2.0.1",
     "@sylphx/silk": "^2.0.0",
     "unplugin": "^2.3.10"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.6",
     "typescript": "^5.3.0",
     "vite": "^5.0.0"
   },
   "peerDependencies": {
-    "vite": "^4.0.0 || ^5.0.0"
+    "vite": "^4.0.0 || ^5.0.0",
+    "postcss": "^8.0.0",
+    "autoprefixer": "^10.0.0"
+  },
+  "peerDependenciesMeta": {
+    "postcss": {
+      "optional": true
+    },
+    "autoprefixer": {
+      "optional": true
+    }
   },
   "publishConfig": {
     "access": "public"