@vertesia/plugin-builder 0.24.0-dev.202601221707

package/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2024 Composable
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,119 @@
+# @vertesia/plugin-builder
+
+A Vite plugin for building Vertesia UI plugins with CSS handling and Tailwind utilities extraction.
+
+## Features
+
+- Seamless integration with Vite build process
+- Automatic CSS file generation for plugins
+- Tailwind CSS utilities layer extraction
+- Optional inline CSS as JavaScript export
+
+## Installation
+
+```bash
+npm install @vertesia/plugin-builder --save-dev
+# or
+pnpm add -D @vertesia/plugin-builder
+```
+
+## Usage
+
+Add the plugin to your `vite.config.ts`:
+
+```typescript
+import { defineConfig } from 'vite';
+import { vertesiaPluginBuilder } from '@vertesia/plugin-builder';
+
+export default defineConfig({
+  plugins: [
+    vertesiaPluginBuilder()
+  ]
+});
+```
+
+## Configuration Options
+
+```typescript
+interface VertesiaPluginBuilderOptions {
+  // Inline CSS as a JavaScript export variable
+  inlineCss?: boolean;
+
+  // Name of the exported CSS variable (default: 'css')
+  cssVar?: string;
+
+  // Input CSS file path (default: 'src/index.css')
+  input?: string;
+
+  // Output CSS file name (default: 'plugin.css')
+  output?: string;
+}
+```
+
+## Examples
+
+### Basic Usage
+
+```typescript
+import { vertesiaPluginBuilder } from '@vertesia/plugin-builder';
+
+export default defineConfig({
+  plugins: [
+    vertesiaPluginBuilder()
+  ]
+});
+```
+
+### With Inline CSS Export
+
+When `inlineCss` is enabled, the plugin extracts Tailwind utilities and exports them as a JavaScript variable:
+
+```typescript
+import { vertesiaPluginBuilder } from '@vertesia/plugin-builder';
+
+export default defineConfig({
+  plugins: [
+    vertesiaPluginBuilder({
+      inlineCss: true,
+      cssVar: 'pluginStyles'
+    })
+  ]
+});
+```
+
+This allows you to import the CSS directly in your JavaScript:
+
+```typescript
+import { pluginStyles } from './plugin.js';
+```
+
+### Custom Input/Output
+
+```typescript
+import { vertesiaPluginBuilder } from '@vertesia/plugin-builder';
+
+export default defineConfig({
+  plugins: [
+    vertesiaPluginBuilder({
+      input: 'styles/main.css',
+      output: 'my-plugin.css'
+    })
+  ]
+});
+```
+
+## How It Works
+
+1. The plugin creates a virtual entry module that imports your CSS file
+2. During the build process, Vite processes the CSS through its pipeline (including Tailwind if configured)
+3. The processed CSS is output to the specified file
+4. If `inlineCss` is enabled, the Tailwind utilities layer is extracted and appended to the JavaScript bundle as an exported variable
+
+## Requirements
+
+- Vite 4.2.0 or higher
+- Node.js 18+
+
+## License
+
+Apache-2.0

package/lib/index.d.ts

