fix css props when using babel macro with babel-plugin-styled-components 1.10.1

[jamesknelson]

Currently, if you follow the guide to using styled-components with Create React App, css props will not work. This is due to a change introduced in babel-plugin-styled-components 1.10.1.

This fix resolves the issue by switching the macro to use @babel/traverse(path) instead of path.traverse(). For some reason, this makes the Program visitor work, whereas it doesn't with path.traverse().

See styled-components/babel-plugin-styled-components#226 for details

[quantizor]

@jamesknelson can you add a test please?

[jamesknelson]

I can't get the tests running on my machine, so can't do so at the moment. I get this when trying to run yarn test:web or jest

 ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import styled from '../styled';
SyntaxError: Unexpected identifier "import"

Looks like the tests are not compiling modules to commonjs for some reason. Any ideas?

[quantizor]

@jamesknelson hmm weird, a yarn from the root always works for me

[jamesknelson]

I'm not sure what's going on - I've run yarn in the root, tried a bunch of things with a fresh clone, and can't get tests to work locally no matter what I try.

On the other hand, there is a macro test already, and it passes on CI.

[quantizor]

I’ll add one to your branch

[quantizor]

Thanks for figuring this out! What a weird set of behaviors...

[quantizor]

Released as 4.3.2, thanks so much for tackling this!