css prop stopped working in nextjs@11.0.0

[Lwdthe1]

I have been using the css prop to style my components since nextjs@10.2.0 (also tested at @10.2.3, the latest version before 11.0.0). It's been working wonderfully.

When I upgrade nextjs to 11.0.0, the css props is no longer compiled; the template string is just rendered as is.

<div css={css`background: red`}>...</div>

// becomes
<div css="background: red">...</div>

That means no styling from the css prop is applied to the element as desired.

This is the only console error log when I refresh the page:

But even when I resolve that error, the problem at hand remains.

Using the styled.div approach still works, though.

[simon-debruijn]

Have you removed your babel.config.json or .babelrc? Because if you did, you moved to SWC instead of Babel. The css prop of styled-components isn't supported yet for SWC.

Adding a config for babel will likely resolve your issue: https://styled-components.com/docs/tooling#babel-plugin

[Lwdthe1]

Thanks for those links. Looks like this may have been resolved in NextJS 12.2.0 https://github.com/vercel/next.js/releases/tag/v12.2.0