Skip to content

Doesn't play well with babel-plugin-styled-components -- plugin order matters #543

@thany

Description

@thany

Maintainer Update

For any new readers of this issue, per #543 (comment), you can use styled-components/macro instead of babel-plugin-styled-components, which will work.


Current Behavior

I'm using babel-plugin-styled-components to annotate styled-components with CSS classes to more easily debug them in the browser's inspector.

Expected behavior

I'd expect this plugin to do something. Namely, do what it says on the tin. And it does when I run storybook for our project. But it doesn't when I'm done and want to build my project through tsdx.

Suggested solution(s)

Perhaps babel plugins ought to be merged differently. I suspect the plugins from .babelrc are executed too early or too late. I find it massively complicated to figure out what exactly is happening under the hood, and therefor I have no way of knowing how and when a babel plugin is executed, or supposed to be executed. But since the plugin itself does work, there must be an issue with how or when it's being called.

Additional context

Our project is based on React + styled-components in Storybook. In Storybook, babel-plugin-styled-components does it job beautifully. But in the tsdx build, it does not, and indeed, I cannot find any mention of the classnames that are supposed to be generated. Having or not having this plugin, literally makes not a byte of difference in the dist files that tsdx generates.

Your environment

Software Version(s)
TSDX 0.12.3
TypeScript 3.8.3
Browser Firefox 73
npm/Yarn npm 6.9.0
Node 10.16.3
Operating System Windows 10

Metadata

Metadata

Assignees

No one assigned

    Labels

    scope: integrationRelated to an integration, not necessarily to core (but could influence core)solution: workaround availableThere is a workaround available for this issue

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions