@greenfinity/rescript-typed-css-modules 0.1.0 → 0.1.1

package/README.md

@@ -50,9 +50,15 @@ Usage
 Options
   --watch, -w         Watch for changes and regenerate bindings (directories only)
   --skip-initial, -s  Skip initial compilation in watch mode
+  --force, -f         Force compilation even if files are unchanged
+  --silent            Only show "Generated" messages, suppress other output
+  --quiet, -q         Suppress all output
   --output-dir, -o    Directory to write generated .res files
                       (multiple files or single directory only)
 
+By default, files are skipped if the source CSS file has not been modified
+since the last compilation. Use --force to always recompile.
+
 Examples
   $ css-to-rescript src/Card.module.scss
   $ css-to-rescript src/Theme.global.css
@@ -60,6 +66,7 @@ Examples
   $ css-to-rescript src/components
   $ css-to-rescript src/components src/pages --watch
   $ css-to-rescript src/components --watch --skip-initial
+  $ css-to-rescript src/components --force
 ```
 
 ## Example

package/dist/css-to-rescript.js

@@ -26685,12 +26685,36 @@ function getOutputFileName(baseName, importType) {
     return baseName.replace(/\.global\.(css|scss)$/, "_CssGlobal") + ".res";
   }
 }
-async function processFile(cssFilePath, outputDir) {
+function shouldCompile(cssFilePath, outputDir) {
+  let match = getBaseNameAndImportType(cssFilePath);
+  let outputFileName = getOutputFileName(match[0], match[1]);
+  let outputPath = Nodepath.join(getOr(outputDir, Nodepath.dirname(cssFilePath)), outputFileName);
+  if (!Nodefs.existsSync(outputPath)) {
+    return true;
+  }
+  let sourceStat = Nodefs.lstatSync(cssFilePath);
+  let outputStat = Nodefs.lstatSync(outputPath);
+  return sourceStat.mtimeMs > outputStat.mtimeMs;
+}
+async function processFile(cssFilePath, outputDir, forceOpt, silentOpt, quietOpt) {
+  let force = forceOpt !== void 0 ? forceOpt : false;
+  let silent = silentOpt !== void 0 ? silentOpt : false;
+  let quiet = quietOpt !== void 0 ? quietOpt : false;
+  if (!force && !shouldCompile(cssFilePath, outputDir)) {
+    if (!silent && !quiet) {
+      console.log(`\u23ED\uFE0F  Skipped: ` + cssFilePath + ` (unchanged)`);
+    }
+    return;
+  }
   let content = Nodefs.readFileSync(cssFilePath).toString();
-  console.log(`Processing file: ` + cssFilePath);
+  if (!silent && !quiet) {
+    console.log(`Processing file: ` + cssFilePath);
+  }
   let classNames = await extractClassNames(content, cssFilePath);
   if (classNames.length === 0) {
-    console.log(`\u26A0\uFE0F  No classes found in ` + cssFilePath);
+    if (!silent && !quiet) {
+      console.log(`\u26A0\uFE0F  No classes found in ` + cssFilePath);
+    }
     return;
   }
   let match = getBaseNameAndImportType(cssFilePath);
@@ -26700,7 +26724,9 @@ async function processFile(cssFilePath, outputDir) {
   let bindings = generateReScriptBindings(baseName, importType, classNames);
   let outputPath = Nodepath.join(getOr(outputDir, Nodepath.dirname(cssFilePath)), outputFileName);
   Nodefs.writeFileSync(outputPath, Buffer.from(bindings));
-  console.log(`\u2705 Generated ` + outputPath + ` (` + classNames.length.toString() + ` classes)`);
+  if (!quiet) {
+    console.log(`\u2705 Generated ` + outputPath + ` (` + classNames.length.toString() + ` classes)`);
+  }
   return [
     outputPath,
     classNames
@@ -26720,16 +26746,18 @@ function findCssFiles(dir) {
     }
   });
 }
-async function watchDirectories(dirs, outputDir, skipInitial) {
-  console.log(`\u{1F440} Watching ` + dirs.length.toString() + ` directories for CSS module/global changes...`);
-  dirs.forEach((dir) => {
-    console.log(`   ` + dir);
-  });
-  if (skipInitial) {
-    console.log(`Skipping initial compilation.`);
-  }
-  console.log(`Press Ctrl+C to stop.
+async function watchDirectories(dirs, outputDir, skipInitial, force, silent, quiet) {
+  if (!silent && !quiet) {
+    console.log(`\u{1F440} Watching ` + dirs.length.toString() + ` directories for CSS module/global changes...`);
+    dirs.forEach((dir) => {
+      console.log(`   ` + dir);
+    });
+    if (skipInitial) {
+      console.log(`Skipping initial compilation.`);
+    }
+    console.log(`Press Ctrl+C to stop.
 `);
+  }
   let isIgnored = (path3) => {
     let isDotfile = /(^|[\/\\])\./.test(path3);
     let isCssFile = /\.(module|global)\.(css|scss)$/.test(path3);
@@ -26750,23 +26778,45 @@ async function watchDirectories(dirs, outputDir, skipInitial) {
     persistent: true
   }).on("ready", () => {
     ready.contents = true;
-    console.log(`Ready for changes.`);
+    if (!silent && !quiet) {
+      console.log(`Ready for changes.`);
+      return;
+    }
   }).on("change", (path3) => {
-    console.log(`
-Changed: ` + path3);
-    processFile(path3, outputDir);
+    if (!silent && !quiet) {
+      console.log(`Changed: ` + path3);
+    }
+    processFile(path3, outputDir, true, silent, quiet);
   }).on("add", (path3) => {
     if (skipInitial && !ready.contents) {
       return;
     } else {
-      console.log(`
-Added: ` + path3);
-      processFile(path3, outputDir);
+      if (ready.contents) {
+        if (!silent && !quiet) {
+          console.log(`Added: ` + path3);
+        }
+        processFile(path3, outputDir, true, silent, quiet);
+      } else {
+        processFile(path3, outputDir, force, silent, quiet);
+      }
       return;
     }
   }).on("unlink", (path3) => {
-    console.log(`
-\u{1F5D1}\uFE0F  Deleted: ` + path3);
+    if (!silent && !quiet) {
+      console.log(`\u{1F5D1}\uFE0F  Deleted: ` + path3);
+    }
+    let match = getBaseNameAndImportType(path3);
+    let outputFileName = getOutputFileName(match[0], match[1]);
+    let outputPath = Nodepath.join(getOr(outputDir, Nodepath.dirname(path3)), outputFileName);
+    if (Nodefs.existsSync(outputPath)) {
+      Nodefs.unlinkSync(outputPath);
+      if (!silent && !quiet) {
+        console.log(`\u{1F5D1}\uFE0F  Deleted compiled: ` + outputPath);
+        return;
+      } else {
+        return;
+      }
+    }
   });
 }
 var helpText = `
@@ -26781,15 +26831,22 @@ var helpText = `
   Options
     --watch, -w         Watch for changes and regenerate bindings (directories only)
     --skip-initial, -s  Skip initial compilation in watch mode
