Styled Component folding skips over HOCs with hoisting

[exogen]

Environment

System:

• OS: macOS Mojave 10.14.4
• CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
• Memory: 271.13 MB / 16.00 GB
• Shell: 3.2.57 - /bin/bash

Binaries:

• Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
• Yarn: 1.15.2 - /usr/local/bin/yarn
• npm: 6.9.0 - ~/.nvm/versions/node/v10.15.3/bin/npm

npmPackages:

• styled-components: ^4.0.0 => 4.2.0

Reproduction

https://codesandbox.io/s/vq48p3yox0?fontsize=14

Expected Behavior

Styled Components wrapped by an intermediate HOC should not attempt to "fold" and go directly to the underlying Styled Component. The HOC should be included in the tree.

Actual Behavior

When an HOC using hoist-non-react-statics wraps a Styled Component, and then that output is again wrapped in styled(), the static properties from the first Styled Component are observed by styled() and it thinks it's dealing directly with a Styled Component instance, then attempts to "fold" into its styles. This causes the HOC to be skipped over completely – it will never be run – as if styled() were given a hypothetical OutputComponent.WrappedStyledComponent as its target instead.

The completely ideal but impractical solution would be to use the SC-aware version of hoist that knows to skip the internal SC statics. But, for practical purposes, people are already using hoist-non-react-statics everywhere and that's unlikely to change. So here's another idea...

I discussed this with @kitten and proposed a rather simple fix: Styled Component instances could have a static pointer to themselves, like:

const Foo = styled.button``;

Foo.styledComponent === Foo; // true
// or use a more $internal looking name...

Then when a HOC hoists static properties, completely unaware of SC, the output component would get:

Bar.styledComponent; // Foo

Crucially, the point is that Bar.styledComponent !== Bar. styled() can use this information to realize that it's not actually receiving a Styled Component instance directly, but rather one that has simply had its static properties hoisted. It can skip folding in this case and treat the target like a normal component.

[quantizor]

PRs welcome