cssinjs / cssinjs/jss

Property 'content' under pseudo element selector is wrongly parsed

Open
#1,535 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
7.1k
Forks
386
PR merge metrics
No merged PRs in 30d

Description

__Expected behavior:__
Hi. I've implemented JSS into my Next.js project. I need to use pseudo selectors/elements because I want set aspect ratio to my div.

__Describe the bug:__
When I try use pseudo element selector like ':before' or ':after', they are parsed wrongly, but only on first render. After fast refresh/hot reloading is everything ok.

```
gridItem: {
position: 'relative',

'&::before': {
display: 'block',
content: '""',
paddingBottom: 'calc(5/4 * 100%)',
width: '100%',
},
},
```

Is parsed like
![image](https://user-images.githubusercontent.com/26891613/126443013-7aa67ec5-16e5-4f1a-a15f-81e4fa88b0fa.png)

I've tried `&:before`, `&::before`, `content: '" "'`, `content: '"..."'`

__Versions (please complete the following information):__
- react-jss: 10.7.1
- Browser: Chrome, Safari
- OS: Macos

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.