{"bugs":{"url":"https://github.com/emotion-js/emotion/issues"},"dist":{"shasum":"f83d0fa5ffdaad41d70fa7b69ba775318bed9dd4","tarball":"https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-11.0.0-next.1.tgz","fileCount":23,"integrity":"sha512-OABDBUxaIlJMh5aPKhvfn19AaIqOZI74AmqOlPOCzNZtUJ6xva8tUZ8TMSsSJXY0h7YaMn7VrEtMQsw/o92cnw==","signatures":[{"sig":"MEYCIQD3/nQr0VWre+gY7pRW0fnPB4GXq1/Np8/jPpunUhqbIQIhAORG64XqSchKB+rkUMnC9PE/wBJn3WAOkQkEfWJ8oQ0a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":151458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdwdrCCRA9TVsSAnZWagAAwb8P/0F6+960iZDvbuS9QkRS\nSw9ZSI4L9L+39uUZZEalDMI6ELlsh/W5upnnBwUg9ojowGzA1sc33zXjkDOq\nXaxVmBigIZfDzgFB8n9N6DLlMKr7pu2chmAn1rfdZMR2LIyvR1DVkK+KipFP\nzFEabKo9obh2HgsfLqduaqE4NpExG87TPErxKV9jRNOcDsY6ALjKiT4KLBLN\nqns92u3gf7BJnMHXCLb/gDbEvtRxaoboiEJGLYs1vitH8lEP7+lBXuCjHuE/\nDUmhLsAb516Ne7Xss6VJT3S8XGk1hCt7zB8pkUhQbvAnZDVR3qVD4F3SyINr\n8YIR/Krqs97HLeqGATcD8p4RYU+26o3bBF2i+DsGKfztWv24uDKDzzQRrdoF\n244+uy6n7XOX5kaIqgPZCnLxofL0lcJosqQY1T4F/ZaCz9y4eUGO3cgPNvir\nTM2xYrtXu8ZTmSfxnYubQAeDZTxNFrdS5dv5c/uAkGdCdcHlE/ChB6YFTELI\nVC5dxURarltbuEx4u2UPlBTettjBGypJo/yz/eSGosgQtxxkzOhFEveXl83z\nJPnItwr56FKmA+nGtsnBlohfsY6ntIQ2dhxMMAq820GPdEXq1wERLY6G9jro\np5nxDefMYiZrqZSgBR0H9OyjeoVAgsCZqraTYY0uy3H5/lukOcAAYmELdvQf\n18y4\r\n=kGSk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/babel-plugin-emotion.cjs.js","name":"babel-plugin-emotion","author":{"name":"Kye Hohenberger"},"module":"dist/babel-plugin-emotion.esm.js","readme":"# babel-plugin-emotion\n\n> Babel plugin for the minification and optimization of emotion styles.\n\n`babel-plugin-emotion` is highly recommended, but not required in version 8 and\nabove of `emotion`.\n\n## Features\n\n<table>\n  <thead>\n    <tr>\n      <th>Feature/Syntax</th>\n      <th>Native</th>\n      <th>Babel Plugin Required</th>\n      <th>Notes</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code>css``</code></td>\n      <td align=\"center\">✅</td>\n      <td align=\"center\"></td>\n      <td></td>\n    </tr>\n    <tr>\n      <td><code>css(...)</code></td>\n      <td align=\"center\">✅</td>\n      <td align=\"center\"></td>\n      <td>Generally used for object styles.</td>\n    </tr>\n    <tr>\n      <td>components as selectors</td>\n      <td align=\"center\"></td>\n      <td align=\"center\">✅</td>\n      <td>Allows an emotion component to be <a href=\"https://emotion.sh/docs/styled#targeting-another-emotion-component\">used as a CSS selector</a>.</td>\n    </tr>\n    <tr>\n      <td>Minification</td>\n      <td align=\"center\"></td>\n      <td align=\"center\">✅</td>\n      <td>Any leading/trailing space between properties in your <code>css</code> and <code>styled</code> blocks is removed. This can reduce the size of your final bundle.</td>\n    </tr>\n    <tr>\n      <td>Dead Code Elimination</td>\n      <td align=\"center\"></td>\n      <td align=\"center\">✅</td>\n      <td>Uglifyjs will use the injected <code>/*#__PURE__*/</code> flag comments to mark your <code>css</code> and <code>styled</code> blocks as candidates for dead code elimination.</td>\n    </tr>\n    <tr>\n      <td>Source Maps</td>\n      <td align=\"center\"></td>\n      <td align=\"center\">✅</td>\n      <td>When enabled, navigate directly to the style declaration in your javascript file.</td>\n    </tr>\n    <tr>\n      <td>Contextual Class Names</td>\n      <td align=\"center\"></td>\n      <td align=\"center\">✅</td>\n      <td>Generated class names include the name of the variable or component they were defined in.</td>\n    </tr>\n  </tbody>\n</table>\n\n## Example\n\n**In**\n\n```javascript\nconst myStyles = css`\n  font-size: 20px;\n  @media (min-width: 420px) {\n    color: blue;\n    ${css`\n      width: 96px;\n      height: 96px;\n    `};\n    line-height: 26px;\n  }\n  background: green;\n  ${{ backgroundColor: 'hotpink' }};\n`\n```\n\n**Out**\n\n```javascript\nconst myStyles = /* #__PURE__ */ css(\n  'font-size:20px;@media(min-width:420px){color:blue;',\n  /* #__PURE__ */ css('width:96px;height:96px;'),\n  ';line-height:26px;}background:green;',\n  { backgroundColor: 'hotpink' },\n  ';'\n)\n```\n\n## Installation\n\n```bash\nyarn add --dev babel-plugin-emotion\n```\n\nor if you prefer npm\n\n```bash\nnpm install --save-dev babel-plugin-emotion\n```\n\n## Usage\n\n### Via `.babelrc` (Recommended)\n\n**.babelrc**\n\nWithout options:\n\n```json\n{\n  \"plugins\": [\"emotion\"]\n}\n```\n\nWith options:\n\n_Defaults Shown_\n\n```js\n{\n  \"plugins\": [\n    [\n      \"emotion\",\n      {\n        // sourceMap is on by default but source maps are dead code eliminated in production\n        \"sourceMap\": true,\n        \"autoLabel\": process.env.NODE_ENV !== 'production',\n        \"labelFormat\": \"[local]\",\n        \"cssPropOptimization\": true\n      }\n    ]\n  ]\n}\n```\n\nRecommended Setup\n\n**.babelrc**\n\n```json\n{\n  \"plugins\": [\"emotion\"]\n}\n```\n\n### Via CLI\n\n```bash\nbabel --plugins babel-plugin-emotion script.js\n```\n\n### Via Node API\n\n```javascript\nrequire('@babel/core').transform('code', {\n  plugins: ['babel-plugin-emotion']\n})\n```\n\n## Options\n\n### `sourceMap`\n\n`boolean`, defaults to `true`.\n\nThis option enables the following:\n\n- Injected source maps for use in browser dev tools\n\n[**Documentation**](https://emotion.sh/docs/source-maps)\n\n> Note:\n>\n> Source maps are on by default in babel-plugin-emotion but they will be removed in production builds\n\n### `autoLabel`\n\n`boolean`, defaults to `process.env.NODE_ENV !== 'production'`.\n\nThis option enables the following:\n\n- Automatically adds the `label` property to styles so that class names\n  generated by `css` or `styled` include the name of the variable the result is\n  assigned to.\n- Please note that non word characters in the variable will be removed\n  (Eg. `iconStyles$1` will become `iconStyles1`) because `$` is not valid\n  [CSS ClassName Selector](https://stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors#449000)\n\n#### css\n\n**In**\n\n```javascript\nconst brownStyles = css({ color: 'brown' })\n```\n\n**Out**\n\n```javascript\nconst brownStyles = /*#__PURE__*/ css({ color: 'brown' }, 'label:brownStyles;')\n```\n\n`brownStyles`'s value would be `css-1q8eu9e-brownStyles`\n\n### `labelFormat`\n\n`string`, defaults to `\"[local]\"`.\n\nThis option only works when `autoLabel` is set to `true`. It allows you to\ndefine the format of the resulting `label`. The format is defined via string where\nvariable parts are enclosed in square brackets `[]`.\nFor example `labelFormat: \"my-classname--[local]\"`, where `[local]` will be replaced\nwith the name of the variable the result is assigned to.\n\nAllowed values:\n\n- `[local]` - the name of the variable the result of the `css` or `styled` expression is assigned to.\n- `[filename]` - name of the file (without extension) where `css` or `styled` expression is located.\n- `[dirname]` - name of the directory containing the file where `css` or `styled` expression is located.\n\nThis format only affects the label property of the expression, meaning that the `css` prefix and hash will\nbe prepended automatically.\n\n#### css\n\n**In**\n\n```javascript\n// BrownView.js\n// autoLabel: true\n// labelFormat: [filename]--[local]\nconst brownStyles = css({ color: 'brown' })\n```\n\n**Out**\n\n```javascript\nconst brownStyles = /*#__PURE__*/ css(\n  { color: 'brown' },\n  'label:BrownView--brownStyles;'\n)\n```\n\n`BrownView--brownStyles`'s value would be `css-hash-BrownView--brownStyles`\n\n#### styled\n\n**In**\n\n```javascript\nconst H1 = styled.h1({\n  borderRadius: '50%',\n  transition: 'transform 400ms ease-in-out',\n  boxSizing: 'border-box',\n  display: 'flex',\n  ':hover': {\n    transform: 'scale(1.2)'\n  }\n})\n```\n\n**Out**\n\n```javascript\nconst H1 = /*#__PURE__*/ styled('h1', {\n  label: 'H1'\n})({\n  borderRadius: '50%',\n  transition: 'transform 400ms ease-in-out',\n  boxSizing: 'border-box',\n  display: 'flex',\n  ':hover': {\n    transform: 'scale(1.2)'\n  }\n})\n```\n\n`H1`'s class name attribute would be `css-hash-H1`\n\n### `instances`\n\n`Array<string>`, defaults to\n\n```jsx\n;['emotion']\n```\n\nThis option allows `babel-plugin-emotion` to know which imports to treat as\nemotion imports and transform as such. This option is **only** required if you\nuse a custom instance of emotion created with `create-emotion` or you're\nimporting emotion from somewhere other than the paths above. Relative paths are\nresolved relative to `process.cwd()`(the current working directory).\n\n[**Documentation**](https://emotion.sh/docs/instances)\n\n### `cssPropOptimization`\n\n`boolean`, defaults to `true`.\n\nThis option assumes that you are using something to make `@emotion/core`'s `jsx` function work for all jsx. If you are not doing so and you do not want such optimizations to occur, disable this option.\n\n## Babel Macros\n\nInstead of using `babel-plugin-emotion`, you can use emotion with [`babel-plugin-macros`](https://github.com/kentcdodds/babel-plugin-macros). Add `babel-plugin-macros` to your babel config (which is included in Create React App 2.0) and use the imports/packages shown below.\n\n```jsx\nimport styled from 'react-emotion/macro'\nimport { css, keyframes, injectGlobal, flush, hydrate } from 'emotion/macro'\nimport css from '@emotion/css/macro'\nimport styled from '@emotion/styled/macro'\n```\n","license":"MIT","scripts":{"test:typescript":"exit 0"},"_npmUser":{"name":"emotion-release-bot","email":"mitchell+emotion-release-bot@hamil.town"},"homepage":"https://emotion.sh","keywords":["styles","emotion","react","css","css-in-js"],"repository":{"url":"https://github.com/emotion-js/emotion/tree/master/packages/babel-plugin-emotion","type":"git"},"_npmVersion":"6.10.2","description":"A recommended babel preprocessing plugin for emotion, The Next Generation of CSS-in-JS.","directories":{},"maintainers":[{"name":"emotion-release-bot","email":"mitchell+emotion-release-bot@hamil.town"},{"name":"mitchellhamilton","email":"mitchell@mitchellhamilton.me"},{"name":"tkh44","email":"kye.hohenberger@gmail.com"}],"_nodeVersion":"10.17.0","dependencies":{"find-root":"^1.1.0","source-map":"^0.5.7","@emotion/hash":"0.7.3","@emotion/memoize":"0.7.3","@emotion/serialize":"^1.0.0-next.0","convert-source-map":"^1.5.0","babel-plugin-macros":"^2.0.0","escape-string-regexp":"^1.0.5","babel-plugin-syntax-jsx":"^6.18.0","@babel/helper-module-imports":"^7.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"^6.26.3","babel-check-duplicated-nodes":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/babel-plugin-emotion_11.0.0-next.1_1572985538283_0.9942107584342119","host":"s3://npm-registry-packages"},"_id":"babel-plugin-emotion@11.0.0-next.1","version":"11.0.0-next.1"}