CSS Parse Error on env() ex: calc(env(safe-area-inset-right) + 16px)

[jorge-teixeira]

Hello,
I’m getting the following validation error in my report:
error^: CSS: “right”: Parse Error.

This happens on the following valid CSS declaration:

.wp-lightbox-overlay .close-button {
                align-items: center;
                cursor: pointer;
                display: flex;
                justify-content: center;
                min-height: 40px;
                min-width: 40px;
                padding: 0;
                position: absolute;
                right: calc(env(safe-area-inset-right) + 16px);
                top: calc(env(safe-area-inset-top) + 16px);
                z-index: 5000000
}

This CSS is automatically generated by WordPress 6.9.1, not manually written.
The syntax is valid according to the CSS Values and Units Module Level 4 specification.
env(safe-area-inset-*) is the standard method for handling safe areas on iOS devices, and combining it with calc() is supported by all modern browsers.

It seems that the CSS parser does not yet support env() inside calc(), which is causing a false positive.

Could you please confirm and update the parser so that this valid WordPress generated syntax is no longer flagged as an error?

other errors:
CSS: “scrollbar-gutter”: Property “scrollbar-gutter” doesn't exist.

[ylafon]

Fixed by #485