{"maintainers":[{"name":"anonymous","email":"npm@emmas.town"},{"name":"anonymous","email":"kye.hohenberger@gmail.com"},{"name":"anonymous","email":"emotion-release-bot@hamil.town"},{"name":"anonymous","email":"mateuszburzynski@gmail.com"}],"keywords":["styles","emotion","react","css","css-in-js"],"dist-tags":{"really-unsafe-please-do-not-use":"10.0.0-really-unsafe-please-do-not-use.2","next":"11.0.0-next.19","rc":"11.0.0-rc.0","latest":"11.13.5"},"author":{"name":"Kye Hohenberger"},"description":"The Next Generation of CSS-in-JS.","readme":"# @emotion/css\n\nThe [@emotion/css](https://www.npmjs.com/package/@emotion/css) package is framework agnostic and the simplest way to use Emotion.\n\n## Table of Contents\n\n- [Quick Start](#quick-start)\n- [API](#api)\n - [Generate Class Names — `css`](#css)\n - [Global Styles — `injectGlobal`](#global-styles)\n - [Animation Keyframes — `keyframes`](#animation-keyframes)\n - [Composing Class Names — `cx`](#cx)\n- [Custom Instances](#custom-instances)\n- [Server Side Rendering](https://emotion.sh/docs/ssr#api)\n- [Babel Plugin](https://emotion.sh/docs/@emotion/babel-plugin)\n\n## Quick Start\n\nGet up and running with a single import.\n\n```bash\nnpm install --save @emotion/css\n```\n\n```javascript\nimport { css } from '@emotion/css'\n\nconst app = document.getElementById('root')\nconst myStyle = css`\n color: rebeccapurple;\n`\napp.classList.add(myStyle)\n```\n\n## API\n\n### css\n\nThe `css` function accepts styles as a template literal, object, or array of objects and returns a class name. It is the foundation of emotion.\n\n#### String Styles\n\n```jsx\n// @live\nimport { css } from '@emotion/css'\n\nconst color = 'darkgreen'\n\nrender(\n \n This has a hotpink background.\n \n)\n```\n\n#### Object Styles\n\n```jsx\n// @live\nimport { css } from '@emotion/css'\n\nconst color = 'darkgreen'\n\nrender(\n \n This has a hotpink background.\n \n)\n```\n\n#### Array of Object Styles\n\n```jsx\n// @live\nimport { css } from '@emotion/css'\n\nconst color = 'darkgreen'\nconst isDanger = true\n\nrender(\n \n This has a hotpink background.\n \n)\n```\n\n### Global Styles\n\n`injectGlobal` injects styles into the global scope and is useful for applications such as css resets or font faces.\n\n```jsx\nimport { injectGlobal } from '@emotion/css'\n\ninjectGlobal`\n * {\n box-sizing: border-box;\n }\n @font-face {\n font-family: 'Patrick Hand SC';\n font-style: normal;\n font-weight: 400;\n src: local('Patrick Hand SC'),\n local('PatrickHandSC-Regular'),\n url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2)\n format('woff2');\n unicode-range: U+0100-024f, U+1-1eff,\n U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f,\n U+A720-A7FF;\n }\n`\n```\n\n### Animation Keyframes\n\n`keyframes` generates a unique animation name that can be used to animate elements with CSS animations.\n\n**String Styles**\n\n```jsx\n// @live\nimport { css, keyframes } from '@emotion/css'\n\nconst bounce = keyframes`\n from, 20%, 53%, 80%, to {\n transform: translate3d(0,0,0);\n }\n\n 40%, 43% {\n transform: translate3d(0, -30px, 0);\n }\n\n 70% {\n transform: translate3d(0, -15px, 0);\n }\n\n 90% {\n transform: translate3d(0,-4px,0);\n }\n`\n\nrender(\n \n)\n```\n\n**Object Styles**\n\n```jsx\n// @live\nimport { css, keyframes } from '@emotion/css'\n\nconst bounce = keyframes({\n 'from, 20%, 53%, 80%, to': {\n transform: 'translate3d(0,0,0)'\n },\n '40%, 43%': {\n transform: 'translate3d(0, -30px, 0)'\n },\n '70%': {\n transform: 'translate3d(0, -15px, 0)'\n },\n '90%': {\n transform: 'translate3d(0, -4px, 0)'\n }\n})\n\nrender(\n \n)\n```\n\n### cx\n\n`cx` is emotion's version of the popular [`classnames` library](https://github.com/JedWatson/classnames). The key advantage of `cx` is that it detects emotion generated class names ensuring styles are overwritten in the correct order. Emotion generated styles are applied from left to right. Subsequent styles overwrite property values of previous styles.\n\n**Combining class names**\n\n```jsx\nimport { cx, css } from '@emotion/css'\n\nconst cls1 = css`\n font-size: 20px;\n background: green;\n`\nconst cls2 = css`\n font-size: 20px;\n background: blue;\n`\n\n
\n```\n\n**Conditional class names**\n\n```jsx\nconst cls1 = css`\n font-size: 20px;\n background: green;\n`\nconst cls2 = css`\n font-size: 20px;\n background: blue;\n`\n\nconst foo = true\nconst bar = false\n\n\n\n```\n\n**Using class names from other sources**\n\n```jsx\nconst cls1 = css`\n font-size: 20px;\n background: green;\n`\n\n\n```\n\n## Custom Instances\n\nWith `@emotion/css/create-instance`, you can provide custom options to Emotion's cache.\n\nThe main `@emotion/css` entrypoint can be thought of as a call to `@emotion/css/create-instance` with sensible defaults for most applications.\n\n```javascript\nimport createEmotion from '@emotion/css/create-instance'\n\nexport const {\n flush,\n hydrate,\n cx,\n merge,\n getRegisteredStyles,\n injectGlobal,\n keyframes,\n css,\n sheet,\n cache\n} = createEmotion()\n```\n\n### Upside\n\n- Calling it directly will allow for some low level customization.\n\n- Create custom names for emotion APIs to help with migration from other, similar libraries.\n\n- Could set custom `key` to something other than `css`\n\n### Downside\n\n- Introduces some amount of complexity to your application that can vary depending on developer experience.\n\n- Required to keep up with changes in the repo and API at a lower level than if using `@emotion/css` directly\n\n### Primary use cases\n\n- Using emotion in embedded contexts such as an `