Emotion: Targeting another emotion component does not work.

[josh08h]

Current behavior:

I am following the docs here in order to target another emotion component. Copying the example does not work as no child component styles are applied.

To reproduce:

https://codesandbox.io/s/emotion-issue-template-ll8py?file=/src/index.js

Expected behavior:

The child component should be green but it's red.

Environment information:

• react version: [email protected]
• emotion version: [email protected]

[Slapbox]

@Andarist I was wondering if it's possible to make the following syntax work:

From the examples:

const Child = styled.div`
  color: red;
`

const Parent = styled.div`
  ${Child} {
    color: green;
  }
`

That works fine. But what if we need to increase specificity like you can with classNames, by chaining together like .myClass.myClass?

Is it possible to implement something like:

const Child = styled.div`
  color: red;
`

const Parent = styled.div`
  ${Child}${Child} { // Note the double selector syntax
    color: green;
  }

This seems to work fine as long as the css\`` wrapper is not used, but once that's used the project explodes.

So:

const Parent = styled.div`
  ${({ theme }) => `
    ${Child}${Child} { // Without css util, works
      color: green;
    }
  `}
`;


const Parent = styled.div`
  ${({ theme }) => css`
    ${Child}${Child} { // With css util, explodes
      color: green;
    }
  `}
`;

[Andarist]

@Slapbox could you prepare a runnable repro case of your problem?

[Slapbox]

@Andarist sure I'd be happy to, but this functionality relies on the Babel plugin being used, right? If so, does that mean I can't create a repro in CodeSandbox, or is there some way to enable the plugin in that environment?

[Andarist]

For the most part, you should be able to use Babel Macros. Just change the import path from @emotion/styled to @emotion/styled/macro.

[Slapbox]

Oh that's nifty!

This should do it, but CodeSandbox is being a bit glitchy for me and sometimes when I load it I'm just getting a blank white screen instead of the error message.

[Andarist]

Ok, I've dropped using Babel Macros there as I hadn't much time to figure out what's wrong. I've prepared an equivalent demo though: https://codesandbox.io/s/emotion-issue-template-forked-odeq5?file=/src/index.js . What Babel plugin does is that it just inserts an option argument with a target property and this can be used manually with success. Can't reproduce your problem with the project exploding - everything works fine, so you would have to prepare a repository with your issue reproduced so I could take a deeper look at your problem.

[Slapbox]

Thanks so much for taking the time to explain that!

I'd like to create a full repro, but being honest it's unlikely that I'll be able to find the time before Emotion 11 is finalized since it's only affecting a single line of our entire codebase.

The use of target seems really promising, but can that be used in conjunction with the Babel plugin? I'm guessing not since you dropped the use of the Babel Macros to demonstrate it.

I see that the chosen name in target gets applied as a CSS class on CodeSandbox, but in our environment it doesn't seem to have any effect on the className(s) assigned to the component, and I'm assuming that's due to our use of the Babel plugin.

Thanks again @Andarist for being one of the greatest people on GitHub!

[Andarist]

The use of target seems really promising, but can that be used in conjunction with the Babel plugin? I'm guessing not since you dropped the use of the Babel Macros to demonstrate it.

The Babel plugin would probably override the manual target - it literally inserts this target to the code, this is how component selectors are implemented. I've just dropped using the Macros because didn't have time to figure out why they didn't work on the codesandbox (and they should). So I've prepared an equivalent demo without a Babel plugin being used - but it contains very similar code to which Babel plugin transpiles styled components.