Big update!Introducing GitHub Bot Commands. Learn more
Socket
Log inBook a demo

@emotion/sheet

Package Overview
Dependencies
0
Maintainers
4
Versions
37
Issues
File Explorer

Advanced tools

@emotion/sheet

emotion's stylesheet

    1.2.1latest

Version published
Maintainers
4
Weekly downloads
8,669,813
decreased by-8.94%

Weekly downloads

Readme

Source

@emotion/sheet

A StyleSheet for css-in-js libraries

yarn add @emotion/sheet import { StyleSheet } from '@emotion/sheet' const sheet = new StyleSheet({ key: '', container: document.head }) sheet.insert('html { color: hotpink; }')

Note: This is not useful for server-side rendering, you should implement SSR seperately

StyleSheet

Options

type Options = { nonce?: string key: string container: Node speedy?: boolean prepend?: boolean }
nonce

A nonce that will be set on each style tag that the sheet inserts for Content Security Policies.

container

A DOM Node that the sheet will insert all of it's style tags into, this is useful for inserting styles into iframes.

key

This will be set as the value of the data-emotion attribute on the style tags that get inserted. This is useful to identify different sheets.

speedy

This defines how rules are inserted. If it is true, rules will be inserted with insertRule which is very fast but doesn't allow rules to be edited in DevTools. If it is false, rules will be inserted by appending text nodes to style elements which is much slower than insertRule but allows rules to be edited in DevTools. By default, speedy is enabled in production and disabled in development.

prepend

Deprecated: Please use insertionPoint option instead.

This defines where rules are inserted into the container. By default they are appended but this can be changed by using prepend: true option.

insertionPoint

This defines specific dom node after which the rules are inserted into the container. You can use a meta tag to specify the specific location:

const head = document.querySelector('head') // <meta name="emotion-insertion-point" content=""> const emotionInsertionPoint = document.createElement('meta') emotionInsertionPoint.setAttribute('name', 'emotion-insertion-point') emotionInsertionPoint.setAttribute('content', '') head.appendChild(emotionInsertionPoint) // the emotion sheets should be inserted right after the meta tag const cache = createCache({ key: 'my-app', insertionPoint: emotionInsertionPoint }) function App() { return ( <CacheProvider value={cache}> <Main /> </CacheProvider> ) }

Methods

insert

This method inserts a single rule into the document. It must be a single rule otherwise an error will be thrown in speedy mode which is enabled by default in production.

flush

This method will remove all style tags that were inserted into the document.

hydrate

This method moves given style elements into sheet's container and put them into internal tags collection. It's can be used for SSRed styles.

Example with all options

import { StyleSheet } from '@emotion/sheet' const container = document.createElement('div') document.head.appendChild(container) const sheet = new StyleSheet({ nonce: 'some-nonce', key: 'some-key', container }) sheet.insert('html { color: hotpink; }') sheet.flush()

Thanks

This StyleSheet is based on glamor's StyleSheet written by Sunil Pai. ❤️

FAQs

What is @emotion/sheet?

emotion's stylesheet

Is @emotion/sheet popular?

The npm package @emotion/sheet receives a total of 8,227,087 weekly downloads. As such, @emotion/sheet popularity was classified as popular.

Is @emotion/sheet well maintained?

We found that @emotion/sheet demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.It has 4 open source maintainers collaborating on the project.

Last updated on 27 Oct 2022

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc