From da5ddd40b42f5d5c6148f6430af211f09a4a5f0d Mon Sep 17 00:00:00 2001 From: Karl Erik Hofseth Date: Sat, 20 Aug 2022 10:12:39 +0200 Subject: [PATCH] Add comment explaining why this madness --- src/runtime/internal/dom.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts index 7856ccc384..2c0b141fb5 100644 --- a/src/runtime/internal/dom.ts +++ b/src/runtime/internal/dom.ts @@ -156,6 +156,11 @@ export function get_root_for_style(node: Node): ShadowRoot | Document { export function append_empty_stylesheet(node: Node) { const style_element = element('style') as HTMLStyleElement; + // For transitions to work without 'style-src: unsafe-inline' Content Security Policy, + // these empty tags need to be allowed with a hash as a workaround until we move to the Web Animations API. + // Using the hash for the empty string (for an empty tag) works in all browsers except Safari. + // So as a workaround for the workaround, when we append empty style tags we set their content to /* empty */. + // The hash 'sha256-9OlNO0DNEeaVzHL4RZwCLsBHA8WBQ8toBp/4F5XV2nc=' will then work even in Safari. style_element.textContent = style_element.textContent || '/* empty */'; append_stylesheet(get_root_for_style(node), style_element); return style_element.sheet as CSSStyleSheet;