{ "manifest": { "name": "@emotion/babel-plugin", "version": "11.13.5", "description": "A recommended babel preprocessing plugin for emotion, The Next Generation of CSS-in-JS.", "main": "dist/emotion-babel-plugin.cjs.js", "module": "dist/emotion-babel-plugin.esm.js", "exports": { ".": { "types": { "import": "./dist/emotion-babel-plugin.cjs.mjs", "default": "./dist/emotion-babel-plugin.cjs.js" }, "module": "./dist/emotion-babel-plugin.esm.js", "import": "./dist/emotion-babel-plugin.cjs.mjs", "default": "./dist/emotion-babel-plugin.cjs.js" }, "./package.json": "./package.json" }, "files": [ "src", "lib", "dist" ], "dependencies": { "@babel/helper-module-imports": "^7.16.7", "@babel/runtime": "^7.18.3", "@emotion/hash": "^0.9.2", "@emotion/memoize": "^0.9.0", "@emotion/serialize": "^1.3.3", "babel-plugin-macros": "^3.1.0", "convert-source-map": "^1.5.0", "escape-string-regexp": "^4.0.0", "find-root": "^1.1.0", "source-map": "^0.5.7", "stylis": "4.2.0" }, "devDependencies": { "@babel/core": "^7.18.5", "babel-check-duplicated-nodes": "^1.0.0" }, "author": { "name": "Kye Hohenberger" }, "homepage": "https://emotion.sh/", "license": "MIT", "repository": { "type": "git", "url": "https://github.com/emotion-js/emotion/tree/main/packages/babel-plugin" }, "keywords": [ "styles", "emotion", "react", "css", "css-in-js" ], "bugs": { "url": "https://github.com/emotion-js/emotion/issues" }, "_registry": "npm", "_loc": "/home/josie/.cache/yarn/v6/npm-@emotion-babel-plugin-11.13.5-integrity/node_modules/@emotion/babel-plugin/package.json", "readmeFilename": "README.md", "readme": "# @emotion/babel-plugin\n\n> Babel plugin for the minification and optimization of emotion styles.\n\n`@emotion/babel-plugin` 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 @emotion/babel-plugin\n```\n\nor if you prefer npm\n\n```bash\nnpm install --save-dev @emotion/babel-plugin\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\": \"dev-only\",\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 @emotion/babel-plugin script.js\n```\n\n### Via Node API\n\n```javascript\nrequire('@babel/core').transform('code', {\n plugins: ['@emotion/babel-plugin']\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 @emotion/babel-plugin but they will be removed in production builds\n\n### `autoLabel`\n\n`'dev-only' | 'always' | 'never'`, defaults to `dev-only`.\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\nEach possible value for this option produces different output code:\n\n- with `dev-only` we optimize the production code, so there are no labels added there, but at the same time we keep labels for development environments,\n- with `always` we always add labels when possible,\n- with `never` we disable this entirely and no labels are added.\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 `'dev-only'` or `'always'`. 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: 'dev-only'\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/react`'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 @emotion/babel-plugin 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 file:\n\n```js\nimport { anotherExport } from 'my-package'\nimport { someExport, thisIsTheJsxExport } from 'some-package'\n```\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/react\", \"css\"]\n },\n \"thisIsTheJsxExport\": {\n \"canonicalImport\": [\"@emotion/react\", \"jsx\"]\n }\n }\n}\n```\n\n## Babel Macros\n\nInstead of using `@emotion/babel-plugin`, 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 {\n css,\n keyframes,\n injectGlobal,\n flush,\n hydrate\n} from '@emotion/css/macro'\nimport { jsx, css, Global, keyframes } from '@emotion/react/macro'\nimport styled from '@emotion/styled/macro'\n```\n", "licenseText": "MIT License\n\nCopyright (c) Emotion team and other contributors\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, "artifacts": [], "remote": { "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz", "type": "tarball", "reference": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz", "hash": "", "integrity": "sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==", "registry": "npm", "packageName": "@emotion/babel-plugin", "cacheIntegrity": "sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ== sha1-6rjWXb3tdODs/SjcIY51YHxOe8A=" }, "registry": "npm", "hash": "a711c2a53d9ec7ed2af871fdd7fcec747930fe55dde3af0320ddb3bdfbcbb4f28b2cca3a8108fba0b39babc3e192bc4e65bfe0182ab4dd2dd9ecf0e14bca5db9" }