From 70521d20596580cb0a0b3a6c48db2245bcf47455 Mon Sep 17 00:00:00 2001
From: Johan Winther <johan.winther@outlook.com>
Date: Wed, 22 Jun 2022 16:48:02 +0200
Subject: [PATCH 1/3] Add nonce to styled span

CSP nonces need to be added to any elements with a style attribute
---
 src/VirtualDom/Styled.elm | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/VirtualDom/Styled.elm b/src/VirtualDom/Styled.elm
index 780a7159..3fa35be3 100644
--- a/src/VirtualDom/Styled.elm
+++ b/src/VirtualDom/Styled.elm
@@ -479,23 +479,27 @@ toKeyedStyleNode maybeNonce allStyles keyedChildNodes =
 
 toStyleNode : Maybe Nonce -> Dict CssTemplate Classname -> VirtualDom.Node msg
 toStyleNode maybeNonce styles =
+    let
+        nonceAttribute =
+            case maybeNonce of
+                Just (Nonce nonce) ->
+                    [ VirtualDom.attribute "nonce" nonce ]
+
+                Nothing ->
+                    []
+    in
     -- wrap the style node in a div to prevent `Dark Reader` from blowin up the dom.
     VirtualDom.node "span"
-        [ VirtualDom.attribute "style" "display: none;"
-        , VirtualDom.attribute "class" "elm-css-style-wrapper"
-        ]
+        ([ VirtualDom.attribute "style" "display: none;"
+         , VirtualDom.attribute "class" "elm-css-style-wrapper"
+         ]
+            ++ nonceAttribute
+        )
         [ -- this <style> node will be the first child of the requested one
           toDeclaration styles
             |> VirtualDom.text
             |> List.singleton
-            |> VirtualDom.node "style"
-                (case maybeNonce of
-                    Just (Nonce nonce) ->
-                        [ VirtualDom.attribute "nonce" nonce ]
-
-                    Nothing ->
-                        []
-                )
+            |> VirtualDom.node "style" nonceAttribute
         ]
 
 

From 4c1b33d63a8460c451e9bbf7a63431b856dda232 Mon Sep 17 00:00:00 2001
From: Johan Winther <johan.winther@outlook.com>
Date: Sat, 25 Jun 2022 15:26:51 +0200
Subject: [PATCH 2/3] Use class `elm-css-style-wrapper` to hide wrapper span

---
 src/VirtualDom/Styled.elm | 29 +++++++++++++----------------
 1 file changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/VirtualDom/Styled.elm b/src/VirtualDom/Styled.elm
index 3fa35be3..ad8bb20f 100644
--- a/src/VirtualDom/Styled.elm
+++ b/src/VirtualDom/Styled.elm
@@ -31,6 +31,7 @@ module VirtualDom.Styled exposing
     , unstyledNode
     )
 
+import Css
 import Css.Preprocess as Preprocess exposing (Style)
 import Css.Preprocess.Resolve as Resolve
 import Css.Structure as Structure
@@ -479,27 +480,23 @@ toKeyedStyleNode maybeNonce allStyles keyedChildNodes =
 
 toStyleNode : Maybe Nonce -> Dict CssTemplate Classname -> VirtualDom.Node msg
 toStyleNode maybeNonce styles =
-    let
-        nonceAttribute =
-            case maybeNonce of
-                Just (Nonce nonce) ->
-                    [ VirtualDom.attribute "nonce" nonce ]
-
-                Nothing ->
-                    []
-    in
     -- wrap the style node in a div to prevent `Dark Reader` from blowin up the dom.
     VirtualDom.node "span"
-        ([ VirtualDom.attribute "style" "display: none;"
-         , VirtualDom.attribute "class" "elm-css-style-wrapper"
-         ]
-            ++ nonceAttribute
-        )
+        [ VirtualDom.attribute "class" "elm-css-style-wrapper" ]
         [ -- this <style> node will be the first child of the requested one
-          toDeclaration styles
+          styles
+            |> Dict.insert (getCssTemplate [ Css.display Css.none ]) "elm-css-style-wrapper"
+            |> toDeclaration
             |> VirtualDom.text
             |> List.singleton
-            |> VirtualDom.node "style" nonceAttribute
+            |> VirtualDom.node "style"
+                (case maybeNonce of
+                    Just (Nonce nonce) ->
+                        [ VirtualDom.attribute "nonce" nonce ]
+
+                    Nothing ->
+                        []
+                )
         ]
 
 

From ff36d646e57c24259f1a489242cf864ed0db024c Mon Sep 17 00:00:00 2001
From: Johan Winther <johan.winther@outlook.com>
Date: Sat, 25 Jun 2022 18:15:39 +0200
Subject: [PATCH 3/3] Don't override existing value in dict

---
 src/VirtualDom/Styled.elm | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/VirtualDom/Styled.elm b/src/VirtualDom/Styled.elm
index ad8bb20f..6c04a164 100644
--- a/src/VirtualDom/Styled.elm
+++ b/src/VirtualDom/Styled.elm
@@ -480,13 +480,18 @@ toKeyedStyleNode maybeNonce allStyles keyedChildNodes =
 
 toStyleNode : Maybe Nonce -> Dict CssTemplate Classname -> VirtualDom.Node msg
 toStyleNode maybeNonce styles =
-    -- wrap the style node in a div to prevent `Dark Reader` from blowin up the dom.
+    let
+        styleWrapperClass =
+            "elm-css-style-wrapper"
+    in
+    -- wrap the style node in a span to prevent `Dark Reader` from blowin up the dom.
     VirtualDom.node "span"
-        [ VirtualDom.attribute "class" "elm-css-style-wrapper" ]
+        [ VirtualDom.attribute "class" styleWrapperClass ]
         [ -- this <style> node will be the first child of the requested one
           styles
-            |> Dict.insert (getCssTemplate [ Css.display Css.none ]) "elm-css-style-wrapper"
             |> toDeclaration
+            -- add css to hide the wrapper span
+            |> styleToDeclaration (getCssTemplate [ Css.display Css.none ]) styleWrapperClass
             |> VirtualDom.text
             |> List.singleton
             |> VirtualDom.node "style"