Runtime errors with rtfeldman/elm-css and Dark Reader

[Aaron]

I’m following up on this thread since I’ve found a way to create run time errors without using Browser.application as has been mentioned before.
When testing one of my projects recently I noticed the Dark Reader extension caused some runtime errors even when using Browser.element rather than Browser.application. The issue seems to be that Dark reader to appends a style tag everywhere elm-css generates one. When removing elm-css there are no longer errors. Here’s the simplest example I could come up with.

module Main exposing (main)

import Browser
import Css exposing (..)
import Html.Styled as Styled exposing (div, text)
import Html.Styled.Attributes exposing (css)
import Html.Styled.Events exposing (onClick)

init : () -> ( Int, Cmd () )
init =
    always ( 0, Cmd.none )

main =
    Browser.element
        { init = init
        , update = \_ model -> ( model + 1, Cmd.none )
        , view = (\model -> div [ onClick (), css [ color <| rgb 0 0 0 ] ] [ text <| String.fromInt model ]) >> Styled.toUnstyled
        , subscriptions = always Sub.none
        }

I’ve seen the childNode error on some code I can’t show here. Here’s the error that the code above reproduces:
Uncaught TypeError: domNode.replaceData is not a function
at _VirtualDom_applyPatch ((index):3691)
at _VirtualDom_applyPatchesHelp ((index):3670)
at _VirtualDom_applyPatches ((index):3661)
at (index):3916
at updateIfNeeded ((index):3985)

[avh4]

I don’t really have any deep knowledge here, but the one thought I do have is that maybe you could try modifying elm-css to use Html.Keyed.node for the element that contains the <style> tag that elm-css generates and see if that helps avoid the problem. (Html.Keyed is my go-to thing to try when Elm seems to be getting confused about the state of the DOM.)

[Aaron]

Thanks for the tip. That actually made the difference.

Added keyed to toStyleNode