Search code examples
cssnuxt.jspostcsscss-variablespostcss-loader

Post CSS parse error on calc() of CSS variables with several default values

I'm running a Nuxt.JS project with Post CSS and get the following error while generating the project's static version:

JisonParserError: Parse error on line 1:
calc(100% / 12) * var(--cols-md, var(--cols-sm, var(--cols, (12))))
-----------------------------------------------------------------^

The CSS snippet that fails – but is correct markup according to W3C CSS Validator – looks like this:

@media (min-width: 1024px) {
  .c-col {
    width: calc(calc(100% / 12) * var(--cols-md, var(--cols-sm, var(--cols, 12))));
  }
}

The strange thing is that it starts to fail after adding the third fallback. Because this snippet, which is further up in the document, is parsed correctly.

@media (min-width: 768px) {
  .c-col {
    width: calc(calc(100% / 12) * var(--cols-sm, var(--cols, 12)));
  }
}

Any help? Thanks!

Solution

  • found an answer: it seems to be a bug: https://github.com/postcss/postcss-calc/issues/104 somone also posted a workaround: temporarily save a chunk of variables into another one to use it as an intermediary.