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/babel plugin emotion function object crash #2585

Merged

Conversation

kddc
Copy link
Contributor

@kddc kddc commented Dec 9, 2021

What:
Fix the babel plugin crashing when facing objects with multiple emotion classes where some of them are arrow functions and adding the correct labels to the classes.

Why:
We have something like this in our code

const { useStyles } = {
  useStyles: () => {
    return {
      color: css`
        color: hotpink;
      `,
      colorFn: () => css`
        color: hotpink;
      `,
    }
  }
}

When the babel plugin processes the arrow function inside of it, it crashes with TypeError: Cannot read properties of undefined (reading 'charAt'), as it can not find a declaratorName for the function in the label.js file.

How:
The getDeclaratorName method checked for parents that could be of type ArrowFunctionExpression, but this was not handled inside the body of this function. I check the parents parent in this case using the existing getDeclaratorName method.

Checklist:

  • Documentation
  • Tests
  • Code complete
  • Changeset

@changeset-bot
Copy link

changeset-bot bot commented Dec 9, 2021

🦋 Changeset detected

Latest commit: cd6bb15

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@emotion/babel-plugin Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@codesandbox-ci
Copy link

codesandbox-ci bot commented Dec 9, 2021

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit cd6bb15:

Sandbox Source
Emotion Configuration

@codecov
Copy link

codecov bot commented Dec 9, 2021

Codecov Report

Merging #2585 (cd6bb15) into main (169ac54) will decrease coverage by 0.03%.
The diff coverage is 100.00%.

Impacted Files Coverage Δ
packages/babel-plugin/src/utils/label.js 92.78% <100.00%> (-0.63%) ⬇️
packages/babel-plugin/src/styled-macro.js 98.00% <0.00%> (-0.12%) ⬇️

@@ -137,7 +148,7 @@ function getDeclaratorName(path, t) {
}

let variableDeclarator = parent.findParent(p => p.isVariableDeclarator())
if (!variableDeclarator) {
if (!variableDeclarator || !variableDeclarator.get('id').isIdentifier()) {
Copy link
Member

Choose a reason for hiding this comment

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

@kddc this was the more appropriate fix. The isArrowFunctionExpression block that you have introduced has covered the introduced test case but I believe that it was more about improving label extraction for this specific case than about fixing a crash (the latter was a byproduct of the former though, in that scenario).

By patching the underlying issue here I've managed to also fixed the weird test case introduced as no-label-obj-pattern-computed-property

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@Andarist Awesome - that's even better then :)

@Andarist Andarist force-pushed the fix/babel-plugin-emotion-function-object-crash branch from b0787c1 to cd6bb15 Compare December 21, 2021 08:55
@Andarist Andarist merged commit b830c7d into emotion-js:main Dec 21, 2021
@Andarist
Copy link
Member

@kddc thank you very much for the PR! this means a lot ❤️

@github-actions github-actions bot mentioned this pull request Dec 21, 2021
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.

None yet

2 participants