I’m developing a React component library for npm. The tech stack includes:

React
TypeScript
styled-components
I’m using Babel and Rollup for the build process.

My issue is that I want to use the css prop in my components, but it’s not being transpiled into styles as expected. Using a wrapper like const StyledSpan = styled.span works correctly, but I need a solution that also transpiles the css prop.

If I use cssprop in my app it works also fine, because unde the hood, the Babel plugin turns any element that has a css prop into a styled component. But it does not do that with rollup and babel. 🙁

The component:

import React from 'react';
import { css } from 'styled-components';

const Text= () => (
  <span
    css={css`
      background-color: orange;
      color: red;
    `}
  >
    Bob
  </span>
);

export default Text;

Rollup config:

import { readFileSync } from 'fs';
import { defineConfig } from 'rollup';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import external from 'rollup-plugin-peer-deps-external';
import postcss from 'rollup-plugin-postcss';
import typescriptEngine from 'typescript';
import babel from '@rollup/plugin-babel';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';

const packageJson = JSON.parse(readFileSync('./package.json'));

export default defineConfig({
  input: './src/index.ts',
  output: [
    {
      file: packageJson.main,
      format: 'cjs',
      sourcemap: true,
      exports: 'named',
      name: packageJson.name,
      interop: 'compat',
    },
    {
      file: packageJson.module,
      format: 'esm',
      exports: 'named',
      sourcemap: true,
      interop: 'compat',
    },
  ],
  plugins: [
    peerDepsExternal(),
    postcss({
      plugins: ['babel-plugin-styled-components'],
      minimize: true,
    }),
    babel({
      babelHelpers: 'runtime',
      plugins: [
        [
          'babel-plugin-styled-components',
          {
            namespace: 'react-ui',
            displayName: true,
            fileName: true,
            transpileTemplateLiterals: true,
            ssr: false,
          },
          "@babel/plugin-transform-runtime"
        ],
      ],
      presets: ['react-app', '@babel/preset-react', '@babel/preset-typescript'],
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
    }),
    external({ includeDependencies: true }),
    resolve({ browser: true }),
    commonjs({
      include: 'node_modules/**',
    }),
    typescript({
      tsconfig: './tsconfig.json',
      typescript: typescriptEngine,
      sourceMap: true,
      exclude: [
        'coverage',
        '.storybook',
        'storybook-static',
        'config',
        'dist',
        'node_modules/**',
        '*.cjs',
        '*.mjs',
        '**/__snapshots__/*',
        '**/__tests__',
        '**/*.test.js+(|x)',
        '**/*.test.ts+(|x)',
        '**/*.mdx',
        '**/*.story.ts+(|x)',
        '**/*.story.js+(|x)',
        '**/*.stories.ts+(|x)',
        '**/*.stories.js+(|x)',
        'setupTests.ts',
        'vitest.config.ts',
      ],
    }),
  ],
  external: ['styled-components'],
});

Typescript config:

{
  "compilerOptions": {
    "declaration": true,
    "declarationDir": "./types",
    "strict": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "noUnusedParameters": true,
    "strictNullChecks": true,
    "moduleResolution": "node",
    "noImplicitAny": true,
    "outDir": "./prebuild",
    "target": "es5",
    "jsx": "react"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

package.json

{
  "name": "react-component-library",
  "version": "1.0.0",
  "description": "npm package with",
  "main": "dist/index.js",
  "module": "dist/index.esm.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "rollup": "rimraf dist && rollup -c --bundleConfigAsCjs",
    "prepair": "rimraf dist && rimraf prebuild && rimraf lib",
    "build": "tsc && cross-env NODE_ENV=development babel ./prebuild --out-dir lib && cross-env NODE_ENV=development rollup -c --bundleConfigAsCjs"
  },
  "files": [
    "dist"
  ],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/plugin-transform-runtime": "^7.24.7",
    "@babel/preset-react": "^7.24.7",
    "@babel/preset-typescript": "^7.24.7",
    "@babel/runtime": "^7.25.0",
    "@rollup/plugin-babel": "^6.0.4",
    "@rollup/plugin-commonjs": "^26.0.1",
    "@rollup/plugin-node-resolve": "^15.2.3",
    "@rollup/plugin-terser": "^0.4.4",
    "@rollup/plugin-typescript": "^11.1.6",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@types/styled-components": "^5.1.34",
    "@vitejs/plugin-react": "^4.3.1",
    "autoprefixer": "^10.4.19",
    "babel-loader": "^9.1.3",
    "babel-plugin-css-prop": "^0.1.0",
    "babel-plugin-macros": "^3.1.0",
    "babel-plugin-styled-components": "^2.1.4",
    "babel-preset-react-app": "^10.0.1",
    "cross-env": "^7.0.3",
    "postcss": "^8.4.40",
    "postcss-loader": "^8.1.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "rimraf": "^6.0.1",
    "rollup": "^4.19.0",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^4.0.2",
    "rollup-plugin-typescript2": "^0.36.0",
    "styled-components": "^6.1.12",
    "ts-loader": "^9.5.1",
    "typescript": "^5.5.4",
    "typescript-plugin-styled-components": "^3.0.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.24.8",
    "@babel/core": "^7.24.9",
    "@babel/preset-env": "^7.25.0",
    "rollup-plugin-dts": "^6.1.1"
  },
  "peerDependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "styled-components": "^6.1.12"
  }
}

It works if I cahnge the component to a styled wrapper, like this:
But I don’t want to apply this form

import React from 'react';
import styled from 'styled-components';

export const StyledSpan = styled.span`
  background-color: orange;
  color: blue;
`;

const Text = () => (
  <StyledSpan>
    Bob
  </StyledSpan>
);

export default Text;