Swap emotion in for glamor

Author: wegry

README.md

@@ -2,7 +2,7 @@
 
 statically typed DSL for writing css in reason.
 
-Bs-css is a statically typed interface to [Glamor](https://github.com/threepointone/glamor)
+Bs-css is a statically typed interface to [Emotion](https://github.com/emotion-js/emotion)
 
 ## Installation
 
@@ -18,10 +18,10 @@ In your `bsconfig.json`, include `"bs-css"` in the `bs-dependencies`.
 module Styles = {
   /*Open the Css module, so we can access the style properties below without prefixing them with Css.*/
   open Css;
-  
+
   let card = style([
     display(flexBox),
-    flexDirection(column), 
+    flexDirection(column),
     alignItems(stretch),
     backgroundColor(white),
     boxShadow(~y=px(3), ~blur=px(5), rgba(0, 0, 0, 0.3)),
@@ -100,6 +100,6 @@ Its on its way!
 until then you can check out [css.rei](./src/Css.rei).
 
 ## Thanks
-Thanks to [glamor](https://github.com/threepointone/glamor) which is doing all the heavi lifting.
+Thanks to [emotion](https://github.com/emotion-js/emotion) which is doing all the heavy lifting.
 Thanks to [bs-glamor](https://github.com/poeschko/bs-glamor) which this repo was forked from.
 Thanks to [elm-css](https://github.com/rtfeldman/elm-css) for dsl design inspiration.

example/test.re

@@ -10,6 +10,7 @@ let arialNarrow =
       ~fontFamily="Arial FontFace Test",
       ~src=[localUrl("Arial Narrow")],
       ~fontStyle=normal,
+      ~fontWeight=500,
       (),
     )
   );

package.json

@@ -1,14 +1,14 @@
 {
   "name": "bs-css",
-  "version": "7.5.0",
-  "description": "BuckleScript bindings for glamor",
+  "version": "8.0.0",
+  "description": "BuckleScript bindings for emotion",
   "scripts": {
     "build": "bsb -make-world",
     "webpack": "webpack -w",
     "start": "bsb -make-world -w"
   },
   "keywords": [
-    "glamor",
+    "emotion",
     "bucklescript",
     "reason",
     "css"
@@ -20,7 +20,7 @@
     "url": "git+https://github.com/SentiaAnalytics/bs-css.git"
   },
   "dependencies": {
-    "glamor": "^2.0.0"
+    "emotion": "^9.2.12"
   },
   "devDependencies": {
     "bs-platform": "^4.0.4",

src/Css.re

@@ -1,36 +1,17 @@
 include Css_Colors;
 
-module Glamor = {
-  type css;
-  type fontFace;
-  [@bs.send] external className: css => string = "toString";
-  [@bs.module "glamor"] external _make: Js.Json.t => css = "css";
-  [@bs.scope "css"] [@bs.module "glamor"]
-  external makeGlobal: (string, Js.Json.t) => unit = "global";
-  [@bs.scope "css"] [@bs.module "glamor"]
-  external makeInsert: string => unit = "insert";
-  [@bs.scope "css"] [@bs.module "glamor"]
+module Emotion = {
+  type css = string;
+  [@bs.module "emotion"] external _make: Js.Json.t => css = "css";
+  [@bs.module "emotion"]
+  external injectGlobal: Js.Json.t => unit = "";
+  [@bs.module "emotion"]
+  external rawInjectGlobal: string => unit = "injectGlobal";
+  [@bs.module "emotion"]
   external makeKeyFrames: Js.Dict.t(Js.Json.t) => string = "keyframes";
-  [@bs.scope "css"] [@bs.module "glamor"]
-  external makeFontFace: fontFace => string = "fontFace";
-  [@bs.obj]
-  external fontFace:
-    (
-      ~fontFamily: string,
-      ~src: string,
-      ~fontStyle: string=?,
-      ~fontWeight: int=?
-    ) =>
-    fontFace =
-    "";
-  let merge: list(css) => css = [%bs.raw
-    {|
-      function (styles) {
-          const glamor = require('glamor');
-          return glamor.css.apply(glamor, styles)
-      }
-  |}
-  ];
+  [@bs.module "emotion"] [@bs.splice]
+  external merge: array(css) => css = "cx";
+  let merge: list(css) => css = classes => classes->Array.of_list->merge;
   let rec makeDict = ruleset => {
     let toJs = rule =>
       switch (rule) {
@@ -310,21 +291,23 @@ type selector = [ | `selector(string, list(rule))];
 let empty = [];
 
 let merge = List.concat;
-let global = (selector, rules: list(rule)) =>
-  Glamor.makeGlobal(selector, Glamor.makeDict(rules));
-let insertRule = css => Glamor.makeInsert(css);
+let global = (selector, rules: list(rule)) => {
+  Emotion.injectGlobal([(selector, Emotion.makeDict(rules))]->Js.Dict.fromList->Js.Json.object_);
+}
+
+let insertRule = raw => Emotion.rawInjectGlobal(raw);
 
 type animation = string;
 
 let keyframes = frames => {
   let addStop = (dict, (stop, rules)) => {
-    Js.Dict.set(dict, string_of_int(stop) ++ "%", Glamor.makeDict(rules));
+    Js.Dict.set(dict, string_of_int(stop) ++ "%", Emotion.makeDict(rules));
     dict;
   };
-  Glamor.makeKeyFrames @@ List.fold_left(addStop, Js.Dict.empty(), frames);
+  Emotion.makeKeyFrames @@ List.fold_left(addStop, Js.Dict.empty(), frames);
 };
 
-let style = rules => rules |> Glamor.make |> Glamor.className;
+let style = rules => rules |> Emotion.make;
 
 let d = (property, value) => `declaration((property, value));
 
@@ -914,7 +897,7 @@ let overflowY = x => d("overflowY", string_of_overflow(x));
 
 let zIndex = x => d("zIndex", string_of_int(x));
 
-let contentRule = x => d("content", x);
+let contentRule = x => d("content", {j|"$x"|j});
 
 let columnCount = x =>
   d(
@@ -1256,6 +1239,7 @@ let outlineOffset = x => d("outlineOffset", string_of_length(x));
  * Text
  */
 
+[@bs.deriving jsConverter]
 type fontStyle = [ | `normal | `italic | `oblique];
 let fontStyleToJs =
   fun
@@ -1281,6 +1265,7 @@ let fontVariant = x =>
   );
 
 let fontStyle = x => d("fontStyle", fontStyleToJs(x));
+let fontWeight = x => d("fontWeight", string_of_int(x));
 
 let fontFace = (~fontFamily, ~src, ~fontStyle=?, ~fontWeight=?, ()) => {
   let fontStyle =
@@ -1293,12 +1278,24 @@ let fontFace = (~fontFamily, ~src, ~fontStyle=?, ~fontWeight=?, ()) => {
          | `url(value) => {j|url("$(value)")|j},
        )
     |> String.concat(", ");
-  Glamor.(
-    makeFontFace(fontFace(~fontFamily, ~src, ~fontStyle?, ~fontWeight?))
-  );
-};
 
-let fontWeight = x => d("fontWeight", string_of_int(x));
+  let fontStyle =
+    Belt.Option.mapWithDefault(fontStyle, "", s => "font-style: " ++ s);
+  let fontWeight =
+    Belt.Option.mapWithDefault(fontWeight, "", w =>
+      "font-weight: " ++ string_of_int(w)
+    );
+  let asString = {j|@font-face {
+    font-family: $fontFamily;
+    src: $src;
+    $(fontStyle);
+    $(fontWeight);
+}|j};
+
+  Emotion.rawInjectGlobal(asString);
+
+  fontFamily;
+};
 
 let lineHeight = x =>
   d(