# @emotion/cache

> emotion's cache

Latest version **11.14.0** (published 2024-12-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @emotion/cache
pnpm add @emotion/cache
yarn add @emotion/cache
bun add @emotion/cache
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score; popular repo.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 11.14.0 |
| Published | 2024-12-09 |
| First published | 2018-02-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 238.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 18020 |
| Maintainers | tkh44, emotion-release-bot, andarist, emmatown |

## Links

- npm: https://www.npmjs.com/package/@emotion/cache
- Repository: https://github.com/emotion-js/emotion.git#main
- Homepage: https://github.com/emotion-js/emotion/tree/main#readme
- Issues: https://github.com/emotion-js/emotion/issues
- npm.io page: https://npm.io/package/@emotion/cache

## Dependencies (5)

- [stylis](https://npm.io/package/stylis.md) 4.2.0
- [@emotion/sheet](https://npm.io/package/@emotion/sheet.md) ^1.4.0
- [@emotion/utils](https://npm.io/package/@emotion/utils.md) ^1.4.2
- [@emotion/memoize](https://npm.io/package/@emotion/memoize.md) ^0.9.0
- [@emotion/weak-memoize](https://npm.io/package/@emotion/weak-memoize.md) ^0.4.0

## Recent versions

- 11.14.0 (latest) — 2024-12-09
- 11.0.0-rc.0 (rc) — 2020-10-11
- 11.0.0-next.19 (next) — 2020-10-03
- 10.0.0-really-unsafe-please-do-not-use.2 (really-unsafe-please-do-not-use) — 2018-09-28
- 11.13.5 — 2024-11-20
- 11.13.1 — 2024-07-25
- 11.13.0 — 2024-07-20
- 11.12.0 — 2024-07-19
- 11.11.0 — 2023-05-06
- 11.10.8 — 2023-04-28
- 11.10.7 — 2023-04-05
- 11.10.5 — 2022-10-27
- 11.10.3 — 2022-08-23
- 11.10.2 — 2022-08-22
- 11.10.1 — 2022-08-02
- … 64 more at https://npm.io/package/@emotion/cache/versions

## README

# @emotion/cache

### createCache

`createCache` allows for low level customization of how styles get inserted by emotion. It's intended to be used with the [`<CacheProvider/>`](https://emotion.sh/docs/cache-provider) component to override the default cache, which is created with sensible defaults for most applications.

```javascript
import createCache from '@emotion/cache'

export const myCache = createCache({
  key: 'my-prefix-key',
  stylisPlugins: [
    /* your plugins here */
  ]
})
```

### Primary use cases

- Using emotion in embedded contexts such as an `<iframe/>`

- Setting a [nonce](#nonce-string) on any `<style/>` tag emotion creates for security purposes

- Using emotion with a developer defined `<style/>` tag

- Using emotion with custom Stylis plugins

## Options

### `nonce`

`string`

A nonce that will be set on each style tag that emotion inserts for [Content Security Policies](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).

### `stylisPlugins`

`Array<Function>`

A Stylis plugins that will be run by Stylis during preprocessing. [Read the Stylis docs to find out more](https://github.com/thysultan/stylis.js#middleware). This can be used for many purposes such as RTL.

> Note:
>
> Prefixer is just a plugin which happens to be put in default `stylisPlugins`. If you plan to use custom `stylisPlugins` and you want to have your styles prefixed automatically you must include prefixer in your custom `stylisPlugins`. You can import `prefixer` from the `stylis` module to do that (`import { prefixer } from 'stylis'`);

### `key`

`string (Pattern: [^a-z-])`

The prefix before class names. It will also be set as the value of the `data-emotion` attribute on the style tags that emotion inserts and it's used in the attribute name that marks style elements in `renderStylesToString` and `renderStylesToNodeStream`. This is **required if using multiple emotion caches in the same app**.

### `container`

`Node`

A DOM node that emotion will insert all of its style tags into. This is useful for inserting styles into iframes or windows.

### `prepend`

`boolean`

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

---
_Source: https://npm.io/package/@emotion/cache · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._