Svelte strips off @ in keyframes in CSS

[antony]

One of my users has noticed that the @keyframes CSS directive used in animations is being incorrectly stripped by svelte.

The resultant CSS has simply keyframes, which doesn't work.

You can see a (very quick) example of this here:

https://svelte.technology/repl?version=1.25.0&gist=5ca027094a05859547d066252f1b2ca0

[Conduitry]

Ooh I bet this is related to the recent changes to tidy up code generation in #673. The unit tests here are still passing because they're looking at the transformed CSS, and not the actual final javascript.

[Conduitry]

Part of this seems to be that JSON.stringify should be stringify here but also there seem to be other problems that have crept (back?) up. Text nodes containing @ or # are not being correctly escaped, which is also affecting the text in style nodes. Compiling and running a component consisting of @x inserts the text "\@x" which is technically correct but suboptimal, but compiling and running a component consisting of @@x inserts the same "\@x" which is definitely wrong.

[antony]

@Conduitry I notice your comment in the original commit #673 - this is exactly the problem!

[PaulBGD]

Also annoying, it strips off the @ in @media :(

[Rich-Harris]

Fixed in 1.26, thank you!

[antony]

Super! Thanks :D