[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
+-- postcss-calc@9.0.1
| `-- postcss@8.4.23 deduped
+-- postcss-cli@10.1.0
| +-- postcss-load-config@4.0.1
| | `-- postcss@8.4.23 deduped
| +-- postcss-reporter@7.0.5
| | `-- postcss@8.4.23 deduped
| `-- postcss@8.4.23 deduped
`-- postcss@8.4.23

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