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

fix: make styled-jsx/babel plugin respect the source type #684

Merged
merged 3 commits into from
Jan 14, 2021

Conversation

jaydenseric
Copy link
Contributor

Fixes #680 .

@babel/helper-module-imports should be used when injecting imports, as it will use either import or require syntax depending if the Babel sourceType for the file is module (ESM) or script (CJS).

package.json Show resolved Hide resolved
[t.importDefaultSpecifier(t.identifier(STYLE_COMPONENT))],
t.stringLiteral(styleModule)
: 'styled-jsx/style',
{ nameHint: STYLE_COMPONENT}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not 100% sure what will happen if there is an existing variable in scope that has the same name as STYLE_COMPONENT (_JSXStyle), but I think the addDefault helper will modify the nameHint to avoid a collision. Ideally, no nameHint would be used and the automatic name of the injected default import would be used throughout the code instead of a hardcoded constant. This way a user could have a _JSXStyle variable name in the same scope, no problem.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All code branches that call this already check if STYLE_COMPONENT is in scope, so this should "just work".

Copy link
Collaborator

@giuseppeg giuseppeg Jan 12, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is a remote chance that _JSXStyle is in the source code but it is not styled-jsx's i.e. the user defined a binding with that name which will conflict with STYLE_COMPONENT.

If you want to fix this, you should probably generate a unique identifier from STYLE_COMPONENT, put it in state and pass it to helpers if necessary but I probably I wouldn't bother in this PR – it's been like that for 5-ish years

@jaydenseric jaydenseric mentioned this pull request Dec 22, 2020
@Timer
Copy link
Member

Timer commented Jan 12, 2021

Happy to land this if you update it!

@jaydenseric jaydenseric changed the title Make the styled-jsx/babel Babel plugin respect the Babel source type fix: Make the styled-jsx/babel Babel plugin respect the Babel source type. Jan 12, 2021
@jaydenseric
Copy link
Contributor Author

I edited the PR title to conform with the failing checks, but the build check has been stuck on "Expected — Waiting for status to be reported" for 17 minutes, so I think something is wrong with the Actions.

@Timer

Happy to land this if you update it!

Where you just referring to the PR title? This PR is good-to-go.

@Timer
Copy link
Member

Timer commented Jan 14, 2021

I swore I saw a merge conflict, but I guess not.

@Timer Timer changed the title fix: Make the styled-jsx/babel Babel plugin respect the Babel source type. fix: make styled-jsx/babel plugin respect the source type Jan 14, 2021
@Timer Timer merged commit eb65f35 into vercel:master Jan 14, 2021
@github-actions
Copy link

🎉 This PR is included in version 3.3.3 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

The styled-jsx/babel Babel plugin incorrectly inserts ESM imports into CJS files
3 participants