CSS Prop taking effect when exporting library.

[theboyWhoCriedWoolf]

I am creating a styled-system using styled-components. Everything during the development works correctly, after using Rollup to generate my reusable library, CSS prop no longer works.

import styled from 'styled-components'

const BaseButton = styled('button')`
  color: red;
`
export default function Button() {
  const overrideCss = 'color: blue;'
  return <BaseButton css={overrideCss} />
}

When importing this into a different library the Button component comes out red.

I am using Rollup with a simple configuration which uses babel-plugin-styled-component.

Could this be something to do with Rollup? I would assume that once transpiled this should work anywhere?

[quantizor]

I'd double check the plugin is being added for your production build... if you use something like the "env" setting in your babel config and change the presets or plugins at all you have to recompose all of them. Do you have a reproduction repo?

[3nvi]

Hey there, I created a small reproduction repo of the issue where I simply created & exported a button. You can find the related code here:

https://github.com/3nvi/styled-components-css-rollup

You can verify that it's not working by visiting the following CodeSandbox project, where the repo is installed & utilized:

https://codesandbox.io/s/dank-https-8mee9

In addition, I also found the following 2 threads on Spectrum that unfortunately received no answer:

1. https://spectrum.chat/styled-components/help/css-prop-not-working-with-rollup~1f59c4ef-ebf0-4a5e-8683-415b6a5b8304

2. https://spectrum.chat/styled-components/help/css-prop-rollup-transform~1376d2f9-2a3b-4507-ab7d-0b6e717c99d3

Any help from the SC team is greatly appreciated.

Thanks in advance for your time!

[3nvi]

Ok I figured it out.

For anyone facing a similar problem, the issue derives from the way your code is transformed. babel-plugin-styled-components tries to apply the changes to jsx elements only. Thus, if you have another process transpiling your code before your code reaches the babel-loader, then the babel-plugin-styled-components plugin won't take effect and your css prop will not be working.

For me, it was because I was using typescript with jsx: react in my tsconfig.json. Because of the fact that I had to convert .ts files to .js, I was running the typescript compiler before the babel transformations, which was also turning <div> to React.createElement('div'). That transformation caused the issue.

I resolved it by not allowing typescript to make any changes to JSX (i.e. jsx: preserve) and handling the transformation in babel through @babel/preset-react preset. This fixed it, since now babel (as well as all the presets & plugins) received the original JSX code and the plugin can apply its changes properly.

Hope it helps!

[rwieruch]

You saved my day @3nvi Thanks for posting how you resolved your issue. Finally I was able to make my TS library run with the SC css prop as well. If anyone stumbles upon this issue and needs another example as reference, check out react-table-library which uses Rollup + TS + SC css prop via babel-plugin-styled-components.

[mattvague]

@3nvi Almost 3 years later you've saved my day as well, thank you!

[3nvi]

Cheers 😃