CODEWITHSUNDEEP
reactjstypescriptbabeljsrollupemotion
timmyc
timmyc

Reputation: 522

How to get Emotion/Rollup/Typescript component CSS to show up in consuming React app?

I'm using TypeScript/Emotion/Rollup/Storybook to build a component library meant to be consumed by a React app. A couple preface points:

  1. The consuming React app is working fine, and I can create Emotion-styled components within that app, and it works great and all CSS styles are applied to the app's own components.

  2. The component library is working fine, and I can create Emotion-styled components, open Storybook, and see all the CSS styles applied in the lib's components in Storybook.

However, when I bring components over from my component library into my consuming app, their styles disappear, and upon inspection, the element looks like this:

<button data-testid="Button" css="You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).">Submit</button>

In other words, the CSS of the component, as created in the component library, does not show up. This same element works fine in the lib's Storybook.

As an additional note, I saw the same error originally in the consuming app's OWN components, and solved it using Babel presets here as described here: https://emotion.sh/docs/css-prop

I stumbled across this question/answer, which led me to believe that the error I'm now experiencing happened because Rollup wasn't running the build through Babel: https://spectrum.chat/emotion/help/solved-css-prop-styles-not-appearing-in-built-components~cb6e75b8-7356-42d0-860b-bb01a26a3d06

After some trial and error, I got the component lib to build using Babel. But the error persists as always, and the component, when used inside the consuming app, remains unstyled with that note inside of the CSS prop.

Any ideas on how I might get the component's CSS to show up in the consuming React app?

Thanks in advance for any help!

Upvotes: 5

Views: 3967

Answers (1)

atomkirk
atomkirk

Reputation: 3801

Make sure your .tsconfig.json has compilerOptions.target: 'es6' and compilerOptions.jsx: "preserve"

and your .babelrc should have:

  "presets": [
    "@babel/preset-react",
    "@emotion/babel-preset-css-prop"
  ],

Upvotes: 6

Related Questions