Importing Identicon may make other styled-components lose styling

[wmitsuda]

I don't know if this is a styled-components or ethereum-react-components issue, but I was able to narrow it down into a very small project reproducing it using only styled-components + Identicon.

Please, clone this github repo I made to reproduce: https://github.com/wmitsuda/test-bug-report

It is a simple react-app containing a simple styled div. It also import (but don't do nothing with) first another styled div defined in X.jsx, and another variable from Y.jsx. Y.jsx imports, but does not uses, Identicon.

If you run this app as-is, the main styled div containing just the text "blablabla" will lose its styling. If you change the import order of X and Y, from:

import React from "react";
import X from "./X";
import Y from "./Y";
import styled from "styled-components";

to

import React from "react";
import Y from "./Y";
import X from "./X";
import styled from "styled-components";

it will work. If you remove the styled.div definition inside X.jsx it will work. If you remove the Identicon import inside Y.jsx it will work also.

Don't know why, but having this combination of first importing a module defining some styled component and later importing another module containing specifically an import to Identicon, makes the higher level component to lose its styled components styling.

[wolovim]

Thanks for the issue and pardon the delay in response. Confirmed what you're seeing and I'm as confused as you are for the moment. I'll continue to poke at it as time allows. Let me know if you've uncovered something since then.