google / closure-stylesheets

A CSS+ transpiler that lints, optimizes, and I18n-izes

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Parsing error with css calc and negative number

blasss opened this issue · comments

The parsing of calc() functions does not seem to recognize negative numbers as part of an expression. The following expression yields an parsing error:
margin-left: calc(var(--size-grid-marker-column-resize) / -2);

com.google.common.css.compiler.ast.GssParserException: Parse error in xxx.css at line 170 column 63:
     margin-left: calc(var(--size-grid-marker-column-resize) / -2);
                                                               ^
Caused by: com.google.common.css.compiler.ast.ParseException: Encountered " "-" "- "" at line 170, column 63.
 Was expecting one of:
     <S> ...
     <NUMBER> ...

According to https://drafts.csswg.org/css-values-3/#calc-notation this is a perfectly valid expression.
As a workaround the expression can be converted to the following form, which is being parsed correctly:
margin-left: calc(0 - (var(--size-grid-marker-column-resize) / 2));

As the outlined expression is valid according to the specification it should be accepted.