Doesn't play well with babel-plugin-styled-components -- plugin order matters
See original GitHub issueMaintainer Update
For any new readers of this issue, per https://github.com/formium/tsdx/issues/543#issuecomment-694561305, 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 |
Issue Analytics
- State:
- Created 4 years ago
- Reactions:8
- Comments:17 (1 by maintainers)
Top GitHub Comments
I can’t seem to get styled-components
css
prop feature to work when using their macro in tsdx. I am able to get it to work in a newcreate-react-app
, though.Steps:
tsdx create csstest
yarn add styled-components
import 'styled-components/macro
in top ofindex.tsx
<h1 css={{ color: 'red' }}>Hello World</h1>
When I check it in the example parcel app, it doesn’t seem to be respecting the css prop. Would appreciate it if anyone knows what’s going on here. I thought it may be related to parcel, but can’t figure it out.
@agilgur5 is this fix likely to make it in do you think? styled-components/macro support would be extremely useful in the library we’re building