@sylphx/silk-nuxt 1.0.1

package/README.md

@@ -0,0 +1,148 @@
+# @sylphx/silk-nuxt
+
+Nuxt 3 module for [Silk](https://github.com/sylphxltd/silk) - Zero-codegen, zero-runtime CSS-in-TypeScript.
+
+## Features
+
+- ✅ **Zero-codegen**: No manual `generate` commands
+- ✅ **Zero-runtime**: CSS generated at build time
+- ✅ **Auto-import**: Automatic CSS injection
+- ✅ **HMR**: Hot Module Replacement support
+- ✅ **Type-safe**: Full TypeScript support
+- ✅ **Framework integration**: Works with Nuxt's Vite pipeline
+
+## Installation
+
+```bash
+npm install @sylphx/silk @sylphx/silk-nuxt
+```
+
+## Usage
+
+### 1. Add module to `nuxt.config.ts`
+
+```typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@sylphx/silk-nuxt']
+})
+```
+
+### 2. Use in your components
+
+```vue
+<!-- pages/index.vue -->
+<script setup lang="ts">
+import { createStyleSystem } from '@sylphx/silk'
+
+const { css } = createStyleSystem({})
+
+const styles = {
+  container: css({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    padding: '2rem',
+    backgroundColor: '#f5f5f5'
+  } as any),
+  title: css({
+    fontSize: '2.5rem',
+    fontWeight: 'bold',
+    color: '#00DC82'
+  } as any)
+}
+</script>
+
+<template>
+  <div :class="styles.container.className">
+    <h1 :class="styles.title.className">
+      Nuxt + Silk ✅
+    </h1>
+  </div>
+</template>
+```
+
+That's it! No need to manually import `silk.css` - the module handles it automatically.
+
+## Configuration
+
+```typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@sylphx/silk-nuxt'],
+
+  silk: {
+    // Source directory to scan for css() calls
+    // Default: Nuxt's srcDir
+    srcDir: './app',
+
+    // Virtual module ID
+    // Default: 'silk.css'
+    virtualModuleId: 'silk.css',
+
+    // Enable debug logging
+    // Default: false
+    debug: true,
+
+    // Enable CSS minification
+    // Default: true in production, false in dev
+    minify: true,
+
+    // Auto-import silk.css globally
+    // Default: true
+    autoImport: true
+  }
+})
+```
+
+## Manual Import (if autoImport: false)
+
+```vue
+<!-- app.vue -->
+<script setup>
+import 'silk.css'
+</script>
+
+<template>
+  <NuxtPage />
+</template>
+```
+
+## How it works
+
+1. The module wraps `@sylphx/silk-vite-plugin`
+2. Scans your source files for `css()` calls at build time
+3. Generates optimized CSS with lightningcss-wasm
+4. Creates a virtual module that Nuxt's Vite pipeline processes
+5. Auto-imports the CSS (if `autoImport: true`)
+6. CSS flows through Nuxt's PostCSS, minification, and bundling
+
+## Benefits over manual Vite plugin
+
+**With `@sylphx/silk-nuxt`:**
+```typescript
+export default defineNuxtConfig({
+  modules: ['@sylphx/silk-nuxt']
+})
+```
+
+**Without (manual Vite plugin):**
+```typescript
+import silk from '@sylphx/silk-vite-plugin'
+
+export default defineNuxtConfig({
+  vite: {
+    plugins: [silk()]
+  }
+})
+```
+
+The Nuxt module provides:
+- ✅ Simpler configuration
+- ✅ Auto-import support
+- ✅ Nuxt-specific optimizations
+- ✅ Better integration with Nuxt's build system
+
+## License
+
+MIT © SylphX Ltd

package/dist/module.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.mts

@@ -0,0 +1,40 @@
+/**
+ * @sylphx/silk-nuxt
+ * Nuxt 3 module for Silk - Zero-codegen CSS-in-TypeScript
+ *
+ * Architecture:
+ * - Wraps @sylphx/silk-vite-plugin for Nuxt's Vite builds
+ * - Auto-imports silk.css in app.vue
+ * - Handles client, server, and nitro builds
+ */
+interface ModuleOptions {
+    /**
+     * Source directory to scan for css() calls
+     * @default './src' or Nuxt's srcDir
+     */
+    srcDir?: string;
+    /**
+     * Virtual module ID
+     * @default 'silk.css'
+     */
+    virtualModuleId?: string;
+    /**
+     * Enable debug logging
+     * @default false
+     */
+    debug?: boolean;
+    /**
+     * Enable CSS minification
+     * @default true in production
+     */
+    minify?: boolean;
+    /**
+     * Auto-import silk.css globally
+     * @default true
+     */
+    autoImport?: boolean;
+}
+declare const _default: any;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @sylphx/silk-nuxt
+ * Nuxt 3 module for Silk - Zero-codegen CSS-in-TypeScript
+ *
+ * Architecture:
+ * - Wraps @sylphx/silk-vite-plugin for Nuxt's Vite builds
+ * - Auto-imports silk.css in app.vue
+ * - Handles client, server, and nitro builds
+ */
+interface ModuleOptions {
+    /**
+     * Source directory to scan for css() calls
+     * @default './src' or Nuxt's srcDir
+     */
+    srcDir?: string;
+    /**
+     * Virtual module ID
+     * @default 'silk.css'
+     */
+    virtualModuleId?: string;
+    /**
+     * Enable debug logging
+     * @default false
+     */
+    debug?: boolean;
+    /**
+     * Enable CSS minification
+     * @default true in production
+     */
+    minify?: boolean;
+    /**
+     * Auto-import silk.css globally
+     * @default true
+     */
+    autoImport?: boolean;
+}
+declare const _default: any;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -0,0 +1,12 @@
+{
+  "name": "@sylphx/silk-nuxt",
+  "configKey": "silk",
+  "compatibility": {
+    "nuxt": "^3.0.0"
+  },
+  "version": "1.0.1",
+  "builder": {
+    "@nuxt/module-builder": "0.8.4",
+    "unbuild": "unknown"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,60 @@
+import { defineNuxtModule, createResolver, addPlugin } from '@nuxt/kit';
+import silkVitePlugin from '@sylphx/silk-vite-plugin';
+
+const module = defineNuxtModule({
+  meta: {
+    name: "@sylphx/silk-nuxt",
+    configKey: "silk",
+    compatibility: {
+      nuxt: "^3.0.0"
+    }
+  },
+  defaults: {
+    srcDir: void 0,
+    // Will use Nuxt's srcDir
+    virtualModuleId: "silk.css",
+    debug: false,
+    minify: void 0,
+    // Will use production mode detection
+    autoImport: true
+  },
+  setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    const srcDir = options.srcDir || nuxt.options.srcDir;
+    if (options.debug) {
+      console.log("[Silk Nuxt] Module loaded");
+      console.log("[Silk Nuxt] Source directory:", srcDir);
+    }
+    nuxt.hook("vite:extend", ({ config }) => {
+      config.plugins = config.plugins || [];
+      config.plugins.push(
+        silkVitePlugin({
+          srcDir,
+          virtualModuleId: options.virtualModuleId,
+          debug: options.debug,
+          minify: options.minify ?? nuxt.options.dev === false
+        })
+      );
+      if (options.debug) {
+        console.log("[Silk Nuxt] Vite plugin added");
+      }
+    });
+    if (options.autoImport) {
+      addPlugin({
+        src: resolver.resolve("./runtime/plugin"),
+        mode: "client"
+        // Only inject on client side
+      });
+      if (options.debug) {
+        console.log("[Silk Nuxt] Auto-import enabled");
+      }
+    }
+    if (options.debug) {
+      nuxt.hook("ready", () => {
+        console.log("[Silk Nuxt] \u2705 Module ready");
+      });
+    }
+  }
+});
+
+export { module as default };

package/dist/runtime/plugin.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Nuxt plugin to auto-import silk.css
+ */
+import 'silk.css';
+declare const _default: any;
+export default _default;

package/dist/runtime/plugin.js

@@ -0,0 +1,3 @@
+import "silk.css";
+export default defineNuxtPlugin(() => {
+});

package/dist/types.d.mts

@@ -0,0 +1,7 @@
+import type { NuxtModule } from '@nuxt/schema'
+
+import type { default as Module } from './module.js'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
+export { default } from './module.js'

package/dist/types.d.ts

@@ -0,0 +1,7 @@
+import type { NuxtModule } from '@nuxt/schema'
+
+import type { default as Module } from './module'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
+export { default } from './module'

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@sylphx/silk-nuxt",
+  "version": "1.0.1",
+  "description": "Nuxt 3 module for Silk - Zero-codegen CSS-in-TypeScript",
+  "keywords": [
+    "silk",
+    "nuxt",
+    "nuxt-module",
+    "css-in-js",
+    "typescript",
+    "zero-codegen"
+  ],
+  "author": "SylphX Ltd",
+  "license": "MIT",
+  "homepage": "https://sylphx.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sylphxltd/silk.git",
+    "directory": "packages/nuxt-module"
+  },
+  "bugs": {
+    "url": "https://github.com/sylphxltd/silk/issues"
+  },
+  "type": "module",
+  "main": "./dist/module.mjs",
+  "types": "./dist/module.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/module.mjs",
+      "types": "./dist/module.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "nuxt-module-build",
+    "dev": "nuxt-module-build --stub",
+    "prepublishOnly": "bun run build"
+  },
+  "dependencies": {
+    "@sylphx/silk-vite-plugin": "workspace:*",
+    "@nuxt/kit": "^3.13.0"
+  },
+  "devDependencies": {
+    "@nuxt/module-builder": "^0.8.0",
+    "@nuxt/schema": "^3.13.0",
+    "nuxt": "^3.13.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}