@greenfinity/rescript-typed-css-modules 0.1.0

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@greenfinity/rescript-typed-css-modules",
+  "description": "Typed CSS Modules for ReScript",
+  "version": "0.1.0",
+  "license": "MIT",
+  "type": "module",
+  "bin": {
+    "css-to-rescript": "./dist/css-to-rescript.js"
+  },
+  "engines": {
+    "node": ">=22.12.0",
+    "yarn": ">=4.5.3"
+  },
+  "files": [
+    "dist",
+    "src",
+    "__tests__/.gitkeep",
+    "rescript.json"
+  ],
+  "scripts": {
+    "changelog": "yarn auto-changelog -p && git add HISTORY.md",
+    "rescript:clean": "yarn rescript clean",
+    "rescript:build": "yarn rescript build",
+    "rescript:dev": "RES_LOGGER=ReScriptLogger.Universal RES_LOG=info yarn rescript watch",
+    "esbuild:clean": "rm -rf dist",
+    "esbuild:build": "yarn esbuild src/CssToRescript.bs.mjs --bundle --platform=node --format=esm --outfile=dist/css-to-rescript.js --banner:js=\"#!/usr/bin/env node\" --inject:./src/require-shim.mjs && yarn esbuild:chmod",
+    "esbuild:chmod": "chmod +x dist/css-to-rescript.js",
+    "esbuild:dev": "yarn nodemon -e res -e CssModule.res -x \"yarn esbuild:build\"",
+    "fixtures:clean": "rm -rf __tests__/fixtures/**/*.res",
+    "fixtures:build": "dist/css-to-rescript.js __tests__/fixtures",
+    "fixtures:dev": "yarn nodemon -e res -e CssModule.res -x \"yarn fixtures:build\"",
+    "clean": "yarn rescript:clean && yarn esbuild:clean && yarn fixtures:clean",
+    "build": "yarn rescript:build && yarn esbuild:build && yarn fixtures:build",
+    "dev": "yarn build & yarn rescript:dev && yarn esbuild:dev && yarn fixtures:dev",
+    "yalc:dev": "yarn rescript:dev & yarn esbuild:dev & yarn fixtures:dev & yarn nodemon -x \"yalc push\"",
+    "yalc:push": "yarn nodemon -e res -x \"yalc push\""
+  },
+  "devDependencies": {
+    "auto-changelog": "^2.5.0",
+    "esbuild": "^0.27.2",
+    "nodemon": "^3.0.1",
+    "rescript": "^12.1.0"
+  },
+  "peerDependencies": {
+    "rescript": "^12.1.0"
+  },
+  "dependencies": {
+    "@rescript/core": "^1.6.1",
+    "chokidar": "^5.0.0",
+    "meow": "^14.0.0",
+    "postcss": "^8.5.6",
+    "postcss-import": "^16.1.1",
+    "postcss-modules": "^6.0.1",
+    "postcss-scss": "^4.0.9",
+    "rescript-nodejs": "^16.1.0"
+  },
+  "packageManager": "yarn@4.12.0"
+}

package/rescript.json

@@ -0,0 +1,30 @@
+{
+  "name": "@greenfinity/rescript-typed-css-modules",
+  "sources": [
+    {
+      "dir": "src",
+      "subdirs": true
+    },
+    {
+      "dir": "__tests__",
+      "subdirs": true,
+      "type": "dev"
+    }
+  ],
+  "warnings": {
+    "number": "-3",
+    "error": "+101"
+  },
+  "suffix": ".bs.mjs",
+  "namespace": true,
+  "compiler-flags": ["-bs-no-version-header", "-open RescriptCore"],
+  "package-specs": [
+    {
+      "module": "esmodule",
+      "in-source": true
+    }
+  ],
+  "dependencies": ["@rescript/core", "rescript-nodejs"],
+  "dev-dependencies": [],
+  "ppx-flags": []
+}

package/src/CssToRescript.bs.mjs

