fix: provide a workaround for unsafe-inline CSP that also works in Safari

[Karlinator]

Before submitting the PR, please make sure you do the following

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• Prefix your PR title with [feat], [fix], [chore], or [docs].
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.

Tests

• Run the tests with npm test and lint the project with npm run lint

Ref #6662.

Currently, CSS transitions require style-src: unsafe-inline CSP. There is almost a workaround, but it doesn't work in Safari (and iOS<15). This fixes that workaround to also work in Safari.

This changes the inserted style element for transitions to initially include the string '/* empty */'. This allows you to work around requiring unsafe-inline CSP discussed in #6662 by adding a hash to your CSP:

'sha256-9OlNO0DNEeaVzHL4RZwCLsBHA8WBQ8toBp/4F5XV2nc='

Using the hash of the empty string, 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=', works fine in most browsers, but Safari for some reason thinks the empty string should have a different hash.

Users currently using the empty string hash (like me) will have their apps break from this, but it currently only half works anyway so I don't think that's a big deal.

As @Rich-Harris has said this isn't very elegant, and the eventual solution is to use the Web Animations API instead, but I'd still like for this to work on iOS in the mean time :)

[schuetzm]

Have you tried explicitly assigning it an empty string? Maybe Safari treats it as undefined by default, which would mess up the hash?

[Karlinator]

@schuetzm nope, that does not appear to work. I suspect the Safari bug is later in the process maybe? Regardless, it chokes just as happily when explicitly setting the textContent to ''.

[benmccann]

Users currently using the empty string hash (like me) will have their apps break from this, but it currently only half works anyway so I don't think that's a big deal.

To be conservative, I will add this to the 4.x milestone

[vercel]

@dummdidumm is attempting to deploy a commit to the Svelte Team on Vercel.

A member of the Team first needs to authorize it.