@emotion/[email protected] does not support nested component pseudo selectors?

[daniellizik]

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"
  ]
}

[daniellizik]

hm, saw this #1768 (comment)

[daniellizik]

the "real" example i have is in a more complicated razzle setup; i'll make some to recreating it

[Andarist]

Codesandbox doesn't support Babel configuration out of the box, since that React template is CRA-based. You can, however, use our macro variant there (which is basically a way to use our Babel plugin in such config-constrained environments):
https://codesandbox.io/s/angry-greider-9wuy6?file=/src/App.tsx

As you may notice - everything works OK so if something doesn't work on your side then it has to be a tooling issue on your end.

[rarenatoe]

Whenever I try to use the macro variant, I get this horrible error:

./node_modules/import-fresh/node_modules/resolve-from/index.js
Module not found: Can't resolve 'module' in '/.../project/node_modules/import-fresh/node_modules/resolve-from'

I deleted and reinstalled my node_modules but nothing happened.

[Jacky-Rolo]

@rarenatoe

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

• Targeting another emotion component does not work. #1899 (comment)

Andarist, many many thanks your hard work

[cruhl]

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.