Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

@emotion/babel-preset-css-prop not working with .tsx files #710

Closed
sgentry opened this issue May 5, 2020 · 2 comments
Closed

@emotion/babel-preset-css-prop not working with .tsx files #710

sgentry opened this issue May 5, 2020 · 2 comments
Labels
kind: support Asking for support with something or a specific use case scope: integration Related to an integration, not necessarily to core (but could influence core)

Comments

@sgentry
Copy link

sgentry commented May 5, 2020

Current Behavior

I've added an additional Babel preset (@emotion/babel-preset-css-prop) using .babelrc. When my React component has a .tsx file extension, this preset doesn't seem to get applied to transpiled output in dist folder. If I rename to .jsx, works great. Maybe I'm missing some additional configuration for this to work but I haven't found anything yet looking through docs.

Expected behavior

I expect my additional preset to be applied to all ts/tsx files.

Suggested solution(s)

Additional context

Your environment

Software Version(s)
TSDX 0.13.2
TypeScript 3.8.3
Browser
npm/Yarn 6.14.4/1.22.0
Node 12.16.2
Operating System Windows 10
@agilgur5
Copy link
Collaborator

agilgur5 commented May 6, 2020

Is this for tsdx build specifically? There's an existing issue for Babel not being run on TS during tsdx test (#583)

Otherwise, there are integration tests for Babel configs for tsdx build. Reading the @emotion/babel-preset-css-prop docs, it says it changes the JSX from React.createElement to its own thing. So you'd probably need to set your tsconfig.json's jsx property to 'preserve' or something instead of 'react'.

When jsx: 'react' is set, TypeScript compiles the JSX instead of Babel. That's a TS thing rather than TSDX specific, so you wouldn't really find that in TSDX docs.

@agilgur5 agilgur5 added the scope: integration Related to an integration, not necessarily to core (but could influence core) label May 6, 2020
@agilgur5 agilgur5 changed the title Additional Babel config not working with .tsx files @emotion/babel-preset-css-prop not working with .tsx files May 6, 2020
@agilgur5 agilgur5 added the kind: support Asking for support with something or a specific use case label May 6, 2020
@sgentry
Copy link
Author

sgentry commented May 6, 2020

Yes, this was for tsdx build. Looks like you are correct in that changing jsx to preserve fixed my issue. Sorry for the hassle but I appreciate your response. Thanks!

@agilgur5 agilgur5 closed this as completed May 6, 2020
Repository owner locked as resolved and limited conversation to collaborators Sep 14, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
kind: support Asking for support with something or a specific use case scope: integration Related to an integration, not necessarily to core (but could influence core)
Projects
None yet
Development

No branches or pull requests

2 participants