search

styled-components / babel-plugin-styled-components

Improve the debugging experience and add server-side rendering support to styled-components
MIT License
1.08k stars 141 forks source link

Css prop no more working with Babel macro #370

Open philippklodt opened 2 years ago

philippklodt commented 2 years ago

From babel-plugin-styled-components@.>=2.0.0 onwards, using the css prop with babel macros as described in the docs is no more working: https://styled-components.com/docs/api#usage-with-the-babel-macro

The webpack build fails with

ReferenceError
styled is not defined

I was able to isolate it in a minimal setup with create-react-app and styled-components. https://codesandbox.io/s/styled-components-babel-macro-cssprop-issue-sbenl

I also tested it with various versions of react-scripts and styled-components, but it didn't seem to make a difference. When setting the version of babel-plugin-styled-components back to 1.13.3 in the package.json, it works as expected.

quantizor commented 1 year ago

It seems like the dynamic component created by the css prop is putting the component declaration too soon in the file...