{"bugs":{"url":"https://github.com/emotion-js/emotion/issues"},"dist":{"shasum":"f755740e8ae80b1e6abaa46131ce0d4b5aec5402","tarball":"https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-11.0.0-next.4.tgz","fileCount":25,"integrity":"sha512-ODL7uC2FZgzutzvfRGjyyDcDpdLZ7qDZKyQy6tVa3S/HrJ+bqDYE+xQNXlNanoVUJJkC0TfLtu4gpt71wtRSJg==","signatures":[{"sig":"MEUCIQDn6+TU9BtWwGdgKTPGMxTC304AV8YbkiBtSfJ5ssUhyAIgDcRrPVl3fmgNZZIle/QJQssy6UtwwSS9l9cVqoelhjU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":164511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdy94vCRA9TVsSAnZWagAAnSoP/0v3y9WrAnLApKdnJSqG\nj6xICiIZJvXtyk2om4h1hH+4jvE8Vv+0k25Ff+QOIlFFp5HBqM6//sIqlYL6\n4tSIfe8hWjQvjJ9B1lLgUmWJxXbtqnfSB2Cv52nhMAJJpb0jloNMa9Bqt2vs\n+/nHKM8/dMzgP4yoktbDNtUUScDzZ7NYuJ1yvYOKXDMluOT/EXinvB/A63Sa\ngRkSf8kTdX+UdMupfnrHYS/XLFzwdgZ+zM01Tgr/Do5TZQ2C9vDTf8eHM/Oo\npwRMsly5RND6Lp9f3QitOWBdD8vF3iWfEDfBSgfcGr2MnFZFcAfd8nvuc6vz\nR6tU+j7rkYJsWLD/xSKP3HH65KgSC9lhwGXh88EHLgRX+OPVvxgVv75z1XVt\n9mRImgvHmiDIUNQ4A+ZOpzZsLF9OPp4QA3K1F4TAgRZpKf0DF+A0rna/VKKK\nabpyhPG9Ydkj9c9UKLx8HST85cuhGRmsFBFXD8pcv0HM6ZAMbE3pVmereM4b\nptcYESR/KcCeVgTUqWSHM2pkXQhGSku3ncHjt/gRDZhsyH//osR6h7wNA8iP\nybxIvKR38qJE7Nm2HaF01aosyTnxRcBelmEHpMOjI6QyHCiyXMNZKfSZtLvW\nMejC7WETrarelJdmtRHFo7YMJ4pUJlNUQRK4mdHfj6hyZpQvSIsj9eBaajC5\nPB/d\r\n=AjZS\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\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Feature/SyntaxNativeBabel Plugin RequiredNotes
css``✅
css(...)✅Generally used for object styles.
components as selectors✅Allows an emotion component to be used as a CSS selector.
Minification✅Any leading/trailing space between properties in your css and styled blocks is removed. This can reduce the size of your final bundle.
Dead Code Elimination✅Uglifyjs will use the injected /*#__PURE__*/ flag comments to mark your css and styled blocks as candidates for dead code elimination.
Source Maps✅When enabled, navigate directly to the style declaration in your javascript file.
Contextual Class Names✅Generated class names include the name of the variable or component they were defined in.
\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### `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### `importMap`\n\nThis option allows you to tell babel-plugin-emotion what imports it should look at to determine what it should transform so if you re-export Emotion's exports, you can still use the Babel transforms\n\nAn example config:\n\n```json\n{\n \"my-package\": {\n \"anotherExport\": {\n \"canonicalImport\": [\"@emotion/styled\", \"default\"],\n \"styledBaseImport\": [\"my-package/base\", \"anotherExport\"]\n }\n },\n \"some-package\": {\n \"someExport\": {\n \"canonicalImport\": [\"@emotion/core\", \"css\"]\n },\n \"thisIsTheJsxExport\": {\n \"canonicalImport\": [\"@emotion/core\", \"jsx\"]\n }\n }\n}\n```\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","@babel/runtime":"^7.7.2","@emotion/memoize":"0.7.3","@emotion/serialize":"^0.11.15-next.1","convert-source-map":"^1.5.0","babel-plugin-macros":"^2.0.0","escape-string-regexp":"^1.0.5","@babel/plugin-syntax-jsx":"^7.2.0","@babel/helper-module-imports":"^7.7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@babel/core":"^7.7.2","babel-check-duplicated-nodes":"^1.0.0"},"peerDependencies":{"@babel/core":"^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/babel-plugin-emotion_11.0.0-next.4_1573641775153_0.6331123834487158","host":"s3://npm-registry-packages"},"_id":"babel-plugin-emotion@11.0.0-next.4","version":"11.0.0-next.4"}