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?