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.

@emotion/babel-plugin@11.3.0 does not support nested component pseudo selectors?

See original GitHub issue

Current behavior:

To reproduce: https://codesandbox.io/s/determined-snowflake-p3d91?file=/src/App.tsx:0-135

import styled from "@emotion/styled";

const Foo = styled.div``;

const Box = styled.div`
  & + ${Foo}::after {
    color: red;
  }
`;

The above results in

Error
Component selectors can only be used in conjunction with @emotion/babel-plugin.

Expected behavior:

Should not throw an error here

Environment information:

dependencies

    "@emotion/babel-plugin": "11.3.0",
    "@emotion/react": "11.1.5",
    "@emotion/styled": "11.1.5",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-scripts": "4.0.0"

.babelrc (setup according to docs) https://emotion.sh/docs/@emotion/babel-plugin

{
  "plugins": [
    "@emotion"
  ]
}

Issue Analytics

State:
Created 2 years ago
Comments:6 (1 by maintainers)

Top GitHub Comments

2reactions

cruhlcommented, Jan 20, 2022

I am also experiencing this issue and it is preventing my migration from styled-components. I use only TypeScript and do not want to involve Babel, adding { target: "any string at all" } works as shown in the above comment.

0reactions

Jacky-Rolocommented, Dec 25, 2021

@rarenatoe

Andarist 's another demo work for me, NO NEED @emotion/styled/macro

https://github.com/emotion-js/emotion/issues/1899#issuecomment-679847315

Andarist, many many thanks your hard work

Top Results From Across the Web

How to use pseudo selectors in material-ui? - Stack Overflow

I was trying to show/hide my <TreeMenu/> component in the material UI v1 with pseudo selectors but somehow it does not work. Here...

has() - CSS: Cascading Style Sheets - MDN Web Docs

The :has() pseudo-class cannot be nested within another :has() . This is because many pseudo-elements exist conditionally based on the styling ...

CSS References · Prince Documentation

CSS Backgrounds and Borders Module Level 3, Prince does not support box-shadow and ... relative selector, A shorthand for selectors that represent elements...

Meet the Pseudo Class Selectors | CSS-Tricks

The spec says that :not selectors cannot be nested, but they can be chained. Some browsers (Firefox) also support comma-separated selectors ...