postcss
[Bug]: postcss-calc: Lexical error on line 1: Unrecognized text
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
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
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.
