css-module-sync 0.1.33 → 1.0.1

package/package.json

@@ -1,18 +1,10 @@
 {
 	"name": "css-module-sync",
-	"version": "0.1.33",
+	"version": "1.0.1",
 	"description": "Auto sync css module classes with react components",
 	"author": "Max Matinpalo",
 	"type": "module",
 	"license": "MIT",
-	"homepage": "https://github.com/max-matinpalo/css-module-sync#readme",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/max-matinpalo/css-module-sync.git"
-	},
-	"bugs": {
-		"url": "https://github.com/max-matinpalo/css-module-sync/issues"
-	},
 	"bin": {
 		"css-sync": "./src/css_sync.js"
 	}

package/src/css_formatter.js

@@ -1,4 +1,4 @@
-const BLOCK_MIN_DECLS = 7;
+const BLOCK_MIN_DECLS = 5;
 
 /**
  * css_formatter.js

package/src/css_sync.js

@@ -109,23 +109,32 @@ async function format_css_only(css_path) {
 }
 
 async function sync_file(tsx_path) {
+	let tsx;
+	try { tsx = await fs.readFile(tsx_path, "utf-8"); } catch { return; }
+
+	const used_ordered = extract_classes(tsx);
+	const dir = path.dirname(tsx_path);
+	const name = path.basename(tsx_path, path.extname(tsx_path));
+	const module_path = path.join(dir, `${name}.module.css`);
+	const css_exists = existsSync(module_path);
+
+	if (FLAGS.gen && used_ordered.length === 0 && !css_exists) return;
+
 	const css_path = await resolve_css_path(tsx_path);
 	if (!css_path) return;
-	let tsx, css;
-	try {
-		[tsx, css] = await Promise.all([fs.readFile(tsx_path, "utf-8"), fs.readFile(css_path, "utf-8")]);
-	} catch (e) { return; }
-	if (FLAGS.gen) {
+
+	let css;
+	try { css = await fs.readFile(css_path, "utf-8"); } catch { return; }
+
+	if (FLAGS.gen && used_ordered.length > 0) {
 		const target = `import styles from "./${path.basename(css_path)}";`;
-		let found = false;
-		const next = tsx.replace(/^import\s+styles\s+from\s+["'].+["'];?\n?/gm, (m) => {
-			if (m.includes(`./${path.basename(css_path)}`)) { found = true; return m; }
-			return "";
-		});
-		const final = found ? next : `${target}\n${next}`;
+		const next = tsx.replace(/^import\s+styles\s+from\s+["'][^"']+["'];?\s*\n?/gm, "");
+		const m = next.match(/^(\s*(?:(?:\/\*.*?\*\/)\s*|\/\/.*\s*)*)(["']use client["'];?\s*\n)?/s);
+		const i = m ? m[0].length : 0;
+		const final = `${next.slice(0, i)}${target}\n${next.slice(i)}`;
 		if (final !== tsx) await fs.writeFile(tsx_path, tsx = final);
 	}
-	const used_ordered = extract_classes(tsx);
+
 	let root;
 	try { root = parse(css); } catch { return; }
 	const class_to_idxs = new Map();
@@ -214,14 +223,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

@@ -39,38 +39,41 @@
 			"height",
 			"min-height",
 			"max-height",
-			"aspect-ratio",
 			"margin...",
 			"padding...",
-			"border..."
+			"border...",
+			"aspect-ratio"
 		]
 	},
 	{
-		"category": "COLOR",
+		"category": "SCROLL",
+		"keywords": [
+			"overflow...",
+			"scroll...",
+			"scrollbar...",
+			"overscroll-behavior...",
+			"-webkit-overflow-scrolling"
+		]
+	},
+	{
+		"category": "VISUALS",
 		"keywords": [
 			"color",
 			"background...",
 			"opacity",
-			"box-shadow"
+			"box-shadow",
+			"backdrop-filter",
+			"-webkit-backdrop-filter"
 		]
 	},
 	{
 		"category": "TYPO",
 		"keywords": [
-			"font",
-			"font-family",
-			"font-size",
-			"font-weight",
-			"font-style",
 			"font...",
-			"font-stretch",
 			"line-height",
+			"text...",
 			"letter-spacing",
 			"word-spacing",
-			"text-align",
-			"text-transform",
-			"text-decoration....",
-			"text-underline-offset",
 			"white-space"
 		]
 	},