question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Program visitor not being run for styled-components macro

See original GitHub issue

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…

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:1
  • Comments:11 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
conartist6commented, Dec 7, 2020

OK yeah I am now pretty sure the fix for this issue is wrong and will I believe need to be reverted. I can help you look again at the problem described here and determine its root cause and the correct fix.

0reactions
conartist6commented, Dec 7, 2020

Can you try dropping the call to requeue entirely. I do not think you need it as you are altering the body of the program which has yet to be traversed. You can test it with the 2.x version of plugin-macros right?

Read more comments on GitHub >

github_iconTop Results From Across the Web

re export styled from styled components macro not working
I tried with export { css, createGlobalStyle, keyframes, ThemeProvider, withTheme, styled } . But without success. import React from 'react'; ...
Read more >
Tooling - styled-components
By adding a unique identifier to every styled component, this plugin avoids checksum mismatches due to different class generation on the client and...
Read more >
babel-macros - Bountysource
I am trying to use babel-plugin-macros (specifically with the twin macro and tailwind) and while it works fine when running normally it fails...
Read more >
DRY-ing up styled-components - CSS-Tricks
No, the styled-components aren't always exactly the same, ... the styles that inherit from that base component need to be listed after the ......
Read more >
Twin.macro Tutorial for Beginners: Styling with Tailwind CSS ...
Emotion helps to solve the cascading problem since styles are scoped. It also generates class names out of the box which can have...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found