diff --git a/.changeset/odd-adults-hang.md b/.changeset/odd-adults-hang.md new file mode 100644 index 000000000..d90300e17 --- /dev/null +++ b/.changeset/odd-adults-hang.md @@ -0,0 +1,19 @@ +--- +'@emotion/styled': major +'@emotion/cache': major +'@emotion/react': major +'@emotion/css': major +--- + +Removed special-casing of pseudo classes and pseudo elements. Previously they were always implicitly nested in the "current context" but that's not how many other popular CSS preprocessor work and conflicts with some newer CSS features like `:where` and `:is`. + +You should migrate your code like this: + +```diff +css` +- :hover { ++ &:hover { + color: hotpink; + } +` +``` diff --git a/packages/css/test/__snapshots__/selectivity.test.js.snap b/packages/css/test/__snapshots__/selectivity.test.js.snap index f80acc0ad..1ded85134 100644 --- a/packages/css/test/__snapshots__/selectivity.test.js.snap +++ b/packages/css/test/__snapshots__/selectivity.test.js.snap @@ -15,62 +15,62 @@ exports[`css complex nested media queries 1`] = ` `; exports[`css complex nested styles 1`] = ` -".css-1fh6au3 { +".css-2ksolp { color: blue; } -.css-1fh6au3:hover { +.css-2ksolp:hover { color: green; } -.css-1fh6au3:hover .name { +.css-2ksolp:hover .name { color: amethyst; } -.css-1fh6au3:hover .name:focus { +.css-2ksolp:hover .name:focus { color: burlywood; } @media (min-width: 420px) { - .css-1fh6au3:hover .name:focus { + .css-2ksolp:hover .name:focus { color: rebeccapurple; } }" `; exports[`css handles media query merges 1`] = ` -".css-uzr6q5 { +".css-1mnte70 { color: darkslateblue; color: red; color: purple; } @media (min-width: 420px) { - .css-uzr6q5 { + .css-1mnte70 { color: amethyst; } } @media (min-width: 640px) { - .css-uzr6q5 { + .css-1mnte70 { color: rebeccapurple; } } @media (min-width: 960px) { - .css-uzr6q5 { + .css-1mnte70 { color: burlywood; } } @media (min-width: 640px) { - .css-uzr6q5 { + .css-1mnte70 { color: blue; } } @media (min-width: 640px) { - .css-uzr6q5 { + .css-1mnte70 { color: aquamarine; } }" @@ -143,125 +143,3 @@ a.css-miigdc { background: blue; }" `; - -exports[`orphaned pseudos in nested atrules 1`] = ` -"@media (max-width: 400px) { - @supports (display: grid) { - .css-mlu596 div, - .css-mlu596:first-child { - color: hotpink; - } - } -}" -`; - -exports[`orphaned pseudos multiple in a group 1`] = ` -".css-ynt3gm:hover div, -.css-ynt3gm:focus { - color: hotpink; -}" -`; - -exports[`orphaned pseudos multiple in a group in multiple in a group 1`] = ` -".css-b4zt77 .foo:first-child, -.css-b4zt77 .bar div:first-child, -.css-b4zt77 .qwe:first-child, -.css-b4zt77 .foo div, -.css-b4zt77 .bar div div, -.css-b4zt77 .qwe div, -.css-b4zt77 .foo span, -.css-b4zt77 .bar div span, -.css-b4zt77 .qwe span, -.css-b4zt77 .foo:last-child, -.css-b4zt77 .bar div:last-child, -.css-b4zt77 .qwe:last-child { - color: hotpink; -}" -`; - -exports[`orphaned pseudos orphaned pseudo nested in orphaned pseudo 1`] = ` -".css-1dmq8mx:hover { - color: hotpink; -} - -.css-1dmq8mx:hover:focus { - outline-color: blue; -}" -`; - -exports[`orphaned pseudos overlapping - reversed 1`] = ` -".css-15m4dbh :first-child:first-child .css-15m4dbh :first-child { - color: hotpink; -}" -`; - -exports[`orphaned pseudos overlapping 1`] = ` -".css-dmhqee :first-child:first-child { - color: hotpink; -}" -`; - -exports[`orphaned pseudos regexp special character 1`] = ` -".css-1545qp0:nth-child(3) { - color: hotpink; -}" -`; - -exports[`orphaned pseudos regular rule nested in orphaned pseudo 1`] = ` -".css-1u1a2oo:hover { - color: hotpink; -} - -.css-1u1a2oo:hover .foo { - color: grey; -}" -`; - -exports[`orphaned pseudos regular rule with nested rule nested in orphaned pseudo 1`] = ` -".css-1tlqvwi:hover { - color: hotpink; -} - -.css-1tlqvwi:hover .foo { - color: grey; -} - -@media print { - .css-1tlqvwi:hover .foo { - display: none; - } -}" -`; - -exports[`orphaned pseudos selector list with nested atrule 1`] = ` -".css-7vvm69::backdrop, -.css-7vvm69+.backdrop { - background-color: grey; -} - -@media print { - .css-7vvm69::backdrop, - .css-7vvm69+.backdrop { - display: none; - } -}" -`; - -exports[`orphaned pseudos single 1`] = ` -".css-17n559g:focus { - color: hotpink; -}" -`; - -exports[`orphaned pseudos with nested atrule 1`] = ` -".css-1vs75su::before { - content: "*"; - background: pink; -} - -@media screen and (max-width: 800px) { - .css-1vs75su::before { - background: cyan; - } -}" -`; diff --git a/packages/react/__tests__/babel/__snapshots__/source-map-server.js.snap b/packages/react/__tests__/babel/__snapshots__/source-map-server.js.snap index 6dffe6e75..3e646ae14 100644 --- a/packages/react/__tests__/babel/__snapshots__/source-map-server.js.snap +++ b/packages/react/__tests__/babel/__snapshots__/source-map-server.js.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`basic 1`] = `"
some hotpink text
"`; +exports[`basic 1`] = `"
some hotpink text
"`;