Add option `explicitAmpersand` on @emotion/cache to handle :is and :where, etc

[thomaslindstrom]

Based on the following issue: https://github.com/emotion-js/emotion/issues/2836 This adds an opt-in option on @emotion/cache explicitAmpersand (unsure about name) that disables the automatic prefixing of pseudo classes in the CSS.

What:

I identified an issue in my own CSS with newer pseudo classes like :where and :is, where Emotion automatically prefixed those classes with the current class name (with no spaces). This was not the expected behavior, and there was no way for me to opt-out of this behavior.

Consider:

<article
  css={css`
    color: black;

    :is(p, ul, ol) + :is(p, ul, ol) {
      margin-top: 1em;
    }

    :where([data-theme="dark"]) & {
      color: white;
    }
  `}
/>;

where the output with the explicitAmpersand set to false (the current behavior) will output:

.emotion-article:is(p, ul, ol)+:is(p, ul, ol) {margin-top: 1em;}
.emotion-article:where([data-theme="dark"]) & {color:white;}

But with explicitAmpersand set to true (new behavior):

.emotion-article :is(p, ul, ol)+:is(p, ul, ol) {margin-top: 1em;}
:where([data-theme="dark"]) .emotion-article {color: white;}

Why:

The current behavior of automatic prefixing of the parent class name is confusing and breaks the behavior of new psuedo classes.

How:

Added an opt-in option on @emotion/cache explicitAmpersand.

Checklist:

• [x] Documentation
• [x] Tests
• [x] Code complete
• [x] Changeset