Support define CSS variables and use CSS variables (#492)

e2e/melange/src/ui/ui.re

@@ -1,3 +1,5 @@
+let c = CSS.color(`var({js|--color-link|js}));
+
 [%styled.global
   {|
   div {

packages/css-property-parser/lib/Combinator.re

@@ -19,7 +19,7 @@ let rec match_longest = ((left_key, left_rule), rules) =>
     };
   };
 
-let combine_static = rules => {
+let static = rules => {
   let rec match_everything = (values, rules) =>
     switch (rules) {
     | [] => return_match(values |> List.rev)
@@ -30,7 +30,7 @@ let combine_static = rules => {
   match_everything([], rules);
 };
 
-let combine_xor =
+let xor =
   fun
   | [] => failwith("xor doesn't makes sense without a single value")
   | [left, ...rules] => {
@@ -40,7 +40,7 @@ let combine_xor =
       value;
     };
 
-let combine_and = rules => {
+let and_ = rules => {
   // TODO: an array is a better choice
   let rec match_everything = (values, rules) =>
     switch (rules) {
@@ -59,4 +59,4 @@ let combine_and = rules => {
 };
 
 // [ A || B ] = [ A? && B? ]!
-let combine_or = rules => rules |> List.map(optional) |> combine_and;
+let or_ = rules => rules |> List.map(optional) |> and_;

packages/css-property-parser/lib/Combinator.rei

@@ -1,10 +1,10 @@
 type combinator('a, 'b) = list(Rule.rule('a)) => Rule.rule('b);
 
 // TODO: docs for infix operators
-let combine_static: combinator('a, list('a));
+let static: combinator('a, list('a));
 
-let combine_xor: combinator('a, 'a);
+let xor: combinator('a, 'a);
 
-let combine_and: combinator('a, list('a));
+let and_: combinator('a, list('a));
 
-let combine_or: combinator('a, list(option('a)));
+let or_: combinator('a, list(option('a)));

packages/css-property-parser/lib/Modifier.rei

@@ -3,11 +3,18 @@ type modifier('a, 'b) = Rule.rule('a) => Rule.rule('b);
 type range = (int, option(int));
 
 let one: modifier('a, 'a);
+
 let optional: modifier('a, option('a));
+
 let zero_or_more: modifier('a, list('a));
+
 let one_or_more: modifier('a, list('a));
+
 let repeat: range => modifier('a, list('a));
+
 let repeat_by_comma: range => modifier('a, list('a));
+
 let at_least_one: modifier(list(option('a)), list(option('a)));
+
 let at_least_one_2:
   modifier((option('a), option('b)), (option('a), option('b)));

packages/css-property-parser/lib/Parser.re

@@ -1,10 +1,12 @@
 open Standard;
-open Combinator;
 open Modifier;
 open Rule.Match;
-open Parser_helper;
 open Styled_ppx_css_parser;
 
+module StringMap = Map.Make(String);
+
+let (let.ok) = Result.bind;
+
 let rec _legacy_gradient = [%value.rec
   "<-webkit-gradient()> | <-legacy-linear-gradient> | <-legacy-repeating-linear-gradient> | <-legacy-radial-gradient> | <-legacy-repeating-radial-gradient>"
 ]
@@ -1956,6 +1958,51 @@ and wq_name = [%value.rec "[ <ns-prefix> ]? <ident-token>"]
 and x = [%value.rec "<number>"]
 and y = [%value.rec "<number>"];
 
+let apply_parser = (parser, tokens_with_loc) => {
+  open Styled_ppx_css_parser.Lexer;
+
+  let tokens =
+    tokens_with_loc
+    |> List.map(({txt, _}) =>
+         switch (txt) {
+         | Ok(token) => token
+         | Error((token, _)) => token
+         }
+       )
+    |> List.rev;
+
+  let tokens_without_ws = tokens |> List.filter((!=)(Tokens.WS));
+
+  let (output, remaining_tokens) = parser(tokens_without_ws);
+  let.ok output =
+    switch (output) {
+    | Ok(data) => Ok(data)
+    | Error([message, ..._]) => Error(message)
+    | Error([]) => Error("weird")
+    };
+  let.ok () =
+    switch (remaining_tokens) {
+    | []
+    | [Tokens.EOF] => Ok()
+    | tokens =>
+      let tokens =
+        tokens |> List.map(Tokens.show_token) |> String.concat(", ");
+      Error("tokens remaining: " ++ tokens);
+    };
+  Ok(output);
+};
+
+let parse = (rule_parser: Rule.rule('a), str) => {
+  let.ok tokens_with_loc =
+    Styled_ppx_css_parser.Lexer.from_string(str)
+    |> Result.map_error(_ => "frozen");
+
+  apply_parser(rule_parser, tokens_with_loc);
+};
+
+let check = (prop: Rule.rule('a), value) =>
+  parse(prop, value) |> Result.is_ok;
+
 let check_map =
   StringMap.of_seq(
     List.to_seq([
@@ -3397,12 +3444,6 @@ let check_map =
     ]),
   );
 
-let parse = Parser_helper.parse;
-
-module StringMap = Map.Make(String);
-
-let (let.ok) = Result.bind;
-
 let check_value = (~name, value) => {
   let.ok check =
     check_map

packages/css-property-parser/lib/Standard.re

@@ -1,5 +1,4 @@
 open Styled_ppx_css_parser.Tokens;
-open Combinator;
 open Rule.Let;
 open Rule.Pattern;
 
@@ -12,9 +11,7 @@ let function_call = (name, rule) => {
       fun
       | FUNCTION(called_name) when name == called_name => Ok()
       | token =>
-        Error([
-          "expected a function " ++ name ++ ". got an " ++ show_token(token),
-        ]),
+        Error(["expected a " ++ name ++ ". got an " ++ show_token(token)]),
     );
   let.bind_match value = rule;
   let.bind_match () = expect(RIGHT_PAREN);
@@ -160,7 +157,7 @@ let ident =
 
 // https://drafts.csswg.org/css-values-4/#textual-values
 let css_wide_keywords =
-  combine_xor([
+  Combinator.xor([
     value(`Initial, keyword("initial")),
     value(`Inherit, keyword("inherit")),
     value(`Unset, keyword("unset")),
@@ -204,9 +201,12 @@ let url = {
       | _ => Error(["expected a url"]),
     );
   let url_fun = function_call("url", string);
-  combine_xor([url_token, url_fun]);
+  Combinator.xor([url_token, url_fun]);
 };
 
+// https://drafts.csswg.org/css-variables-2/#funcdef-var
+/* let var = function_call("var", dashed_ident); */
+
 // css-color-4
 // https://drafts.csswg.org/css-color-4/#hex-notation
 let hex_color =
@@ -267,3 +267,29 @@ let flex_value =
       }
     | _ => Error(["expected flex_value"]),
   );
+
+// TODO: workarounds
+let invalid = expect(STRING("not-implemented"));
+let attr_name = invalid;
+let attr_fallback = invalid;
+let string_token = invalid;
+let ident_token = invalid;
+let dimension = invalid;
+let declaration_value = invalid;
+let positive_integer = integer;
+let function_token = invalid;
+let any_value = invalid;
+let hash_token = invalid;
+let zero = invalid;
+let custom_property_name = invalid;
+let declaration_list = invalid;
+let name_repeat = invalid;
+let ratio = invalid;
+let an_plus_b = invalid;
+let declaration = invalid;
+let y = invalid;
+let x = invalid;
+let decibel = invalid;
+let urange = invalid;
+let semitones = invalid;
+let url_token = invalid;