add changeset

Author: Andarist

.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;
+  }
+`
+```

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;
-  }
-}"
-`;

packages/react/__tests__/babel/__snapshots__/source-map-server.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`basic 1`] = `"<style data-emotion="css 15xr5n4-html">.css-15xr5n4-html{color:hotpink;}.css-15xr5n4-html:hover{color:green;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAtc2VydmVyLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVVNIiwiZmlsZSI6InNvdXJjZS1tYXAtc2VydmVyLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqIEBqc3gganN4XG4gKiBAamVzdC1lbnZpcm9ubWVudCBub2RlXG4gKi9cblxuaW1wb3J0IHsganN4IH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgeyByZW5kZXJUb1N0cmluZyB9IGZyb20gJ3JlYWN0LWRvbS9zZXJ2ZXInXG5cbnRlc3QoJ2Jhc2ljJywgKCkgPT4ge1xuICBsZXQgaHRtbCA9IHJlbmRlclRvU3RyaW5nKFxuICAgIDxkaXZcbiAgICAgIGNzcz17e1xuICAgICAgICBjb2xvcjogJ2hvdHBpbmsnLFxuICAgICAgICAnOmhvdmVyJzoge1xuICAgICAgICAgIGNvbG9yOiAnZ3JlZW4nXG4gICAgICAgIH1cbiAgICAgIH19XG4gICAgPlxuICAgICAgc29tZSBob3RwaW5rIHRleHRcbiAgICA8L2Rpdj5cbiAgKVxuICBleHBlY3QoaHRtbCkudG9NYXRjaFNuYXBzaG90KClcbn0pXG4iXX0= */</style><div class="css-15xr5n4-html">some hotpink text</div>"`;
+exports[`basic 1`] = `"<style data-emotion="css xoge1e-html">.css-xoge1e-html{color:hotpink;}.css-xoge1e-html:hover{color:green;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAtc2VydmVyLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVVNIiwiZmlsZSI6InNvdXJjZS1tYXAtc2VydmVyLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqIEBqc3gganN4XG4gKiBAamVzdC1lbnZpcm9ubWVudCBub2RlXG4gKi9cblxuaW1wb3J0IHsganN4IH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgeyByZW5kZXJUb1N0cmluZyB9IGZyb20gJ3JlYWN0LWRvbS9zZXJ2ZXInXG5cbnRlc3QoJ2Jhc2ljJywgKCkgPT4ge1xuICBsZXQgaHRtbCA9IHJlbmRlclRvU3RyaW5nKFxuICAgIDxkaXZcbiAgICAgIGNzcz17e1xuICAgICAgICBjb2xvcjogJ2hvdHBpbmsnLFxuICAgICAgICAnJjpob3Zlcic6IHtcbiAgICAgICAgICBjb2xvcjogJ2dyZWVuJ1xuICAgICAgICB9XG4gICAgICB9fVxuICAgID5cbiAgICAgIHNvbWUgaG90cGluayB0ZXh0XG4gICAgPC9kaXY+XG4gIClcbiAgZXhwZWN0KGh0bWwpLnRvTWF0Y2hTbmFwc2hvdCgpXG59KVxuIl19 */</style><div class="css-xoge1e-html">some hotpink text</div>"`;