Skip to content

Commit

Permalink
@emotion/cache readme: fix minor typos (#1410)
Browse files Browse the repository at this point in the history
* Fix minor typos in @emotion/cache readme

- Add missing comma before non-restrictive 'which'
- Use gerunds consistently in 'Primary use cases' section
- Fix [comma splices](https://en.wikipedia.org/wiki/Comma_splice) in 'Options' section
- Correct the spelling of 'dynamically'
- Use proper form of possessive 'its'

* Update options formatting in @emotion/cache readme

Match the formatting of [babel-plugin-emotion readme](https://github.com/emotion-js/emotion/blob/master/packages/babel-plugin-emotion/README.md#sourcemap) by putting the type and default value on a separate line just below the option name.

(Also standardize capitalization of "Stylis" and avoid the somewhat awkward possessive "Stylis's" where possible.
  • Loading branch information
tinymachine authored and emmatown committed Jun 24, 2019
1 parent d048b81 commit 46324ad
Showing 1 changed file with 22 additions and 12 deletions.
34 changes: 22 additions & 12 deletions packages/cache/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

### 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.
`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'
Expand All @@ -21,28 +21,38 @@ export const myCache = createCache({

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

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

- Using emotion with custom stylis plugins
- Using emotion with custom Stylis plugins

## Options

### nonce: string
### `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: Function | Array<Function>
### `stylisPlugins`

`Function` | `Array<Function>`

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

### `prefix`

`boolean` | `Function`, defaults to `true`

A Stylis plugin or plugins that will be run by stylis during preprocessing. [Read Stylis' docs to find out more](https://github.com/thysultan/stylis.js#plugins). This can for be used for many purposes such as RTL.
Allows changing Stylis's vendor prefixing settings. It can be a boolean or a function to dynamically set which properties are prefixed. [More information can be found in the Stylis docs](https://github.com/thysultan/stylis.js#vendor-prefixing).

### prefix: boolean | Function
### `key`

Allows changing Stylis' prefixing settings, this defaults to `true`. It can be a boolean or a function to dynamicly set which properties are prefixed. [More information can be found in Stylis' docs](https://github.com/thysultan/stylis.js#vendor-prefixing)
`string`, defaults to `"css"`

### key: string
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**.

The prefix before class names, this defaults to `css`. 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`

### container: HTMLElement
`HTMLElement`

A DOM Node that emotion will insert all of it's style tags into, this is useful for inserting styles into iframes.
A DOM node that emotion will insert all of its style tags into. This is useful for inserting styles into iframes.

0 comments on commit 46324ad

Please sign in to comment.