{"_id":"@chancestrickland/bem-classnames","_rev":"2-e80271c2c0a9666ae9cdc8612dc734ed","name":"@chancestrickland/bem-classnames","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@chancestrickland/bem-classnames","version":"0.1.0","description":"A simple utility to manage BEM class names in JavaScript","author":{"name":"Chance Strickland","email":"hi@chancedigital.io"},"license":"MIT","main":"index.js","module":"es/index.js","scripts":{"build":"node build","watch":"watch -p \"src/**/*.js\" -c \"yarn build\"","test":"jest","clean":"rm -rf lib es umd index.js","precommit":"pretty-quick --staged","format":"prettier '**/*.js' --write","lint":"eslint src"},"keywords":["bem","classname","component","css","react","utility"],"devDependencies":{"@babel/cli":"^7.7.7","@babel/core":"^7.7.7","@babel/plugin-transform-runtime":"^7.7.6","@babel/preset-env":"^7.7.7","@babel/runtime":"^7.7.7","@chancedigital/eslint-config":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.13.0","@typescript-eslint/parser":"^2.13.0","babel-eslint":"10.x","eslint":"^6.8.0","eslint-plugin-import":"^2.19.1","eslint-plugin-jest":"^23.2.0","gzip-size":"^5.1.1","husky":"^3.1.0","jest":"^24.9.0","prettier":"^1.19.1","pretty-bytes":"^5.3.0","pretty-quick":"^2.0.1","rollup":"^1.27.14","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-replace":"^2.2.0","rollup-plugin-terser":"^5.1.3","watch-cli":"^0.2.3"},"repository":{"type":"git","url":"git+https://github.com/chancestrickland/bem-classnames.git"},"bugs":{"url":"https://github.com/chancestrickland/bem-classnames/issues"},"eslintConfig":{"extends":["@chancedigital","@chancedigital/eslint-config/jest","@chancedigital/eslint-config/typescript"]},"prettier":{"singleQuote":true,"trailingComma":"es5"},"jest":{"globals":{},"testRegex":".+\\.test\\.js$"},"publishConfig":{"access":"public"},"gitHead":"5effd20de1583d05bf0f741b7368953d085e5f39","homepage":"https://github.com/chancestrickland/bem-classnames#readme","_id":"@chancestrickland/bem-classnames@0.1.0","_nodeVersion":"12.13.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-M5n39TQOR6D51iNBTv527JCnCYGhJZOII115M0pA3uTsqdWAhmeOMxutrrfY9I/I/Plu7ftcsR1Nxv4WRCqrBg==","shasum":"33361cc5afd3c8df92cdb8ce8d0b3447c5f5852d","tarball":"https://registry.npmjs.org/@chancestrickland/bem-classnames/-/bem-classnames-0.1.0.tgz","fileCount":7,"unpackedSize":17897,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeCEylCRA9TVsSAnZWagAAV0YQAItkjAbycfmLiWJaciQR\n4M2HyhjEJDIw3IL8vBLBfdYP1qqe7toQbNS8aefF32xgK+PthKMft78vOauQ\nVyh31l46A9KNzRnz8JI2HAkcF9JC0xI7YV0FKS+CqyieSY4UWyJvRakyoZKm\nhPX6JcBNoGtDiwk01/Rt7tftlTdxkunLsvMIjjtvt96mZ+bJKy5n4pQNcZHr\n25ZOYgBYUoNf+iAKdAMIUrq1/MEkqbX4mUKsOl58gvpPAO88DT06PmiXQ1kK\ncNY2b5SbpGJNVCp9fIGsAB+U+2csBayVI6KNO5mZ3UMR6jBOycQwsBfII4jL\nhUw5ZtYP5ASbmL4PFHifh+3E227g6PmALcTvmEm303XwXxfOnLRrw0h7z97U\n9u6GAHSZAxwxX4OwAyZXpl42nGmQMIl+UDmoW0zVcZue/v8ZI0NTPRh+WBla\ng0rP3dR1esWH10buROrXa+8gtr6K+hO/QwpPXv3Uy7kigMNUOYC4euK0JKY7\nkuRUyD49ck5hruJczmmTEJCrvwGqqcb5+z1WAFq0J9vgAcU9WRImCBZRoSOQ\nP0p+sRXoyAGn1QanG/VUjxrrQVfiVYh80D852b9crD8XrMuivAE29aSz5YML\nc6kczGbS8QOaUzCLF/qO2cGGJUozv2LU/13krne71muK9QfLDJ5ozBoxU6RG\nZnaC\r\n=mw3e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCV09ozBrZtp90QKC3HouaPuU5bzVaDdESF+JCoXgLaaAIgYBgA8tk68UPFH0lxU2nmGHFy0deIt6Pa0NeWQGL/4JE="}]},"maintainers":[{"name":"chancestrickland","email":"chance.strickland@gmail.com"}],"_npmUser":{"name":"chancestrickland","email":"chance.strickland@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/bem-classnames_0.1.0_1577602213090_0.6972208087867695"},"_hasShrinkwrap":false},"0.1.1":{"name":"@chancestrickland/bem-classnames","version":"0.1.1","description":"A simple utility to manage BEM class names in JavaScript","author":{"name":"Chance Strickland","email":"hi@chancedigital.io"},"license":"MIT","main":"index.js","module":"es/index.js","scripts":{"build":"node build","watch":"watch -p \"src/**/*.js\" -c \"yarn build\"","test":"jest","clean":"rm -rf lib es umd index.js","precommit":"pretty-quick --staged","format":"prettier '**/*.js' --write","lint":"eslint src"},"keywords":["bem","classname","component","css","react","utility"],"devDependencies":{"@babel/cli":"^7.7.7","@babel/core":"^7.7.7","@babel/plugin-transform-runtime":"^7.7.6","@babel/preset-env":"^7.7.7","@babel/runtime":"^7.7.7","@chancedigital/eslint-config":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.13.0","@typescript-eslint/parser":"^2.13.0","babel-eslint":"10.x","chalk":"^3.0.0","eslint":"^6.8.0","eslint-plugin-import":"^2.19.1","eslint-plugin-jest":"^23.2.0","gzip-size":"^5.1.1","husky":"^3.1.0","jest":"^24.9.0","prettier":"^1.19.1","pretty-bytes":"^5.3.0","pretty-quick":"^2.0.1","rollup":"^1.27.14","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-replace":"^2.2.0","rollup-plugin-terser":"^5.1.3","watch-cli":"^0.2.3"},"repository":{"type":"git","url":"git+https://github.com/chancestrickland/bem-classnames.git"},"bugs":{"url":"https://github.com/chancestrickland/bem-classnames/issues"},"eslintConfig":{"extends":["@chancedigital","@chancedigital/eslint-config/jest","@chancedigital/eslint-config/typescript"]},"prettier":{"singleQuote":true,"trailingComma":"es5"},"jest":{"globals":{},"testRegex":".+\\.test\\.js$"},"publishConfig":{"access":"public"},"gitHead":"c9d95035c52647792f8bea7d56d53d5697e1faed","homepage":"https://github.com/chancestrickland/bem-classnames#readme","_id":"@chancestrickland/bem-classnames@0.1.1","_nodeVersion":"12.13.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-R6SW6SvzjmPdcAUiT7ff56Z5DgCaUAaGYoCpwJf+Al07fIp1Cxu4PKr4oCnRTC2g71Ok41gb4Wt4+/xtnCO0QA==","shasum":"75d7a0560ac75fe5df76d9e2a5e19547ae8b37f1","tarball":"https://registry.npmjs.org/@chancestrickland/bem-classnames/-/bem-classnames-0.1.1.tgz","fileCount":8,"unpackedSize":17312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeCkSPCRA9TVsSAnZWagAAnsgP/R5hET9SgdfTGRU9Uw6/\nMmL3P0SfKSUv353ykR/ONxcKPoWpoyi/x7MCXJz1AV5C3K+/ZP+XLKHdZ9Cd\nexjwOGP4igbFcC4KTDq73VjGdsyH9YZ+74Lv++enoBhBBwAPkhOmVHlTwHj9\n7X36LscKP1vKI+siHv7X8J7lCtRmUfYaA/QUXwl9yTK/PXW6tE2yEJxp5nw3\n/hZ10Qh+O+u6kO91iOHihhfaziejh59L9OKF3/d/4L/UKTgepudD62aKEnlm\njOsWMA+hUZawuTQId31C//eq7zPPpkGgk2ZHJaifbZ2rZUHMksHxREiVJP/3\n967LZmT+SGvWjRFsujohqBJb5IGfMvkqE2jtEr/5zOMOMqCQDUu6q3vQxQFC\nDbKVIe+M70aFRBAxksbOEJsSA89A6DnGEK4OoM+zo3dtNArK2Zd2p4lHoKUJ\nQNO2+9MprRc9LzpNV65V9kswa5HnYF5+R4JQfT00hQd5i0TfZvJkzKhdv1BZ\nVaNsTCcN5K047swXwThD/dMy1WsBb0mt4OBlQd4Ieto6SMhP/4dlQMMbGuSf\nDNG2hmlealyCP/5MuCkYq3vYr/Hi1/l3lrlcMcPDl+CzQsO0q9oZ+IsRYKIw\nW2J0Aat+FG5jXJZ7Ny3FTHiuSwsZ7mQAxgLjf9+yv/kJbMCaQB6TZKMtOhxV\nk6j+\r\n=IWW2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA/piwkuaKlKXYs9TTAtlFQa56W9MMG2jGEMxXvro1HIAiEA4v0S1RjN35/xQBoj2hGPhheQRlgSbPeu50eaW2ATGcw="}]},"maintainers":[{"name":"chancestrickland","email":"chance.strickland@gmail.com"}],"_npmUser":{"name":"chancestrickland","email":"chance.strickland@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/bem-classnames_0.1.1_1577731215350_0.4113620281641748"},"_hasShrinkwrap":false}},"time":{"created":"2019-12-29T06:50:13.009Z","0.1.0":"2019-12-29T06:50:13.246Z","modified":"2022-04-04T22:30:07.244Z","0.1.1":"2019-12-30T18:40:15.449Z"},"maintainers":[{"name":"chancestrickland","email":"chance.strickland@gmail.com"}],"description":"A simple utility to manage BEM class names in JavaScript","homepage":"https://github.com/chancestrickland/bem-classnames#readme","keywords":["bem","classname","component","css","react","utility"],"repository":{"type":"git","url":"git+https://github.com/chancestrickland/bem-classnames.git"},"author":{"name":"Chance Strickland","email":"hi@chancedigital.io"},"bugs":{"url":"https://github.com/chancestrickland/bem-classnames/issues"},"license":"MIT","readme":"# bem-classnames\n\n[![npm](https://img.shields.io/npm/v/bem-classnames.svg)](https://npmjs.org/package/bem-classnames)\n\nbem-classnames is a simple utility to manage BEM class names in JavaScript.\n\nInspired by [classnames](https://github.com/JedWatson/classnames).\n\n```sh\nnpm install bem-classnames\n```\n\n## Usage\n\n```js\nimport cx from '@chancestrickland/bem-classnames';\n\ncx(/* classes, [...props|className] */);\n```\n\n### Simple\n\n```js\nlet classes = {\n  name: 'button',\n  modifiers: ['color', 'block'],\n  states: ['disabled'],\n};\n\ncx(classes, { color: 'green', block: true }); // \"button button--green button--block\"\ncx(classes, { disabled: true }); // \"button is-disabled\"\ncx(classes, 'a b', ['c', 'd']); // \"button a b c d\"\n```\n\n### With a Custom Prefix\n\n```js\n// Default prefixes:\n//\n// cx.prefixes = {\n//   modifiers: '{name}--',\n//   states: 'is-'\n// };\n\ncx.prefixes.modifiers = '{name}-';\ncx(classes, { color: 'green' }); // \"button-green\"\n\n// You can add the prefixes\ncx.prefixes.foo = 'foo-';\nclasses.foo = ['a', 'b'];\ncx(classes, { a: true, b: true }); // \"button foo-a foo-b\"\n```\n\n### With React\n\n```js\nimport React from 'react';\nimport cx from 'bem-classnames';\n\nfunction Button({ children, className, ...props }) {\n  let classes = {\n    name: 'button',\n    modifiers: ['color', 'size'],\n    states: ['disabled'],\n  };\n\n  return (\n    <button className={cx(classes, props, className)} disabled={props.disabled}>\n      {children}\n    </button>\n  );\n}\n\nReact.render(\n  <Button color=\"green\" size=\"xl\" disabled={true} className=\"a b\">\n    Alo!\n  </Button>,\n  document.getElementById('example')\n);\n\n// \"button button--green button--xl is-disabled a b\"\n```\n\n### Managing the BEM Elements\n\n```js\nfunction Button({ children, className, ...props }) {\n  let classes = {\n    button: {\n      name: 'button',\n      modifiers: ['color', 'size'],\n      states: ['disabled'],\n    },\n    button__inner: {\n      name: 'button__inner',\n      modifiers: ['align'],\n    },\n  };\n\n  return (\n    <button className={cx(classes.button, props, className)}>\n      <span className={cx(classes.button__inner, props)}>{children}</span>\n    </button>\n  );\n}\n\nReact.render(\n  <Button color=\"green\" align=\"center\">\n    Alo!\n  </Button>,\n  document.getElementById('example')\n);\n\n// button -> \"button button--green\"\n// span -> \"button__inner button__inner--center\"\n```\n","readmeFilename":"README.md"}