scoping styles with brackets & double colons

[addlistener]

Do you want to request a feature or report a bug?

bug

What is the current behavior?

const { className, styles } = css.resolve`
  [contenteditable] {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
  }
  
  [contenteditable]::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
`

The result

[contenteditable].jsx-1423618563{overflow-x:auto;overflow-y:hidden;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;-ms-overflow-style:none;}

[contenteditable]::-webkit-scrollbar.jsx-1423618563{width:0;height:0;}

If the current behavior is a bug, please provide the steps to reproduce and possibly a minimal demo or testcase in the form of a Next.js app, CodeSandbox URL or similar

What is the expected behavior?

[contenteditable].jsx-1423618563::-webkit-scrollbar{width:0;height:0;}

Environment (include versions)

• Version of styled-jsx (or next.js if it's being used): 5.1.1
• Browser:
• OS:

Did this work in previous versions?