kentcdodds / kentcdodds/babel-plugin-macros

Program visitor not being run for styled-components macro

Open
#121 11 comments 1 reaction 0 assignees View on GitHub
help wanted needs investigation released
Dominant language
JavaScript
Stars
2.6k
Forks
138
PR merge metrics
No merged PRs in 30d

Description

Relevant babel plugin code: https://github.com/styled-components/babel-plugin-styled-components/commit/e3829d28f2b460e097f1499f6091a52b667ef1b4#diff-1fdf421c05c1140f6d71444ea2b27638L13

Relevant macro code: https://github.com/styled-components/styled-components/blob/master/packages/styled-components/src/macro/index.js

Basically when I switched the root level `JSXAttribute` visitor into one that's a subtraversal of Program (necessary to create the component AST the other visitors then further modify) the part of the babel plugin inside the Program visitor stopped working for macro users.

Here's a repro sandbox: https://codesandbox.io/embed/magical-brook-ctyxs (styled-components@* and babel-plugin-styled-components@1.10.1, the text should be green.)

To be totally honest I generally am not great at writing Babel code so maybe I'm just doing something wrong? But it's odd because I have a bunch of tests in the repo to make sure the transforms happen properly and they do seem to function as expected, it's just this Program subtraversal that isn't working for the macro use case...

Contributor guide

Open the contributing guide

Research direction

Start with the styled-components macro entry point in packages/styled-components/src/macro/index.js and the Babel plugin visitor shown in the linked commit. Run the linked CodeSandbox reproduction and compare it with the repository’s existing transform tests. Done means the Program visitor runs for macro users and the reproduction’s text is green.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
build-system, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.