Skip to content

Static properties on components break tree-shaking #245

Description

@mbrowne

In our app we are finding that any time a component that uses styled-components has a static property added to it, that component is always included in the bundle even if it's not imported, i.e. tree shaking does not work. For example:

const Wrapper = styled.div`
    color: blue;
`

function MyComponent() {
    return <Wrapper>hi</Wrapper>
}
// this breaks tree-shaking
MyComponent.displayName = 'Foo'

In some cases we're able to remove the displayName or use default function argument values instead of defaultProps, but there are other cases where we do need to use these properties.

This seems to be caused by the way terser (or uglify-js) removes dead code and isn't really an issue in babel-plugin-styled-components per se, but it would be great if babel-plugin-styled-components could include an option to address this.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions