Erroneous "Cannot read properties of undefined" linting errors caused by `@keyframes` in `<style>`

[zachstence]

Before You File a Bug Report Please Confirm You Have Done The Following...

• [X] I have tried restarting my IDE and the issue persists.
• [X] I have updated to the latest version of the packages.

What version of ESLint are you using?

9.10.0

What version of eslint-plugin-svelte are you using?

2.44.0

What did you do?

@keyframes without a name:

@keyframes {
}

@keyframes with an @apply

@keyframes myKeyframes {
    100% {
        @apply text-red;
    }
}

What did you expect to happen?

No linting errors should happen when using @keyframes without a name or with an @apply

What actually happened?

Link to GitHub Repo with Minimal Reproducible Example

https://github.com/zachstence/keyframes-apply-eslint-repro

Additional comments

No response

[mikededo]

Hello @zachstence!

Your issue is due to using the @apply function in a <style> tag without the lang="postcss" attribute. Note that in order to use any Tailwind functions, which use postcss, you must add the lang="postcss" param to the style tags. However, Tailwind functions cannot be used inside @keyframes (yet).

Check this comment where it says:

As an aside, we'd recommend not using @apply with @keyframes. It wasn't designed to work with it and you can get it to produce some pretty comical, non-sensical results

[mikededo]

Also, @keyframes directive must include a name. See the MDN docs here

[zachstence]

That does indeed fix it. Thanks so much!