{"_id":"babel-plugin-short-css-vars","_rev":"31-55237132fb7326194f413a6cc91d513e","name":"babel-plugin-short-css-vars","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"babel-plugin-short-css-vars","version":"1.0.0","keywords":["babel","babel-plugin","css","variables","custom","properties","short","hash","name","shorten"],"author":{"name":"GoDaddy Operating Company, LLC"},"license":"MIT","_id":"babel-plugin-short-css-vars@1.0.0","maintainers":[{"name":"kinetifex","email":"andrew@kinetifex.com"}],"contributors":[{"name":"Andrew Gerard","email":"agerard@godaddy.com"}],"homepage":"https://github.com/godaddy/short-css-vars/packages/babel-plugin-short-css-vars#readme","bugs":{"url":"https://github.com/godaddy/short-css-vars/issues"},"dist":{"shasum":"a64b01059c2a909745bc9655faf8bc9918ada623","tarball":"https://registry.npmjs.org/babel-plugin-short-css-vars/-/babel-plugin-short-css-vars-1.0.0.tgz","fileCount":27,"integrity":"sha512-BGUSHZgucAl0l290DkZdBo61v1nTnTr7dFnnLhkL1xK7On334rYlWf/AThGaI2HhFKCm04lm7RbjuPEsimWadg==","signatures":[{"sig":"MEUCIF5v6FnDFO9CNGSHlydOAUNzW43upXSC6oMrhRx0OAEWAiEA3KoGt8J+vBXuSIb78RMN3Rj40V5OtwlFiWD+bp4ZgB4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGIcRCRA9TVsSAnZWagAAra8P/i9TKISvDDrhkRacnr/a\n7S61/woN8Ha99LHv/3/bMeJqne7xIkjsj9k38LDUI/AdlSGIRSQghNmdjAK/\nmf+tapUk1Vz/97i9qN+AI8nqLOAKSU+H0FL36Iz+XY6sG9RovzeMCnyljbGS\nwVs5KiPGhfwElbxvaAB+kfNzl02uygK2bSNj4FRYj8TK9u/mSGbGMkXMlgb6\nPAwq7NATdNAfpS88L5Vtu9/BmSHq4cyRz9lF40N0Qr1yY27mAtlzKlaS/SQ0\nUDQ60Jo8AKr8Psvc11xfs5XwW1imp58Y9cWzXd31yoVJUA9aetdsBEUp9Fqn\nFsCOFizbrYh2PWzgpDHnDaiyLXeDpKmMFeJGgyMuJYQ7msoHsURdSTDYuawQ\nO0tIVI4yoiXW+YgcSQQOY21XzwP6350Y3gfMvwLCZzZ2+vKJoMtOkjzyrVBt\nsUWQ6m4LQASFWeajrAq1/egvL7YubVXXWNv1xTK32Xb+mpvbxvgmehntoxUZ\nmVJiTUqPWlrLKzU7LoXq7RwW921ptNmg03MKfXtCoi9MKw1NGTGZTz3pD2ph\nbzJZrEgBiYF0dPASTCHkUCqacpMtQli902B6P5D2li3PTMErDyiGcY9cDmxI\n/sWnWTfEiv6bofs5oJYxKgAiSHikYC/3z/CRp6BNsk+AOOqC6EYLng0qogLh\n9yW3\r\n=W3qI\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testRegex":"./test/setup.js$"},"gitHead":"5a0023d93a1ff3b8fda737ad74e0d6e64a697e64","scripts":{"lint":"eslint .","test":"jest --coverage","lint:fix":"npm run lint -- --fix","posttest":"npm run lint"},"_npmUser":{"name":"kinetifex","email":"andrew@kinetifex.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/godaddy/short-css-vars.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v10.16.3+x64 (darwin)","description":"Optimization plugin to shorten the names of CSS variables","directories":{},"_nodeVersion":"10.16.3","dependencies":{"short-css-vars":"^1.0.0"},"eslintConfig":{"extends":"godaddy"},"eslintIgnore":["fixtures"],"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^26.1.0","react":"^16.13.1","eslint":"^7.4.0","eslint-plugin-json":"^2.1.1","eslint-plugin-mocha":"^7.0.1","eslint-config-godaddy":"^4.0.0","@babel/plugin-syntax-jsx":"^7.10.4","@babel/helper-plugin-test-runner":"^7.10.4"},"_npmOperationalInternal":{"tmp":"tmp/babel-plugin-short-css-vars_1.0.0_1595442960549_0.03809929210883656","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"babel-plugin-short-css-vars","version":"1.1.0","keywords":["babel","babel-plugin","css","variables","custom","properties","short","hash","name","shorten"],"author":{"name":"GoDaddy Operating Company, LLC"},"license":"MIT","_id":"babel-plugin-short-css-vars@1.1.0","maintainers":[{"name":"celiawaggoner","email":"cmwaggoner@gmail.com"},{"name":"decompil3d","email":"npm@jonathankeslin.com"},{"name":"elubin","email":"elubin@mit.edu"},{"name":"indexzero","email":"charlie.robbins@gmail.com"},{"name":"jh2oman","email":"jacobrwaterman@gmail.com"},{"name":"jpage","email":"jpage@godaddy.com"},{"name":"kinetifex","email":"andrew@kinetifex.com"},{"name":"kquerna","email":"kirsten@querna.org"},{"name":"rxmarbles","email":"rmarkins@gmail.com"},{"name":"salilagrawal","email":"agrwlsk@gmail.com"},{"name":"sbw","email":"silasbw@gmail.com"}],"contributors":[{"name":"Andrew Gerard","email":"agerard@godaddy.com"}],"homepage":"https://github.com/godaddy/short-css-vars/packages/babel-plugin-short-css-vars#readme","bugs":{"url":"https://github.com/godaddy/short-css-vars/issues"},"dist":{"shasum":"562c00e501e5d9b8b0e03a21787e2722cc9ff597","tarball":"https://registry.npmjs.org/babel-plugin-short-css-vars/-/babel-plugin-short-css-vars-1.1.0.tgz","fileCount":30,"integrity":"sha512-bBo6pp/y2A2S/K5z5ySwCjiCL8DT+2naZKreteA3HpG1DFGOM9n32O6rMHYyThnhfZXP6Wye2SdScwHBMAiywg==","signatures":[{"sig":"MEYCIQDhd56nd0GfaHfDwLjj0nMTxNWZjy/AhbNNTskQlYeOxAIhANUDmPffRSvcIxgULF5hR+7/2LGgZNt5+0vR3kHI2Wht","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTr81CRA9TVsSAnZWagAAFOQP/2rDd+dcD0U1JOIcRklB\nETEGBSexrhYYUQlTB6OQ8lHOVLNSvzIHYXN1WSD1GcRdxduiqmbffqgRlmeb\nNRIbdTB/T3oRHW1BB1eiqOeWOwHwWjbPbY5CFn4XWpsza0LyVV4cQ8CrHhaV\nZj63/ygqNdUyUYzGhADvQUOodueoU5XHvzlZQ/eC4ECf6zS4ap8i4a2WHShG\nugboKIV6HcrsqJSa79LbAkHuKCSOqY529IGKkl1pF8T2WWPGsjAqsTOo4rdL\nQPn3ES6x/FFc48LN9mFD0RWzwq0QLE4Y8FCOgfE59gJ/ANJIUK4jsh17B7Cu\nuSbu61/dQd9+I60dxe/U37zDjKlyvI9DXoRVdzwHzGuQ0eVfKGWQlphVAkph\nRhCB4qLmOpzkgoZm1O6wLmnEGKQG6xcfmfTQ/cRy/nV6ntncXFZzVqzvzSUs\nnlwmctHrPnUtMRC2yS3D1u2Tfyu6Ft68uFcNl1QSbL8WR+G6hQY9mVjHvDqd\ncCToNEYgz3eHqpnRoyq8Kff9KfM9p4FxWl++EYakQXN5J/+S3OPAmt4AHo6D\nOwj6SRZ+dFYAOtX1CcjbjyZRIZeuWXF/EfqvFw+U9I86B3/kKvfMhPWxMBnx\n6bdgVWaM/7/0t1GjdyD5FtaBqUbcuLUv6nGHmZPRywgExgfmmY3jXHlKSbmZ\n8MHe\r\n=oXds\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testRegex":"./test/setup.js$"},"gitHead":"e2c069d4ecb8d7624df8b60fe68841093cd52368","scripts":{"lint":"eslint .","test":"jest --coverage","lint:fix":"npm run lint -- --fix","posttest":"npm run lint"},"_npmUser":{"name":"kinetifex","email":"andrew@kinetifex.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/godaddy/short-css-vars.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (darwin)","description":"Optimization plugin to shorten the names of CSS variables","directories":{},"_nodeVersion":"12.18.3","dependencies":{"short-css-vars":"^1.1.0"},"eslintConfig":{"extends":"godaddy"},"eslintIgnore":["fixtures"],"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^26.1.0","react":"^16.13.1","eslint":"^7.4.0","eslint-plugin-json":"^2.1.1","eslint-plugin-mocha":"^7.0.1","eslint-config-godaddy":"^4.0.0","@babel/plugin-syntax-jsx":"^7.10.4","@babel/helper-plugin-test-runner":"^7.10.4"},"_npmOperationalInternal":{"tmp":"tmp/babel-plugin-short-css-vars_1.1.0_1598996277052_0.7277121333368022","host":"s3://npm-registry-packages"}}},"time":{"created":"2020-07-22T18:36:00.518Z","modified":"2025-10-06T15:57:21.713Z","1.0.0":"2020-07-22T18:36:00.706Z","1.1.0":"2020-09-01T21:37:57.239Z"},"bugs":{"url":"https://github.com/godaddy/short-css-vars/issues"},"author":{"name":"GoDaddy Operating Company, LLC"},"license":"MIT","homepage":"https://github.com/godaddy/short-css-vars/packages/babel-plugin-short-css-vars#readme","keywords":["babel","babel-plugin","css","variables","custom","properties","short","hash","name","shorten"],"repository":{"url":"git+https://github.com/godaddy/short-css-vars.git","type":"git"},"description":"Optimization plugin to shorten the names of CSS variables","contributors":[{"name":"Andrew Gerard","email":"agerard@godaddy.com"}],"maintainers":[{"email":"jpage@godaddy.com","name":"jpage"},{"email":"igor-brandao@outlook.com","name":"ibrandao"},{"email":"andrew@kinetifex.com","name":"kinetifex"},{"email":"rmarkins@gmail.com","name":"rxmarbles"},{"email":"kirsten@querna.org","name":"kquerna"},{"email":"npmjs@3rd-Eden.com","name":"3rdeden"},{"email":"jcrugzz@gmail.com","name":"jcrugzz"},{"email":"jeremiah@gowdy.me","name":"jgowdy"},{"email":"martijn@swaagman.online","name":"swaagie"},{"email":"jpina1@godaddy.com","name":"jpina1-godaddy"},{"email":"mmason2@godaddy.com","name":"mmason2"},{"email":"sgore@godaddy.com","name":"sgore-godaddy"},{"email":"rmarkins@godaddy.com","name":"rmarkins"},{"email":"wcole1@godaddy.com","name":"wcole1-godaddy"}],"readme":"# babel-plugin-short-css-vars\n\n[![NPM Version](https://img.shields.io/npm/v/babel-plugin-short-css-vars?style=flat-square)](https://www.npmjs.com/package/babel-plugin-short-css-vars)\n[![Build Status](https://img.shields.io/circleci/build/gh/godaddy/short-css-vars?style=flat-square)](https://circleci.com/gh/godaddy/short-css-vars)\n[![License MIT](https://img.shields.io/github/license/godaddy/short-css-vars?style=flat-square)](LICENSE.md)\n\nBabel plugin using [short-css-vars] to shorten the names of CSS variables in\nJavaScript code.\n\nCSS variables are renamed with a unique hash that is consistent across processed\nfiles. This allows you to have common style files that reference variables with\nvarying values defined in theme files.\n\n## Installation\n\n```\n$ npm install babel-plugin-short-css-vars --save-dev\n```\n\n## Example\n\n**Input**\n\n```js\nconst sheet = document.createElement('style');\nsheet.innerHTML = `\n:root { --long-variable-name-that-defines-a-particular-color: blue; }\n`;\n\nconst div = document.createElement('div');\ndiv.style.color = \"var(--long-variable-name-that-defines-a-particular-color)\";\n```\n\n**Output**\n\n```js\nconst sheet = document.createElement('style');\nsheet.innerHTML = `\n:root { --vf2dsn: blue; }\n`;\n\nconst div = document.createElement('div');\ndiv.style.color = \"var(--vf2dsn)\";\n```\n\nThis plugin also works with JSX/React source.\n\n## Usage\n\n```json\n{\n  \"plugins\": [\n    \"babel-plugin-short-css-vars\"\n  ]\n}\n```\n\nSee the [babel docs] for more configuration details.\n\n### Options\n\nThis plugin supports all the [utility options]. Because these options will need\nto be a RegExp or function, the Babel config willl need to be a\n[JavaScript configuration file].\n\n#### formatter\n\nSee the utility for how the [default formatting] works. If you wish to use a\ndifferent pattern, simply provide a different formatter function via options.\n\n```js\n// babel.config.js\nconst fnv1a = require('fnv1a');\n\nmodule.exports = {\n  \"plugins\": [\n    [\n      \"babel-plugin-short-css-vars\",\n      {\n        formatter: name => fnv1a(name).toString(36)\n      }\n    ]\n  ]\n}\n```\n\nThe `name` provided to the formatter is the variable name WITHOUT the '--'\nprefix. The return value should also be name-only. So `my-custom-var` rather\nthan `--my-custom-var`.\n\n#### ignore\n\nIf you need to avoid hashing certain variable names, you can ignore them with\nthis option by either RegExp, function, or string (which will be turned into\nRegExp). This can be useful if you are referencing CSS Variables in an app,\nyet you do not have control over some of the declarations.\n\n```js\n// babel.config.js\nmodule.exports = {\n  \"plugins\": [\n    [\n      \"babel-plugin-short-css-vars\",\n      {\n        ignore: /^third-party-theme/\n      }\n    ]\n  ]\n}\n```\n\nIn another scenario, if you have several short variable names (for example\n`--blue`) you can use a function to ignore names by length.\n\n```js\npostcss([shortCssVars({\n  ignore: name => name.length <= 4\n})])\n```\n\nThe `name` provided to ignore is the variable name WITHOUT the '--' prefix. So\n`blue` rather than `--blue`.\n\n<!-- LINK -->\n\n[short-css-vars]:../short-css-vars/README.md\n[default formatting]:../short-css-vars/README.md#formatting\n[utility options]:../short-css-vars/README.md#new-shortcssvarsoptions\n[babel docs]:https://babeljs.io/docs/en/configuration\n[JavaScript configuration file]:https://babeljs.io/docs/en/configuration#javascript-configuration-files\n\n","readmeFilename":"README.md"}