css-module-sync 0.1.32 → 0.1.34

package/README.md

@@ -1,6 +1,6 @@
 
-# CSS-MODULE-SYNC
-Speed up react development by auto sync css module classes with react components.
+# css-module-sync
+Auto sync css module classes with react components.
 
 
 ### Install

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "css-module-sync",
-	"version": "0.1.32",
+	"version": "0.1.34",
 	"description": "Auto sync css module classes with react components",
 	"author": "Max Matinpalo",
 	"type": "module",
@@ -15,6 +15,5 @@
 	},
 	"bin": {
 		"css-sync": "./src/css_sync.js"
-	},
-	"files": "src"
+	}
 }

package/src/css_formatter.js

@@ -0,0 +1,128 @@
+const BLOCK_MIN_DECLS = 7;
+
+/**
+ * css_formatter.js
+ * Converts AST back to CSS string with category-based sorting.
+ */
+
+export function format(root, sort_spec = []) {
+	const category_set = new Set(sort_spec.map(s => s.category.toUpperCase()));
+	category_set.add("ELSE");
+
+	const is_cat = (str) => {
+		if (!str) return false;
+		const clean = str.replace(/^\/\*+|\*+\/$/g, "").trim();
+		if (category_set.has(clean.toUpperCase())) return true;
+		return /^[A-Z_\s]+$/.test(clean);
+	};
+
+	function process(node, depth, is_last = false) {
+		const indent = "\t".repeat(depth);
+		let out = "";
+
+		if (node.comments?.length) {
+			for (const c of node.comments) {
+				if (c.trim() === "/* Auto-generated */" || is_cat(c)) continue;
+				out += `${indent}${c}\n`;
+			}
+		}
+
+		if (node.type === "leaf" && node.content) {
+			out += `${indent}${node.content.replace(/;+$/, "").trim()};\n`;
+		} else if (node.type === "block") {
+			const head = node.selector ? `${indent}${node.selector} {\n` : "";
+			const tail = node.selector ? `${indent}}\n` : "";
+			out += head;
+
+			if (node.children) {
+				const decls = [];
+				const others = [];
+
+				for (const child of node.children) {
+					if (child.type === "comment" && is_cat(child.content)) continue;
+					if (child.type === "header") continue;
+
+					const is_decl = child.type === "leaf" &&
+						child.content &&
+						child.content.includes(":") &&
+						!child.content.trim().startsWith("@");
+
+					(is_decl ? decls : others).push(child);
+				}
+
+				if (node.selector && decls.length === 0 && others.length > 0) out += "\n";
+
+				if (decls.length) {
+					const grouped = {};
+					const else_idx = sort_spec.length;
+
+					for (const decl of decls) {
+						const prop = decl.content.split(":")[0].trim();
+						const cat_idx = sort_spec.findIndex(s => s.keywords.some(k => {
+							const clean_k = k.replace(/\.+$/, "");
+							return k.includes("...") ? (prop === clean_k || prop.startsWith(clean_k + "-")) : prop === k;
+						}));
+						const key = cat_idx === -1 ? else_idx : cat_idx;
+						(grouped[key] ||= []).push(decl);
+					}
+
+					Object.keys(grouped).forEach(idx => {
+						const cat = sort_spec[idx];
+						grouped[idx].sort((a, b) => {
+							const prop_a = a.content.split(":")[0].trim();
+							const prop_b = b.content.split(":")[0].trim();
+							if (!cat) return prop_a.localeCompare(prop_b);
+
+							const find = (p) => cat.keywords.findIndex(k => {
+								const clean_k = k.replace(/\.+$/, "");
+								return k.includes("...") ? (p === clean_k || p.startsWith(clean_k + "-")) : p === k;
+							});
+							const i_a = find(prop_a);
+							const i_b = find(prop_b);
+
+							if (i_a !== i_b) return i_a - i_b;
+							return prop_a.localeCompare(prop_b);
+						});
+					});
+
+					const processed = [];
+					const sorted_keys = Object.keys(grouped).sort((a, b) => Number(a) - Number(b));
+					const skip_all_spacers = decls.length < BLOCK_MIN_DECLS;
+					let accumulated_decls = 0;
+
+					sorted_keys.forEach((idx, k_idx) => {
+						const items = grouped[idx];
+						if (k_idx > 0 && !skip_all_spacers && items.length >= 2 && accumulated_decls >= 2) {
+							processed.push({ type: "header", content: "" });
+						}
+						processed.push(...items);
+						accumulated_decls += items.length;
+					});
+
+					const all_children = [...processed, ...others];
+					all_children.forEach((child, i) => {
+						const is_child_last = i === all_children.length - 1;
+						if (child.type === "header") out += `${child.content}\n`;
+						else out += process(child, node.selector ? depth + 1 : depth, is_child_last);
+					});
+				} else {
+					others.forEach((child, i) => {
+						const is_child_last = i === others.length - 1;
+						out += process(child, node.selector ? depth + 1 : depth, is_child_last);
+					});
+				}
+			}
+
+			out += tail;
+			// Only add empty line between top-level blocks
+			if (node.selector && depth === 0 && !is_last) out += "\n";
+		}
+
+		return out;
+	}
+
+	const root_children = root.children || [];
+	return root_children.map((child, i) =>
+		process(child, 0, i === root_children.length - 1)
+	).join("");
+}

