About more universal Nested Rules about babel-plugin-css-in-js

[b6pzeusbc54tvhw5jgpyw8pwz2x6gs]

I also want to use &.
(& represents the current selector parent sush a less or stylus )

css-in-js:

const st = cssInJS({
  box: {
    color: 'red',
    width: 100,
    height: 40,
    '&:hover': {
      color: 'blue',
      '.hiddenBtn': {
        opacity: 1
      },
      '& > .normalBtn': {
        marginRight: 10
      }
    }
  }
})

babel:

const st = {
  box: 'dir_filename_js-styles-box',
  hiddenBtn: 'dir_filename_js-styles-hiddenBtn',
  normalBtn: 'dir_filename_js-styles-normalBtn'
}

css:

.dir_filename_js-styles-box {
  color: red;
  width: 100px;
  height: 40px;
}
.dir_filename_js-styles-box:hover {
  color: blue;
}
.dir_filename_js-styles-box:hover .dir_filename_js-styles-hiddenBtn {
  opacity: 1;
}
.dir_filename_js-styles-box:hover > .dir_filename_js-styles-normalBtn {
  marginRight: 10px;
}

[martinandert]

Hi Alfred, sorry for the delay.

Could I make some PR?

Sure! Happy to merge any of the improvements you're talking about. Thanks!

[b6pzeusbc54tvhw5jgpyw8pwz2x6gs]

I'll try it if I have some time.
Please let me know if anyone has any idea or feedback on this issue.