cacl() function invalid in for loop about postcss-for

[travco]

Hey @LouisaNikita, is there any chance you can post the load order of your postcss plugins?

That might help identify the issue, as you (should) be able to do this.

[drewbaker]

I ran into this error today with a Nuxt site. Works locally, but on Netlifty it errors out at build:

3:09:39 PM: ERR! JisonLexerError: Lexical error on line 1: Unrecognized text.
3:09:39 PM: ERR!
3:09:39 PM: ERR!   Erroneous area:
3:09:39 PM: ERR! 1: $(i) * 40ms
3:09:39 PM: ERR! ^..^
3:09:39 PM: ERR!     at /opt/build/repo/components/PanelMenu.vue:99:21
3:09:39 PM: ERR!     at Object.parseError (/opt/build/repo/node_modules/postcss-calc/dist/parser.js:1200:15)
3:09:39 PM: ERR!     at Object.lexer_parseError [as parseError] (/opt/build/repo/node_modules/postcss-calc/dist/parser.js:2333:44)

Because of this code:

            /* Stagger animate menu items */
            @for $i from 1 to 50 {
                .menu-item:nth-child($(i)) {
                    transition-delay: calc($(i) * 40ms);
                }
            }

Using @nuxt/postcss8, and my plugin order is:

        postcss: {
            plugins: {
                "postcss-for": {},
                "postcss-nested": {},
                "postcss-custom-media": {},
                "postcss-hexrgba": {},
            },
        },

[drewbaker]

I managed to get a successful deploy by just changing the syntax to this:

            @for $i from 1 to 50 {
                .menu-item:nth-child($(i)) {
                    --index: $(i);
                    transition-delay: calc(var(--index) * 40ms);
                }
            }