Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
📝 Add documentation
  • Loading branch information
thomaslindstrom committed Jul 12, 2024
commit 56a781e9c583af9d2807b45878dd68df306fb5ff
34 changes: 34 additions & 0 deletions packages/cache/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,3 +60,37 @@ A DOM node that emotion will insert all of its style tags into. This is useful f
`boolean`

A boolean representing whether to prepend rather than append style tags into the specified container DOM node.

### `explicitAmpersand`

`boolean`

Defaults to `false`. Opt-out of automatic pseudo class prefixing.

Consider the following component:

```jsx
<article
css={css`
:where([data-theme='dark']) & {
/* ... */
}
`}
/>
```

With `explicitAmpersand` set to `true`:

```css
:where([data-theme='dark']) .emotion-article {
/* ... */
}
```

With `explicitAmpersand` set to `false`:

```css
.emotion-article:where([data-theme='dark']) .emotion-article {
/* ... */
}
```
Loading