@@ -0,0 +1,335 @@
+
+
+import Meow from "meow";
+import * as Nodefs from "node:fs";
+import Postcss from "postcss";
+import * as Process from "process";
+import * as Chokidar from "chokidar";
+import * as Nodepath from "node:path";
+import * as Core__Array from "@rescript/core/src/Core__Array.bs.mjs";
+import * as Core__Option from "@rescript/core/src/Core__Option.bs.mjs";
+import PostcssScss from "postcss-scss";
+import PostcssImport from "postcss-import";
+import PostcssModules from "postcss-modules";
+import * as Primitive_option from "@rescript/runtime/lib/es6/Primitive_option.js";
+import * as Primitive_string from "@rescript/runtime/lib/es6/Primitive_string.js";
+
+let Meow$1 = {};
+
+let Chokidar$1 = {};
+
+let PostCss = {};
+
+let PostCssScss = {};
+
+let PostCssImport = {};
+
+let PostCssModules = {};
+
+async function extractClassNames(cssContent, from) {
+  return (await new Promise((resolve, param) => {
+    let classNames = {
+      contents: []
+    };
+    Postcss([
+      PostcssImport(),
+      PostcssModules({
+        getJSON: (param, json) => {
+          classNames.contents = Object.keys(json);
+        },
+        exportGlobals: true
+      })
+    ]).process(cssContent, {
+      from: from,
+      syntax: Primitive_option.some(PostcssScss)
+    }).then(param => resolve(classNames.contents));
+  })).toSorted(Primitive_string.compare);
+}
+
+function generateReScriptBindings(baseName, importType, classNames) {
+  let recordFields = classNames.map(className => `  "` + className + `": string`);
+  let prelude = `// Generated from ` + baseName + `
+// Do not edit manually
+
+type t = {
+` + recordFields.join(",\n") + `
+}
+`;
+  if (importType === "Module") {
+    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"
+  let withProxy = (obj: t): t =>
+    proxy(
+      obj,
+      {
+        // "get": (_b, _c): string => %raw("_b[_c] || _c"),
+        "get": (base, className) =>
+          switch base->toDict->Dict.get(className) {
+          | Some(className) => className
+          | None => className
+          },
+      },
+    )
+)
+let css = withProxy(css)
+
+
+`);
+  } else {
+    return prelude + `
+// 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.
+
+@new external proxy: ('a, 'b) => 'c = "Proxy"
+type empty = {}
+%%private(
+  let withProxy = (obj: empty): t =>
+    proxy(
+      obj,
+      {
+        "get": (_: empty, className: string): string => className,
+      },
+    )
+)
+let css = withProxy({})
+`;
+  }
+}
+
+function getBaseNameAndImportType(cssFilePath) {
+  let baseName = Nodepath.basename(cssFilePath);
+  return [
+    baseName,
+    /\.module\.(css|scss)$/.test(baseName) ? "Module" : "Global"
+  ];
+}
+
+function getOutputFileName(baseName, importType) {
+  if (importType === "Module") {
+    return baseName.replace(/\.module\.(css|scss)$/, "_CssModule") + ".res";
+  } else {
+    return baseName.replace(/\.global\.(css|scss)$/, "_CssGlobal") + ".res";
+  }
+}
+
+async function processFile(cssFilePath, outputDir) {
+  let content = Nodefs.readFileSync(cssFilePath).toString();
+  console.log(`Processing file: ` + cssFilePath);
+  let classNames = await extractClassNames(content, cssFilePath);
+  if (classNames.length === 0) {
+    console.log(`⚠️  No classes found in ` + cssFilePath);
+    return;
+  }
+  let match = getBaseNameAndImportType(cssFilePath);
+  let importType = match[1];
+  let baseName = match[0];
+  let outputFileName = getOutputFileName(baseName, importType);
+  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)`);
+  return [
+    outputPath,
+    classNames
+  ];
+}
+
+function findCssFiles(dir) {
+  let entries = Nodefs.readdirSync(dir);
+  return entries.flatMap(entry => {
+    let fullPath = Nodepath.join(dir, entry);
+    let stat = Nodefs.lstatSync(fullPath);
+    if (stat.isDirectory()) {
+      return findCssFiles(fullPath);
+    } else if (/\.(module|global)\.(css|scss)$/.test(entry)) {
+      return [fullPath];
+    } else {
+      return [];
+    }
+  });
+}
+
+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.`);
+  }
+  console.log(`Press Ctrl+C to stop.\n`);
+  let isIgnored = path => {
+    let isDotfile = /(^|[\/\\])\./.test(path);
+    let isCssFile = /\.(module|global)\.(css|scss)$/.test(path);
+    let isDir = Nodefs.existsSync(path) && Nodefs.lstatSync(path).isDirectory();
+    if (isDotfile) {
+      return true;
+    } else if (isCssFile) {
+      return false;
+    } else {
+      return !isDir;
+    }
+  };
+  let ready = {
+    contents: false
+  };
+  Chokidar.watch(dirs, {
+    ignored: isIgnored,
+    persistent: true
+  }).on("ready", () => {
+    ready.contents = true;
+    console.log(`Ready for changes.`);
+  }).on("change", path => {
+    console.log(`\nChanged: ` + path);
+    processFile(path, outputDir);
+  }).on("add", path => {
+    if (skipInitial && !ready.contents) {
+      return;
+    } else {
+      console.log(`\nAdded: ` + path);
+      processFile(path, outputDir);
+      return;
+    }
+  }).on("unlink", path => {
+    console.log(`\n🗑️  Deleted: ` + path);
+  });
+}
+
+let helpText = `
+  Usage
+    $ css-to-rescript <file.module.css|scss|global.css|scss...>
+    $ css-to-rescript <directory...>
+
+  Generates ReScript bindings from CSS module and global files:
+    *.module.css|scss -> *_CssModule.res
+    *.global.css|scss -> *_CssGlobal.res
+
+  Options
+    --watch, -w         Watch for changes and regenerate bindings (directories only)
+    --skip-initial, -s  Skip initial compilation in watch mode
+    --output-dir, -o    Directory to write generated .res files
+                        (multiple files or single directory only)
+
+  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
+`;
+
+async function main() {
+  let cli = Meow(helpText, {
+    importMeta: import.meta,
+    flags: {
+      watch: {
+        type: "boolean",
+        shortFlag: "w",
+        default: false
+      },
+      outputDir: {
+        type: "string",
+        shortFlag: "o"
+      },
+      skipInitial: {
+        type: "boolean",
+        shortFlag: "s",
+        default: false
+      }
+    },
+    allowUnknownFlags: false
+  });
+  let inputPaths = cli.input;
+  if (inputPaths.length === 0) {
+    cli.showHelp();
+    Process.exit(1);
+  }
+  let outputDir = cli.flags.outputDir;
+  let watchMode = cli.flags.watch;
+  let skipInitial = cli.flags.skipInitial;
+  let match = Core__Array.reduce(inputPaths, [
+    [],
+    []
+  ], (param, path) => {
+    let dirs = param[1];
+    let files = param[0];
+    let stat = Nodefs.lstatSync(path);
+    if (stat.isFile()) {
+      return [
+        files.concat([path]),
+        dirs
+      ];
+    } else if (stat.isDirectory()) {
+      return [
+        files,
+        dirs.concat([path])
+      ];
+    } else {
+      return [
+        files,
+        dirs
+      ];
+    }
+  });
+  let dirs = match[1];
+  let files = match[0];
+  if (watchMode && files.length > 0) {
+    console.error(`Error: Watch mode only supports directories, not files.`);
+    Process.exit(1);
+  }
+  if (Core__Option.isSome(outputDir) && (dirs.length > 1 || files.length > 0 && dirs.length > 0)) {
+    console.error(`Error: --output-dir only supports multiple files or a single directory, not mixed inputs or multiple directories.`);
+    Process.exit(1);
+  }
+  if (files.length > 0) {
+    await Core__Array.reduce(files, Promise.resolve(), async (acc, file) => {
+      await acc;
+      await processFile(file, outputDir);
+    });
+  }
+  if (dirs.length <= 0) {
+    return;
+  }
+  if (watchMode) {
+    return await watchDirectories(dirs, outputDir, skipInitial);
+  }
+  let moduleFiles = dirs.flatMap(findCssFiles);
+  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);
+  });
+}
+
+main();
+
+export {
+  Meow$1 as Meow,
+  Chokidar$1 as Chokidar,
+  PostCss,
+  PostCssScss,
+  PostCssImport,
+  PostCssModules,
+  extractClassNames,
+  generateReScriptBindings,
+  getBaseNameAndImportType,
+  getOutputFileName,
+  processFile,
+  findCssFiles,
+  watchDirectories,
+  helpText,
+  main,
+}
+/*  Not a pure module */