Animation css in wrong order

[AverTry]

Hi, both scoped and global, reorder css and prevents proper animation.

Working fine in normally imported CSS and Module imported CSS

Error only occurs with solid-styled v0.10.0

Correct Order:

      .revealingImage {
        view-timeline-name: --revealing-image;
        view-timeline-axis: block;

        animation: linear reveal both;
        animation-timeline: --revealing-image;
        animation-range: cover 10% contain 40%;
      }

Error using \<styles jsx>, css``

Error using \<styles jsx global>

After manually changing in browser dev tools to get it working

Source Code and Polyfill js taken from https://developer.chrome.com/docs/css-ui/scroll-driven-animations

New CSS properties for 2024

[lxsmnsyc]

Seems to be from LightningCSS: https://lightningcss.dev/playground/index.html#%7B%22minify%22%3Atrue%2C%22customMedia%22%3Atrue%2C%22cssModules%22%3Afalse%2C%22analyzeDependencies%22%3Afalse%2C%22targets%22%3A%7B%22chrome%22%3A6225920%7D%2C%22include%22%3A0%2C%22exclude%22%3A0%2C%22source%22%3A%22%20%20%20.revealingImage%20%7B%5Cn%20%20%20%20%20%20%20%20view-timeline-name%3A%20--revealing-image%3B%5Cn%20%20%20%20%20%20%20%20view-timeline-axis%3A%20block%3B%5Cn%5Cn%20%20%20%20%20%20%20%20animation%3A%20linear%20reveal%20both%3B%5Cn%20%20%20%20%20%20%20%20animation-timeline%3A%20--revealing-image%3B%5Cn%20%20%20%20%20%20%20%20animation-range%3A%20cover%2010%25%20contain%2040%25%3B%5Cn%20%20%20%20%20%20%7D%22%2C%22visitorEnabled%22%3Afalse%2C%22visitor%22%3A%22%7B%5Cn%20%20Color(color)%20%7B%5Cn%20%20%20%20if%20(color.type%20%3D%3D%3D%20'rgb')%20%7B%5Cn%20%20%20%20%20%20color.g%20%3D%200%3B%5Cn%20%20%20%20%20%20return%20color%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D%22%2C%22unusedSymbols%22%3A%5B%5D%2C%22version%22%3A%22local%22%7D

This is an upstream issue so we'll see.

On the other hand, I would think the reason this is not yet supported is because animation-range is yet to be a standard. It's currently in Editor's Draft status.

[AverTry]

Yes I believe your right. Upon further testing, Firefox has revealed those unsupported parts, are most likely the missing parts when compiling, and is the reason the one part that is supported, to be orphaned, hence the reason it's at the end. So it would seem once this has better browser coverage, lightning css will include it.

Thank you for the quick response.