{"bugs":{"url":"https://github.com/emotion-js/emotion/issues"},"dist":{"shasum":"de30f460a15fc2b293d3fdd4a207c37bc617d9e3","tarball":"https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-11.0.0-next.3.tgz","fileCount":25,"integrity":"sha512-ErmLv8soCdCQcP+6emRcmy8tX4eGxImjN7WRJ8UxuedgoYhTuJu8fwLKmCfekQLthS2OFOnZDoWipRi+9gG8HQ==","signatures":[{"sig":"MEUCIQCT6NtyjdnHlwPyXY39EfVkklmr4VMAmW+pAedsmSQw9wIgMQOCyf4wZ3iujXb7wGrZvCydtegkEWBm/B4xm9M5Jj8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":164629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxpL4CRA9TVsSAnZWagAAFFsQAJtk/wMmWbYCkfaawA7v\ndeTNePYyesHq91Z0Z4/Euty8nGFC5PElQ+AY3qxk31UM4+7mzIuXehwfvTAR\nfnh+2/UVMvOh3Ci4khNAQGB+igECuKyx2g8IvWURRIH8jJ1vNlBt9R9nNQCc\njUnU9ZZyCfMio+AHB2GWS2s1k1ioMw0eUlTGNOpEl3YRjiX4c1tvYEjDsCOY\nB3uyvr13s9f/yeYp2yk0pVQFxStVL6ANvYciyLu2d3UE483LKnJgDrlRCe0m\nWtjcSDxCDTZDf0Xtw7K6anFFhTAHsc73njc5Bzx91DVB66Xd8ltFGgBDupKD\nu0ISN0CbJCGx88qMz7o/tTeV+K18pA4OmzYJmf68S+u2PIEu3K8Z/zmASHq/\nloJWKcXG5FtEXrow+W/zuqqgP5KiPVh14gYjzMrryxtlFMsSp4MLA6vGk1aZ\nGt1rCEgeyOa+VRyOBIpMpmWLgHw7Y4aCgcX8vbCaJzNqTFHygFAHJahLNkli\nbec8wOa3lxM7ynBj2Bteq02ADXY/sUfyHdIFcOpBMvFHjvNU8/xHmNwY6RC2\nkZyOLB25YbK4g/YUvI5ggZ9MLrZTU+8NI9O4g4mtJtKekeZZgh1SsO6yTFQJ\noUFkJh08U4Pvn4TLOdfWkxICJLXi+R5HkzBJJT6Ojo3wiG7hyG9Vzxgv4eUR\nVG2B\r\n=qB6/\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":"^6.18.0","@babel/helper-module-imports":"^7.7.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.3_1573294839826_0.014412315905720119","host":"s3://npm-registry-packages"},"_id":"babel-plugin-emotion@11.0.0-next.3","version":"11.0.0-next.3"}