`animation-play-state` is detected wrong

[felixsanz]

If you pass to lezer this CSS:

animation-direction: normal;
animation-fill-mode: none;
animation-iteration-count: 1;
animation-play-state: running;

All of them are typeName except animation-play-state, that is recognized wrongly as className

[marijnh]

When I wrap this with div {} and parse it, I see no ClassName nodes in the tree at all.

[felixsanz]

When I wrap this with div {} and parse it, I see no ClassName nodes in the tree at all.

Yup, but don't wrap it. Imagine you're trying to highlight an example showing the usage of the CSS property, like in this MDN article

Here you don't want to wrap it in class/element as it's irrelevant to the example.

All other CSS properties seems to work fine doing this, it's just this one that doesn't.

It's not a big issue but it's a bit ugly. In my article explaining CSS animations, my current snippet and the output is this:

That one is off

[marijnh]

Set the top parser option to "Styles" to parse a plain set of properties.

[felixsanz]

Set the top parser option to "Styles" to parse a plain set of properties.

It works great, thanks so much!

(Now all of them are propertyName, before none was)

[felixsanz]

Set the top parser option to "Styles" to parse a plain set of properties.

@marijnh It worked in my app but I'm trying to use it in a REPL or just in a script with this lines and it fails:

import { parser as cssParser } from '@lezer/css'

const cssProperties = cssParser.configure({ top: 'Styles' })

RangeError: Invalid top rule name Styles
at LRParser.configure

In my complex app, cssParser.topRules contains { StyleSheet: [ 0, 4 ], Styles: [ 1, 84 ] }. But in this simple script it only contains { StyleSheet: [ 0, 4 ] }. That's the effect but i don't understand the cause.

What i'm doing wrong here? Thanks in advance

[marijnh]

You may be getting an older version of @lezer/css there, somehow.