@vesk/plugin-tailwind 0.0.1

package/README.md

@@ -0,0 +1,13 @@
+# @vesk/plugin-tailwind
+
+Tailwind CSS v4 plugin for Vesk. Extracts Tailwind directives from `.vsk` files and compiles them at build time.
+
+## Install
+
+```sh
+npm install @vesk/plugin-tailwind
+```
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Vesk Tailwind CSS plugin.
+ * Scans .vsk files for class attributes, builds a purge-able content list,
+ * runs the Tailwind CLI to generate the final CSS, and handles HMR rebuilds.
+ * @module plugin-tailwind
+ */
+export interface TailwindOptions {
+    entry?: string;
+    appDir?: string;
+}
+declare function extractTailwindDirectives(css: string): {
+    directives: string;
+    userCSS: string;
+};
+export { extractTailwindDirectives };
+interface TailwindPlugin {
+    name: string;
+    dependencies: Set<string>;
+    onBuildStart: () => Promise<void>;
+    onCSS: (content: string, filePath: string) => Promise<string | null>;
+    onFileWatch: (filePath: string) => Promise<{
+        handled: boolean;
+    }>;
+}
+export default function tailwindcss(options?: TailwindOptions): TailwindPlugin;

package/dist/index.js

@@ -0,0 +1,231 @@
+/**
+ * Vesk Tailwind CSS plugin.
+ * Scans .vsk files for class attributes, builds a purge-able content list,
+ * runs the Tailwind CLI to generate the final CSS, and handles HMR rebuilds.
+ * @module plugin-tailwind
+ */
+import { readFileSync, existsSync, readdirSync, statSync } from 'fs';
+import { resolve, join } from 'path';
+const CLASS_RE = /class(?:\w+)?=["']([^"']*)["']/g;
+const SCAN_EXT = /\.(vsk|js|ts|jsx|tsx)$/;
+function walkFiles(dir) {
+    const out = [];
+    for (const name of readdirSync(dir)) {
+        const p = join(dir, name);
+        if (name === 'node_modules' || name === 'dist' || name === '.vesk' || name === '.vercel' || name === '.git')
+            continue;
+        let st;
+        try {
+            st = statSync(p);
+        }
+        catch {
+            continue;
+        }
+        if (st.isDirectory()) {
+            out.push(...walkFiles(p));
+        }
+        else if (SCAN_EXT.test(name)) {
+            out.push(p);
+        }
+    }
+    return out;
+}
+function scanCandidates(dir) {
+    const candidates = new Set();
+    const base = resolve(dir);
+    if (!existsSync(base))
+        return [];
+    for (const file of walkFiles(base)) {
+        try {
+            const content = readFileSync(file, 'utf-8');
+            let match;
+            while ((match = CLASS_RE.exec(content)) !== null) {
+                const classes = match[1].split(/\s+/);
+                for (const cls of classes) {
+                    if (cls && cls.length > 1 && !cls.startsWith('{') && !cls.startsWith('}')) {
+                        candidates.add(cls);
+                    }
+                }
+            }
+        }
+        catch { }
+    }
+    return [...candidates];
+}
+async function loadFallbackStylesheet(id, base) {
+    const { readFile } = await import('fs/promises');
+    const path = await import('path');
+    const { createRequire } = await import('module');
+    if (id.startsWith('.')) {
+        const p = path.resolve(base, id);
+        const content = await readFile(p, 'utf-8');
+        return { content, base: path.dirname(p) };
+    }
+    const req = createRequire(path.join(base, 'noop.mjs'));
+    const pkgJson = req.resolve(id + '/package.json');
+    const pkgDir = path.dirname(pkgJson);
+    const pkg = JSON.parse(await readFile(pkgJson, 'utf-8'));
+    let cssPath = null;
+    if (pkg.style) {
+        cssPath = path.resolve(pkgDir, pkg.style);
+    }
+    else if (pkg.exports?.['.']?.style) {
+        cssPath = path.resolve(pkgDir, pkg.exports['.'].style);
+    }
+    if (cssPath === null)
+        cssPath = path.resolve(pkgDir, 'index.css');
+    if (!existsSync(cssPath))
+        throw new Error(`Cannot resolve stylesheet for package '${id}'`);
+    const content = await readFile(cssPath, 'utf-8');
+    return { content, base: path.dirname(cssPath) };
+}
+async function loadFallbackModule(id, base) {
+    const path = await import('path');
+    const { createRequire } = await import('module');
+    if (id.startsWith('.')) {
+        const p = path.resolve(base, id);
+        const mod = await import(p);
+        return { module: mod.default ?? mod, base: path.dirname(p) };
+    }
+    const req = createRequire(path.join(base, 'noop.mjs'));
+    const pkgPath = req.resolve(id);
+    const mod = await import(pkgPath);
+    return { module: mod.default ?? mod, base: path.dirname(pkgPath) };
+}
+const TAILWIND_BLOCK = /^\s*@(theme\s*\{|layer\s+(base|components|utilities)\s*\{|utility\s+\w+\s*\{)/m;
+/**
+ * Scans a CSS block starting at `start` (an opening `{`) and returns the
+ * index just past its matching `}`. Quoted strings and `/* ... *​/`
+ * comments are skipped so braces inside them (e.g. `url("data:...{}")`)
+ * do not confuse the nesting count. (Mirrors `cssBlockEnd` in
+ * `@vesk/compiler/src/scan.ts` — kept local so this package stays
+ * independent of the compiler.)
+ */
+function cssBlockEnd(css, start) {
+    let depth = 0;
+    let i = start;
+    while (i < css.length) {
+        const c = css[i];
+        if (c === '"' || c === "'") {
+            i++;
+            while (i < css.length && css[i] !== c)
+                i++;
+            i++;
+            continue;
+        }
+        if (c === '/' && css[i + 1] === '*') {
+            i += 2;
+            while (i < css.length && !(css[i] === '*' && css[i + 1] === '/'))
+                i++;
+            i += 2;
+            continue;
+        }
+        if (c === '{')
+            depth++;
+        else if (c === '}') {
+            depth--;
+            if (depth === 0)
+                return i + 1;
+        }
+        i++;
+    }
+    return css.length;
+}
+function extractTailwindDirectives(css) {
+    const tailwindChunks = [];
+    const userChunks = [];
+    let pos = 0;
+    while (pos < css.length) {
+        const lineStart = pos;
+        const nl = css.indexOf('\n', pos);
+        const lineEnd = nl === -1 ? css.length : nl + 1;
+        const line = css.slice(lineStart, lineEnd);
+        const trimmed = line.trim();
+        const isImport = trimmed.startsWith('@import') && trimmed.includes('tailwindcss');
+        const isSource = trimmed.startsWith('@source ');
+        const isBlockStart = TAILWIND_BLOCK.test(trimmed);
+        if (isImport || isSource) {
+            tailwindChunks.push(line);
+            pos = lineEnd;
+            continue;
+        }
+        if (isBlockStart) {
+            const end = cssBlockEnd(css, lineStart);
+            tailwindChunks.push(css.slice(lineStart, end));
+            pos = end;
+            continue;
+        }
+        userChunks.push(line);
+        pos = lineEnd;
+    }
+    return {
+        directives: tailwindChunks.join('').trim(),
+        userCSS: userChunks.join('').trim(),
+    };
+}
+export { extractTailwindDirectives };
+export default function tailwindcss(options = {}) {
+    const entry = options.entry || 'src/global.css';
+    const appDir = options.appDir || 'app';
+    let compileReady = null;
+    async function getCompile() {
+        if (compileReady)
+            return compileReady;
+        try {
+            const tw = await import('@tailwindcss/node');
+            compileReady = { compile: tw.compile, node: true };
+        }
+        catch {
+            const tw = await import('tailwindcss');
+            compileReady = { compile: tw.compile, node: false };
+        }
+        return compileReady;
+    }
+    return {
+        name: '@vesk/plugin-tailwind',
+        dependencies: new Set(),
+        async onBuildStart() {
+            this.dependencies = new Set();
+        },
+        async onCSS(content, filePath) {
+            const baseDir = process.cwd();
+            const entryPath = resolve(baseDir, entry);
+            const resolvedFilePath = filePath ? resolve(baseDir, filePath) : '';
+            if (resolvedFilePath !== entryPath && !(filePath && filePath.endsWith(entry.replace(/^\.\//, '')))) {
+                return null;
+            }
+            const { directives } = extractTailwindDirectives(content);
+            if (!directives)
+                return content;
+            try {
+                const { compile, node } = await getCompile();
+                const compileOpts = {
+                    base: baseDir,
+                    from: entryPath,
+                    onDependency: (path) => {
+                        if (path)
+                            this.dependencies.add(path);
+                    },
+                };
+                if (!node) {
+                    compileOpts.loadStylesheet = (id, base) => loadFallbackStylesheet(id, base);
+                    compileOpts.loadModule = (id, base) => loadFallbackModule(id, base);
+                }
+                const result = await compile(directives, compileOpts);
+                const candidates = scanCandidates(baseDir);
+                const finalCss = result.build(candidates);
+                return finalCss;
+            }
+            catch (err) {
+                console.error(`[vesk/plugin-tailwind] Compile error:`, err instanceof Error ? err.message : String(err));
+                return content;
+            }
+        },
+        async onFileWatch(filePath) {
+            if (this.dependencies.has(filePath)) {
+                return { handled: true };
+            }
+            return { handled: false };
+        },
+    };
+}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@vesk/plugin-tailwind",
+  "version": "0.0.1",
+  "type": "module",
+  "description": "Tailwind CSS v4 plugin for Vesk",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@tailwindcss/node": "^4.0.0",
+    "@tailwindcss/oxide": "^4.0.0"
+  },
+  "license": "MIT",
+  "author": "emeraldlinks",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/emeraldlinks/veskTs.git"
+  },
+  "homepage": "https://github.com/emeraldlinks/veskTs#readme",
+  "bugs": {
+    "url": "https://github.com/emeraldlinks/veskTs/issues"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}