scoping styles with brackets & double colons
Author: addlistenerCreated Mar 31, 2023Updated Apr 2, 2023
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?
Source: vercel/styled-jsx