livestylesync-vite-plugin 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import { Plugin } from 'vite';
+
+interface LiveStyleSyncOptions {
+    port?: number;
+}
+declare function liveStyleSync(options?: LiveStyleSyncOptions): Plugin;
+
+export { liveStyleSync };

package/dist/index.js

@@ -0,0 +1,78 @@
+// src/index.ts
+import { WebSocketServer } from "ws";
+import { readFileSync, writeFileSync } from "fs";
+function escapeForRegex(s) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function selectorToRegex(selector) {
+  return selector.split(",").map((s) => escapeForRegex(s.trim())).join(",\\s*\\n?\\s*");
+}
+function findBlock(css, selRegex) {
+  const pattern = new RegExp(`${selRegex}\\s*\\{`, "s");
+  const match = pattern.exec(css);
+  if (!match) return null;
+  const start = match.index + match[0].length - 1;
+  let depth = 0;
+  for (let i = start; i < css.length; i++) {
+    if (css[i] === "{") depth++;
+    else if (css[i] === "}") {
+      depth--;
+      if (depth === 0) return { start, end: i };
+    }
+  }
+  return null;
+}
+function camelToKebab(prop) {
+  return prop.replace(/([A-Z])/g, "-$1").toLowerCase();
+}
+function patchCss(filePath, selector, prop, value) {
+  const cssProp = camelToKebab(prop);
+  const css = readFileSync(filePath, "utf-8");
+  const selRegex = selectorToRegex(selector);
+  const block = findBlock(css, selRegex);
+  if (!block) {
+    console.log("[LSS] selector not found, skipping");
+    return;
+  }
+  const blockContent = css.slice(block.start + 1, block.end);
+  const propPattern = new RegExp(`${cssProp}\\s*:[^;]+;`);
+  let newBlockContent;
+  if (propPattern.test(blockContent)) {
+    newBlockContent = blockContent.replace(propPattern, `${cssProp}: ${value};`);
+  } else {
+    newBlockContent = blockContent.trimEnd() + `
+  ${cssProp}: ${value};
+`;
+  }
+  const updated = css.slice(0, block.start + 1) + newBlockContent + css.slice(block.end);
+  writeFileSync(filePath, updated, "utf-8");
+  console.log(`[LSS] wrote ${cssProp}: ${value} \u2192 ${filePath}`);
+}
+function liveStyleSync(options = {}) {
+  const port = options.port ?? 3100;
+  return {
+    name: "livestylesync",
+    configureServer(server) {
+      const wss = new WebSocketServer({ port });
+      wss.on("error", (err) => {
+        if (err.code !== "EADDRINUSE") throw err;
+        console.log(`[LSS] port ${port} busy \u2014 restart Vite to reconnect`);
+      });
+      server.httpServer?.once("close", () => wss.close());
+      wss.on("connection", (socket) => {
+        console.log("[LSS] client connected");
+        socket.on("message", (raw) => {
+          const msg = JSON.parse(raw.toString());
+          if (!msg.fileUrl || !msg.selector || !msg.prop || !msg.value) return;
+          patchCss(msg.fileUrl, msg.selector, msg.prop, msg.value);
+        });
+        socket.on("close", () => {
+          console.log("[LSS] client disconnected");
+        });
+      });
+    }
+  };
+}
+export {
+  liveStyleSync
+};

package/package.json

@@ -0,0 +1,32 @@
+{
+	"name": "livestylesync-vite-plugin",
+	"version": "0.1.0",
+	"description": "Vite plugin for LiveStyleSync",
+	"license": "MIT",
+	"type": "module",
+	"main": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"exports": {
+		".": {
+			"import": "./dist/index.js",
+			"types": "./dist/index.d.ts"
+		}
+	},
+	"files": ["dist"],
+	"scripts": {
+		"build": "tsup src/index.ts --format esm --dts --external vite --external ws"
+	},
+	"peerDependencies": {
+		"vite": ">=4"
+	},
+	"dependencies": {
+		"ws": "^8.20.1"
+	},
+	"devDependencies": {
+		"@types/node": "^24.12.2",
+		"@types/ws": "^8.18.1",
+		"tsup": "^8.5.1",
+		"typescript": "^6.0.3",
+		"vite": "^8.0.11"
+	}
+}