@greenfinity/rescript-typed-css-modules 0.1.1 → 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
 
@@ -175,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 = ...
@@ -183,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) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@greenfinity/rescript-typed-css-modules",
   "description": "Typed CSS Modules for ReScript",
-  "version": "0.1.1",
+  "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({})
-`;
+`);
   }
 }
 

package/src/CssToRescript.res

@@ -9,7 +9,14 @@ module Meow = {
     default?: bool,
   }
 
-  type flags = {"watch": flag, "outputDir": flag, "skipInitial": flag, "force": flag, "silent": flag, "quiet": 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, "force": bool, "silent": bool, "quiet": 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.
 
@@ -238,7 +252,9 @@ let processFile = async (cssFilePath, outputDir, ~force=false, ~silent=false, ~q
 
       NodeJs.Fs.writeFileSync(outputPath, NodeJs.Buffer.fromString(bindings))
       if !quiet {
-        Console.log(`✅ Generated ${outputPath} (${classNames->Array.length->Int.toString} classes)`)
+        Console.log(
+          `✅ Generated ${outputPath} (${classNames->Array.length->Int.toString} classes)`,
+        )
       }
 
       (outputPath, classNames)->Some