Issue with @emotion/babel plugin - variable reported as not defined

[adrianosmond]

Current behavior:

Given a very specific set of styles:

const StyledRoot = styled.div`
  ${fullWidth}

  button {
    @media (min-width: 768px) {
      color: red;
    }
  }
`;

the fullWidth variable which has been imported from a different file is reported as not defined when using @emotion/babel-plugin inside a Jest test. The styles work when @emotion/babel-plugin is not used. Making minor adjustments to the styles, like removing the @media rule, or changing the order of the nesting of button and @media mean also result in the variable no longer being reported as not defined.

To reproduce:

1. Clone https://github.com/adrianosmond/emotion-babel-plugin-issue-repro
2. npm i
3. npm run test

The tests fail like so

 FAIL  src/Component.test.jsx
  ● Test suite failed to run

    ReferenceError: fullWidth is not defined

      4 |
      5 | const StyledRoot = styled.div`
    > 6 |   ${fullWidth}
        |     ^
      7 |
      8 |   button {
      9 |     @media (min-width: 768px) {

Expected behavior:

The test should pass. The variable fullWidth has been defined - it is imported on line 3 of src/Component.jsx

Environment information:

• react version: 17..0.2
• @emotion/styled version: 11.8.1
• @emotion/babel-plugin version: 11.9.2

[Andarist]

Thanks for filing a report - I've narrowed down the issue to the toInputTree function and I think that I've also recognized how the logic is broken. Gonna be working on a fix soon.

[adrianosmond]

Awesome - thanks for all your hard work!

[abel-varga-ekata]

Is there an update on this? We've bumped into this exact issue. Our workaround is to fall back and use the old babel-plugin-emotion when running the tests, if anyone's interested.

isTestEnv ? 'babel-plugin-emotion' : ['@emotion', { autoLabel: 'always' }],

[Andarist]

Sorry, this somehow slipped my mind back in May and I've forgotten about this issue. I've prepared a fix for this: #2858