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

package/README.md

@@ -24,15 +24,13 @@ Only tested with Next.js and might not work with other frameworks out of the box
 
 ### Why global CSS support?
 
-The use case is to access classes in a type safe way from third party css libraries, that emit HTML markup with predefined class names without the use of css modules (e.g. React Aria Components).
-
-Global CSS files (`.global.css` / `.global.scss`) also get type-safe bindings, but they are not imported, and their class names are **not hashed**. This is useful when working with third-party libraries (such as React Aria Components) that emit HTML markup with predefined class names that you need to style.
+TL;DR: Global CSS files behave just like CSS Modules, except their class names are **not hashed** but kept as-is.
 
-Even though global CSS classes aren't scoped, generating typed bindings provides the benefit of compile-time checking that class names exist.
+Support for global CSS is provided in addition to CSS Modules.
 
-The imports are not done because these css typically has to be imported from the top of the component hierarchy. So the import has to be done manually. To get type safe access, simply rename the file to `.global.css` (or create one and import the original css from it).
+The use case is to access classes in a type safe way from third party css libraries, that emit HTML markup with predefined class names without the use of css modules (e.g. React Aria Components).
 
-(Remark: we could also provide a way to import the css automatically, but this would open issues with removing duplicates during bundling, and handling the css on route changes. NextJs does not support these use cases out of the box, so we revert to the manual import for global css.)
+Even though global CSS classes aren't scoped, generating typed bindings provides the benefit of compile-time checking that class names exist. If the framework you are using supports bundling by routes (such as NextJS), the global css files will also be bundled together with JavaScript. Regarding duplicates, they should be handled the same way as CSS Modules, or ordinary JavaScript imports. (Checked with NextJS with both the Webpack and the Turbopack builder.)
 
 ## Installation
 
@@ -50,9 +48,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 +64,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
@@ -168,6 +173,7 @@ type t = {
   "light-mode": string,
   "primary-color": string
 }
+@module("./Button.module.css") external css: t = "default"
 
 // Class names are returned as-is (no hashing)
 let css = ...
@@ -176,10 +182,7 @@ let css = ...
 Usage:
 
 ```rescript
-// Import the CSS manually at your app root
-%%raw(`import "./Theme.global.css"`)
-
-// Then use type-safe class names anywhere
+// Use type-safe class names anywhere
 <div className={Theme_CssGlobal.css["dark-mode"]}>
 ```
 

package/dist/css-to-rescript.js

@@ -26620,14 +26620,14 @@ type t = {
 }
 `;
   if (importType === "Module") {
-    return prelude + (`@module("./` + baseName + `") external css: t = "default"
+    return prelude + (`
+@module("./` + baseName + `") external css: t = "default"
 
 // Access class names from the fields of the css object.
 // For scoped classses, the hashed class name is returned.
 // For :global() classes, the class name is returned as-is: no scoping.
 // Classes from @import are also available.
 
-@module("./` + baseName + `") external _imported: t = "default"
 @new external proxy: ('a, 'b) => 'c = "Proxy"
 %%private(
   external toDict: t => dict<string> = "%identity"
@@ -26649,10 +26649,10 @@ let css = withProxy(css)
 
 `);
   } else {
-    return prelude + `
+    return prelude + (`
+@module("./` + baseName + `") external _imported: t = "default"
+
 // Access class names from the fields of the css object.
-// Import is not done, the css has to be manually imported
-// from the top of the component hierarchy.
 // For all classes, the class name is returned as-is: no scoping.
 // Classes from @import are also available.
 
@@ -26668,7 +26668,7 @@ type empty = {}
     )
 )
 let css = withProxy({})
-`;
+`);
   }
 }
 function getBaseNameAndImportType(cssFilePath) {
@@ -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.2.0",
   "license": "MIT",
   "type": "module",
   "bin": {

package/src/CssToRescript.bs.mjs

@@ -56,14 +56,14 @@ type t = {
 }
 `;
   if (importType === "Module") {
-    return prelude + (`@module("./` + baseName + `") external css: t = "default"
+    return prelude + (`
+@module("./` + baseName + `") external css: t = "default"
 
 // Access class names from the fields of the css object.
 // For scoped classses, the hashed class name is returned.
 // For :global() classes, the class name is returned as-is: no scoping.
 // Classes from @import are also available.
 
-@module("./` + baseName + `") external _imported: t = "default"
 @new external proxy: ('a, 'b) => 'c = "Proxy"
 %%private(
   external toDict: t => dict<string> = "%identity"
@@ -85,10 +85,10 @@ let css = withProxy(css)
 
 `);
   } else {
-    return prelude + `
+    return prelude + (`
+@module("./` + baseName + `") external _imported: t = "default"
+
 // Access class names from the fields of the css object.
-// Import is not done, the css has to be manually imported
-// from the top of the component hierarchy.
 // For all classes, the class name is returned as-is: no scoping.
 // Classes from @import are also available.
 
@@ -104,7 +104,7 @@ type empty = {}
     )
 )
 let css = withProxy({})
-`;
+`);
   }
 }
 
@@ -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,14 @@ 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 +28,14 @@ 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,
   }
 
@@ -109,14 +123,14 @@ ${recordFields->Array.join(",\n")}
     // CSS Module import will get access to the object mapping returned
     // by the import. Hashing will happen automatically.
     prelude +
-    `@module("./${baseName}") external css: t = "default"
+    `
+@module("./${baseName}") external css: t = "default"
 
 // Access class names from the fields of the css object.
 // For scoped classses, the hashed class name is returned.
 // For :global() classes, the class name is returned as-is: no scoping.
 // Classes from @import are also available.
 
-@module("./${baseName}") external _imported: t = "default"
 @new external proxy: ('a, 'b) => 'c = "Proxy"
 %%private(
   external toDict: t => dict<string> = "%identity"
@@ -139,11 +153,11 @@ let css = withProxy(css)
 `
   | Global =>
     // Global css will return the css class name as-is: no scoping.
-    // Import is not done.
-    prelude + `
+    prelude +
+    `
+@module("./${baseName}") external _imported: t = "default"
+
 // Access class names from the fields of the css object.
-// Import is not done, the css has to be manually imported
-// from the top of the component hierarchy.
 // For all classes, the class name is returned as-is: no scoping.
 // Classes from @import are also available.
 
@@ -188,28 +202,63 @@ 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 +280,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 +309,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 +368,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 +395,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 +413,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 +448,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
       })
     }
   }