Styled-jsx: Error "insertRule` accepts only strings" when using with styled-components

[jdolinski1]

What is the current behavior?

1. Get with-styled-components example (https://github.com/zeit/next.js/tree/canary/examples/with-styled-components)
2. Add <styled jsx tag to the index.js file so you got something like:

export default () => (
    <div>
        <h1>hello</h1>
        <style jsx={true} global={true}>
            {`
                h1 {
                    color: red;
                }
            `}
        </style>
    </div>
)

1. Error appears:

StyleSheet: `insertRule` accepts only strings.

1. When i remove the "styled-components" plugin from .babelrc, everything works fine.

What is the expected behavior?

Styled-jsx tags should work with styled-components + babel-plugin-styled-components in stack.

Environment (include versions)

• OS: OSX 10.13.4
• Browser: Chrome 70.0.3538.102
• styled-jsx (version): 3.1.0

Did this work in previous versions?

IIRC this was working in my older project with Next.js 6.1.1.

[ssypi]

Not sure if the problem is with styled-jsx, babel-plugin-styled-components or where, but downgrading babel-plugin-styled-components to older version 1.8.0 seems to fix this problem. Neither 1.9.0 or the latest 1.9.2 seems to work.

Note that the package.json "babel-plugin-styled-components": "^1.8.0" in the example you linked, will install 1.9.2 because of the ^ caret.

[tomanagle]

I've been trying to figure this out for 3 days now. If you remove the jsx tag from your

To:
 ```
<style>
          {`
            .nav-container {
              background-color: #fff;
              padding-top: 0.375rem;
              padding-bottom: 0.375rem;
              border-bottom: solid 1px #333;
            }
          `}
        </style>

[jsve]

I'm having the same issu as the @jdolinski1

In desperation I have tried the following (with next.js 7.0.2):

• [email protected] + [email protected]
• [email protected] + [email protected]
• [email protected] + [email protected]
• [email protected] + [email protected]
• [email protected] + [email protected]

if i remove babel-plugin-styled-components from my babelrc, the error goes away. Same thing if i replace 'style jsx' with 'style' as @tomanagle suggested, but not sure how that affect the rest of my code. Is jsx not needed?

[ssypi]

@jsve Are you sure the versions were correctly installed and no caches or something was left behind? I ask because I had this problem, but when I installed [email protected] it disappeared, I had [email protected] and the currently latest nextjs, 7.2 or is it 7.0.2.

I’m not sure but I think removing the jsx attribute will stop the prefixing of classes so it becomes global instead of contained in the component.

[jsve]

pretty sure. tried again now and ran npm cache clean --force and then npm install but with same error message. Is there something other i can try?

[shYkiSto]

That's related to changes introduced in https://github.com/styled-components/babel-plugin-styled-components/pull/172 to support this "new" css prop API: https://www.styled-components.com/docs/api#css-prop

What happens is that component generated from <style jsx /> gets transpiled by the styled-components babel plugin as styled-jsx uses the css prop internally.

I would suggest this incompatibility issue should be resolved in styled-jsx as it seem to be by far the most easiest change:
https://github.com/zeit/styled-jsx/blob/master/src/_utils.js#L415
https://github.com/zeit/styled-jsx/blob/master/src/_constants.js#L4

Thoughts?

[giuseppeg]

@shYkiSto thanks for debugging this. There is nothing we can do about that except changing the prop name but that should happen in a major release which we are not planning. We could do a patch release otherwise but that would break snapshot tests if anybody is transpiling style tags with styled-jsx in tests (probably not a big deal). @rauchg / @timneutkens can make the call though.

[timneutkens]

I'd be fine with changing the prop, it's just that we have to keep in mind to use a similar short name otherwise bundle size increases.

[giuseppeg]

we can switch from

<Style styleId={123} css={''} />

to

<Style id={123} children={''} />

[shYkiSto]

@timneutkens @giuseppeg Let me know if you need any help making this change.

[giuseppeg]

@shYkiSto if you have time I'd welcome a PR! Btw maybe styles is more self explanatory than children, so I'd go for that.