From 9d1ca3186006d949d127e8abe03d15192fcd3c1d Mon Sep 17 00:00:00 2001 From: Jaime Terreu Date: Thu, 13 Jan 2022 01:46:56 +1030 Subject: [PATCH 1/4] feat: Handle extracting attributes for NodeNS elements NodeNS elements require a slightly different method to consistently update styles than Html elements. Specifically, NodeNS elements will require the atttribute property with the "class" string. --- src/VirtualDom/Styled.elm | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/src/VirtualDom/Styled.elm b/src/VirtualDom/Styled.elm index c7d7937a..9b89574c 100644 --- a/src/VirtualDom/Styled.elm +++ b/src/VirtualDom/Styled.elm @@ -315,7 +315,7 @@ unstyleNS ns elemType properties children = toStyleNode styles unstyledProperties = - List.map (extractUnstyledAttribute styles) properties + List.map (extractUnstyledAttributeNS styles) properties in VirtualDom.nodeNS ns elemType @@ -370,7 +370,7 @@ unstyleKeyedNS ns elemType properties keyedChildren = toKeyedStyleNode styles keyedChildNodes unstyledProperties = - List.map (extractUnstyledAttribute styles) properties + List.map (extractUnstyledAttributeNS styles) properties in VirtualDom.keyedNodeNS ns @@ -489,6 +489,20 @@ stylesFromPropertiesHelp candidate properties = extractUnstyledAttribute : Dict CssTemplate Classname -> Attribute msg -> VirtualDom.Attribute msg extractUnstyledAttribute styles (Attribute val isCssStyles cssTemplate) = + if isCssStyles then + case Dict.get cssTemplate styles of + Just classname -> + VirtualDom.property "className" (Json.Encode.string classname) + + Nothing -> + VirtualDom.property "className" (Json.Encode.string "_unstyled") + + else + val + + +extractUnstyledAttributeNS : Dict CssTemplate Classname -> Attribute msg -> VirtualDom.Attribute msg +extractUnstyledAttributeNS styles (Attribute val isCssStyles cssTemplate) = if isCssStyles then case Dict.get cssTemplate styles of Just classname -> @@ -536,7 +550,7 @@ accumulateStyledHtml html ( nodes, styles ) = vdomNode = VirtualDom.nodeNS ns elemType - (List.map (extractUnstyledAttribute finalStyles) properties) + (List.map (extractUnstyledAttributeNS finalStyles) properties) (List.reverse childNodes) in ( vdomNode :: nodes, finalStyles ) @@ -567,7 +581,7 @@ accumulateStyledHtml html ( nodes, styles ) = vdomNode = VirtualDom.keyedNodeNS ns elemType - (List.map (extractUnstyledAttribute finalStyles) properties) + (List.map (extractUnstyledAttributeNS finalStyles) properties) (List.reverse childNodes) in ( vdomNode :: nodes, finalStyles ) From a2ec9ea38ec64957abcf31434ca8756260815ad3 Mon Sep 17 00:00:00 2001 From: Jaime Terreu Date: Thu, 13 Jan 2022 01:50:00 +1030 Subject: [PATCH 2/4] feat: update example to add more complex class updates --- examples/html-styled/Main.elm | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/html-styled/Main.elm b/examples/html-styled/Main.elm index be0e7c15..4a2bcd48 100644 --- a/examples/html-styled/Main.elm +++ b/examples/html-styled/Main.elm @@ -4,7 +4,7 @@ import Browser import Css exposing (..) import Html import Html.Styled exposing (..) -import Html.Styled.Attributes exposing (css, href, src) +import Html.Styled.Attributes exposing (class, css, href, src) import Html.Styled.Events exposing (onClick) import Svg.Styled as StyledSvg import Svg.Styled.Attributes as SvgAttribs @@ -82,9 +82,9 @@ legacyBorderRadius amount = view : Model -> Html Msg view model = nav [] - [ img [ src "assets/backdrop.jpg", css [ width (pct 100) ] ] [] + [ img [ src "assets/backdrop.jpg", css [ width (pct 100) ], class "some-whatever-class" ] [] , btn [ onClick DoSomething ] [ text "Click me!" ] - , StyledSvg.svg [ SvgAttribs.css [], SvgAttribs.width "100", SvgAttribs.height "100" ] [ StyledSvg.circle [ SvgAttribs.cx "50", SvgAttribs.cy "50", SvgAttribs.r "40" ] [] ] + , StyledSvg.svg [ SvgAttribs.class "some-whatever-NS-class", SvgAttribs.css [ opacity (num 0.5) ], SvgAttribs.width "100", SvgAttribs.height "100" ] [ StyledSvg.circle [ SvgAttribs.cx "50", SvgAttribs.cy "50", SvgAttribs.r "40" ] [] ] ] From 3fedf960955a91b3da61c57c08bc973561d53765 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 11 Jan 2022 13:57:43 -0800 Subject: [PATCH 3/4] Adds failing test --- tests/Styled.elm | 35 ++++++++++++++++++++++++++++++++++- 1 file changed, 34 insertions(+), 1 deletion(-) diff --git a/tests/Styled.elm b/tests/Styled.elm index 4ff82b9b..33d81d44 100644 --- a/tests/Styled.elm +++ b/tests/Styled.elm @@ -4,7 +4,7 @@ module Styled exposing (all) import Css exposing (..) import Html.Styled exposing (Html, a, button, div, header, img, nav, text, toUnstyled) -import Html.Styled.Attributes exposing (css, src) +import Html.Styled.Attributes exposing (class, css, src) import Test exposing (Test, describe) import Test.Html.Query as Query import Test.Html.Selector as Selector @@ -107,4 +107,37 @@ all = , Selector.text "._20d887e{padding:16px;padding-left:24px;padding-right:24px;margin-left:50px;margin-right:auto;color:rgb(255,255,255);background-color:rgb(27,217,130);vertical-align:middle;}" ] ) + , bug564 + ] + + +bug564 : Test +bug564 = + describe "Github Issue #564: https://github.com/rtfeldman/elm-css/issues/564" + [ Test.test "generated class is included when there's no custom class" <| + \_ -> + div + [ css [ color (rgb 0 0 0) ] + ] + [] + |> toUnstyled + |> Query.fromHtml + |> Query.has [ Selector.class "_5dc67897" ] + , Test.test "custom class is included when there's no generated class" <| + \_ -> + div [ class "some-custom-class" ] + [] + |> toUnstyled + |> Query.fromHtml + |> Query.has [ Selector.class "some-custom-class" ] + , Test.test "custom class is included as well as generated class" <| + \_ -> + div + [ css [ color (rgb 0 0 0) ] + , class "some-custom-class" + ] + [] + |> toUnstyled + |> Query.fromHtml + |> Query.has [ Selector.classes [ "_5dc67897", "some-custom-class" ] ] ] From 25e3fa791f9b1fa08ff377a2eba5df6b6335158e Mon Sep 17 00:00:00 2001 From: Jaime Terreu Date: Fri, 14 Jan 2022 09:48:11 +1030 Subject: [PATCH 4/4] feat: Use high contrast color for example --- examples/html-styled/Main.elm | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/examples/html-styled/Main.elm b/examples/html-styled/Main.elm index 4a2bcd48..04937bd8 100644 --- a/examples/html-styled/Main.elm +++ b/examples/html-styled/Main.elm @@ -84,7 +84,13 @@ view model = nav [] [ img [ src "assets/backdrop.jpg", css [ width (pct 100) ], class "some-whatever-class" ] [] , btn [ onClick DoSomething ] [ text "Click me!" ] - , StyledSvg.svg [ SvgAttribs.class "some-whatever-NS-class", SvgAttribs.css [ opacity (num 0.5) ], SvgAttribs.width "100", SvgAttribs.height "100" ] [ StyledSvg.circle [ SvgAttribs.cx "50", SvgAttribs.cy "50", SvgAttribs.r "40" ] [] ] + , StyledSvg.svg + [ SvgAttribs.class "some-whatever-NS-class" + , SvgAttribs.css [ color (rgb 256 0 0) + , SvgAttribs.width "100" + , SvgAttribs.height "100" + ] + [ StyledSvg.circle [ SvgAttribs.cx "50", SvgAttribs.cy "50", SvgAttribs.r "40" ] [] ] ]