`toUnstyled` sometimes emits multiple classes

[ssbb]

@rtfeldman As per Slack discussion elm-css should not generate multiple classes.

Example: https://ellie-app.com/9P7wNngFQa1/1

Multiple classes generated for 2nd and 3rd buttons.

Expected behavior:

• 2nd buttons should have single class with all styles overwritten
• 3rd button should have single class. it feels natural to have all styles applied so it should have fontSize, backgroundColor and marginLeft. Or it's wrong?

[rtfeldman]

toUnstyled should always generate and emit one class per element. If it's not, that's a bug!

[sturgman]

I gave myself a challenge of diagnosing this bug and attempting a fix. I have tracked it down to VirtualDom.Styled and in particular the following functions: unstyle, unstyleKeyed, accumulateStyledHtml, and accumulateKeyedStyledHtml. There may be similar things on the SVG side of things but I did not check. Those functions do a List.map extractUnstyledProperty properties the result of which will be the properties added to the final VDOM elements. If there is more than one style Property, they will be included because of this line. A potential solution is to do something like this (for unstyle for example):

       initialStyles =
            stylesFromProperties properties

        ( childNodes, styles ) =
            List.foldl accumulateStyledHtml
                ( [], initialStyles )
                children

        styleNode =
            toStyleNode styles

        ( unstyledPropList, styledPropList ) =
            List.partition isNotClassName properties

        unstyledPropertiesWithoutStyleClass =
            List.map extractUnstyledProperty unstyledPropList

        unstyledProperties = 
            List.append (lastStyleClassFromProperties styledPropList) unstyledPropertiesWithoutStyleClass

This is probably not a full solution, but I thought I would share my findings in case it may be useful to you. See pull request https://github.com/rtfeldman/elm-css/pull/428

[ream88]

Had exactly the same problem, switched now back to Css.batch and Style instead of styled.

[AleXoundOS]

I'm new to elm-css but it seems that the issue is gone with original example updated to Elm 0.19: https://ellie-app.com/5nCcDF2JtKma1.

[ssbb]

@AleXoundOS issue is still here. as @rtfeldman said toUnstyled should emit single class per element

[AleXoundOS]

@ssbb, I've just noticed that the btnGreen was previously red.

Is it solely an implementation bug? Or it can affect the functionality as well?