package/src/css_parser.js

@@ -0,0 +1,77 @@
+// css_parser.js
+export function parse(input) {
+	let i = 0;
+	const n = input.length;
+
+	const root = { type: "block", selector: null, children: [], comments: [] };
+	let pending = [];
+
+	const is_ws = c => c === " " || c === "\n" || c === "\t" || c === "\r";
+	const skip_ws = () => { while (i < n && is_ws(input[i])) i++; };
+
+	const read_comment = () => {
+		if (input[i] !== "/" || input[i + 1] !== "*") return null;
+		const start = i;
+		i += 2;
+		while (i < n && !(input[i] === "*" && input[i + 1] === "/")) i++;
+		i = Math.min(n, i + 2);
+		return input.slice(start, i);
+	};
+
+	const read_until = stops => {
+		let out = "", q = null, esc = false;
+		while (i < n) {
+			const c = input[i];
+			if (esc) { out += c; esc = false; i++; continue; }
+			if (c === "\\") { out += c; esc = true; i++; continue; }
+			if (q) { if (c === q) q = null; out += c; i++; continue; }
+			if (c === "'" || c === `"`) { q = c; out += c; i++; continue; }
+			if (stops.includes(c)) break;
+			out += c; i++;
+		}
+		return out;
+	};
+
+	const parse_block = selector => {
+		const node = { type: "block", selector, children: [], comments: pending };
+		pending = [];
+		i++; // skip '{'
+		while (i < n) {
+			skip_ws();
+			const cmt = read_comment();
+			if (cmt) { pending.push(cmt); continue; }
+			if (input[i] === "}") { i++; break; }
+
+			const head = read_until(["{", ";", "}"]).trim();
+			if (!head) { if (input[i] === ";") i++; continue; }
+
+			if (input[i] === "{") node.children.push(parse_block(head));
+			else {
+				if (input[i] === ";") i++;
+				node.children.push({ type: "leaf", content: head, comments: pending });
+				pending = [];
+			}
+		}
+		return node;
+	};
+
+	while (i < n) {
+		skip_ws();
+		const cmt = read_comment();
+		if (cmt) { pending.push(cmt); continue; }
+		if (i >= n) break;
+
+		const head = read_until(["{", ";"]).trim();
+		if (!head) { i++; continue; }
+
+		if (input[i] === "{") root.children.push(parse_block(head));
+		else {
+			if (input[i] === ";") i++;
+			root.children.push({ type: "leaf", content: head, comments: pending });
+			pending = [];
+		}
+	}
+
+	if (pending.length) root.comments = pending;
+	return root;
+}

package/src/css_sync.js

