DisplayNames don't work with styled-components@5.0.0

[scottc-netflix]

Otherwise everything still seems to work. I was using the following: typescript@3.6.4 ttypescript@1.5.8 rollup@1.27.8 styled-components@4.3.2 typescript-plugin-styled-components@1.4.3

Upgraded styled-components to 5.0.0 and everything works, but no displayNames, just a hash. Tsconfig is unchanged and this is the relevant section of my tsconfig.json:

    "plugins": [
      {
        "transform": "typescript-plugin-styled-components",
        "type": "config",
        "minify": false,
        "displayName": true,
        "ssr": false
      }

[Igorbek]

Thank you for reporting. I will see what it might be. A minimal repro code would be useful. Or at least an example of how your components look like with styled.

[haydenhancock]

I seem to have this same issue. I am on styled-components ^5.1.1. I am not able to get the display name of the styled components to actually display. In addition, isn't the default value for the displayName true?

[unicornware]

i think i'm having the same issue as well. my components have the following shape:

import system from '@packages/ui/config/styled-system.config'
import ButtonVariant from '@packages/ui/enums/button-variant.enum'
import { animated as a } from '@react-spring/web'
import s from 'styled-components'
import attrs from './Button.attrs'
import type Props from './Button.props'
import styles from './Button.style'

/**
 * @file Implementation - Button
 * @module ui/lib/atoms/Button/impl
 */

/**
 * Renders an HTML `<button>` element.
 *
 * `Button` is a widget that enables users to trigger an action or event, such
 * as submitting a form, opening a dialog, canceling an action, or performing a
 * delete operation, whereas `Anchor` is used for destinations, or moving from
 * one page to another.
 *
 * References:
 *
 * - https://developer.mozilla.org/docs/Web/HTML/Element/button
 * - https://developer.mozilla.org/docs/Web/API/HTMLButtonElement
 * - https://www.w3.org/TR/wai-aria-practices-1.1/#button
 */
// @ts-ignore Type instantiation is excessively deep and possibly infinite
const Button = s(a.button).attrs<Props>(attrs)<Props>(styles, system)

Button.displayName = 'Button'

Button.defaultProps = {
  $variant: ButtonVariant.primary,
  type: 'button'
}

export default Button

getCustomTransformers config (stored in a monorepo workspace separate from the one i'm experiencing issues in):

tsRuleBrowser.getCustomTransformers = (): CustomTransformers => ({
  before: [
    require('typescript-plugin-styled-components').default({
      componentIdPrefix: 'unistack',
      displayName: true,
      minify: env() === NodeEnv.PROD,
      ssr: true
    })
  ]
})

i also double checked that i actually added getCustomTransformers to my webpack config as well.

package versions:

• @storybook/*@6.4.0-beta.30 (not sure if this one is relevant, but ya never know haha)
• typescript@4.5.0-beta
• typescript-plugin-styled-components@2.0.0
• styled-components@5.3.3
• webpack@5.62.1

@Igorbek please let me know if i should open a new issue instead of continuing this thread!

[unicornware]

@Igorbek

i did some more digging and it turns out storybook is relevant! the native babel configuration was overriding my typescript config in such a way that i have to use babel-plugin-styled-components instead of this project. sorry for the confusion! not sure if display names are still an issue though, so if i get a chance i'll look more into that and create a new issue if need be 😅

[Igorbek]

Thank you for the info and investigation. Yes, if Babel is used, it is recommended to use babel-plugin-styled-components.