+    --force, -f         Force compilation even if files are unchanged
+    --silent            Only show "Generated" messages, suppress other output
+    --quiet, -q         Suppress all output
     --output-dir, -o    Directory to write generated .res files
                         (multiple files or single directory only)
 
+  By default, files are skipped if the source CSS file has not been modified
+  since the last compilation. Use --force to always recompile.
+
   Examples
     $ css-to-rescript src/Card.module.scss
     $ css-to-rescript src/Theme.global.css
     $ css-to-rescript src/Button.module.css src/Card.module.scss -o src/bindings
     $ css-to-rescript src/components
     $ css-to-rescript src/components src/pages --watch
+    $ css-to-rescript src/components --force
 `;
 async function main() {
   let cli = meow(helpText, {
@@ -26808,6 +26865,20 @@ async function main() {
         type: "boolean",
         shortFlag: "s",
         default: false
+      },
+      force: {
+        type: "boolean",
+        shortFlag: "f",
+        default: false
+      },
+      silent: {
+        type: "boolean",
+        default: false
+      },
+      quiet: {
+        type: "boolean",
+        shortFlag: "q",
+        default: false
       }
     },
     allowUnknownFlags: false
@@ -26820,6 +26891,9 @@ async function main() {
   let outputDir = cli.flags.outputDir;
   let watchMode = cli.flags.watch;
   let skipInitial = cli.flags.skipInitial;
+  let force = cli.flags.force;
+  let silent = cli.flags.silent;
+  let quiet = cli.flags.quiet;
   let match = reduce(inputPaths, [
     [],
     []
@@ -26857,21 +26931,23 @@ async function main() {
   if (files.length > 0) {
     await reduce(files, Promise.resolve(), async (acc, file) => {
       await acc;
-      await processFile(file, outputDir);
+      await processFile(file, outputDir, force, silent, quiet);
     });
   }
   if (dirs.length <= 0) {
     return;
   }
   if (watchMode) {
-    return await watchDirectories(dirs, outputDir, skipInitial);
+    return await watchDirectories(dirs, outputDir, skipInitial, force, silent, quiet);
   }
   let moduleFiles = dirs.flatMap(findCssFiles);
-  console.log(`Found ` + moduleFiles.length.toString() + ` CSS module files
+  if (!silent && !quiet) {
+    console.log(`Found ` + moduleFiles.length.toString() + ` CSS module files
 `);
+  }
   return await reduce(moduleFiles, Promise.resolve(), async (acc, file) => {
     await acc;
-    await processFile(file, outputDir);
+    await processFile(file, outputDir, force, silent, quiet);
   });
 }
 main();
