Wrong CSS specificity

Take the following style as an input:
```js
const style = {
root: {
"&:hover": {
"& .icon": {
color: "red"
}
},
"&.active": {
"& .icon": {
color: "blue"
}
}
},
};
```

__Expected behavior:__
I would expect the following CSS injected into the page:
```css
.root-0-0-1:hover .icon {
color: red;
}
.root-0-0-1.active .icon {
color: blue;
}
```

__Describe the bug:__
The following CSS is injected in the page:
```css
.root-0-0-1.active .icon {
color: blue;
}
.root-0-0-1:hover .icon {
color: red;
}
```

__Codesandbox link:__

https://codesandbox.io/s/yjyqmo4vqv

__Versions (please complete the following information):__
- jss: 10.0.0-alpha.11