@editframe/elements 0.25.0-beta.0 → 0.25.1-beta.0

package/package.json

@@ -1,15 +1,11 @@
 {
   "name": "@editframe/elements",
-  "version": "0.25.0-beta.0",
+  "version": "0.25.1-beta.0",
   "description": "",
-  "exports": {
-    ".": "./dist/index.js",
-    "./package.json": "./package.json"
-  },
   "type": "module",
   "scripts": {
     "typecheck": "tsc --noEmit --emitDeclarationOnly false",
-    "build": "tsdown",
+    "build": "tsdown && node scripts/build-css.js",
     "build:watch": "tsdown --watch",
     "typedoc": "typedoc --json ./types.json --plugin typedoc-plugin-zod --excludeExternals ./src && jq -c . ./types.json > ./types.tmp.json && mv ./types.tmp.json ./types.json"
   },
@@ -17,7 +13,7 @@
   "license": "UNLICENSED",
   "dependencies": {
     "@bramus/style-observer": "^1.3.0",
-    "@editframe/assets": "0.25.0-beta.0",
+    "@editframe/assets": "0.25.1-beta.0",
     "@lit/context": "^1.1.6",
     "@lit/task": "^1.0.3",
     "@opentelemetry/api": "^1.9.0",
@@ -36,9 +32,35 @@
     "@types/dom-webcodecs": "^0.1.11",
     "@types/node": "^20.14.13",
     "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
     "typescript": "^5.5.4"
   },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
-  "types": "./dist/index.d.ts"
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./package.json": "./package.json",
+    "./styles.css": "./dist/style.css",
+    "./types.json": "./types.json"
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "import": {
+          "types": "./dist/index.d.ts",
+          "default": "./dist/index.js"
+        }
+      },
+      "./package.json": "./package.json",
+      "./styles.css": "./dist/style.css",
+      "./types.json": "./types.json"
+    }
+  }
 }

package/scripts/build-css.js

@@ -0,0 +1,41 @@
+#!/usr/bin/env node
+
+import autoprefixer from "autoprefixer";
+import { mkdirSync, readFileSync, writeFileSync } from "fs";
+import { dirname, join } from "path";
+import postcss from "postcss";
+import tailwindcss from "tailwindcss";
+import { fileURLToPath } from "url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const srcDir = join(__dirname, "..", "src");
+const distDir = join(__dirname, "..", "dist");
+
+// Ensure dist directory exists
+mkdirSync(distDir, { recursive: true });
+
+// Read source CSS
+const cssPath = join(srcDir, "elements.css");
+const css = readFileSync(cssPath, "utf-8");
+
+// Process through PostCSS
+console.log("Processing CSS through Tailwind and PostCSS...");
+
+postcss([
+  tailwindcss({
+    content: [join(srcDir, "**/*.ts")],
+  }),
+  autoprefixer(),
+])
+  .process(css, { from: cssPath, to: join(distDir, "style.css") })
+  .then((result) => {
+    writeFileSync(join(distDir, "style.css"), result.css);
+    if (result.map) {
+      writeFileSync(join(distDir, "style.css.map"), result.map.toString());
+    }
+    console.log("✅ CSS processed and written to dist/style.css");
+  })
+  .catch((error) => {
+    console.error("❌ CSS processing failed:", error);
+    process.exit(1);
+  });

package/tsdown.config.ts

@@ -1,11 +1,13 @@
 import { readFileSync } from "node:fs";
 import path from "node:path";
-
+import autoprefixer from "autoprefixer";
+import postcss from "postcss";
+import tailwindcss from "tailwindcss";
 import { defineConfig, type Plugin } from "tsdown";
 
 import { createTsdownConfig } from "../tsdown.config.base.ts";
 
-// Plugin to handle CSS ?inline imports
+// Plugin to handle CSS ?inline imports with Tailwind processing
 const inlineCssPlugin = (): Plugin => ({
   name: "inline-css",
   resolveId(source, importer) {
@@ -18,10 +20,24 @@ const inlineCssPlugin = (): Plugin => ({
     }
     return null;
   },
-  load(id) {
+  async load(id) {
     if (id.endsWith("?inline")) {
       const filePath = id.replace("?inline", "");
       const css = readFileSync(filePath, "utf-8");
+
+      // Process through Tailwind if it contains @tailwind directives
+      if (css.includes("@tailwind")) {
+        const srcDir = path.resolve(path.dirname(filePath));
+        const result = await postcss([
+          tailwindcss({
+            content: [path.join(srcDir, "**/*.ts")],
+          }),
+          autoprefixer(),
+        ]).process(css, { from: filePath });
+
+        return `export default ${JSON.stringify(result.css)}`;
+      }
+
       return `export default ${JSON.stringify(css)}`;
     }
     return null;
@@ -32,5 +48,10 @@ export default defineConfig(
   createTsdownConfig({
     plugins: [inlineCssPlugin()],
     external: [/@editframe\/assets/],
+    publint: false, // Disabled because CSS is built after tsdown
+    additionalExports: {
+      "./styles.css": "./dist/style.css",
+      "./types.json": "./types.json",
+    },
   }),
 );

package/dist/elements-ZhsB7B5N.css

@@ -1,9 +0,0 @@
-/* biome-ignore lint/suspicious/noUnknownAtRules: @tailwind is a valid Tailwind CSS directive */
-@tailwind base;
-/* biome-ignore lint/suspicious/noUnknownAtRules: @tailwind is a valid Tailwind CSS directive */
-@tailwind components;
-/* biome-ignore lint/suspicious/noUnknownAtRules: @tailwind is a valid Tailwind CSS directive */
-@tailwind utilities;
-
-
-/*# sourceMappingURL=elements-ZhsB7B5N.css.map*/

package/dist/elements-ZhsB7B5N.css.map

@@ -1 +0,0 @@
-{"version":3,"file":"elements-ZhsB7B5N.css","names":[],"sources":["../src/elements.css"],"sourcesContent":["/* biome-ignore lint/suspicious/noUnknownAtRules: @tailwind is a valid Tailwind CSS directive */\n@tailwind base;\n/* biome-ignore lint/suspicious/noUnknownAtRules: @tailwind is a valid Tailwind CSS directive */\n@tailwind components;\n/* biome-ignore lint/suspicious/noUnknownAtRules: @tailwind is a valid Tailwind CSS directive */\n@tailwind utilities;\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA"}