Change transitions to not require `style-src 'unsafe-inline'` CSP.

Describe the problem

The way CSS transitions are currently handled they inject inline attribute styles into the element. This requires the site use style-src 'unsafe-inline'.

Describe the proposed solution

I’m not entirely sure how this works, but I’ve seen some inline attribute styles be accepted under style-src 'self' while others are not. Specifically, these spinners seem to work just fine even under a strict CSP.

It appears as though defining CSS variables inline is actually allowed? I haven’t seen any documentation about that in particular, though. If true, Svelte transitions could in principle be changed to work like the above, where the transitions are defined in CSS documents, configured by inline variables, and applied by a class change.

This is essentially a cnange only in the internal handling of transitions (and possible animations?), and wouldn’t have any effect on how they are used in Svelte code.

Alternatives considered

Don’t use transitions if you want a strict CSP.

Make your own transitions by hand.

Importance

would make my life easier

[Karlinator]

A workaround for this issue: adding 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' (the hash value for an empty string) to your CSP’s style-src allows Svelte to insert the empty document which it can then modify without violating CSP.

This is not in my opinion a very good solution (it’s a very weird and specific thing to require), but it does work.

[cor3000]

I had the same experience a while back, luckily creating a custom (fly in/out) transition for my purpose was trivial, thanks to the brilliantly simple but flexible API. Instead of setting/animating the style property, I used JS api to set element styles directly.

e.g. a simple fly in animation (similar to slide which caused CSP errors): https://svelte.dev/repl/e177537996964518a97c27dd0bee2d43?version=3.42.4