@sylphx/silk-vite-plugin 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 SylphX Ltd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @sylphx/silk-vite-plugin
+ * Build-time CSS extraction for zero runtime overhead
+ */
+import type { Plugin } from 'vite';
+export interface SilkPluginOptions {
+    /**
+     * Output CSS file path (relative to outDir)
+     * @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
+     */
+    watch?: boolean;
+}
+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
+ */
+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";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +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"}

package/dist/index.js

@@ -0,0 +1,141 @@
+/**
+ * @sylphx/silk-vite-plugin
+ * Build-time CSS extraction for zero runtime overhead
+ */
+import { cssRules } from '@sylphx/silk';
+export function silk(options = {}) {
+    const { outputFile = 'silk.css', inject = true, minify, watch = true } = options;
+    let server;
+    let isBuild = false;
+    const cssCache = new Set();
+    /**
+     * 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}`;
+            },
+        },
+        generateBundle(_, bundle) {
+            if (!isBuild)
+                return;
+            const css = generateCSS();
+            if (!css)
+                return;
+            // Emit CSS file
+            this.emitFile({
+                type: 'asset',
+                fileName: outputFile,
+                source: css,
+            });
+            // 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>`);
+                }
+            }
+        },
+        // 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 },
+                });
+            }
+        },
+    };
+}
+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
+  })
+}
+`;

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@sylphx/silk-vite-plugin",
+  "version": "1.0.0",
+  "description": "Vite plugin for Silk - Build-time CSS extraction with production optimizations",
+  "keywords": [
+    "silk",
+    "vite",
+    "vite-plugin",
+    "css-in-js",
+    "typescript"
+  ],
+  "author": "SylphX Ltd",
+  "license": "MIT",
+  "homepage": "https://sylphx.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sylphxltd/silk.git",
+    "directory": "packages/vite-plugin"
+  },
+  "bugs": {
+    "url": "https://github.com/sylphxltd/silk/issues"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "prepublishOnly": "bun run build"
+  },
+  "dependencies": {
+    "@sylphx/silk": "workspace:*"
+  },
+  "devDependencies": {
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0"
+  },
+  "peerDependencies": {
+    "vite": "^4.0.0 || ^5.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}