Expecting end of input, "ADD", "SUB", "MUL", "DIV", got unexpected "RPAREN"

Question

I work with Augmented UI in my Gatsby project, every thing works great in dev mode.

When I go with build command, I got this log error:

info bootstrap finished - 4.630 s
⠀
failed Building production JavaScript and CSS bundles - 9.761s

 ERROR #98123  WEBPACK

Generating JavaScript bundles failed

Parse error on line 1:
...n-x, calc(var(--aug-_TlJoinRX, 0px)/2 + var(--aug-_TrJoinLX, 100%)/2)) + var(--...
------------------------------------------------------------------------^
Expecting end of input, "ADD", "SUB", "MUL", "DIV", got unexpected "RPAREN"

not finished run queries - 9.857s
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `gatsby build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.

After some researches, it seems that PostCSS is unable to work along with Augmented UI (on calc functions).

I'm unable to find a way to disable PostCSS on this.

My dependencies versions are:

"gatsby": "^2.18.5",
"gatsby-plugin-postcss": "^2.1.16"

My current postcss.config.js looks like that:

module.exports = () => ({
  plugins: [require('tailwindcss')],
})

Thanks for any help on this subject.

Answer 1

@Zooly, the problem is related with the use of calc function in the CSS preprocessor or minifier. From the Augmented UI's documentation:

Compatibility with Create React App (And in my situation, Vue) Create React App depends on PostCSS and cssnano. Both of these libraries have parsing bugs that block augmented-ui so you'll need to copy augmented-ui.min.css into the public folder and manually include it in the index.html file to avoid them until they're fixed. https://augmented-ui.com/docs/#install

As you can see at this support answer on GitHub https://github.com/propjockey/augmented-ui/issues/3#issuecomment-579671714, you can add this key to your package.json config file:

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

I use this workaround and it works fine to build my Vue project. Hope it works for yours too.