Skip to content

Operators in "calc" not parsed correctly. #12

@pmwhite

Description

@pmwhite

The following is a test which demonstrates a bug in the parser:

let%expect_test _ =
  sexp_print {| div { height: calc(100vh - 20px); } |};
  [%expect
    {|
    ((Style_rule
      ((prelude ((Ident div)))
       (block
        ((Declaration
          ((name height)
           (value
            ((Function
              (calc
               ((Float_dimension (100 vh Length)) (Delim -)
                (Float_dimension (20 px Length)))))))
           (important false)))))))) |}];
  sexp_print {| div { height: calc(100vh-20px); } |};
  [%expect
    {|
    ((Style_rule
      ((prelude ((Ident div)))
       (block
        ((Declaration
          ((name height) (value ((Function (calc ((Dimension (100 vh-20px)))))))
           (important false)))))))) |}];

The two bugs demonstrated are:

  • the operator "-" is interpreted as a "Delim" rather than a "Operator" token, which means that it gets printed without any spaces between the parts of the expression, which is not valid CSS.
  • the parser does not reject the version without spaces but instead parses "vh-20px" as the unit of the dimension.

The first of these is far more important than the second. I took a bit of a stab at trying to fix the grammar/lexer, but I'm unfamiliar with the structure of the grammar, so I got lost. Any idea what the right way to solve this is?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions