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

When there are multiple assignments perfer the outer name. #355

Merged
merged 1 commit into from
Oct 18, 2021

Conversation

rockwotj
Copy link
Contributor

We're running styled-components within metro for react native - and metro runs it's babel plugins before ours. One of the plugins that runs is the HMR module (react-refresh), which changes our styled components from:

const Test = styled.View``;

into the following:

const Test = _c0 = styled.View``;

In this case this plugin assigns the view the name of _c0 and it's preferred to use Test. So I've patched the getName function to keep traversing if it's the the inner assignment and prefer the outer name. It still falls back to the inner name however.

@@ -10,7 +10,7 @@ export default t => path => {
let namedNode

path.find(path => {
// const X = styled
// X = styled
Copy link
Contributor Author

Choose a reason for hiding this comment

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

// want to pick the outer name because react-refresh will add HMR variables
// like this: X = _a = styled. We could also consider only doing this if the
// name starts with an underscore.
if (namedNode && !path.isAssignmentExpression()) return true
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 also open to hiding this behavior behind a config option as well.

Copy link
Collaborator

@quantizor quantizor left a comment

Choose a reason for hiding this comment

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

Thank you! This is a great change.

@quantizor quantizor merged commit e5e4103 into styled-components:main Oct 18, 2021
@rockwotj rockwotj deleted the rockwood/latter branch October 18, 2021 15:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants