Post CSS 具有多个默认值的 CSS 变量的 calc() 解析错误

Question

我是运行一个带有 Post CSS 的 Nuxt.JS 项目，在生成项目的静态版本时出现以下错误：

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

CSS 代码段 失败了 – 但根据 W3C CSS 验证程序是正确的标记 – 如下所示：

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

奇怪的是，添加第三个fallback后就开始失败了。因为这个片段位于文档的上方， 被正确解析。

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

有什么帮助吗？谢谢！

Answer 1

找到了答案： 好像是个bug：https://github.com/postcss/postcss-calc/issues/104 someone也发了一个workaround：暂时把一大块变量保存到另一个变量中用作中介。

Post CSS 具有多个默认值的 CSS 变量的 calc() 解析错误

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

css

css-variables

postcss

nuxt.js

postcss-loader