Support `animation-timeline: view()`, `calc(sibling-index() * 20ms)`

[felipemarcos]

Steps to reproduce

<?php
require __DIR__ . '/vendor/autoload.php';

use Sabberworm\CSS\Parser;
use Sabberworm\CSS\Settings;

$css = '.a { animation-timeline: view(); opacity: 0.5; }';

// Lenient: the declaration disappears.
echo (new Parser($css, Settings::create()->withLenientParsing()))->parse()->render(), "\n";

// Strict: throws.
echo (new Parser($css, Settings::create()->withLenientParsing(false)))->parse()->render(), "\n";

Actual

.a {opacity: .5;}

PHP Fatal error: Uncaught Sabberworm\CSS\Parsing\UnexpectedTokenException:
Token “ ) ” (literal) not found. Got “();”. [line no: 1]

Expected

.a {animation-timeline: view();opacity: .5;}

[JakeQZ]

@felipemarcos, thanks for reporting.

It is not surprising that it does not work. Support for functions within CSS property values is currently limited to specific functions like calc(), max(), etc. that were part of CSS3.

It could perhaps be extended to cover the generic case of a hitherto unknown function, like view() or sibling-index().

However, I would also quote from MDN:

animation-timeline CSS property

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

You would be more than welcome to submit a PR to add support for this. But until it becomes part of the standards track, I would be reticent about including it.

We'll keep this open, and see what happens...