Component "name" in className with `.extend`

[breadadams]

It seems that with an extended component, the component being extended's name/filename (I've tried with both config options) are used for the classname applied to the DOM element. Ie:

const Example = styled.div`
  color: red;
`
const ExampleExtended = Example.extend`
  background: green;
`
...

render() {
  return <ExampleExtended />
}

The above returns something like:

<div class="Example-cJRMOC jmwXEm"></div>

Whereas ideally I was expecting:

<div class="ExampleExtended-cJRMOC jmwXEm"></div>

Is this intended functionality?

---

Versions

"styled-components": "^3.3.3",
"babel-plugin-styled-components": "^1.5.1",

[breadadams]

Here's a real-world example (we're using a base "building block" to construct other components via .extend):

Before (using const Component = styled.div...)

After (using const Component = Box.extend...)

As you can see we lose the debugging benefit, as all component names are replaced with the component used in the .extend (even the "parent component" names are gone 🤷‍♂️ )

[quantizor]

Hmm this is probably a bug.

[breadadams]

Happy to take a look however it may be past my abilities... It seems /src/visitors/displayNameAndId.js is taking care of the naming @probablyup?

[quantizor]

Yeah that should be correct. You’ll also want to upgrade whatever version of s-c we’re testing with locally since there were some recent changes to displayName handling. On Thu, Jun 28, 2018 at 6:44 AM Brad Adams [email protected] wrote:

Happy to take a look however it may be past my abilities... It seems /src/visitors/displayNameAndId.js is taking care of the naming @probablyup https://github.com/probablyup?

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/styled-components/babel-plugin-styled-components/issues/145#issuecomment-401007233, or mute the thread https://github.com/notifications/unsubscribe-auth/AAiy1odazlqdYxVriqR2O8JVbNfj7Mxnks5uBMGxgaJpZM4U6Oaa .

[breadadams]

I've done some testing on the issue and don't appear to be getting very far, however I'll share my findings incase it can assist someone else in coming up with a solution 🙂

I updated the tests to look like so:

The path object (received in getName) for an extended component only includes the real name (not the name of the component from which it was extended) in 3 places, references, bindings & code:

And therefore, the actual name assigned to DoubleInterpolation is TestToBeExtended:

Could it be that the source of this bug doesn't lie within the babel plugin but SC itself? 🤔

Edit: Gist to the object in screenshots: https://gist.github.com/breadadams/9e602b19d8ba139c0657a0f97c26f1cf

[breadadams]

Also @probablyup I couldn't detect which version of styled-components was being used locally, it doesn't appear to be in package.json, or my yarn.lock after init. Something I'm missing?

[quantizor]

@breadadams yarn list styled-components should give you the answer

As a general FYI, the "extend" API is deprecated and will be removed in v4, so I'd recommend switching to styled(StyledComponent) instead which should not have any issues with classnames. https://github.com/styled-components/styled-components/issues/1694