postcss-calc: Parse error with CSS custom properties with default values including a nested calc

The following CSS:

div {
    margin-right: calc(var(--b, calc(var(--c) * 1)));
}

Leads to the following parser error:

JisonParserError: Parse error on line 1: 
var(--b, calc(var(--c)*1))
-------------------------^
Expecting end of input, "ADD", "SUB", "MUL", "DIV", got unexpected "RPAREN"

Looking at the Stack trace, here’s the chain of the last few operations leading to the issue:

at Parser.parseError (/node_modules/postcss-calc/dist/parser.js:1164:15)
at Parser.parse (/node_modules/postcss-calc/dist/parser.js:1680:30)
at /node_modules/postcss-calc/dist/lib/transform.js:30:30

Removing the last * 1 part removes the parser error.

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 9
Comments: 23 (2 by maintainers)

Links to this issue

Build script of Create React App fails because of an error in postcalc-css parser

Commits related to this issue

Dissable postcss-calc per https://github.com/postcss/postcss-calc/issues/77 — committed to aepstein/vumt by aepstein 5 years ago
Added fix for React build issue: https://github.com/postcss/postcss-calc/issues/77 — committed to glitchassassin/desk-clock by deleted user 5 years ago
fix: Allow embedded functions inside CSS function (#77) — committed to impy88/postcss-calc by impy88 4 years ago
fix: Allow embedded functions inside CSS function (#77) — committed to impy88/postcss-calc by impy88 4 years ago

Most upvoted comments

As a workaround, disable postcss-calc in package.json to pass gatsby build in my case.

  "cssnano": {
    "preset": [
      "default",
      {
        "calc": false
      }
    ]
  }

Will enable again once this bug fixed. Thanks!

+21

eric1iu on May 10, 2019

Any example of this for removing postcss-calc from Gatsby build please? I can’t achieve this…

I tried to edit my postcss.config.js, unsuccessful.

HZooly on Feb 5, 2020

In case this helps anyone, calc(var(--base-padding) * -1) throws an error whereas calc(-1 * var(--base-padding)) does not.

bwstoppel on Jun 23, 2022

In my case it was caused by a third party library: https://github.com/sampotts/plyr/issues/1816

julkue on Apr 29, 2020

Btw I have the very same problem without having nested variables :

const postcssCalc = require('postcss-calc');

const css = `
.baz{
  height:calc( calc(16px + 0.8)+calc(1.5 + 0.9));
}
`

postcssCalc.process( css ).catch( error => console.error(error.toString()) );

This breaks with error :

JisonParserError: Parse error on line 1:
calc(16px + 0.8)2.4
----------------^
Expecting end of input, "ADD", "SUB", "MUL", "DIV", got unexpected "NUMBER"

I assume having nested calc with no space between breaks it, since

height:calc( calc(16px + 0.8)+ calc(1.5 + 0.9));
//                            ^ note space

works normally.

drinchev on Jul 5, 2019