[Bug]: Does not understand CSS Color level 5 relative color functions

[lachieh]

Describe the bug

When using the new(ish) CSS Color level 5 functions with relative colors, I get a warning about 'Unrecognized text'.

Expected behaviour

I'd expect that this be left alone for the browser to calculate at runtime. I imagine there are some cases where its possible to calculate the final value, but taking things like color spaces into consideration to do the calculation seems like it might be a little far out of scope for this project. That's just my opinion, though.

Steps to reproduce

input:

a {
   color(from blue oklab calc(l * 0.9) a b / alpha)
}

warning:

Lexical error on line 1: Unrecognized text.

Erroneous area:
1: l * 0.9
^..^

Version

9.0.1

Environment

System:
    OS: macOS 14.6
    CPU: (10) arm64 Apple M1 Max
    Memory: 496.95 MB / 64.00 GB
    Shell: 5.9 - /bin/zsh

Package details

postcss-calc@9.0.1
postcss@8.4.40

Additional context

No response

[equinusocio]

We're facing same issue on NextJs, wich uses this plugin under the hood

[graymatter00]

Are there any plans to fix this issue? I'm hitting it a lot now when using CSSNano.

[ludofischer]

Are there any plans to fix this issue? I'm hitting it a lot now when using CSSNano.

What is the issue exactly? Does it crash or does it only issue a warning. The easiest fix could be to skip the color value entirely. I am open to any proposal (code) on how to improve this.
Last time I have looked into similar issues, you needed to adapt the parser. Currently postcss-calc is using an umantained parser generator called jison. The options I have looked at include

1. other parser generators
2. writing the parser by hand
3. trying to use existing code like https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-function

For 1. and 2., I would need to learn how to use these tools or how to write the parser, and while I would like to learn these tools, I don't think starting with the CSS color spec is the best way to learn. When I looked at 3., it was not really geared towards minification, so it was not that easy to apply to this use case, but that I have changed.

[jdelStrother]

Does the warning surface useful errors sometimes? Or might it be more pragmatic to just lower it to debug-level so that people don't think it's an issue they need to fix?

[equinusocio]

We fixed this by disabling calc plugin in css-nano presets:

  return {
    plugins: {
      cssnano: {
        preset: [
          'default',
          {
            calc: false,
          },
        ],
      },
    },
  };

The calc plugin is now mostly useless since CSS is way more complex than before and the calc() function is widely supported. Also, with the relative color syntax implemented everywhere this function is more dynamic because you can use different syntaxes.

[graymatter00]

@ludofischer Thanks for the reply.

What is the issue exactly? Does it crash or does it only issue a warning.

It doesn't crash. It issues a warning. However, I'm not sure if the resulting file is damaged in some way.

I use the same workaround as @equinusocio #216 (comment). That is, disable a calc plugin. I just thought a fix would be nicer. But from what you say, it sounds like that might not be so easy.

And with @equinusocio's comment...

The calc plugin is now mostly useless since CSS is way more complex than before and the calc() function is widely supported. Also, with the relative color syntax implemented everywhere this function is more dynamic because you can use different syntaxes.

...it seems that the calc plugin might need a complete rethink.