{"_id":"classier-react","_rev":"36-41445ce82aa32455009e98a62b268ced","name":"classier-react","dist-tags":{"latest":"1.0.0-alpha.9","next":"1.0.0-next.5"},"versions":{"1.0.0-alpha.0":{"name":"classier-react","version":"1.0.0-alpha.0","description":"Use stylesheets for styles, not Javascript","keywords":["react","classnames","styles","just","use","css"],"homepage":"https://github.com/d3dc/classier-react","bugs":{"url":"git+https://github.com/d3dc/classier-react"},"license":"ISC","files":["dist"],"main":"dist/classier-react.cjs.js","module":"dist/classier-react.esm.js","repository":{"type":"git","url":"git+https://github.com/d3dc/classier-react.git"},"scripts":{"build":"NODE_ENV=production npm run clean && rollup -c","clean":"npm run clean:dist & npm run clean:build","clean:build":"npx rimraf build","clean:dist":"npx rimraf dist"},"browser":"dist/classier-react.umd.js","devDependencies":{"babel-core":"^6.26.3","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","react":"^16.4.2","rollup":"^0.62.0","rollup-plugin-babel":"^3.0.7","rollup-plugin-uglify":"^3.0.0","uglify-es":"^3.3.9"},"peerDependencies":{"react":"^16.0.0"},"authors":["Sam Richard (https://github.com/d3dc)"],"gitHead":"ceb3d564642532b4c9188f852087b683433bf48c","_id":"classier-react@1.0.0-alpha.0","_npmVersion":"6.2.0","_nodeVersion":"10.5.0","_npmUser":{"name":"d3dc","email":"sam.richard@gmail.com"},"dist":{"integrity":"sha512-d7X05rdO1GJDjzQw+4+3HD7nkNv8L1NFHk//GT8VMPZCxIvjGPs3qQ7jE5UuIngmgJPR4rRvvsj4m2Cg5KMlwg==","shasum":"4acd45cd62bea86b0fca3c915471aea6ea85fec0","tarball":"https://registry.npmjs.org/classier-react/-/classier-react-1.0.0-alpha.0.tgz","fileCount":8,"unpackedSize":14489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbYmEOCRA9TVsSAnZWagAAYr0P/2SNq+75Rg0dOppLhs++\nqXXI/LdLQFR0mYVR4+edHjrOXGKpE6It3y04dNW0qEJ4mSYEGrmzEe2tbp1G\nM5mDCyMKF1ou2OjXXSM9EqAoxFNMPrmyA+hayXm6Vh4eSVFE8jdULzl57F9o\npn7yJtCQfvaWhTojn7rdzZK7QSnFfLAhSVpIGWwcVOau98shGV/gNeArytUc\n/uyTHEHcZocgpvLiLQcu/lnYqO3+VpCWeBGytmcEwq2omRh24ww0EdRYmofM\ngqzJ/q2r88MzZDRLRWTB55wyaDgyP0QV3Xe5IxhuyGYLbBGS14y4yN7FWcTb\nPmVR9wxDqf0aLzfiHmFr3T3t/JGceEbLs74aqvdORRrlhU8VOqRqkVpzGw7R\n1LT2Dp6T4Kf9R0hEnzG7oTQshIZy2+GbS9N8F6Vd7PpduHxd9DZR3iKlbIuF\nGP3MpGhuNhLIeomp4zFkaagId/qcx1/Y6cihvGq4VZeHFwUPgd7e3YANBHZC\nUs8116w3EbTGzcn/2TypBNWz9e+VKfn4JSriJ8I4YTnrXMWy3pvnyu7xXeTm\ngJ5wO0ouTjDbO2OFcXdSclzRmeAmWkPyffIVgVCYwN//xWxM4Nb7Bl2ppGfj\nG4dS2Xr7EVeCY8ZrT5HLA90JyCrdGhRs1UofZG1VpwPsP7JuR6AEg9HvmQp7\nIIn2\r\n=fVme\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCf3ZyJCmfEuTsc4tnHqDExLWJ7NRzDHkd4+Tf77QlMHgIgREssesizeBpgyqmIl1oVSg/Tnxg0f5MesFYs4yx+P9I="}]},"maintainers":[{"name":"d3dc","email":"sam.richard@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classier-react_1.0.0-alpha.0_1533174029594_0.7812111463832372"},"_hasShrinkwrap":false,"deprecated":"this version has been deprecated"},"1.0.0-alpha.8":{"name":"classier-react","version":"1.0.0-alpha.8","description":"Use stylesheets for styles, not Javascript","keywords":["react","classnames","styles","just","use","css"],"homepage":"https://github.com/d3dc/classier-react","bugs":{"url":"git+https://github.com/d3dc/classier-react/issues"},"license":"ISC","main":"dist/classier-react.cjs.js","module":"dist/classier-react.esm.js","browser":"dist/classier-react.umd.js","files":["dist"],"repository":{"type":"git","url":"git+https://github.com/d3dc/classier-react.git"},"scripts":{"test":"NODE_ENV=development jest","build":"npm run clean && npm test && NODE_ENV=production rollup -c","clean":"npm run clean:dist & npm run clean:build","clean:build":"npx rimraf build","clean:dist":"npx rimraf dist"},"jest":{"testEnvironment":"node"},"devDependencies":{"babel-core":"^6.26.3","babel-jest":"^23.4.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","jest":"^23.4.2","react":"^16.4.2","regenerator-runtime":"^0.12.1","rollup":"^0.62.0","rollup-plugin-babel":"^3.0.7","rollup-plugin-uglify":"^3.0.0","uglify-es":"^3.3.9"},"peerDependencies":{"react":"^16.0.0"},"authors":["Sam Richard (https://github.com/d3dc)"],"gitHead":"7fb649506a19cbddacc7ca54e279623fd2e3c4e8","_id":"classier-react@1.0.0-alpha.8","_npmVersion":"6.2.0","_nodeVersion":"10.5.0","_npmUser":{"name":"d3dc","email":"sam.richard@gmail.com"},"dist":{"integrity":"sha512-xQCpMjd5L1D1bouuTVrugTvJo6DXRRaK0/FNL/KaOO1D7udUt//Xiyv/7eJbeReM4+0CUOwxvp0PMJ6mPhTWZg==","shasum":"d2f61675afc0e57088246d79683026730e198905","tarball":"https://registry.npmjs.org/classier-react/-/classier-react-1.0.0-alpha.8.tgz","fileCount":8,"unpackedSize":21035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbZmArCRA9TVsSAnZWagAAG0kP/0MfuacZf+ybkNxY82MZ\nHYW53OWzCfz15aV0GyJ9EDlmcJ8EaWDNOXc9sXAGSZ2o5sM6lnQVMb3fGATD\nNbhOJ6b+6FKrBufyAbS09XuwfnvYJswnXAiDhNEkVzwG4Fvf159Fvq/51jFW\nazDteuhmGiTI0BgWNISVL9ifKVEt8cx7LqFipUtBh/XYmtk4WXZw+q1CNeah\n4c+15vcuNm8pLDBoeIgq3Tr5CLhmEJS5DJeneUyyjDo7AolRHh6tF2qOR5jP\nhVJsCDDOxJ/eUrpVY5HZLy/6Df9jm0pvdaGFQy+ehq80XceJAea/0/PbsciD\ng7p5/uKGD3DM/0l9eip4f4eccGrKuVq8vcGGqZrGcz2cwNlar19ZhEPs7V46\n9DxtyWegkWfHBHTCkb7TXNVdwUdSQvbN50LLPPiMWPwO17aYFjQbSCXP5ZS3\n5cl+g8X+4muArwPht8WtKj4yFHGLrAlhmO6pJ2YpMc/R8CeYOoQF8rWDVoJM\nXdXnL1IC/R3NCXrRGv47FgBGyd/bMSxitJ5Q9swtrSDJ577pbW1uSViHVCTn\n1NOIkoe4V5LTbU+hQMfkDDsDuncASUp6fF+tHuRUxvTybsdyeuW647bwcfgH\nhKtSXaLd2W4FF33xmhZsdNZlErremdLsEQS8fDWrVGzEDCbQzoiKVsm9Qsj0\nxAXk\r\n=2fqQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDf86PV21z0jVAyftGbEUodfiJ4o7mVBv+VgoLTiOfuWgIhAJo1EmAfFwurTR1gAxoEGZoc45fT1Y/8dgLPnm2jdOGZ"}]},"maintainers":[{"name":"d3dc","email":"sam.richard@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classier-react_1.0.0-alpha.8_1533435946749_0.5603402602497645"},"_hasShrinkwrap":false},"1.0.0-alpha.9":{"name":"classier-react","version":"1.0.0-alpha.9","description":"Use stylesheets for styles, not Javascript","keywords":["react","classnames","styles","just","use","css"],"homepage":"https://github.com/d3dc/classier-react","bugs":{"url":"git+https://github.com/d3dc/classier-react/issues"},"license":"ISC","main":"dist/classier-react.cjs.js","module":"dist/classier-react.esm.js","browser":"dist/classier-react.umd.js","files":["dist"],"repository":{"type":"git","url":"git+https://github.com/d3dc/classier-react.git"},"scripts":{"test":"NODE_ENV=development jest","build":"npm run clean && npm test && NODE_ENV=production rollup -c","clean":"npm run clean:dist & npm run clean:build","clean:build":"npx rimraf build","clean:dist":"npx rimraf dist"},"jest":{"testEnvironment":"node"},"devDependencies":{"babel-core":"^6.26.3","babel-jest":"^23.4.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","jest":"^23.4.2","react":"^16.4.2","regenerator-runtime":"^0.12.1","rollup":"^0.62.0","rollup-plugin-babel":"^3.0.7","rollup-plugin-uglify":"^3.0.0","uglify-es":"^3.3.9"},"peerDependencies":{"react":"^16.0.0"},"authors":["Sam Richard (https://github.com/d3dc)"],"gitHead":"f023fc5faf7d2595f66920c2734a7dc2482e1107","_id":"classier-react@1.0.0-alpha.9","_npmVersion":"6.2.0","_nodeVersion":"10.5.0","_npmUser":{"name":"d3dc","email":"sam.richard@gmail.com"},"dist":{"integrity":"sha512-7OvZbeSnsPkdh4Oz8hOxP575UK094el3cl4Rnl5yOrDIDyCIS7n6KgEyuTlErPvA8X0lCpHT4T7XbwWlktb4Sw==","shasum":"0884e03156be8cf2204090f404e1be43ebef543e","tarball":"https://registry.npmjs.org/classier-react/-/classier-react-1.0.0-alpha.9.tgz","fileCount":9,"unpackedSize":24009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbZ7l7CRA9TVsSAnZWagAAupEP/3YekQiGvYSavMp/zs9d\nfgmmvn+wKC/9T6YD9BlM5n4Hyxr5o8ef+iLaXB1qbu3b1pqX85txh0Sre7q0\n/3gliezXrY8gB6h00BcPABOpf36gYNrdoC4YQrglWiyVxzRuLoDoYa5CVRYw\nahUfTu59zGNroMVk31B8kk5qcdFH0nhzOZzdtz7QtWS8o0VM7LdX9g8Ur4gf\nX9MARzLbgZ/TOYy84aI3P7KWkXXI6cLLsXv0pCOWvUmWR1nXNWHtt2hGw08A\nokLJc6ACYdJe7WlYsMT3W6JOsUApmi9Xq3xqat3N1r6GlqCtgvszFrVbaGBk\nooB/0i/IXa5G5VTTrRJ8X5OLmMTALsjVUVtaXU/nbT4u4gQXigvQD0bRbjzQ\npI2p0ucXTronUA8q6hVm8RAEOF4o0IEXCy52F+euuFZPRAvhMKbMV9VAUfIy\nD4nQLFOT7MYpgdp3gzAjuNvbAdMV6r2W+t1CqIFX3Rt4DbL9ctRGMU7/C9t/\nCTGIhBb1rbbtwDQkyTvyZbSfz0dPgrTgWb3sXrRylvzrAoRehmHMuLvr+pa3\nzchjG9XtnRXkR0trwvjCpl9v6S/s6ajRxotz0q+I+EBugpcWIq1x17Tcc871\n5rEHV/cicxTbKVvZ95HDLk+5biWH5HC2OKrSrsIbcn4T5NVSStzSrSVI0bJQ\n2OjA\r\n=8Xyl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA+J7w0zN7uCJ/7whFccD9wkztiLZcpFgaqCCNRF8SDkAiEA37hyJZOSKyFG+fPAReMRrOMLO1qq1ly1D7gsW2ATlSg="}]},"maintainers":[{"name":"d3dc","email":"sam.richard@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classier-react_1.0.0-alpha.9_1533524346381_0.670818817231829"},"_hasShrinkwrap":false},"1.0.0-next.0":{"name":"classier-react","version":"1.0.0-next.0","publishConfig":{"tag":"next"},"description":"Use stylesheets for styles, not Javascript","keywords":["react","classnames","styles","just","use","css"],"homepage":"https://github.com/d3dc/classier-react","bugs":{"url":"git+https://github.com/d3dc/classier-react/issues"},"license":"ISC","main":"dist/classier-react.cjs.js","module":"dist/classier-react.esm.js","browser":"dist/classier-react.umd.js","files":["dist"],"repository":{"type":"git","url":"git+https://github.com/d3dc/classier-react.git"},"scripts":{"test":"NODE_ENV=development jest","release":"release-it","build":"npm run clean && npm test && NODE_ENV=production rollup -c","clean":"npm run clean:dist & npm run clean:build","clean:build":"npx rimraf build","clean:dist":"npx rimraf dist"},"jest":{"testEnvironment":"node"},"devDependencies":{"babel-core":"^6.26.3","babel-jest":"^23.4.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","jest":"^23.4.2","react":"^16.4.2","regenerator-runtime":"^0.12.1","release-it":"^7.5.0","rollup":"^0.62.0","rollup-plugin-babel":"^3.0.7","rollup-plugin-uglify":"^3.0.0","uglify-es":"^3.3.9"},"peerDependencies":{"react":"^16.0.0"},"authors":["Sam Richard (https://github.com/d3dc)"],"readme":"# 🎩 Classier React 🥂\n![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/classier-react.svg)\n![npm (tag)](https://img.shields.io/npm/v/classier-react.svg)\n[![Build Status](https://travis-ci.com/d3dc/classier-react.svg?branch=master)](https://travis-ci.com/d3dc/classier-react)\n![npm](https://img.shields.io/npm/l/classier-react.svg)\n\n\n\n\nWe keep putting styles in Javascript. We've developed these rather awesome and complex toolchains to have tools like [Rebass](jxnblk/rebass). But most browser apps don't need an alternative to CSS, and without it, styles aren't re-used and they don't _cascade_!\n\nAwesome style libraries already exist for browsers, its just awkward to make use of them when you're writing react. Cramming everything into that `className` string feels wrong.\n\n`classier-react` solves the problem by simply translating from props to CSS classes. Its not generating code and its not pushing the browser to its limits.\n\n```jsx\nconst Button = props =>\n \n```\n\nThink of it like weaponized `classnames`.\n\n## Install\n\n```\nnpm install classier-react\n```\n\n## Getting started\n\nYou'll have to have configured your build toolchain with a style loader and have added some styles to use the tool. This usually isn't very much setup. \n\nSee the [TailwindCSS Recipe](docs/recipes/tailwindcss.md) for an example configuration thats one of the more complicated.\n\n\n## Usage\n_Note: This example uses utility classes from [TailwindCSS](https://tailwindcss.com/docs/)._\n\nYou'll define your presentational components:\n\n```jsx\nimport { Box, Comp } from 'classier-react'\n\nconst Card = props => (\n \n)\n\nconst CardHeroImage = ({ src, ...rest }) => (\n \n \n \n)\n\nconst CardTitle = ({ size = 5, ...rest }) => (\n \n)\n\nconst CardBody = props => \n```\n\nAnd then consume them as usual:\n\n```jsx\n\n \n So Classy\n Lorem ipsum...\n\n```\n\n## Translation to style names\n\nUnder the hood, `classier-react` assumes any unknown props are declared as modifiers in your stylesheet. Props are translated to these declarations according to simple rules:\n\n- Any props with an explicit `false` value are omitted\n\n- prop values are appended to their names\n - each value of an array will generate its own prop class\n\n- camelCase words become kebab-cased\n\n- Sentence-casing is preserved but not added\n\n\n## Passing down styles\n\n`` only injects the props it merges, it can't make sure they are rendered. If you're wrapping or writing a component, it's a good idea to pass any props you don't use onward to what is rendered.\n\nMost components are already written this way.\n\n```jsx\nconst MyComponent = ({ option, ...rest }) =>
\n```\n\n## CSS Modules\n\n`classier-react` supports using CSS Modules through dynamic object keys:\n\n```jsx\nimport styles from './styles.css'\n\n\n```\n\n## API\n\n```js\nimport { Box, Comp, cx, configure } from 'classier-react'\n```\n\n---\n\n### ``\n\nRenders a tag with its unknown props translated to CSS classes.\n\n#### props\n\n- **is**: the tag to render as (_default: 'div'_)\n\n\n---\n\n### ``\n\nA _HOC_ for injecting or \"composing\" style props. Merges its `style`, `className`, and the rest of its props as classes into the props of a child component.\n\n\n---\n\n### `cx(props, ...extraClasses)`\n\nTransform the passed props into a className string. Called by Box and Comp.\n\n\n---\n\n### `configure(opts)`\n\nLets you change the global behavior of `cx`\n\n#### opts\n\n- **kebabCase** - Transform names and values from camelCase. Reverses `style-loader`. (_default: true_)\n\n- **keepSentence** - When kebabing, lower-case everything but the first word (_default: true_)\n\n- **join.words** - the string to insert between the words in a camelCase identifier (_default: '-'_)\n\n- **join.value** - the string to insert to separate a value (_default: '-'_)\n","readmeFilename":"README.md","gitHead":"3d942e7d4c1c19ea6f197ad7f4677487257cbcaf","_id":"classier-react@1.0.0-next.0","_npmVersion":"6.3.0","_nodeVersion":"10.5.0","_npmUser":{"name":"d3dc","email":"sam.richard@gmail.com"},"dist":{"integrity":"sha512-t9i0lUeNWFir8GSi/+Gk2Z5sTo925MpWbxiYFdKLXyIJ7HSNwj//2892SVNRzyPKEk3+MPTaDNdq3NVvs3NgkA==","shasum":"28d35c50b19e509b7966d57ff52add1243a149f6","tarball":"https://registry.npmjs.org/classier-react/-/classier-react-1.0.0-next.0.tgz","fileCount":9,"unpackedSize":27651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbaRGUCRA9TVsSAnZWagAAr5sP/RmTIhI3IhuWyA1GdhU/\nCHebM1GmFJXXcPlA5saCG0mNu3/9fbCgz89AXlYyFmhgqmuMgtif2NgpPDOT\nl8IChMf8LRr3ExvcCs8nPA0cHmnkgbOZ5S3Ds4f7dDE///rU4nDoJq2wuLCZ\nNsyqFRKEQhFAM6VuaMT3M4zih/MSMoIAA80+7z6pz+yqVWOZI12Z1YDK6c9K\nJSkK6oa4HzWUo4DGAO85FhS9ARcxRKl3fgoc2TUcCeHlHJAN+P5ZSIiq7MpA\nz7YZs5CeS7hbDbBLGXp3REEG1MkyOvdjymaLzLz6i0ejYxtBcSe1RLGKSVPh\ngfXq0WH3VcyPAeKyXc/uvN74hDWlxOmlO+aSqjZgKN+E9Uq4nIVwQ1LOsGjI\nXWbnzwmQOtdI/Kql2uYhGJqWthKtTwMBiVfEih+coMGDvH63mp3dcqJFNrC0\nbwfb2uXz/1RWNAYeSaT6fYFThbkDbPU+cuDIBB7UfWN7plz62hDWQiO8Gzhg\nOD8yPt91f9MCMMIa7QweFLqMadBTjkf9QbQL8XcjcKMWzcaMjn8jJ/NO0+z2\n2Def9UaWYS3nTv7yX0sfFauHGkOtStaBewVrmd+V9Rly81WSVM4qydQHZWsY\nOHFpfeQg3hZQ4ZcIWi/hH7vbi6YLtsj3jR+t4OsiRVcg8Nn1zGiAqmk8YfWT\nRtkr\r\n=JmGO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtSpE1GBccovGibfro1XD8jk4i2OV7Oaw+gkxhYTkZOwIgbL6uwkLk3VB+Jag/UV0Jo4n441NtaL7oYkqnv28ZMgk="}]},"maintainers":[{"name":"d3dc","email":"sam.richard@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classier-react_1.0.0-next.0_1533612436357_0.7111055102404087"},"_hasShrinkwrap":false},"1.0.0-next.1":{"name":"classier-react","version":"1.0.0-next.1","publishConfig":{"tag":"next"},"description":"Use stylesheets for styles, not Javascript","keywords":["react","classnames","styles","just","use","css"],"homepage":"https://github.com/d3dc/classier-react","bugs":{"url":"git+https://github.com/d3dc/classier-react/issues"},"license":"ISC","main":"dist/classier-react.cjs.js","module":"dist/classier-react.esm.js","browser":"dist/classier-react.umd.js","files":["dist"],"repository":{"type":"git","url":"git+https://github.com/d3dc/classier-react.git"},"scripts":{"test":"NODE_ENV=development jest","release":"release-it","build":"npm run clean && npm test && NODE_ENV=production rollup -c","clean":"npm run clean:dist & npm run clean:build","clean:build":"npx rimraf build","clean:dist":"npx rimraf dist"},"jest":{"testURL":"http://localhost/","setupTestFrameworkScriptFile":"./test/_setup.js"},"devDependencies":{"array.prototype.flatmap":"^1.2.1","babel-core":"^6.26.3","babel-jest":"^23.4.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","enzyme":"^3.4.1","enzyme-adapter-react-16":"^1.2.0","jest":"^23.4.2","react":"^16.4.2","react-dom":"^16.4.2","regenerator-runtime":"^0.12.1","release-it":"^7.5.0","rollup":"^0.62.0","rollup-plugin-babel":"^3.0.7","rollup-plugin-uglify":"^3.0.0","uglify-es":"^3.3.9"},"peerDependencies":{"react":"^16.0.0"},"authors":["Sam Richard (https://github.com/d3dc)"],"readme":"# 🎩 Classier React 🥂\n\n![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/classier-react.svg)\n![npm (tag)](https://img.shields.io/npm/v/classier-react.svg)\n[![Build Status](https://travis-ci.com/d3dc/classier-react.svg?branch=master)](https://travis-ci.com/d3dc/classier-react)\n![npm](https://img.shields.io/npm/l/classier-react.svg)\n\nWe're trained to put styles in Javascript. We've got these awesome and rather complex toolchains to have tools like [Rebass](jxnblk/rebass). But, sometimes, you just want to re-use styles.\n\nAwesome stylesheets are already out there for browsers, its just awkward to make use of them when you're writing react. Cramming everything into that `className` string feels wrong.\n\n`classier-react` solves the problem by simply translating from props to CSS classes. Its not generating code and its not pushing the browser to its limits.\n\n```jsx\nconst Button = props => (\n \n)\n```\n\nThink of it like weaponized `classnames`.\n\n## Install\n\n```\nnpm install classier-react\n```\n\n## Getting started\n\nYou'll have to have configured your build toolchain with a style loader and have added some styles to use the tool. This usually isn't very much setup.\n\nSee the [TailwindCSS Recipe](docs/recipes/tailwindcss.md) for an example configuration thats one of the more complicated.\n\n## Usage\n\n_Note: This example uses utility classes from [TailwindCSS](https://tailwindcss.com/docs/)._\n\nYou'll define your presentational components:\n\n```jsx\nimport { Box, Comp } from 'classier-react'\n\nconst Card = props => (\n \n)\n\nconst CardHeroImage = ({ src, ...rest }) => (\n \n \n \n)\n\nconst CardTitle = ({ size = 5, ...rest }) => (\n \n)\n\nconst CardBody = props => \n```\n\nAnd then consume them as usual:\n\n```jsx\n\n \n So Classy\n Lorem ipsum...\n\n```\n\n## Translation to style names\n\nUnder the hood, `classier-react` assumes any unknown props are declared as modifiers in your stylesheet. Props are translated to these declarations according to simple rules:\n\n- Any props with an explicit `false` value are omitted\n\n- prop values are appended to their names\n\n - each value of an array will generate its own prop class\n\n - each key of an object will generate a variant prop class\n\n- camelCase words become kebab-cased\n\n- Sentence-casing is preserved but not added\n\n## Passing down styles\n\n`` only injects the props it merges, it can't make sure they are rendered. If you're wrapping or writing a component, it's a good idea to pass any props you don't use onward to what is rendered.\n\nMost components are already written this way.\n\n```jsx\nconst MyComponent = ({ option, ...rest }) =>
\n```\n\n## CSS Modules\n\n`classier-react` supports CSS Modules through customizable wrappers created with `createModuleElement` and `wrapModule`.\n\n\n`wrapModule` will expose every style name in your module:\n \n```jsx\n// feature/block.js\nimport { wrapModule } from 'classier-react'\nimport styles from './styles.css'\n\nexport default wrapModule(styles)\n```\n\nOften, selectors are not elements. You might find it better to selectively export elements:\n```jsx\n// feature/block.js\nimport { createModuleElement } from 'classier-react'\nimport styles from './styles.css'\n\nexport {\n Element: createModuleElement('element', styles)\n}\n```\n\nYour elements can then be used in your other components\n```jsx\n// feature/component.jsx\nimport Block from './block'\n\n...\n\n\n```\n\n## Avoiding mixing domains\n\nYou can also use `cx` and pass around the resulting string yourself:\n\n```js\nimport { cx } from 'classier-react'\n\n...\n\nconst containerClassName = cx(props.styled)\n```\n\n## API\n\n```js\nimport { Box, Text, Comp, cx, configure } from 'classier-react'\n```\n\n---\n\n### ``\n\nRenders a tag with its unknown props translated to CSS classes.\n\n#### props\n\n- **is**: the tag to render as (_default: 'div'_)\n\n---\n\n### ``\n\nRenders a span with all its props translated to CSS classes.\n\n---\n\n### ``\n\nA declarative wrapper for injecting or \"composing\" style props. Merges its `style`, `className`, and the rest of its props as classes into the props of a child component.\n\n---\n\n### `createElement(name)`\n\nReturns a customized `Box` that nests its CSS classes under the {name} block.\n\n#### members\n\n- **Comp** - a `Comp` with the same customization.\n\n---\n\n### `createModuleElement(name, module)`\n\nReturns a customized `Box` that tries to map its CSS classes to the ones in the provided module.\n\n#### members\n\n- **Comp** - a `Comp` with the same customization.\n\n---\n\n### `wrapModule(module)`\n\nReturns an object that maps the selectors of `module` to `createModuleElement`. Might create a lot of elements.\n\n---\n\n### `cx(props, ...extraClasses)`\n\nTransform the passed props into a className string. Called by Box and Comp.\n\n---\n\n### `configure(opts)`\n\nLets you change the global behavior of `cx`\n\n#### opts\n\n- **transformFn** - A function mapping an AST Node to a CSS class name. (_default: mappers.tailwind_)\n\n- **kebabCase** - Transform names and values from camelCase. You might want to turn it off with `postcss-modules`. (_default: true_)\n\n- **keepSentence** - When kebabing, lower-case everything but the first word (_default: true_)\n\n- **join.words** - the string to insert between the words in a camelCase identifier (_default: '-'_)\n\n- **join.value** - the string used to separate a value (_default: '-'_)\n\n- **join.variant** - the string used to separate a variant from its modifier(_default: ':'_)\n","readmeFilename":"README.md","gitHead":"35a7aa607107bdea252370f827cd7e610bb4d9db","_id":"classier-react@1.0.0-next.1","_npmVersion":"6.4.0","_nodeVersion":"10.5.0","_npmUser":{"name":"d3dc","email":"sam.richard@gmail.com"},"dist":{"integrity":"sha512-6OwlPLiLVaoV5q8h0JLMGYHAXEe4gAst3BnCNlbsLVIT2vPMBY/aPoFTdMFiru6Tp+WJMY0EKAjEOPApWt8Y5g==","shasum":"1406d1ff3dfded8d80820a02fd7f06e0fb2030a2","tarball":"https://registry.npmjs.org/classier-react/-/classier-react-1.0.0-next.1.tgz","fileCount":9,"unpackedSize":43365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbdjE5CRA9TVsSAnZWagAAX7UP/3u3I73idjAX0zMGy9fX\nXSfkpJEdDCvDkF/1dnFg9CaXicTiOE7BrDTfuLgfTxyI8DusyF29drryE2+C\nFOz0VqvDMBrWopPvKelkqvRJFQfAXNqHb6CKQekHGUtWF83jjApASppsIet3\nK12fZzWnJguKShFe3K+rbfLLnOgvneR5COuTkKA/naWZlc4nSqDZtmrr7kK9\n80P4N/zF0kd0Ps8eZQe4wF/DGHI1LjeWz3CYuWP9t8aS/9g82yXO41ftwYFf\nNZZr7dQ5HguZmndbAnLOnCH6s6H4XnbO6DnA2U4Cy5hIeqVT/6cjiQh0tGrn\noFJR+iiW+LHynXcScoBEoSQ3gDHwGwUlUJkABZ6Mpt78LejNvmS0ayF6GPrW\nY5uV5Y6kDvxOIepHhNSijzgYA/i1V1gzFPdYVdPUTsmdzeMI0KYrON2EWrGK\ngiZF19fACIk1AWoitfZYgGLteMQx8rDb1mObT1/mlQxbDgUR1ccDjgAFRzsZ\nY1BGORe+7WKQaxSNmQ61j7mnx/d6QKFllVGgxU+/IUvRKRUB7++MyJfg17bS\n+IhMNvtruOot7CGCrGkMgy/UJ6SMjsRDKUbk53cPOiopsWeDVUrcKq5fa55I\n+w5lfEdj3OgT/4Cyvc8to6UeN59UHqvzYD/IW6Y7WI7Dr21ZqeNSr02PJn+n\nYaw9\r\n=yqHJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHjcDhjpHHhSP7jqD7+5iU5BbW8Mu5+OfiXl3vSit9hTAiEAgOuQoBPtqXq0cwOJpRj5vtr52iCNCPy4JhXpcAcbuTI="}]},"maintainers":[{"name":"d3dc","email":"sam.richard@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classier-react_1.0.0-next.1_1534472505084_0.28859537325441087"},"_hasShrinkwrap":false},"1.0.0-next.3":{"name":"classier-react","version":"1.0.0-next.3","publishConfig":{"tag":"next"},"description":"Use stylesheets for styles, not Javascript","keywords":["react","classnames","styles","just","use","css"],"homepage":"https://github.com/d3dc/classier-react","bugs":{"url":"git+https://github.com/d3dc/classier-react/issues"},"license":"ISC","main":"dist/classier-react.cjs.js","module":"dist/classier-react.esm.js","browser":"dist/classier-react.umd.js","files":["dist"],"repository":{"type":"git","url":"git+https://github.com/d3dc/classier-react.git"},"scripts":{"test":"NODE_ENV=development jest","release":"release-it","build":"npm run clean && npm test && NODE_ENV=production rollup -c","clean":"npm run clean:dist & npm run clean:build","clean:build":"npx rimraf build","clean:dist":"npx rimraf dist"},"jest":{"testEnvironment":"node","setupTestFrameworkScriptFile":"./test/_setup.js"},"devDependencies":{"babel-core":"^6.26.3","babel-jest":"^23.4.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","enzyme":"^3.4.1","enzyme-adapter-react-16":"^1.2.0","jest":"^23.4.2","react":"^16.4.2","react-dom":"^16.4.2","regenerator-runtime":"^0.12.1","release-it":"^7.5.0","rollup":"^0.62.0","rollup-plugin-babel":"^3.0.7","rollup-plugin-uglify":"^3.0.0","uglify-es":"^3.3.9"},"peerDependencies":{"react":"^16.0.0"},"authors":["Sam Richard (https://github.com/d3dc)"],"readme":"# 🎩 Classier React 🥂\n\n![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/classier-react.svg)\n![npm (tag)](https://img.shields.io/npm/v/classier-react.svg)\n[![Build Status](https://travis-ci.com/d3dc/classier-react.svg?branch=master)](https://travis-ci.com/d3dc/classier-react)\n![npm](https://img.shields.io/npm/l/classier-react.svg)\n\nWe're trained to put styles in Javascript. We've got these awesome and rather complex toolchains to have tools like [Rebass](jxnblk/rebass). But, sometimes, you just want to re-use styles.\n\nAwesome stylesheets are already out there for browsers, its just awkward to make use of them when you're writing react. Cramming everything into that `className` string feels wrong.\n\n`classier-react` solves the problem by simply translating from props to CSS classes. Its not generating code and its not pushing the browser to its limits.\n\n```jsx\nconst Button = props => (\n \n)\n```\n\nThink of it like weaponized `classnames`.\n\n## Install\n\n```\nnpm install classier-react\n```\n\n## Getting started\n\nYou'll have to have configured your build toolchain with a style loader and have added some styles to use the tool. This usually isn't very much setup.\n\nSee the [TailwindCSS Recipe](docs/recipes/tailwindcss.md) for an example configuration thats one of the more complicated.\n\n## Usage\n\n_Note: This example uses utility classes from [TailwindCSS](https://tailwindcss.com/docs/)._\n\nYou'll define your presentational components:\n\n```jsx\nimport { Box, Comp } from 'classier-react'\n\nconst Card = props => (\n \n)\n\nconst CardHeroImage = ({ src, ...rest }) => (\n \n \n \n)\n\nconst CardTitle = ({ size = 5, ...rest }) => (\n \n)\n\nconst CardBody = props => \n```\n\nAnd then consume them as usual:\n\n```jsx\n\n \n So Classy\n Lorem ipsum...\n\n```\n\n## Translation to style names\n\nUnder the hood, `classier-react` assumes any unknown props are declared as modifiers in your stylesheet. Props are translated to these declarations according to simple rules:\n\n- Any props with an explicit `false` value are omitted\n\n- prop values are appended to their names\n\n - each value of an array will generate its own prop class\n\n - each key of an object will generate a variant prop class\n\n- camelCase words become kebab-cased\n\n- Sentence-casing is preserved but not added\n\n## CSS Modules\n\n`classier-react` can wrap CSS Modules with `elementModule` and `boxedModule`.\n\n`boxedModule` creates an Element that checks the provided module for a mapping after transformation:\n```jsx\nimport { createModuleElement } from 'classier-react'\nimport styles from './styles.css'\n\nconst MBox = boxedModule(styles)\n\n...\n\n\n```\n\n`elementModule` will expose the optionally listed blocks as Elements from the module:\n```jsx\nimport { createModuleElement } from 'classier-react'\nimport styles from './styles.css'\n\nconst Block = elementModule(styles, ['element'])\n\n\n...\n\n\n```\n\n## Passing down styles\n\n`` only injects the props it merges, it can't make sure they are rendered. If you're wrapping or writing a component, it's a good idea to pass the `style` and `className` props onward to what is rendered.\n\nMost components are already written this way.\n\n```jsx\nconst MyComponent = ({ option, ...rest }) =>
\n```\n\n## Avoiding mixing domains\n\nYou can also use `cx` and pass around the resulting string yourself:\n\n```js\nimport { cx } from 'classier-react'\n\n...\n\nconst containerClassName = cx(props.styled)\n```\n\n## API\n\n### React\n```js\nimport { Box, Text, Comp, createElement } from 'classier-react'\n```\n\n---\n\n### ``\n\nRenders a tag with its unknown props translated to CSS classes.\n\n#### props\n\n- **is**: the tag to render as (_default: 'div'_)\n\n---\n\n### ``\n\nRenders a span with all its props translated to CSS classes.\n\n---\n\n### ``\n\nA declarative wrapper for injecting or \"composing\" style props. Merges its `style`, `className`, and the rest of its props as classes into the props of a child component.\n\n---\n\n### `createElement(name)`\n\nReturns a customized `Box` that nests its CSS classes under the {name} block.\n\n#### members\n\n- **Comp** - a `Comp` with the same customization.\n\n---\n\n### CSS Modules\n```js\nimport { boxedModule, createModuleElement, elementModule } from 'classier-react'\n```\n\n---\n\n### `boxedModule(module, pick)`\n\nReturns an `Element` that tries to map its CSS classes to the ones in the provided module.\n\n---\n\n### `createModuleElement(module, name)`\n\nReturns an `Element` that tries to map its CSS classes to the ones in the provided module under the {name} block.\n\n---\n\n### `elementModule(module, pick)`\n\nReturns an object that picks selectors of `module` to `createModuleElement`.\n\n---\n\n### Utility\n\n```js\nimport { cx, configure } from 'classier-react'\n```\n\n---\n\n### `cx(props, ...extraClasses)`\n\nTransform the passed props into a className string. Called by Box and Comp.\n\n---\n\n### `configure(opts)`\n\nLets you change the global behavior of `cx`\n\n#### opts\n\n- **transformFn** - A function mapping an AST Node to a CSS class name. (_default: mappers.tailwind_)\n\n- **kebabCase** - Transform names and values from camelCase. You might want to turn it off with `postcss-modules`. (_default: true_)\n\n- **keepSentence** - When kebabing, lower-case everything but the first word (_default: true_)\n\n- **join.words** - the string to insert between the words in a camelCase identifier (_default: '-'_)\n\n- **join.value** - the string used to separate a value (_default: '-'_)\n\n- **join.variant** - the string used to separate a variant from its modifier(_default: ':'_)\n","readmeFilename":"README.md","gitHead":"fae30b18436fcd02a2963be1eed6efa7d8274314","_id":"classier-react@1.0.0-next.3","_npmVersion":"6.4.0","_nodeVersion":"10.5.0","_npmUser":{"name":"d3dc","email":"sam.richard@gmail.com"},"dist":{"integrity":"sha512-C6Bud82Dxi0SLlpV7K1MkdmSdsN9dTEUv+yEgxHa4+mHDzIRSjeasYBgUOlSA1XbooEkvuhqxC1zigNrfzId+w==","shasum":"9974003b1456fc21132ecac9312c3a1fb9dceb59","tarball":"https://registry.npmjs.org/classier-react/-/classier-react-1.0.0-next.3.tgz","fileCount":9,"unpackedSize":48022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbeliRCRA9TVsSAnZWagAAriIP/1htVoK3T/hdwKh0HY3x\nXMKV15XZAaPeZ76jiZObFBQAX7RSZZowovq3674wME8azG13toao0HcrxiRT\nkBfdI02b10ciYhVqVDhEWH+c2wxJZZniMzqzgkyKpDgWSlZSiG0ZxaJvfnMJ\n/5oIddRIuierJFvqB2d/r4Gxde/OQqdLPKvEjw91rH+sJvJvVmo+pCdO2jBK\nOSJLcnPSdUBRvBKp/RQyJG+R1N6VW5o1dSznvkrB1hGhMtHDtyGdt0FHnvL5\nT2sk4J7f6o7GtMFed4xajRe8zBiFvV0rWfwzaoN8S7IpZMTjjhNtrMzV8EVc\nwRGad/phh+ewJOhPvJyEHhGZq5PpZBRsn9Uq/Xe/RdhEGAP8u6w12qZiIunu\n/d0wLnK49aFzP4aSyCG9vyB6WE0z/TwUGp/Dz8AVvY6MGSJ5B6tqQTckFczt\nOQy44N5j4ju12vn8SB75cC1zTaO97MUn6uyo5eFQB666EFTR8NvVRUCK8ERv\nmzvoemMlTzx+MV29+fGuIerAelQbRn1gaqrJXVZvEproemcnCiyQUYLSdDuu\nKsCsDtXvB0NIaqiFuVF+M7yWULpkvQpTOLx3Z5+BYRi2DGoLssJ6SjboSQ3p\nAZ41TQvd3t2Q20zDd35YSA4i9TM4jIA209ZaNreJKyS05JXj2JhxQ/jpxVb9\nrID3\r\n=URmn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGSkqkq5IMdvFNhs1FkoS4KNAC+7r3X/UxBmSToL1QmgAiAuUgH+6n6IvXQtJingRq8aH4Ikf47dlQrzr9A9fyL94A=="}]},"maintainers":[{"name":"d3dc","email":"sam.richard@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classier-react_1.0.0-next.3_1534744721085_0.07381042616614009"},"_hasShrinkwrap":false},"1.0.0-next.5":{"name":"classier-react","version":"1.0.0-next.5","publishConfig":{"tag":"next"},"description":"Use stylesheets for styles, not Javascript","keywords":["react","classnames","styles","just","use","css"],"homepage":"https://github.com/d3dc/classier-react","bugs":{"url":"git+https://github.com/d3dc/classier-react/issues"},"license":"ISC","main":"dist/classier-react.cjs.js","module":"dist/classier-react.esm.js","browser":"dist/classier-react.umd.js","files":["dist"],"repository":{"type":"git","url":"git+https://github.com/d3dc/classier-react.git"},"scripts":{"test":"NODE_ENV=development jest","release":"release-it","build":"npm run clean && npm test && NODE_ENV=production rollup -c","clean":"npm run clean:dist & npm run clean:build","clean:build":"npx rimraf build","clean:dist":"npx rimraf dist"},"jest":{"testEnvironment":"node","setupTestFrameworkScriptFile":"./test/_setup.js"},"devDependencies":{"babel-core":"^6.26.3","babel-jest":"^23.4.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","enzyme":"^3.4.1","enzyme-adapter-react-16":"^1.2.0","jest":"^23.4.2","react":"^16.4.2","react-dom":"^16.4.2","regenerator-runtime":"^0.12.1","release-it":"^7.5.0","rollup":"^0.62.0","rollup-plugin-babel":"^3.0.7","rollup-plugin-uglify":"^3.0.0","uglify-es":"^3.3.9"},"peerDependencies":{"react":"^16.0.0"},"authors":["Sam Richard (https://github.com/d3dc)"],"readme":"# 🎩 Classier React 🥂\n\n![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/classier-react.svg)\n![npm (tag)](https://img.shields.io/npm/v/classier-react.svg)\n[![Build Status](https://travis-ci.com/d3dc/classier-react.svg?branch=master)](https://travis-ci.com/d3dc/classier-react)\n![npm](https://img.shields.io/npm/l/classier-react.svg)\n\n`classier-react` lets you use your stylesheet utilty classes as props out of the **Box** and can automatically generate react components for the elements in your CSS modules.\n\n```jsx\nconst Button = props => (\n \n)\n```\n\nWe know awesome stylesheets are out there for browsers, its just awkward to make use of them when working with JSX. Cramming everything into that `className` string feels wrong and our brains have to remember how the styles were written.\n\n`classier-react` solves the problem by simply translating from props to CSS classes. Its not generating code and its not pushing the browser to its limits.\n\nThink of it like `classnames` with superpowers.\n\n## Install\n\n```\nnpm install classier-react\n```\n\n## Getting started\n\nYou'll have to have configured your build toolchain with a style loader and have added some styles to use the tool. This usually isn't very much setup.\n\nSee the [TailwindCSS Recipe](docs/recipes/tailwindcss.md) for an example configuration thats one of the more complicated.\n\n## Usage\n\n_Note: This example uses utility classes from [TailwindCSS](https://tailwindcss.com/docs/)._\n\nYou'll define your presentational components:\n\n```jsx\nimport { Box, Comp } from 'classier-react'\n\nconst Card = props => (\n \n)\n\nconst CardHeroImage = ({ src, ...rest }) => (\n \n \n \n)\n\nconst CardTitle = ({ size = 5, ...rest }) => (\n \n)\n\nconst CardBody = props => \n```\n\nAnd then consume them as usual:\n\n```jsx\n\n \n So Classy\n Lorem ipsum...\n\n```\n\n## Translation to style names\n\nUnder the hood, `classier-react` assumes any unknown props are declared as modifiers in your stylesheet. Props are translated to these declarations according to simple rules:\n\n- Any props with an explicit `false` value are omitted\n\n- prop values are appended to their names\n\n - each value of an array will generate its own prop class\n\n - each key of an object will generate a variant prop class\n\n- camelCase words become kebab-cased\n\n- Sentence-casing is preserved but not added\n\n## CSS Modules\n\n`classier-react` can wrap CSS Modules with `elementModule` and `boxedModule`.\n\n`boxedModule` creates an Element that checks the provided module for a mapping after transformation:\n\n```jsx\nimport { createModuleElement } from 'classier-react'\nimport styles from './styles.css'\n\nconst MBox = boxedModule(styles)\n\n...\n\n\n```\n\n`elementModule` will expose the optionally listed blocks as Elements from the module:\n\n```jsx\nimport { createModuleElement } from 'classier-react'\nimport styles from './styles.css'\n\nconst Block = elementModule(styles, ['element'])\n\n\n...\n\n\n```\n\n## Passing down styles\n\n`` only injects the props it merges, it can't make sure they are rendered. If you're wrapping or writing a component, it's a good idea to pass the `style` and `className` props onward to what is rendered.\n\nMost components are already written this way.\n\n```jsx\nconst MyComponent = ({ option, ...rest }) =>
\n```\n\n## Avoiding mixing domains\n\nYou can also use `cx` and pass around the resulting string yourself:\n\n```js\nimport { cx } from 'classier-react'\n\n...\n\nconst containerClassName = cx(props.styled)\n```\n\n## API\n\n### React\n\n```js\nimport { Box, Text, Comp, createElement } from 'classier-react'\n```\n\n---\n\n### ``\n\nRenders a tag with its unknown props translated to CSS classes.\n\n#### props\n\n- **is**: the tag to render as (_default: 'div'_)\n\n---\n\n### ``\n\nRenders a span with all its props translated to CSS classes.\n\n---\n\n### ``\n\nA declarative wrapper for injecting or \"composing\" style props. Merges its `style`, `className`, and the rest of its props as classes into the props of a child component.\n\n---\n\n### `createElement(name)`\n\nReturns a customized `Box` that nests its CSS classes under the {name} block.\n\n#### members\n\n- **Comp** - a `Comp` with the same customization.\n\n---\n\n### CSS Modules\n\n```js\nimport { boxedModule, createModuleElement, elementModule } from 'classier-react'\n```\n\n---\n\n### `boxedModule(module)`\n\nReturns an `Element` that tries to map its CSS classes to the ones in the provided module.\n\n---\n\n### `createModuleElement(module, name)`\n\nReturns an `Element` that tries to map its CSS classes to the ones in the provided module under the {name} block.\n\n---\n\n### `elementModule(module, pick)`\n\nReturns an object that picks selectors of `module` to `createModuleElement`.\n\n---\n\n### Utility\n\n```js\nimport { cx, configure } from 'classier-react'\n```\n\n---\n\n### `cx(props, ...extraClasses)`\n\nTransform the passed props into a className string. Called by Box and Comp.\n\n---\n\n### `configure(opts)`\n\nLets you change the global behavior of `cx`\n\n#### opts\n\n- **transformFn** - A function mapping an AST Node to a CSS class name. (_default: mappers.tailwind_)\n\n- **kebabCase** - Transform names and values from camelCase. You might want to turn it off with `postcss-modules`. (_default: true_)\n\n- **keepSentence** - When kebabing, lower-case everything but the first word (_default: true_)\n\n- **join.words** - the string to insert between the words in a camelCase identifier (_default: '-'_)\n\n- **join.value** - the string used to separate a value (_default: '-'_)\n\n- **join.variant** - the string used to separate a variant from its modifier(_default: ':'_)\n\n- **join.block** - the string to insert before nested blocks or elements (_default: '-'_)\n\n- **join.modifier** - the string used to separate the block identifier from the modifier name (_default: '-'_)\n","readmeFilename":"README.md","gitHead":"955b31fe7553d75a898550cba9e808d03f5823a4","_id":"classier-react@1.0.0-next.5","_npmVersion":"6.4.0","_nodeVersion":"10.5.0","_npmUser":{"name":"d3dc","email":"sam.richard@gmail.com"},"dist":{"integrity":"sha512-KA2zsiFgrfR08kpJOYdjlH+Xc1KdXXzwSlbZkAnDJhMvBvm+JeDfYPdSVzlUB2yK+cG2p+yQpsfqwD0Ps1aBYg==","shasum":"09d27d974e2f14e8bb20c7d4785979dfc9eb4023","tarball":"https://registry.npmjs.org/classier-react/-/classier-react-1.0.0-next.5.tgz","fileCount":9,"unpackedSize":47583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbgNYKCRA9TVsSAnZWagAAdMgQAJXVhwv20FSzOQS191lZ\ntMqmyQN4RcWzqx3GH8gscH1mCz37xqDOUzZLNgr8lQ0bAETexJa2BDlY7q7a\n/T/G9zxZhPGmx/dAyt8TQqmDz0sO4xvkMPeD6ToFG3B8JGbM2baWa5A4CKOF\nSRPNISw4oVqqAuoD7/YIoVwXot+wAgDX37xBxL920AIZTbgg4hvtW9LW7MG9\nyEaz38LZIN96jF8/9/Oz9uxfGx/6L9JH9RKD2V37veK65NGXDZMD85tqWSJI\nuEshEno+p3GPCTl2da366Ah+5OG4V37m8LviHgxi3sVTK7B0HUPWExfwlY+9\nfWi+eI6Vr6W63gLzrrK7Yh0NkG8eV9pD2YrCcKprOukNPn3SWgfdxMS2BKSO\n8vbVnemeCiWKa+KNs402uIs5juNKiaskswer6nullHwpS36W2lWIPNxQiQyU\n8U2I2lJy7stssqXc+DERyxxPkASAEcYTheb4SKxV3OI/b/+j0UhtqbPBHeKv\n3G+2WdRxLwUerNSpFNkJVyOZPNjnyxpc/gniVr/mVD9+t3i9UvkJy9bLQZa8\nrnc9iYGSWl5jaKXBEu106VvzrtT0b/B211fxRpBVTO/oPe2YF9i60GBDWrOU\nQwprDROOdbiANyd1PhkMpLTLhr2Yx09u/pyvT3Ss4XiWWkVafPpBl6u6rgss\nHJL/\r\n=WoZ6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICKccmGPzV4nZmZrVipOHPeez0hNDfSClZ52bkTKYe5aAiEAmYxCFbCh2zrHr8rxRcIU8TQFEZHaB67CLSVhgHnFDDo="}]},"maintainers":[{"name":"d3dc","email":"sam.richard@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classier-react_1.0.0-next.5_1535170057515_0.6119506376286481"},"_hasShrinkwrap":false}},"time":{"created":"2018-08-02T01:40:29.591Z","1.0.0-alpha.0":"2018-08-02T01:40:29.689Z","modified":"2022-04-12T06:34:48.159Z","1.0.0-alpha.1":"2018-08-02T02:31:17.742Z","1.0.0-alpha.2":"2018-08-02T04:32:21.856Z","1.0.0-alpha.3":"2018-08-02T05:50:52.994Z","1.0.0-alpha.4":"2018-08-02T06:07:40.885Z","1.0.0-alpha.5":"2018-08-02T06:09:40.045Z","1.0.0-alpha.6":"2018-08-05T01:36:21.330Z","1.0.0-alpha.7":"2018-08-05T01:37:49.031Z","1.0.0-alpha.8":"2018-08-05T02:25:46.854Z","1.0.0-alpha.9":"2018-08-06T02:59:06.458Z","1.0.0-alpha.10.efddc2d":"2018-08-07T03:05:26.116Z","1.0.0-next.efddc2d":"2018-08-07T03:08:26.035Z","1.0.0-next.0ed824c":"2018-08-07T03:11:37.088Z","1.0.0-next.0":"2018-08-07T03:27:16.444Z","1.0.0-next.1":"2018-08-17T02:21:45.172Z","1.0.0-next.2":"2018-08-20T05:37:41.116Z","1.0.0-next.3":"2018-08-20T05:58:41.167Z","1.0.0-next.4":"2018-08-25T03:35:02.052Z","1.0.0-next.5":"2018-08-25T04:07:37.753Z"},"maintainers":[{"name":"d3dc","email":"sam.richard@gmail.com"}],"description":"Use stylesheets for styles, not Javascript","homepage":"https://github.com/d3dc/classier-react","keywords":["react","classnames","styles","just","use","css"],"repository":{"type":"git","url":"git+https://github.com/d3dc/classier-react.git"},"bugs":{"url":"git+https://github.com/d3dc/classier-react/issues"},"license":"ISC","readme":"","readmeFilename":""}