@@ -0,0 +1,18 @@
+interface VertesiaPluginBuilderOptions {
+    inlineCss?: boolean;
+    cssVar?: string;
+    input?: string;
+    output?: string;
+}
+export declare function vertesiaPluginBuilder({ inlineCss, cssVar, input, output, }?: VertesiaPluginBuilderOptions): {
+    name: string;
+    apply: "build";
+    enforce: "post";
+    resolveId(this: import("rollup").PluginContext, id: string): "virtual:vertesia-plugin-css-entry" | null;
+    load(this: import("rollup").PluginContext, id: string): string | null;
+    buildStart(this: import("rollup").PluginContext): void;
+    generateBundle(this: import("rollup").PluginContext, _options: import("rollup").NormalizedOutputOptions, bundle: import("rollup").OutputBundle): void;
+    writeBundle(this: import("rollup").PluginContext, options: import("rollup").NormalizedOutputOptions, bundle: import("rollup").OutputBundle): void;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,UAAU,4BAA4B;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AACD,wBAAgB,qBAAqB,CAAC,EAClC,SAAS,EACT,MAAM,EACN,KAAK,EACL,MAAM,GACT,GAAE,4BAAiC;;WAQV,OAAO;;;;;;;EA+ChC"}

package/lib/index.js

@@ -0,0 +1,63 @@
+import { readFileSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import { extractTailwindUtilitiesLayer } from "./parse-css.js";
+export function vertesiaPluginBuilder({ inlineCss, cssVar, input, output, } = {}) {
+    const CSS_VAR = cssVar || 'css';
+    if (!input)
+        input = 'src/index.css';
+    if (!output)
+        output = 'plugin.css';
+    const inputRelative = input.startsWith('./') ? input : `./${input}`;
+    const jsOutput = output.replace('.css', '.js');
+    return {
+        name: 'vertesia-plugin-builder',
+        apply: 'build',
+        enforce: 'post',
+        resolveId(id) {
+            // Create a virtual CSS entry module
+            if (id === 'virtual:vertesia-plugin-css-entry') {
+                return id;
+            }
+            return null;
+        },
+        load(id) {
+            if (id === 'virtual:vertesia-plugin-css-entry') {
+                // This creates a virtual JS file that imports your actual CSS
+                return `import "${inputRelative}";`;
+            }
+            return null;
+        },
+        buildStart() {
+            // This emits the file into the build pipeline
+            this.emitFile({
+                type: 'chunk',
+                fileName: 'virtual-vertesia-plugin-css-entry.js',
+                id: 'virtual:vertesia-plugin-css-entry',
+            });
+        },
+        generateBundle(_options, bundle) {
+            delete bundle['virtual-vertesia-plugin-css-entry.js'];
+        },
+        writeBundle(options, bundle) {
+            if (!inlineCss)
+                return;
+            // Look for the generated CSS file in the output directory
+            const keys = Object.keys(bundle).filter(k => k === output);
+            if (keys.length === 1) {
+                const asset = bundle[jsOutput];
+                if (asset) {
+                    const cssContent = readFileSync(join(options.dir, output), 'utf8');
+                    if (cssContent) {
+                        const exportedContent = extractTailwindUtilitiesLayer(cssContent);
+                        if (exportedContent) {
+                            const jsFile = join(options.dir, jsOutput);
+                            const jsContent = readFileSync(jsFile, 'utf8');
+                            writeFileSync(jsFile, `${jsContent}\nexport const ${CSS_VAR} = \`\n${exportedContent}\n\`;\n`);
+                        }
+                    }
+                }
+            }
+        },
+    };
+}
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,OAAO,EAAE,6BAA6B,EAAE,MAAM,gBAAgB,CAAC;AAU/D,MAAM,UAAU,qBAAqB,CAAC,EAClC,SAAS,EACT,MAAM,EACN,KAAK,EACL,MAAM,MACwB,EAAE;IAChC,MAAM,OAAO,GAAG,MAAM,IAAI,KAAK,CAAC;IAChC,IAAI,CAAC,KAAK;QAAE,KAAK,GAAG,eAAe,CAAC;IACpC,IAAI,CAAC,MAAM;QAAE,MAAM,GAAG,YAAY,CAAC;IACnC,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,KAAK,EAAE,CAAC;IACpE,MAAM,QAAQ,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC/C,OAAO;QACH,IAAI,EAAE,yBAAyB;QAC/B,KAAK,EAAE,OAAkB;QACzB,OAAO,EAAE,MAAM;QACf,SAAS,CAAC,EAAE;YACR,oCAAoC;YACpC,IAAI,EAAE,KAAK,mCAAmC,EAAE,CAAC;gBAC7C,OAAO,EAAE,CAAC;YACd,CAAC;YACD,OAAO,IAAI,CAAC;QAChB,CAAC;QACD,IAAI,CAAC,EAAE;YACH,IAAI,EAAE,KAAK,mCAAmC,EAAE,CAAC;gBAC7C,8DAA8D;gBAC9D,OAAO,WAAW,aAAa,IAAI,CAAC;YACxC,CAAC;YACD,OAAO,IAAI,CAAC;QAChB,CAAC;QACD,UAAU;YACN,8CAA8C;YAC9C,IAAI,CAAC,QAAQ,CAAC;gBACV,IAAI,EAAE,OAAO;gBACb,QAAQ,EAAE,sCAAsC;gBAChD,EAAE,EAAE,mCAAmC;aAC1C,CAAC,CAAC;QACP,CAAC;QACD,cAAc,CAAC,QAAQ,EAAE,MAAM;YAC3B,OAAO,MAAM,CAAC,sCAAsC,CAAC,CAAC;QAC1D,CAAC;QACD,WAAW,CAAO,OAAO,EAAE,MAAM;YAC7B,IAAI,CAAC,SAAS;gBAAE,OAAO;YACvB,0DAA0D;YAC1D,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC;YAC3D,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBACpB,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;gBAC/B,IAAI,KAAK,EAAE,CAAC;oBACR,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,GAAI,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,CAAA;oBACnE,IAAI,UAAU,EAAE,CAAC;wBACb,MAAM,eAAe,GAAG,6BAA6B,CAAC,UAAU,CAAC,CAAC;wBAClE,IAAI,eAAe,EAAE,CAAC;4BAClB,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,GAAI,EAAE,QAAQ,CAAC,CAAC;4BAC5C,MAAM,SAAS,GAAG,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;4BAC/C,aAAa,CAAC,MAAM,EAAE,GAAG,SAAS,kBAAkB,OAAO,UAAU,eAAe,SAAS,CAAC,CAAC;wBACnG,CAAC;oBACL,CAAC;gBACL,CAAC;YACL,CAAC;QACL,CAAC;KACa,CAAC;AACvB,CAAC"}

package/lib/parse-css.d.ts

@@ -0,0 +1,2 @@
+export declare function extractTailwindUtilitiesLayer(content: string): string;
+//# sourceMappingURL=parse-css.d.ts.map

package/lib/parse-css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parse-css.d.ts","sourceRoot":"","sources":["../src/parse-css.ts"],"names":[],"mappings":"AAGA,wBAAgB,6BAA6B,CAAC,OAAO,EAAE,MAAM,UAiB5D"}

package/lib/parse-css.js

@@ -0,0 +1,20 @@
+import { parse, stringify } from '@adobe/css-tools';
+export function extractTailwindUtilitiesLayer(content) {
+    let obj = parse(content, {});
+    let result = '';
+    for (const rule of obj.stylesheet.rules) {
+        if (rule.type === 'layer' && rule.layer === 'utilities') {
+            if (rule.rules) {
+                const output = {
+                    type: 'stylesheet',
+                    stylesheet: {
+                        rules: rule.rules
+                    }
+                };
+                result = stringify(output, {});
+            }
+        }
+    }
+    return result;
+}
+//# sourceMappingURL=parse-css.js.map

package/lib/parse-css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parse-css.js","sourceRoot":"","sources":["../src/parse-css.ts"],"names":[],"mappings":"AACA,OAAO,EAAoB,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAEtE,MAAM,UAAU,6BAA6B,CAAC,OAAe;IACzD,IAAI,GAAG,GAAG,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;IAC7B,IAAI,MAAM,GAAG,EAAE,CAAC;IAChB,KAAK,MAAM,IAAI,IAAI,GAAG,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;QACtC,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,KAAK,KAAK,WAAW,EAAE,CAAC;YACtD,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;gBACb,MAAM,MAAM,GAAG;oBACX,IAAI,EAAE,YAAY;oBAClB,UAAU,EAAE;wBACR,KAAK,EAAE,IAAI,CAAC,KAAK;qBACpB;iBACgB,CAAC;gBACtB,MAAM,GAAG,SAAS,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;YACnC,CAAC;QACL,CAAC;IACL,CAAC;IACD,OAAO,MAAM,CAAC;AAClB,CAAC"}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@vertesia/plugin-builder",
+  "version": "0.24.0-dev.202601221707",
+  "description": "A vite plugin to build vertesia UI plugins",
+  "type": "module",
+  "types": "./lib/index.d.ts",
+  "main": "./lib/index.js",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "license": "Apache-2.0",
+  "homepage": "https://docs.vertesiahq.com",
+  "keywords": [
+    "vertesia",
+    "plugin",
+    "vite",
+    "vite-plugin",
+    "ui",
+    "react",
+    "css",
+    "tailwind"
+  ],
+  "devDependencies": {
+    "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "@adobe/css-tools": "^4.4.1",
+    "@types/node": "^22.19.2"
+  },
+  "peerDependencies": {
+    "vite": "^7.3.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vertesia/composableai.git",
+    "directory": "packages/plugin-builder"
+  },
+  "scripts": {
+    "eslint": "eslint './src/**/*.{jsx,js,tsx,ts}'",
+    "build": "rm -rf ./lib ./tsconfig.tsbuildinfo && tsc",
+    "clean": "rimraf ./node_modules ./lib ./tsconfig.tsbuildinfo"
+  }
+}

package/src/index.ts

@@ -0,0 +1,74 @@
+import { readFileSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import { Plugin } from "vite";
+import { extractTailwindUtilitiesLayer } from "./parse-css.js";
+
+interface VertesiaPluginBuilderOptions {
+    inlineCss?: boolean,
+    cssVar?: string;
+    // the input file. defaults to src/index.css
+    input?: string;
+    // the output file name. Defaults to plugin.css
+    output?: string;
+}
+export function vertesiaPluginBuilder({
+    inlineCss,
+    cssVar,
+    input,
+    output,
+}: VertesiaPluginBuilderOptions = {}) {
+    const CSS_VAR = cssVar || 'css';
+    if (!input) input = 'src/index.css';
+    if (!output) output = 'plugin.css';
+    const inputRelative = input.startsWith('./') ? input : `./${input}`;
+    const jsOutput = output.replace('.css', '.js');
+    return {
+        name: 'vertesia-plugin-builder',
+        apply: 'build' as 'build',
+        enforce: 'post',
+        resolveId(id) {
+            // Create a virtual CSS entry module
+            if (id === 'virtual:vertesia-plugin-css-entry') {
+                return id;
+            }
+            return null;
+        },
+        load(id) {
+            if (id === 'virtual:vertesia-plugin-css-entry') {
+                // This creates a virtual JS file that imports your actual CSS
+                return `import "${inputRelative}";`;
+            }
+            return null;
+        },
+        buildStart(this) {
+            // This emits the file into the build pipeline
+            this.emitFile({
+                type: 'chunk',
+                fileName: 'virtual-vertesia-plugin-css-entry.js',
+                id: 'virtual:vertesia-plugin-css-entry',
+            });
+        },
+        generateBundle(_options, bundle) {
+            delete bundle['virtual-vertesia-plugin-css-entry.js'];
+        },
+        writeBundle(this, options, bundle) {
+            if (!inlineCss) return;
+            // Look for the generated CSS file in the output directory
+            const keys = Object.keys(bundle).filter(k => k === output);
+            if (keys.length === 1) {
+                const asset = bundle[jsOutput];
+                if (asset) {
+                    const cssContent = readFileSync(join(options.dir!, output), 'utf8')
+                    if (cssContent) {
+                        const exportedContent = extractTailwindUtilitiesLayer(cssContent);
+                        if (exportedContent) {
+                            const jsFile = join(options.dir!, jsOutput);
+                            const jsContent = readFileSync(jsFile, 'utf8');
+                            writeFileSync(jsFile, `${jsContent}\nexport const ${CSS_VAR} = \`\n${exportedContent}\n\`;\n`);
+                        }
+                    }
+                }
+            }
+        },
+    } satisfies Plugin;
+}

package/src/parse-css.ts

@@ -0,0 +1,21 @@
+
+import { CssStylesheetAST, parse, stringify } from '@adobe/css-tools';
+
+export function extractTailwindUtilitiesLayer(content: string) {
+    let obj = parse(content, {});
+    let result = '';
+    for (const rule of obj.stylesheet.rules) {
+        if (rule.type === 'layer' && rule.layer === 'utilities') {
+            if (rule.rules) {
+                const output = {
+                    type: 'stylesheet',
+                    stylesheet: {
+                        rules: rule.rules
+                    }
+                } as CssStylesheetAST;
+                result = stringify(output, {});
+            }
+        }
+    }
+    return result;
+}