Pseudo elements ::before and ::after don't work when using object syntax

Environment

System:

• OS: macOS 10.14
• CPU: (4) x64 Intel® Core™ i5-7360U CPU @ 2.30GHz
• Memory: 69.29 MB / 8.00 GB
• Shell: 5.3 - /bin/zsh

Binaries:

• Node: 8.12.0 - ~/.nvm/versions/node/v8.12.0/bin/node
• Yarn: 1.9.4 - /usr/local/bin/yarn
• npm: 6.4.1 - ~/.nvm/versions/node/v8.12.0/bin/npm
• Watchman: 4.9.0 - /usr/local/bin/watchman

npmPackages:

• styled-components: ^4.0.3 => 4.0.3

Steps to reproduce

Create a styled component in object syntax with a pseudo selector. ie:

const StyledDiv = styled.div({
  '::before': {
    content: '🚀'
  }
})

Expected Behavior

We should see a pseudo element inside the div.

Actual Behavior

A pseudo element doesn’t get added to the div

[probablyup]

Does actually work, there’s just a nuance around how the content property needs to be set: https://codesandbox.io/s/lxm7q494kz

[revelt]

TLDR — wrap value with extra quotes:

BAD:

&&:after {
    content: ${(props) => `${props.cta ? props.cta : 'Click'}`};
}

GOOD:

&&:after {
    content: ${(props) => `"${props.cta ? props.cta : 'Click'}"`};
}