displayName doesn't work with custom export

[loweisz]

So I'm using styled-components with typescript and also using a theme for all my components. In order to add the theme type to the styled function I need to wrap it with an additional function like I saw here: https://github.com/styled-components/styled-components/issues/1589#issuecomment-435613664

export type Theme = typeof theme;
export const styled = baseStyled as ThemedStyledInterface<Theme>;

The problem is now, somehow the displayName is not shown on develop mode for this custom import of the styled function. When using the direct import of the styled function it works all fine.

Unfortunately it looks like ( proof me wrong :) ) there is no other way around than using this intermediate step adding the theme type to the styled function.

[loweisz]

There is one solution with the new version of styled-components v4.1.4 to describe the type of the theme like this: https://www.styled-components.com/docs/api#typescript

With that you don't need to write a wrapper for the styled function and the displayName works again

[JeroenReumkens]

I just spent hours to find out why I wasn't seeing display names in my new project, until I thought about checking our existing project as well and noticing it was broken there too.

It seems that after version 1.10.0 the displaynames aren't working anymore. So for me the solution for now is downgrading to 1.10.0. But I'm unsure what is causing the displaynames not being rendered anymore.

[Zn4rK]

This broke with https://github.com/styled-components/babel-plugin-styled-components/pull/230 - which is a reasonable change.

~It seems that it might be possible to side step this using Babel Macros (I don't know much about them just yet) - since it already can take a custom import path.~

I need to re-export styled because of the lack of https://github.com/styled-components/styled-components/issues/439.

[Zn4rK]

@probablyup (and others) Would you guys be open to a PR that adds a configuration option where one could specify top level import paths? It seems like it would be quite a challenge to solve this otherwise.

A configuration option would solve this issue (the re-export one, not the TypeScript specific scenario that's also mentioned here) and at least two others: https://github.com/styled-components/babel-plugin-styled-components/issues/108, https://github.com/styled-components/babel-plugin-styled-components/issues/120 (same idea discussed here - and an option only solves this issue partly since the API has to be the same).

There was a PR for this over here but it seems it fell short. It could be improved and revamped a bit.

[subvertallchris]

I also just lost a bit of time troubleshooting this. If you have a large theme that you don't want to duplicate entirely in a d.ts file, you can work around it by defining your theme, exporting it as a custom type, and extending it in the d.ts file. It's a modified version of the old recommendation to export your own styled component.

// styleTheme.ts

export const styleTheme = {
  header: '68px',
  color: {
    alabaster: '#e5e8f3',
    ...yourGiantListOfColors
  }
}

export type Theme = typeof styleTheme;

// styled.d.ts

import 'styled-components';
import { Theme } from './styleTheme';

declare module 'styled-components' {
  export interface DefaultTheme extends Theme {}
}

// App.tsx
import { styleTheme } from './styleTheme';

<ThemeProvider theme=<styleTheme}>
  <RootElement />
</ThemeProvider>

This will ensure that your type defs are always in sync with the actual content of your theme, preventing you from having to maintain the two separately.

[gbiryukov]

In our case modification of global types does not work because we have monorepo with several apps and different apps has different theme structure