processing css with postcss, calc/var problems

I do not know where to best report this, but it needs to be documented somewhere.

I am using a pretty standard webpacker configuration to run my react app that uses Fullcalendar. After upgrading to the V5 release candidate, I encountered the following error:

ERROR in ./node_modules/@fullcalendar/timegrid/main.css (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/@fullcalendar/timegrid/main.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
ParserError: Syntax Error at line: 1, column 45
    at /Users/andre/terusama/node_modules/@fullcalendar/timegrid/main.css:84:7
    at Parser.error (/Users/andre/terusama/node_modules/postcss-values-parser/lib/parser.js:127:11)
    at Parser.operator (/Users/andre/terusama/node_modules/postcss-values-parser/lib/parser.js:162:20)
    at Parser.parseTokens (/Users/andre/terusama/node_modules/postcss-values-parser/lib/parser.js:245:14)
    at Parser.loop (/Users/andre/terusama/node_modules/postcss-values-parser/lib/parser.js:132:12)
    at Parser.parse (/Users/andre/terusama/node_modules/postcss-values-parser/lib/parser.js:51:17)
    at parse (/Users/andre/terusama/node_modules/postcss-custom-properties/index.cjs.js:47:30)
    at /Users/andre/terusama/node_modules/postcss-custom-properties/index.cjs.js:333:24
    at /Users/andre/terusama/node_modules/postcss/lib/container.js:190:18
    at /Users/andre/terusama/node_modules/postcss/lib/container.js:135:18
    at Rule.each (/Users/andre/terusama/node_modules/postcss/lib/container.js:101:16)

I was incredibly confused as to what to do about this. I understand that the new version of fullcalendar required a css loader, but it was my understanding that I was already doing this.

I was able to get webpack(er) to compile successfully by removing all uses of calc in Fullcalendar css manually. This is not a real solution, however; so I had to keep digging.

I was able to resolve my issues, by changing my postcss configuration from :

module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}

to

module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 4
    })
  ]
}

So what this seems to do is target how many polyfills postcss has to add to your app. Stage 0 is experimental, and stage 4 is stable. I do not 100% understand what exactly is being pollyfilled. 3 was the default that came with rails/webpacker.

Changing this to 4, magically solved my problems.

Again, this is probably not the right place to document this, however; this was frustrating, and I can guarantee other people upgrading full-calendar are going to run into the same issues.

[roselily8]

Hi, I am still having the same issue. I have installed fullcalendar v5.5.0 and I am using nuxt. Upon checking, @fullcalendar/timegrid/main.css:94:7 and @fullcalendar/common/main.css:638:3 still do not have white space around operators, which resulted in syntax error with postcss. Can you please check? Thx.

[mlazuardy-dyned]

@andreluizbnu @1forh @melokki

I guess i fixed the issue by adding css nano plugin config inside nuxt.config.js

build: {
        transpile: /@fullcalendar.*/,
        postcss: {
            plugins: {
                'cssnano': {
                    preset: [
                        "default",
                        {
                            "calc": false
                        }
                    ]
                }
            }
        }
    },