#152 - Add var (css variable usage) wherever cascading is possible

Author: giraud

bs-css/__tests__/Css_test.re

@@ -18,6 +18,30 @@ open CssForTest;
 let toBeJson = x => Expect.toBe(x->Js.Json.stringifyAny);
 let r = x => toJson([x]); /* simple rule for more readable tests */
 
+describe("Var", () => {
+  test("test usage (limited)", () =>
+    expect(
+      (r(color(var("foo"))), r(marginTop(var("--bar"))))
+      ->Js.Json.stringifyAny,
+    )
+    |> toBeJson(({"color": "var(--foo)"}, {"marginTop": "var(--bar)"}))
+  );
+
+  test("test usage with default (limited)", () =>
+    expect(
+      (
+        r(textDecoration(varDefault("foo", "default"))),
+        r(alignItems(varDefault("--bar", "default"))),
+      )
+      ->Js.Json.stringifyAny,
+    )
+    |> toBeJson((
+         {"textDecoration": "var(--foo,default)"},
+         {"alignItems": "var(--bar,default)"},
+       ))
+  );
+});
+
 describe("Color style", () =>
   test("test values", () =>
     expect(
@@ -841,4 +865,4 @@ describe("cursor", () =>
          {"cursor": "zoom-out"},
        ))
   )
-);
+);

bs-css/src/Css_AtomicTypes.re

@@ -22,6 +22,20 @@ module Cascading = {
     | `unset => "unset";
 };
 
+module Var = {
+  type t = [ | `var(string) | `varDefault(string, string)];
+
+  let var = x => `var(x);
+  let varDefault = (x, default) => `varDefault((x, default));
+
+  let prefix = x => Js.String.startsWith("--", x) ? x : "--" ++ x;
+
+  let toString =
+    fun
+    | `var(x) => "var(" ++ prefix(x) ++ ")"
+    | `varDefault(x, v) => "var(" ++ prefix(x) ++ "," ++ v ++ ")";
+};
+
 module Time = {
   type t = [ | `s(float) | `ms(float)];
 

bs-css/src/Css_AtomicTypes.rei

@@ -10,6 +10,15 @@ module Cascading: {
   let toString: t => string;
 };
 
+module Var: {
+  type t = [ | `var(string) | `varDefault(string, string)];
+
+  let var: string => [> t];
+  let varDefault: (string, string) => [> t];
+
+  let toString: t => string;
+};
+
 module Time: {
   /**
    The <time> CSS data type represents a time value expressed in seconds or milliseconds.