@@ -26890,6 +26966,7 @@ export {
   helpText,
   main,
   processFile,
+  shouldCompile,
   watchDirectories
 };
 /*! Bundled license information:

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@greenfinity/rescript-typed-css-modules",
   "description": "Typed CSS Modules for ReScript",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "license": "MIT",
   "type": "module",
   "bin": {

package/src/CssToRescript.bs.mjs

@@ -124,12 +124,37 @@ function getOutputFileName(baseName, importType) {
   }
 }
 
-async function processFile(cssFilePath, outputDir) {
+function shouldCompile(cssFilePath, outputDir) {
+  let match = getBaseNameAndImportType(cssFilePath);
+  let outputFileName = getOutputFileName(match[0], match[1]);
+  let outputPath = Nodepath.join(Core__Option.getOr(outputDir, Nodepath.dirname(cssFilePath)), outputFileName);
+  if (!Nodefs.existsSync(outputPath)) {
+    return true;
+  }
+  let sourceStat = Nodefs.lstatSync(cssFilePath);
+  let outputStat = Nodefs.lstatSync(outputPath);
+  return sourceStat.mtimeMs > outputStat.mtimeMs;
+}
+
+async function processFile(cssFilePath, outputDir, forceOpt, silentOpt, quietOpt) {
+  let force = forceOpt !== undefined ? forceOpt : false;
+  let silent = silentOpt !== undefined ? silentOpt : false;
+  let quiet = quietOpt !== undefined ? quietOpt : false;
+  if (!force && !shouldCompile(cssFilePath, outputDir)) {
+    if (!silent && !quiet) {
+      console.log(`⏭️  Skipped: ` + cssFilePath + ` (unchanged)`);
+    }
+    return;
+  }
   let content = Nodefs.readFileSync(cssFilePath).toString();
-  console.log(`Processing file: ` + cssFilePath);
+  if (!silent && !quiet) {
+    console.log(`Processing file: ` + cssFilePath);
+  }
   let classNames = await extractClassNames(content, cssFilePath);
   if (classNames.length === 0) {
-    console.log(`⚠️  No classes found in ` + cssFilePath);
+    if (!silent && !quiet) {
+      console.log(`⚠️  No classes found in ` + cssFilePath);
+    }
     return;
   }
   let match = getBaseNameAndImportType(cssFilePath);
@@ -139,7 +164,9 @@ async function processFile(cssFilePath, outputDir) {
   let bindings = generateReScriptBindings(baseName, importType, classNames);
   let outputPath = Nodepath.join(Core__Option.getOr(outputDir, Nodepath.dirname(cssFilePath)), outputFileName);
   Nodefs.writeFileSync(outputPath, Buffer.from(bindings));
-  console.log(`✅ Generated ` + outputPath + ` (` + classNames.length.toString() + ` classes)`);
+  if (!quiet) {
+    console.log(`✅ Generated ` + outputPath + ` (` + classNames.length.toString() + ` classes)`);
+  }
   return [
     outputPath,
     classNames
@@ -161,15 +188,17 @@ function findCssFiles(dir) {
   });
 }
 
-async function watchDirectories(dirs, outputDir, skipInitial) {
-  console.log(`👀 Watching ` + dirs.length.toString() + ` directories for CSS module/global changes...`);
-  dirs.forEach(dir => {
-    console.log(`   ` + dir);
-  });
-  if (skipInitial) {
-    console.log(`Skipping initial compilation.`);
+async function watchDirectories(dirs, outputDir, skipInitial, force, silent, quiet) {
+  if (!silent && !quiet) {
+    console.log(`👀 Watching ` + dirs.length.toString() + ` directories for CSS module/global changes...`);
+    dirs.forEach(dir => {
+      console.log(`   ` + dir);
+    });
+    if (skipInitial) {
+      console.log(`Skipping initial compilation.`);
+    }
+    console.log(`Press Ctrl+C to stop.\n`);
   }
-  console.log(`Press Ctrl+C to stop.\n`);
   let isIgnored = path => {
     let isDotfile = /(^|[\/\\])\./.test(path);
     let isCssFile = /\.(module|global)\.(css|scss)$/.test(path);
@@ -190,20 +219,45 @@ async function watchDirectories(dirs, outputDir, skipInitial) {
     persistent: true
   }).on("ready", () => {
     ready.contents = true;
-    console.log(`Ready for changes.`);
+    if (!silent && !quiet) {
+      console.log(`Ready for changes.`);
+      return;
+    }
   }).on("change", path => {
-    console.log(`\nChanged: ` + path);
-    processFile(path, outputDir);
+    if (!silent && !quiet) {
+      console.log(`Changed: ` + path);
+    }
+    processFile(path, outputDir, true, silent, quiet);
   }).on("add", path => {
     if (skipInitial && !ready.contents) {
       return;
     } else {
-      console.log(`\nAdded: ` + path);
-      processFile(path, outputDir);
+      if (ready.contents) {
+        if (!silent && !quiet) {
+          console.log(`Added: ` + path);
+        }
+        processFile(path, outputDir, true, silent, quiet);
+      } else {
+        processFile(path, outputDir, force, silent, quiet);
+      }
       return;
     }
   }).on("unlink", path => {
-    console.log(`\n🗑️  Deleted: ` + path);
+    if (!silent && !quiet) {
+      console.log(`🗑️  Deleted: ` + path);
+    }
+    let match = getBaseNameAndImportType(path);
+    let outputFileName = getOutputFileName(match[0], match[1]);
+    let outputPath = Nodepath.join(Core__Option.getOr(outputDir, Nodepath.dirname(path)), outputFileName);
+    if (Nodefs.existsSync(outputPath)) {
+      Nodefs.unlinkSync(outputPath);
+      if (!silent && !quiet) {
+        console.log(`🗑️  Deleted compiled: ` + outputPath);
+        return;
+      } else {
+        return;
+      }
+    }
   });
 }
 
@@ -219,15 +273,22 @@ let helpText = `
   Options
     --watch, -w         Watch for changes and regenerate bindings (directories only)
     --skip-initial, -s  Skip initial compilation in watch mode
+    --force, -f         Force compilation even if files are unchanged
+    --silent            Only show "Generated" messages, suppress other output
+    --quiet, -q         Suppress all output
     --output-dir, -o    Directory to write generated .res files
                         (multiple files or single directory only)
 
+  By default, files are skipped if the source CSS file has not been modified
+  since the last compilation. Use --force to always recompile.
+
   Examples
     $ css-to-rescript src/Card.module.scss
     $ css-to-rescript src/Theme.global.css
     $ css-to-rescript src/Button.module.css src/Card.module.scss -o src/bindings
     $ css-to-rescript src/components
     $ css-to-rescript src/components src/pages --watch
+    $ css-to-rescript src/components --force
 `;
 
 async function main() {
@@ -247,6 +308,20 @@ async function main() {
         type: "boolean",
         shortFlag: "s",
         default: false
+      },
+      force: {
+        type: "boolean",
+        shortFlag: "f",
+        default: false
+      },
+      silent: {
+        type: "boolean",
+        default: false
+      },
+      quiet: {
+        type: "boolean",
+        shortFlag: "q",
+        default: false
       }
     },
     allowUnknownFlags: false
@@ -259,6 +334,9 @@ async function main() {
   let outputDir = cli.flags.outputDir;
   let watchMode = cli.flags.watch;
   let skipInitial = cli.flags.skipInitial;
+  let force = cli.flags.force;
+  let silent = cli.flags.silent;
+  let quiet = cli.flags.quiet;
   let match = Core__Array.reduce(inputPaths, [
     [],
     []
@@ -296,20 +374,22 @@ async function main() {
   if (files.length > 0) {
     await Core__Array.reduce(files, Promise.resolve(), async (acc, file) => {
       await acc;
-      await processFile(file, outputDir);
+      await processFile(file, outputDir, force, silent, quiet);
     });
   }
   if (dirs.length <= 0) {
     return;
   }
   if (watchMode) {
-    return await watchDirectories(dirs, outputDir, skipInitial);
+    return await watchDirectories(dirs, outputDir, skipInitial, force, silent, quiet);
   }
   let moduleFiles = dirs.flatMap(findCssFiles);
-  console.log(`Found ` + moduleFiles.length.toString() + ` CSS module files\n`);
+  if (!silent && !quiet) {
+    console.log(`Found ` + moduleFiles.length.toString() + ` CSS module files\n`);
+  }
   return await Core__Array.reduce(moduleFiles, Promise.resolve(), async (acc, file) => {
     await acc;
-    await processFile(file, outputDir);
+    await processFile(file, outputDir, force, silent, quiet);
   });
 }
 
@@ -326,6 +406,7 @@ export {
   generateReScriptBindings,
   getBaseNameAndImportType,
   getOutputFileName,
+  shouldCompile,
   processFile,
   findCssFiles,
   watchDirectories,

package/src/CssToRescript.res

@@ -9,7 +9,7 @@ module Meow = {
     default?: bool,
   }
 
-  type flags = {"watch": flag, "outputDir": flag, "skipInitial": flag}
+  type flags = {"watch": flag, "outputDir": flag, "skipInitial": flag, "force": flag, "silent": flag, "quiet": flag}
 
   type importMeta
 
@@ -21,7 +21,7 @@ module Meow = {
 
   type result = {
     input: array<string>,
-    flags: {"watch": bool, "outputDir": option<string>, "skipInitial": bool},
+    flags: {"watch": bool, "outputDir": option<string>, "skipInitial": bool, "force": bool, "silent": bool, "quiet": bool},
     showHelp: unit => unit,
   }
 
@@ -188,28 +188,61 @@ let getOutputFileName = (baseName, importType) => {
   }
 }
 
-// Process a single CSS module file
-let processFile = async (cssFilePath, outputDir) => {
-  let content = NodeJs.Fs.readFileSync(cssFilePath)->NodeJs.Buffer.toString
-  Console.log(`Processing file: ${cssFilePath}`)
-  let classNames = await extractClassNames(content, ~from=cssFilePath)
+// Check if source file is newer than output file
+// Returns true if compilation should proceed (source is newer or output doesn't exist)
+let shouldCompile = (cssFilePath, outputDir) => {
+  let (baseName, importType) = cssFilePath->getBaseNameAndImportType
+  let outputFileName = getOutputFileName(baseName, importType)
+  let outputPath = NodeJs.Path.join2(
+    outputDir->Option.getOr(cssFilePath->NodeJs.Path.dirname),
+    outputFileName,
+  )
 
-  if classNames->Array.length == 0 {
-    Console.log(`⚠️  No classes found in ${cssFilePath}`)
-    None
+  if !NodeJs.Fs.existsSync(outputPath) {
+    true
   } else {
-    let (baseName, importType) = cssFilePath->getBaseNameAndImportType
-    let outputFileName = getOutputFileName(baseName, importType)
-    let bindings = generateReScriptBindings(baseName, importType, classNames)
-    let outputPath = NodeJs.Path.join2(
-      outputDir->Option.getOr(cssFilePath->NodeJs.Path.dirname),
-      outputFileName,
-    )
+    let sourceStat = NodeJs.Fs.lstatSync(#String(cssFilePath))
+    let outputStat = NodeJs.Fs.lstatSync(#String(outputPath))
+    sourceStat.mtimeMs > outputStat.mtimeMs
+  }
+}
 
-    NodeJs.Fs.writeFileSync(outputPath, NodeJs.Buffer.fromString(bindings))
-    Console.log(`✅ Generated ${outputPath} (${classNames->Array.length->Int.toString} classes)`)
+// Process a single CSS module file
+let processFile = async (cssFilePath, outputDir, ~force=false, ~silent=false, ~quiet=false) => {
+  // Skip if source file is not newer than output (unless force is set)
+  if !force && !shouldCompile(cssFilePath, outputDir) {
+    if !silent && !quiet {
+      Console.log(`⏭️  Skipped: ${cssFilePath} (unchanged)`)
+    }
+    None
+  } else {
+    let content = NodeJs.Fs.readFileSync(cssFilePath)->NodeJs.Buffer.toString
+    if !silent && !quiet {
+      Console.log(`Processing file: ${cssFilePath}`)
+    }
+    let classNames = await extractClassNames(content, ~from=cssFilePath)
 
-    (outputPath, classNames)->Some
+    if classNames->Array.length == 0 {
+      if !silent && !quiet {
+        Console.log(`⚠️  No classes found in ${cssFilePath}`)
+      }
+      None
+    } else {
+      let (baseName, importType) = cssFilePath->getBaseNameAndImportType
+      let outputFileName = getOutputFileName(baseName, importType)
+      let bindings = generateReScriptBindings(baseName, importType, classNames)
+      let outputPath = NodeJs.Path.join2(
+        outputDir->Option.getOr(cssFilePath->NodeJs.Path.dirname),
+        outputFileName,
+      )
+
+      NodeJs.Fs.writeFileSync(outputPath, NodeJs.Buffer.fromString(bindings))
+      if !quiet {
+        Console.log(`✅ Generated ${outputPath} (${classNames->Array.length->Int.toString} classes)`)
+      }
+
+      (outputPath, classNames)->Some
+    }
   }
 }
 
@@ -231,17 +264,19 @@ let rec findCssFiles = dir => {
 }
 
 // Watch directories for CSS module and global file changes
-let watchDirectories = async (dirs, outputDir, ~skipInitial) => {
-  Console.log(
-    `👀 Watching ${dirs
-      ->Array.length
-      ->Int.toString} directories for CSS module/global changes...`,
-  )
-  dirs->Array.forEach(dir => Console.log(`   ${dir}`))
-  if skipInitial {
-    Console.log(`Skipping initial compilation.`)
+let watchDirectories = async (dirs, outputDir, ~skipInitial, ~force, ~silent, ~quiet) => {
+  if !silent && !quiet {
+    Console.log(
+      `👀 Watching ${dirs
+        ->Array.length
+        ->Int.toString} directories for CSS module/global changes...`,
+    )
+    dirs->Array.forEach(dir => Console.log(`   ${dir}`))
+    if skipInitial {
+      Console.log(`Skipping initial compilation.`)
+    }
+    Console.log(`Press Ctrl+C to stop.\n`)
   }
-  Console.log(`Press Ctrl+C to stop.\n`)
 
   // Set up chokidar watcher for CSS module and global files
   let isIgnored = path => {
@@ -258,23 +293,49 @@ let watchDirectories = async (dirs, outputDir, ~skipInitial) => {
   Chokidar.watch(dirs, {"ignored": isIgnored, "persistent": true})
   ->Chokidar.onReady(() => {
     ready := true
-    Console.log(`Ready for changes.`)
+    if !silent && !quiet {
+      Console.log(`Ready for changes.`)
+    }
   })
   ->Chokidar.on("change", path => {
-    Console.log(`\nChanged: ${path}`)
-    processFile(path, outputDir)->ignore
+    // File was explicitly changed, always compile
+    if !silent && !quiet {
+      Console.log(`Changed: ${path}`)
+    }
+    processFile(path, outputDir, ~force=true, ~silent, ~quiet)->ignore
   })
   ->Chokidar.on("add", path => {
     // Skip initial files if skipInitial is set
     if skipInitial && !ready.contents {
       ()
+    } else if ready.contents {
+      // After ready, new files should always be compiled
+      if !silent && !quiet {
+        Console.log(`Added: ${path}`)
+      }
+      processFile(path, outputDir, ~force=true, ~silent, ~quiet)->ignore
     } else {
-      Console.log(`\nAdded: ${path}`)
-      processFile(path, outputDir)->ignore
+      // Initial compilation: use skip-unchanged logic (unless force is set)
+      processFile(path, outputDir, ~force, ~silent, ~quiet)->ignore
     }
   })
   ->Chokidar.on("unlink", path => {
-    Console.log(`\n🗑️  Deleted: ${path}`)
+    if !silent && !quiet {
+      Console.log(`🗑️  Deleted: ${path}`)
+    }
+    // Delete the corresponding compiled .res file if it exists
+    let (baseName, importType) = path->getBaseNameAndImportType
+    let outputFileName = getOutputFileName(baseName, importType)
+    let outputPath = NodeJs.Path.join2(
+      outputDir->Option.getOr(path->NodeJs.Path.dirname),
+      outputFileName,
+    )
+    if NodeJs.Fs.existsSync(outputPath) {
+      NodeJs.Fs.unlinkSync(outputPath)
+      if !silent && !quiet {
+        Console.log(`🗑️  Deleted compiled: ${outputPath}`)
+      }
+    }
   })
   ->ignore
 }
@@ -291,15 +352,22 @@ let helpText = `
   Options
     --watch, -w         Watch for changes and regenerate bindings (directories only)
     --skip-initial, -s  Skip initial compilation in watch mode
+    --force, -f         Force compilation even if files are unchanged
+    --silent            Only show "Generated" messages, suppress other output
+    --quiet, -q         Suppress all output
     --output-dir, -o    Directory to write generated .res files
                         (multiple files or single directory only)
 
+  By default, files are skipped if the source CSS file has not been modified
+  since the last compilation. Use --force to always recompile.
+
   Examples
     $ css-to-rescript src/Card.module.scss
     $ css-to-rescript src/Theme.global.css
     $ css-to-rescript src/Button.module.css src/Card.module.scss -o src/bindings
     $ css-to-rescript src/components
     $ css-to-rescript src/components src/pages --watch
+    $ css-to-rescript src/components --force
 `
 
 let main = async () => {
@@ -311,6 +379,9 @@ let main = async () => {
         "watch": {Meow.type_: "boolean", shortFlag: "w", default: false},
         "outputDir": {Meow.type_: "string", shortFlag: "o"},
         "skipInitial": {Meow.type_: "boolean", shortFlag: "s", default: false},
+        "force": {Meow.type_: "boolean", shortFlag: "f", default: false},
+        "silent": {Meow.type_: "boolean", default: false},
+        "quiet": {Meow.type_: "boolean", shortFlag: "q", default: false},
       },
       allowUnknownFlags: false,
     },
@@ -326,6 +397,9 @@ let main = async () => {
   let outputDir = cli.flags["outputDir"]
   let watchMode = cli.flags["watch"]
   let skipInitial = cli.flags["skipInitial"]
+  let force = cli.flags["force"]
+  let silent = cli.flags["silent"]
+  let quiet = cli.flags["quiet"]
 
   // Classify inputs as files or directories
   let (files, dirs) = inputPaths->Array.reduce(([], []), ((files, dirs), path) => {
@@ -358,21 +432,23 @@ let main = async () => {
   if files->Array.length > 0 {
     await files->Array.reduce(Promise.resolve(), async (acc, file) => {
       await acc
-      (await processFile(file, outputDir))->ignore
+      (await processFile(file, outputDir, ~force, ~silent, ~quiet))->ignore
     })
   }
 
   // Process directories
   if dirs->Array.length > 0 {
     if watchMode {
-      await watchDirectories(dirs, outputDir, ~skipInitial)
+      await watchDirectories(dirs, outputDir, ~skipInitial, ~force, ~silent, ~quiet)
     } else {
       let moduleFiles = dirs->Array.flatMap(findCssFiles)
-      Console.log(`Found ${moduleFiles->Array.length->Int.toString} CSS module files\n`)
+      if !silent && !quiet {
+        Console.log(`Found ${moduleFiles->Array.length->Int.toString} CSS module files\n`)
+      }
 
       await moduleFiles->Array.reduce(Promise.resolve(), async (acc, file) => {
         await acc
-        (await processFile(file, outputDir))->ignore
+        (await processFile(file, outputDir, ~force, ~silent, ~quiet))->ignore
       })
     }
   }