Polyfill does not play nice with @layer

[bramus]

When using some of the props inside @layer …

@layer foo {
	@supports (animation-timeline: scroll()) {
		/* Hide Warning */
		.warning {
			display: none;
		}
	}
}

… it throws this:

Uncaught DOMException: Failed to execute 'matches' on 'Element': '@layer foo' is not a valid selector.
    at t.getAnimationTimelineOptions (https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js:1:25932)
    at https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js:1:32971
    at https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js:1:33181
    at Array.forEach (<anonymous>)
    at https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js:1:32922

When not using a @layer, it works fine.

@supports (animation-timeline: scroll()) {
	/* Hide Warning */
	.warning {
		display: none;
	}
}

[bramus]

It’s not related to the @supports rule BTW. This also throws:

@layer foo {
	.revealing-image {
		view-timeline-name: revealing-image;
		view-timeline-axis: block;

		animation: linear reveal both;
		animation-timeline: revealing-image;

		/* Needed for polyfill (wrong syntax): */
		animation-time-range: enter 25% 100%;

		/* Needed for Chrome Canary: */
		animation-range: enter 25% 100%;
		animation-delay-start: enter 25%;
		animation-delay-end: enter 100%;
	}
}

[flackr]

I think @layer could be safely ignored for the mostpart - as long as we are picking up the inner rules. Though strictly speaking we should reorder the rules according to the defined layer order.

For @media and we should probably check whether the media query matches (e.g. window.matchMedia), and for @supports we could use CSS.supports.

[flackr]

I wrote a CSS parser at https://github.com/flackr/carousel/blob/main/polyfill/polyfill.js which can correctly parse @media, @layer and nested selectors. I think I'll bring that over to this project as it should be more robust.

As for test coverage, I'm not sure if there's much (or any) wpt tests of scroll timelines using nested selectors as it's normally expected that features can be tested independently. Maybe this means we need a scroll-timeline polyfill specific test suite for things that don't make sense to be in wpt.