@@ -214,14 +214,51 @@ async function main() {
 	await run_scan();
 	if (FLAGS.watch) {
 		const debouncers = new Map();
+		let cache = new Set();
+		const refresh_cache = async () => {
+			const files = await fs.readdir(TARGET_DIR, { recursive: true });
+			cache = new Set(files.map(f => path.resolve(TARGET_DIR, f)));
+		};
+		await refresh_cache();
+
 		console.log("Watching for changes...");
-		watch(TARGET_DIR, { recursive: true }, (_, filename) => {
+		watch(TARGET_DIR, { recursive: true }, async (event, filename) => {
 			if (!filename) return;
-			const name = filename.toString();
-			const is_tsx = /\.(jsx|tsx)$/.test(name);
-			const is_css = /\.css$/.test(name);
-			if (!is_tsx && !is_css) return;
-			const full_path = path.resolve(TARGET_DIR, name);
+			const full_path = path.resolve(TARGET_DIR, filename.toString());
+			const exists = existsSync(full_path);
+			const is_tsx = /\.(jsx|tsx)$/.test(full_path);
+
+			if (event === "rename") {
+				const was_cached = cache.has(full_path);
+				if (!exists) setTimeout(() => { if (!existsSync(full_path)) cache.delete(full_path); }, 100);
+				else {
+					cache.add(full_path);
+					if (is_tsx && FLAGS.gen && !was_cached) setTimeout(async () => {
+						const dir = path.dirname(full_path);
+						const name = path.basename(full_path, path.extname(full_path));
+						const orphans = Array.from(cache).filter(p => {
+							if (!p.endsWith(".module.css") || path.dirname(p) !== dir || !existsSync(p)) return false;
+							const base = path.basename(p, ".module.css");
+							return !existsSync(path.join(dir, `${base}.tsx`)) && !existsSync(path.join(dir, `${base}.jsx`));
+						});
+						if (orphans.length === 1) {
+							const orphan = orphans[0];
+							const next_css = path.join(dir, `${name}.module.css`);
+							if (!existsSync(next_css)) {
+								await fs.rename(orphan, next_css);
+								cache.delete(orphan);
+								cache.add(next_css);
+								console.log(`Renamed: ${path.basename(orphan)} -> ${path.basename(next_css)}`);
+							}
+						} else if (orphans.length > 1) {
+							console.warn(`[RENAME] Multiple orphan .module.css in ${dir}; skipping:\n` +
+								orphans.map(p => `- ${path.basename(p)}`).join("\n"));
+						}
+					}, 150);
+				}
+			}
+
+			if (!is_tsx && !/\.css$/.test(full_path)) return;
 			if (debouncers.has(full_path)) clearTimeout(debouncers.get(full_path));
 			debouncers.set(full_path, setTimeout(() => {
 				debouncers.delete(full_path);

package/src/default_sort_spec.json

@@ -0,0 +1,85 @@
+[
+	{
+		"category": "POSITION",
+		"keywords": [
+			"position",
+			"inset",
+			"top",
+			"right",
+			"bottom",
+			"left",
+			"z-index"
+		]
+	},
+	{
+		"category": "LAYOUT",
+		"keywords": [
+			"display",
+			"visibility",
+			"overflow...",
+			"flex...",
+			"justify-content",
+			"align-items",
+			"align-content",
+			"place-content",
+			"align-self",
+			"order",
+			"gap",
+			"row-gap",
+			"column-gap",
+			"grid..."
+		]
+	},
+	{
+		"category": "BOX",
+		"keywords": [
+			"width",
+			"min-width",
+			"max-width",
+			"height",
+			"min-height",
+			"max-height",
+			"aspect-ratio",
+			"margin...",
+			"padding...",
+			"border..."
+		]
+	},
+	{
+		"category": "COLOR",
+		"keywords": [
+			"color",
+			"background...",
+			"opacity",
+			"box-shadow"
+		]
+	},
+	{
+		"category": "TYPO",
+		"keywords": [
+			"font",
+			"font-family",
+			"font-size",
+			"font-weight",
+			"font-style",
+			"font...",
+			"font-stretch",
+			"line-height",
+			"letter-spacing",
+			"word-spacing",
+			"text-align",
+			"text-transform",
+			"text-decoration....",
+			"text-underline-offset",
+			"white-space"
+		]
+	},
+	{
+		"category": "ANIMATION",
+		"keywords": [
+			"transform...",
+			"transition...",
+			"animation..."
+		]
+	}
+]