[Bug]: postcss-calc: Lexical error on line 1: Unrecognized text

[58bits]

Describe the bug

We're using what I believe is relatively new syntax for oklch relative color values....

--red-950: oklch(from var(--red-base) calc(l * 0.7) c h);

... which is resulting in the following error:

  Erroneous area:
1: l * 0.75
^..^ [postcss-calc]
161:5   ⚠  Lexical error on line 1: Unrecognized text.

Expected behaviour

Not to see the error?

Steps to reproduce

We have a postcss task / script in our package.json

Note: We also have cssnano configured for production builds, and it is postcss-calc inside cssnano that is causing the error.

// postcss.config.mjs
const config = {
  plugins: {
    'postcss-import': {},
    tailwindcss: {},
    autoprefixer: {},
    cssnano: process.env.NODE_ENV === 'production' ? {} : false
  }
}

export default config

"build:css": "postcss \"src/styles/styles.css\" --env production --dir dist/styles --base ./src/styles",

Running pnpm build - with this script enabled and any css filed that contains our relative color values using calc - such as

--red-950: oklch(from var(--red-base) calc(l * 0.7) c h);

Version

postcss-calc@10.1.0

Environment

System:
    OS: Linux 5.15 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
    CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor
    Memory: 15.44 GB / 23.47 GB
    Container: Yes
    Shell: 3.7.1 - /usr/bin/fish

Package details

pnpm ls postcss-calc postcss
Legend: production dependency, optional only, dev only

devDependencies:
postcss 8.5.1

Additional context

No response

[58bits]

This also occurs in Next.js 15 if any CSS files in the project, or any CSS files that are imported (like our ui kit) are using calc this way.

Oops - apologies - this is NOT occurring in Next.js@latest . I've just tried to create a repo to reproduce the error. Will continue to investigate.

[58bits]

I appears that this error only occurs when cssnano is used.

[ludofischer]

This is the same issue as #216