profile
viewpoint

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

  • @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.

emotion-js/emotion

Answer questions fnky

I have the same issue, but with @emotion/babel-plugin-emotion directly, without the use of @emotion/babel-preset-css-prop.

useful!

Related questions

Cannot turn off "potentially unsafe when doing server-side rendering" noise hot 2
How to use babel-emotion-plugin with Storybook + Typescript? hot 1
Snapshot tests showing components as '<ForwardRef />' instead of component name hot 1
Using emotion 9 and 10 in the same window hot 1
Emotion 10 - "React is not defined" hot 1
How to get auto-prefixing with vanilla Emotion? hot 1
Problems surrounding SSR injection of <style> and unreliability of :first-child selectors hot 1
Typescript definitions for @emotion/native hot 1
Component selectors can only be used in conjunction with babel-plugin-emotion hot 1
Component selectors can only be used in conjunction with babel-plugin-emotion hot 1
&:focus not working hot 1
regexp not work in IE hot 1
transpile typescript to babel-plugin-emotion doesn't work hot 1
Cannot turn off "potentially unsafe when doing server-side rendering" noise hot 1
How to get auto-prefixing with vanilla Emotion? hot 1
Github User Rank List