Support interpolation on url (#551)

* feat: url interp

* chore: use -no-interp suffix

* chore: revert change

* chore: revert more lol

Author: zakybilfagih

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

@@ -1974,6 +1974,7 @@ and symbol = [%value.rec "<string> | <image> | <custom-ident>"]
 and target = [%value.rec
   "<target-counter()> | <target-counters()> | <target-text()>"
 ]
+and url = [%value.rec "<url-no-interp> | url( <interpolation> )"]
 and extended_length = [%value.rec
   "<length> | <calc()> | <interpolation> | <min()> | <max()>"
 ]

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

@@ -217,7 +217,7 @@ let string =
 
 // TODO: <url-modifier>
 // https://drafts.csswg.org/css-values-4/#urls
-let url = {
+let url_no_interp = {
   let url_token =
     token(
       fun

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

@@ -73,7 +73,7 @@ let dashed_ident: Rule.rule(string);
 
 let string: Rule.rule(string);
 
-let url: Rule.rule(string);
+let url_no_interp: Rule.rule(string);
 
 /* let var: Rule.rule(string); */
 

packages/css-property-parser/ppx/Generate.re

@@ -314,7 +314,7 @@ module Make = (Builder: Ppxlib.Ast_builder.S) => {
       type_("dashed_ident", [%type: string]),
       type_("custom_ident_without_span_or_auto", [%type: string]),
       // abstract_type("string"), already represented by OCaml string type
-      type_("url", [%type: string]),
+      type_("url_no_interp", [%type: string]),
       type_("hex_color", [%type: string]),
       type_("interpolation", [%type: list(string)]),
       type_("flex_value", [%type: [ | `Fr(float)]]),

packages/css-property-parser/test/Standard_test.re

@@ -388,8 +388,8 @@ let tests = [
     expect(parse("--random"), Ok("--random"));
     expect(parse("random'"), Error("Expected a --variable."));
   }),
-  test("<url>", () => {
-    let parse = parse([%value "<url>"]);
+  test("<url-no-interp>", () => {
+    let parse = parse([%value "<url-no-interp>"]);
     let to_check = Alcotest.result(Alcotest.string, Alcotest.string);
     let expect = check(__POS__, to_check);
     expect(parse("url(https://google.com)"), Ok("https://google.com"));

packages/parser/lib/Lexer.re

@@ -558,7 +558,8 @@ let consume_ident_like = lexbuf => {
       check(_ =>
         switch%sedlex (lexbuf) {
         | '\''
-        | '"' => true
+        | '"'
+        | variable => true
         | _ => false
         }
       );
@@ -797,7 +798,8 @@ let consume_ident_like = lexbuf => {
       check(lexbuf =>
         switch%sedlex (lexbuf) {
         | '\''
-        | '"' => true
+        | '"'
+        | variable => true
         | _ => false
         }
       );

packages/parser/test/Lexer_test.re

@@ -6,6 +6,10 @@ module Parser = Styled_ppx_css_parser.Parser;
 
 let success_tests =
   [
+    (
+      {|url($(Module.variable))|},
+      [FUNCTION("url"), INTERPOLATION(["Module", "variable"]), RIGHT_PAREN],
+    ),
     ({|inset-3\.5|}, [IDENT("inset-3.5")]),
     ({|-inset-3\.5|}, [IDENT("-inset-3.5")]),
     ({|inset-1\/3|}, [IDENT("inset-1/3")]),
@@ -295,6 +299,20 @@ let test_with_location =
     ({|--color-main|}, [IDENT("--color-main")], 12),
     ({|>=|}, [GTE], 2),
     ({|<=|}, [LTE], 2),
+    (
+      {|url($(Module.variable'))|},
+      [
+        FUNCTION("url"),
+        DELIM("$"),
+        LEFT_PAREN,
+        IDENT("Module"),
+        DELIM("."),
+        IDENT("variable'"),
+        RIGHT_PAREN,
+        RIGHT_PAREN,
+      ],
+      24,
+    ),
   ]
   |> List.mapi((_index, (input, output, last_position)) => {
        let (loc, values) = parse(input);

packages/ppx/src/Property_to_runtime.re

@@ -1553,7 +1553,14 @@ let render_gradient = (~loc, value: Types.gradient) =>
   | `_legacy_gradient(_) => raise(Unsupported_feature)
   };
 
-let render_url = (~loc, url) => [%expr `url([%e render_string(~loc, url)])];
+let render_url_no_interp = (~loc, url) => [%expr `url([%e render_string(~loc, url)])];
+
+let render_url = (~loc, url: Types.url) => {
+  switch (url) {
+  | `Url(v) => [%expr `url([%e render_variable(~loc, v)])]
+  | `Url_no_interp(v) => render_url_no_interp(~loc, v)
+  };
+};
 
 let render_image = (~loc, value: Types.image) =>
   switch (value) {