Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Component selectors not working with `@emotion/babel-preset-css-prop`

See original GitHub issue

@emotion/core version: ^10.0.10
@emotion/styled version: ^10.0.11
@emotion/babel-preset-css-prop version: ^10.0.9
react version: ^16.8.4

Relevant code:

import styled from "@emotion/styled";

export const Text = styled.div`
  opacity: 1;
`;

export const Main = styled.div`
  ${Text} {
    color: red;
  }
`;

What you did: First off, thank you all for your tireless work on the emotion library. It’s an excellent set of packages!

In trying to complete the upgrade to emotion v10 in a private codebase. I’m mostly there except for one key issue that I’ve run into. Namely, component selectors don’t seem to be supported when using @emotion/babel-preset-css-prop.

It may be relevant to include that I’m also working in a TypeScript project.

What happened: Error is thrown. Error message reads:

Uncaught Error: Component selectors can only be used in conjunction with babel-plugin-emotion.

This is an unexpected error because I am using @emotion/babel-preset-css-prop which already uses babel-plugin-emotion under the hood.

Reproduction: Link to repro

Suggested solution: Not familiar enough with emotion codebase to recommend a solution but happy to take a crack at it.

Issue Analytics

State:
Created 4 years ago
Reactions:7
Comments:10 (3 by maintainers)

Top GitHub Comments

3reactions

Andaristcommented, Jun 6, 2019

Yes, that’s the most probable problem - there is an open PR which will help you once it gets merged in: https://github.com/emotion-js/emotion/pull/1220 . There is not ETA for this yet though.

2reactions

Andaristcommented, Oct 28, 2019

Closing this right now - because the mentioned #1220 is supposed to fix this and I will be working this month to land this. It will be a part of the upcoming v11 release.

Top Results From Across the Web

emotion/babel-preset-css-prop

This plugin is not compatible with @babel/plugin-transform-react-inline-elements . If you use both then your css prop styles won't be applied correctly. .

Can't use Component Selectors with MUI v5 Emotion Library

I am Creating an mui emotion component with Component selectors, I already have setup babel.config.js and installed @emotion/babel-plugin

Migrate from Emotion - xstyled

You may want to use Emotion Babel plugin for minification of styles, dead code elimination, components as selectors, and a nicer debugging experience....

Emotion - Complete Intro to React v5

The css prop allows us to use the css tagged template literal to write CSS. The Babel preset we added will then transpile...

Configure Emotion with your Vite React Project

Here, we add the @emotion/babel-plugin plugin we just installed. Also, to be able to use the css prop in our JSX, we need...