Emotion: Using Pseudo selectors in object

[luapaaron]

• emotion version: "^8.0.10"
• react version: "^16.2.0"

Relevant code.

const RadioButton = styled('div')({
display: 'inline-flex',
justifyContent: 'center',
alignItems: 'center',
flex: '0 0 auto',
width: 20,
height: 20,
borderRadius: '50%',

'&::after': {
display: 'block',
content: ''
}
});

What you did:

I used &::after using object but the after pseudo does not add in the css.
but when I tried to use it as string it is ok.

Here is the screenshot for object and string
OBJECT

STRING

Suggested solution:

added helper for after pseudo to retain object for the whole project.

index.js

import { after } from './helpers'
const RadioButton = styled('div')(
{
display: 'inline-flex',
justifyContent: 'center',
alignItems: 'center',
flex: '0 0 auto',
width: 20,
height: 20,
borderRadius: '50%'
},
after({
display: 'block',
width: 12,
height: 12,
borderRadius: '50%'
})
);

helpers.js

WHAT I OBSERVED
Using this line of codes, i put content in the object, also in the string

the output in CSS is this:

There is a px on the content that came from the object

[tkh44]

content: "''" should work.

[DSchau]

@tkh44 think it'd be possible to do a PR to improve that behavior? I might have some interest in doing so.

Basically any content passed to those pseudo selectors (::before and ::after) requires the value to be stringified.

Here's a CodeSandbox demonstrating the "issue" (if it's even that!).