vercel / styled-jsx

Full CSS support for JSX without compromises
http://npmjs.com/styled-jsx
MIT License
7.7k stars 262 forks source link

scoping styles with brackets & double colons #829

Open addlistener opened 1 year ago

addlistener commented 1 year ago

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)

Did this work in previous versions?