calc() breaks when using 3+ variable fallbacks #104

dgp1130 · 2020-03-12T18:30:04Z

From downstream issue cssnano/cssnano#880 which is from downstream issue angular/angular-cli#16910.

Using a calc() command with 3+ variable fallbacks seems to break the parser.

For example, paste the following code into the CSS Nano playground (which I'm told uses postcss-calc via cssnano-preset-default:

.some-rule-lg {
  --width-lg: 1px;
  --width-md: 2px;
  --width-sm: 3px;
  --offset-lg: 4px;
  --offset-md: 5px;
  --offset-sm: 6px;
  width: calc(var(--width-lg, var(--width-md, var(--width-sm, 0))) + var(--offset-lg, var(--offset-md, var(--offset-sm, 0))));
}

Then look at the JavaScript console and see:

"Parse error on line 1: 
var(--width-lg, var(--width-md, var(--width-sm, 0))) + var(--...
---------------------------------------------------^
Expecting end of input, "ADD", "SUB", "MUL", "DIV", got unexpected "RPAREN""

Work around is to use intermediary variables:

.some-rule-lg {
  --width-lg: 1px;
  --width-md: 2px;
  --width-sm: 3px;
  --offset-lg: 4px;
  --offset-md: 5px;
  --offset-sm: 6px;

  --temp-calc1: var(--width-lg, var(--width-md, var(--width-sm, 0)));
  --temp-calc2: var(--offset-lg, var(--offset-md, var(--offset-sm, 0)));
  width: calc(var(--temp-calc1) + var(--temp-calc2));
}

Semigradsky · 2020-03-13T10:22:20Z

The same issue: #77

dgp1130 mentioned this issue Mar 12, 2020

CSS calc() breaks when using 3+ variable fallbacks cssnano/cssnano#880

Open

Semigradsky added the bug label Mar 13, 2020

postcss / postcss-calc

calc() breaks when using 3+ variable fallbacks #104

calc() breaks when using 3+ variable fallbacks #104

dgp1130 commented Mar 12, 2020

Semigradsky commented Mar 13, 2020

postcss / postcss-calc

Join GitHub today

calc() breaks when using 3+ variable fallbacks #104

calc() breaks when using 3+ variable fallbacks #104

Comments

dgp1130 commented Mar 12, 2020

Semigradsky commented Mar 13, 2020

Essential cookies

Always active

Analytics cookies