[Bug]: Lexical error on line ... : Unrecognized text.

[aschulz01]

Describe the bug

While using igniteui-angular inside an SharePoint spfx webpart, the microsoft spfx build tool is using postcss-calc.

The infragistics css is containing a rule like this:

...saved as postcss-test.css

.foo {
  margin-inline: 
  calc(
    max(
       var(1, var(2,3)), 
       var(4, var(5,6))
    ) * 1);
}

An error occurs in this isolated environment : npx postcss --use postcss-calc -o output.css .\postcss-test.css

Errormessage: 2:3 !! Lexical error on line 2: Unrecognized text.

Erroneous area: 1: max( 2: var(1, var(2,3)), ^.........................^ 3: var(4, var(5,6)) 4: ) * 1 [postcss-calc]

but this is working:

calc(
      var(1, var(2,3))*
      var(4, var(5,6))
    )

as well as this:

calc(
    max(
      var(1, 2),
      var(3, 4)
    )*1
   )

Expected behaviour

Not throwing an error...

Steps to reproduce

1. create a file postcss-test.css containing:

.foo {
  margin-inline: 
  calc(
    max(
       var(1, var(2,3)), 
       var(4, var(5,6))
    ) * 1);
}

2. install dependencies npm i -D postcss postcss-cli postcss-calc
3. call postcss-calc npx postcss --use postcss-calc -o output.css .\postcss-test.css

Version

9.0.1

Environment

System:
    OS: Windows 10 10.0.22621
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Memory: 14.56 GB / 31.78 GB

Package details

PS C:\temp\foo> npm ls postcss-calc postcss
foo@ C:\temp\foo
+-- [email protected]
| `-- [email protected] deduped
+-- [email protected]
| +-- [email protected]
| | `-- [email protected] deduped
| +-- [email protected]
| | `-- [email protected] deduped
| `-- [email protected] deduped
`-- [email protected]

Additional context

suggested testcase

test(
  'should handle nested var inside max inside calc function (#16)',
  testValue(
    'calc(max(var(--foo,var(--bar,--baz)),var(--bat,var(--goo,--boo))) *1)',
    'calc(max(var(--foo,var(--bar,--baz)),var(--bat,var(--goo,--boo)))*1)',
  )
);

No response