{"_id":"@ahrefs/bs-emotion","_rev":"14-493b35652329b612d71d4bcd6d0aec34","name":"@ahrefs/bs-emotion","dist-tags":{"latest":"2.0.0"},"versions":{"0.1.2":{"name":"@ahrefs/bs-emotion","version":"0.1.2","keywords":["css","css-in-js","react","emotion","reason","reasonml","ocaml","bucklescript"],"author":{"name":"Alex Fedoseev","email":"alex.fedoseev@gmail.com"},"license":"MIT","_id":"@ahrefs/bs-emotion@0.1.2","maintainers":[{"name":"jchavarri","email":"javier.chavarri@gmail.com"},{"name":"feihong","email":"feihong.hsu@gmail.com"},{"name":"khady","email":"louis@louisroche.net"},{"name":"rustykey","email":"iam@stfoo.ru"},{"name":"liubko","email":"liubko.qwert@gmail.com"}],"homepage":"https://github.com/ahrefs/bs-emotion#readme","bugs":{"url":"https://github.com/ahrefs/bs-emotion/issues"},"dist":{"shasum":"ce9b61dbb9f7e2611beec5bde13834d0e4b0bfd4","tarball":"https://registry.npmjs.org/@ahrefs/bs-emotion/-/bs-emotion-0.1.2.tgz","fileCount":9,"integrity":"sha512-w9/rpbYzlws0Bnpblpe39xg/YY1vjqzNNiZXkbcuDfjuCblDyjZbVrbTt4XwB4ni+1mCGWpheyoC0fuTjcR/nA==","signatures":[{"sig":"MEUCIQC0o0RaovEq7fHXFF8JKdj3AqrfDdBOSi1hozZgvXZmpwIgU9gA4Vn3jhg7OVIHABm3m6HFKKkjmKPKkzTDvqQPgGw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":156811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdj5QZCRA9TVsSAnZWagAA3e8QAIPwk06Jjr9hfDF6jiM3\n4dEbaqjMHghhJXrwWuGF18vrwuJbttdAcwhzjVVUUBUoW9gmQZagAEzRRo3i\n20L3UStN/QFHHThm5UlsITHJr7QG8al3YMCnkpqywOg5GbZntJZO8hJGloyO\npGQ1eRO7tTNvrBWkRAjDCDFgSX/RzQ2uIqfT3qJwS9iM+sxWw+rCbeX0ORW3\n2pduTCvv/NdaciDYz+6TMFWB0Uj6J7mNIvB3UZZ8YHffkhg5KRbsUo4LfN/w\n8ZUmNE1jVIBzmpJCoQQDqdFR7NWKckG3IiL+vMRvNo5dmbzoGg6CCiajLlur\nE0Cel2wRAhKhO3/Rdtwz0WX2nJZltSGt9N22EMXP5ssD2oOeQRBQWIj4bcec\nlVYsA0h1ozZQ6cPQnsp1fWVe8E3MDObkPQMmWFIo6+cuCjsq4tOnGDZAePOY\nYq/J4MTh0zWUSy0K1WMuQxjcvbPSLfL4kMelOQd0Glvazc0AKovD1UaFpRkq\nr7rGKEUks/4Kp3n+xQ4OQIwiTt+ywyDMybephWThQvdFfSgzfg160Uro5w3k\nRkhAi1mpL+F9jRJpnoqH0Ou5EoRIA3H0ZYBzN0oGv9rERDPB6b6buUVOx6fX\nDxEF10Jhq0cr5kV5HO8umk3wCJAEGa7X/daWDwjKUJ9CDODBOFI2A8Tu0494\nuWMv\r\n=4whR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/Emotion.re","scripts":{"test":"exit 0","build":"bsb -clean-world -make-world","start":"bsb -clean-world -make-world -w"},"_npmUser":{"name":"jchavarri","email":"javier.chavarri@gmail.com"},"repository":{"url":"git+https://github.com/ahrefs/bs-emotion.git","type":"git"},"_npmVersion":"5.6.0","description":"BuckleScript bindings to Emotion","directories":{},"_nodeVersion":"8.11.4","dependencies":{"emotion":"9.2.12","@minima.app/re-css":"0.1.0"},"_hasShrinkwrap":false,"devDependencies":{"bs-platform":"5.0.3"},"peerDependencies":{"bs-platform":"^5.0.3"},"_npmOperationalInternal":{"tmp":"tmp/bs-emotion_0.1.2_1569690648228_0.5163430639099271","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@ahrefs/bs-emotion","version":"1.0.0","keywords":["css","css-in-js","react","emotion","reason","reasonml","ocaml","bucklescript"],"author":{"name":"Alex Fedoseev","email":"alex.fedoseev@gmail.com"},"license":"MIT","_id":"@ahrefs/bs-emotion@1.0.0","maintainers":[{"name":"feihong","email":"feihong.hsu@gmail.com"},{"name":"jchavarri","email":"javier.chavarri@gmail.com"},{"name":"khady","email":"louis@louisroche.net"},{"name":"liubko","email":"liubko.qwert@gmail.com"},{"name":"rustykey","email":"iam@stfoo.ru"}],"homepage":"https://github.com/ahrefs/bs-emotion#readme","bugs":{"url":"https://github.com/ahrefs/bs-emotion/issues"},"dist":{"shasum":"1463f7c246ca0d65dbd45c854cca00ea72bda257","tarball":"https://registry.npmjs.org/@ahrefs/bs-emotion/-/bs-emotion-1.0.0.tgz","fileCount":9,"integrity":"sha512-HfYhGMq63OjMNX70ZsFx2bQCh3SXspvBEYSyx0Bp536lL9g2y5GVoob03HAZrWkldGxTXNzAqZAkINSmMcAJtw==","signatures":[{"sig":"MEQCIDpAYad2hygbiSdO4/FVuWDQBeL2r5C9U8IZLMnkD+ApAiABCYwLIdPejHuMa1eTZzqHUTEzk73mbX7scnQ8JMC1Vw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6gwSCRA9TVsSAnZWagAAF3wP+QEyJ+/1qcQeSTAXmIfi\nX15kQNv9O7xVRif3q8E/QNIOd2q+R1jHcFn80KQck8OCeNIvDF8po+qgkyyj\nheG6qr8MlhDfr6r7SYj9tElNz0UyUwHoe+socAwmEDX4Ab7GwWHU4lXgfSth\ngpt4bzFvYOERAF8Ej0lF2dSPeGWnTL+pcqm+zezfFLXDUy+Er6/w/7zkT+JO\nCG7tT3Siihsu2R/a+P7eIHUNeTxiDgQEu0fj0E9S9AfsIStw2PNbh8fQypVv\naux7uR245iMAA83eJwXsvSO28ITDlrfhfTSyDeWfhhxplWH11TcV4K301DS6\npB0rV/ZLu1ryxn8XEPrLc7UOcb/zKXaivFOt9l9BIyd4ht2dMja0+Nzm9sdA\np3B/BOnJNV/IwGZaMdldC9HlLvX/fw8L274m2GHDfR8m8GUXDeN3b6uWMZIr\nucIN/B875DZyQWe4cBJlPDQi0QAuHsGt2ZHCvtKYkRRw2L8Q2UkXnV4JpV4M\nCeFStQvMfovI4jCkFXQSnUgnYvFDafPHZD/fvefWsRKaZDB/9wNuw6qOzSOP\nx6LAw4fDmD7ZoPhHdxOhcq6b4/TfInZIsHIsb6WZnqI6c77lJKx42kJqq/mq\nOAvnGcDVAr8OlYbTbyDhyZ8S3N2mxsTNuhcS1neooCL7j/tMM4ZtDR4Vy/MU\nCcdZ\r\n=3YAH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/Emotion.re","scripts":{"test":"exit 0","build":"bsb -clean-world -make-world","start":"bsb -clean-world -make-world -w"},"_npmUser":{"name":"jchavarri","email":"javier.chavarri@gmail.com"},"repository":{"url":"git+https://github.com/ahrefs/bs-emotion.git","type":"git"},"_npmVersion":"6.13.1","description":"BuckleScript bindings to Emotion","directories":{},"_nodeVersion":"12.13.1","dependencies":{"emotion":"9.2.12","@minima.app/re-css":"0.1.0"},"_hasShrinkwrap":false,"devDependencies":{"bs-platform":"7.0.1"},"peerDependencies":{"bs-platform":"^7.0.1"},"_npmOperationalInternal":{"tmp":"tmp/bs-emotion_1.0.0_1575619601632_0.4287340977704177","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@ahrefs/bs-emotion","version":"1.0.1","keywords":["css","css-in-js","react","emotion","reason","reasonml","ocaml","bucklescript"],"author":{"name":"Alex Fedoseev","email":"alex.fedoseev@gmail.com"},"license":"MIT","_id":"@ahrefs/bs-emotion@1.0.1","maintainers":[{"name":"feihong","email":"feihong.hsu@gmail.com"},{"name":"jchavarri","email":"javier.chavarri@gmail.com"},{"name":"khady","email":"louis@louisroche.net"},{"name":"liubko","email":"liubko.qwert@gmail.com"},{"name":"rustykey","email":"iam@stfoo.ru"}],"homepage":"https://github.com/ahrefs/bs-emotion#readme","bugs":{"url":"https://github.com/ahrefs/bs-emotion/issues"},"dist":{"shasum":"8fbca5b5ee14a4db21e965d67a2e4053f6f825ea","tarball":"https://registry.npmjs.org/@ahrefs/bs-emotion/-/bs-emotion-1.0.1.tgz","fileCount":9,"integrity":"sha512-oUSKPX/JZ3UDSrdlNj8cesO7yuxwnxS6PvHK3ZA0uI69jkwGJY7ZUDxzYWRg6x/6fZ8qGSSUEoq/moBmwmpjUg==","signatures":[{"sig":"MEUCIQCVEvsSvtWMT5uSHEtmMAChT0b/7RNheS8cBBkab1AIcwIgbCiz1ST3Xgc4awVTOZ1tSCyedG3E86niVAUaFL5xJ7M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeLCywCRA9TVsSAnZWagAAyAQP+wf9SkFGozclB9ek0Tiz\nlCl4vT+2BLcpOpHStiThwRG/orPkJnYM42VXINoDIx8a9TiGYdXtpi1ihs53\nF5Nb0xD8zQIQAUnq7RWfE/bYe7of/lbTHba/yLre3Ad89WDd6V8ePZhnSp7J\nWfhAbtyrjjMq/PLZFMgH5oBTc7mtssF9h2gRYjA2aGXTU38Q3j8DVLfcY2aL\ngHHqS1NA1PMx7Ok25ZwXejYt0H2mjwG/wvS52bCfsdWXC/hfmVtgoNZVMuUC\nbL1XKoXBfIf70uPi98fpiGU9IHEGJO4PY6YpH6xB43MRhRjC1kq3HqYUWeo6\n7E6JYxSixPr/FiwcO5H/xhOkNxASJ0QJtF/8z71BPS+qmXWzfsDrbtHpCq1T\nzUdwqUTUMhmXguLAWNORe/vv2wpPyjrCQkPJ5pLFAjAVvfkG8oNahf/6mfrl\nO0/rOfou8XQYOPB+iRntVDHfTYazcnSbzG1zc01+ab6vdkvpFB95+Bl0al7t\niSnKK+p9HcSPWKoTiyoa+SDYPJVPlEyfZEj6L9ItQNtBy6sYqjI55i3/EKct\nFEdA//F7HqhsfaClpMMcWLRaqpNTUo6XLvwpa3ftwy11t8Z0MEggFBewudBE\noZIei5UEeQlEMVjp/tHUMM+84RhH88N4qNqO5vrDRb2oIzSPBx3vfiJhnxPn\nGdUP\r\n=8bz0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/Emotion.re","scripts":{"test":"exit 0","build":"bsb -clean-world -make-world","start":"bsb -clean-world -make-world -w"},"_npmUser":{"name":"jchavarri","email":"javier.chavarri@gmail.com"},"repository":{"url":"git+https://github.com/ahrefs/bs-emotion.git","type":"git"},"_npmVersion":"6.13.1","description":"BuckleScript bindings to Emotion","directories":{},"_nodeVersion":"12.13.1","dependencies":{"emotion":"9.2.12","@minima.app/re-css":"1.0.1"},"_hasShrinkwrap":false,"devDependencies":{"bs-platform":"7.0.1"},"peerDependencies":{"bs-platform":"^7.0.1"},"_npmOperationalInternal":{"tmp":"tmp/bs-emotion_1.0.1_1579953328164_0.02789401807350811","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"@ahrefs/bs-emotion","version":"2.0.0","keywords":["css","css-in-js","react","emotion","reason","reasonml","ocaml","bucklescript"],"author":{"name":"Alex Fedoseev","email":"alex.fedoseev@gmail.com"},"license":"MIT","_id":"@ahrefs/bs-emotion@2.0.0","maintainers":[{"name":"feihong","email":"feihong.hsu@gmail.com"},{"name":"jchavarri","email":"javier.chavarri@gmail.com"},{"name":"khady","email":"louis@louisroche.net"},{"name":"liubko","email":"liubko.qwert@gmail.com"},{"name":"rustykey","email":"iam@stfoo.ru"},{"name":"zindel","email":"alexei.golovko@gmail.com"}],"homepage":"https://github.com/ahrefs/bs-emotion#readme","bugs":{"url":"https://github.com/ahrefs/bs-emotion/issues"},"dist":{"shasum":"7a9ad34d0dca0864bb546cd4c36ba3c489d71adf","tarball":"https://registry.npmjs.org/@ahrefs/bs-emotion/-/bs-emotion-2.0.0.tgz","fileCount":9,"integrity":"sha512-Zua8U35J6CesTnAGZeAAuQDpvS9egHCZqMlpOFSNTCCcaQeGzkdwfBY3Y7BI28kvXjCSVdMnU917l7El+JJmkw==","signatures":[{"sig":"MEQCIClhyqYIblKZsw7j9S+BXkIaTo5B/OjrebWFMJ9AHEDsAiBENMYuaZqnsXtKLAKHh50RFvDQB2tXl1K6raw4iggmVA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSRkXCRA9TVsSAnZWagAAjm8P/RREOCcSKXLNUdN8+noG\nOu1OulRRylr5+ziZRyyFAw0/Wi+L9wmmGVknB6z4M6vqdMMAkVJD4z/hwbPr\n4KYeYEkbJP6/fvoYQT7fOwcIOoS4V3zFxwKrONVHZ+BuERw0MuOOkVmT9QXf\ntHjAafM60RLg8mMXfCKlccC/n9Ig0esFus98cWuEsdpVOyoRG3s4pshmMfNb\nTVyPOpebpJNOlQTn007AXBuNg2iekwe8RAVFZr26txUjzzTLuNYc7hMF1N7X\nBLjDv5Yq+Hgs9N4I1aVaE4TYv6eiDi8U5Pbmn3+wTvXhSlv/yVn6MeIrP4/o\nWtfgYSDs52kvGKMeGzBSF+6OclTbMV7AJJzkknO3mMyoqdAD6D8+1brZigyJ\nXkkUNDvAfARJ701uIOJJqEaV0DmEX5TuOYHWW02gHRWsxq2n8lPHSCd15pKU\nI2t7TF9JKTrLvGmYsIcG95UsoQ+XbNEKJnbdgbbF48ifcg2T4Wy9HonLRdZ+\ni2I8+W0J4WDgxHvMz7sHk5YLgoydNSrq3XicjVuBk4lgmRSXQiZZnByRAWur\nfKfb016HTPGmU3b/GoTwGlTgWeQo+tC0Nk33FGiOiB5pbxTe2VF2KEX59wqs\nP3191jxb9YGYRRjYf2Wc80Oxf9h2NbkjcHxuq8tkkeZCEA2YEzGoWgbbwixt\n4TyF\r\n=R7w7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/Emotion.re","scripts":{"test":"exit 0","build":"bsb -clean-world -make-world","start":"bsb -clean-world -make-world -w"},"_npmUser":{"name":"jchavarri","email":"javier.chavarri@gmail.com"},"repository":{"url":"git+https://github.com/ahrefs/bs-emotion.git","type":"git"},"_npmVersion":"6.13.1","description":"BuckleScript bindings to Emotion","directories":{},"_nodeVersion":"12.13.1","dependencies":{"emotion":"9.2.12","@minima.app/re-css":"1.0.1"},"_hasShrinkwrap":false,"devDependencies":{"bs-platform":"7.0.1"},"peerDependencies":{"bs-platform":"^7.0.1"},"_npmOperationalInternal":{"tmp":"tmp/bs-emotion_2.0.0_1598626071178_0.3223432233423329","host":"s3://npm-registry-packages"}}},"time":{"created":"2019-09-28T17:10:48.032Z","modified":"2025-04-28T08:15:06.614Z","0.1.2":"2019-09-28T17:10:48.643Z","1.0.0":"2019-12-06T08:06:41.805Z","1.0.1":"2020-01-25T11:55:28.288Z","2.0.0":"2020-08-28T14:47:51.307Z"},"bugs":{"url":"https://github.com/ahrefs/bs-emotion/issues"},"author":{"name":"Alex Fedoseev","email":"alex.fedoseev@gmail.com"},"license":"MIT","homepage":"https://github.com/ahrefs/bs-emotion#readme","keywords":["css","css-in-js","react","emotion","reason","reasonml","ocaml","bucklescript"],"repository":{"url":"git+https://github.com/ahrefs/bs-emotion.git","type":"git"},"description":"BuckleScript bindings to Emotion","maintainers":[{"email":"louis@louisroche.net","name":"khady"},{"email":"iam@stfoo.ru","name":"rustykey"},{"email":"e.chemohonenko@gmail.com","name":"germes"},{"email":"bryanthomaschen@gmail.com","name":"bryanthomaschen"},{"email":"strelkov.d.d@gmail.com","name":"denstr"},{"email":"javier.chavarri@gmail.com","name":"jchavarri"},{"email":"alexei.golovko@gmail.com","name":"zindel"},{"email":"feihong.hsu@gmail.com","name":"feihong"},{"email":"vince.tan@ahrefs.com","name":"jkvt2"}],"readme":"# bs-emotion\n\n[![Build Status](https://dev.azure.com/igor0048/ahrefs/_apis/build/status/ahrefs.bs-emotion?branchName=master)](https://dev.azure.com/igor0048/ahrefs/_build/latest?definitionId=1&branchName=master)\n\nBuckleScript bindings to [Emotion](https://emotion.sh).\n\n## BuckleScript v7+\n\n`bs-emotion` and `bs-emotion-ppx` are compatible with BuckleScript v7 starting from version 1.0.0.\n\nIf you need to use them with BuckleScript v5 or below, install the earlier versions:\n- `@ahrefs/bs-emotion` version ^0.1.2\n- `@ahrefs/bs-emotion-ppx` version ^0.0.7\n\n## Installation\nGet the package:\n\n```shell\n# yarn\nyarn add @ahrefs/bs-emotion\n# or npm\nnpm install --save @ahrefs/bs-emotion\n```\n\nThen add it to `bsconfig.json`:\n\n```json\n\"bs-dependencies\": [\n \"@ahrefs/bs-emotion\"\n]\n```\n\n### `bs-emotion-ppx`\nIf you want to auto-label generated classnames for easier debugging, you can install `bs-emotion-ppx`:\n\n```shell\n# yarn\nyarn add --dev @ahrefs/bs-emotion-ppx\n# or npm\nnpm install --save-dev @ahrefs/bs-emotion-ppx\n```\n\nThen add it to `bsconfig.json`:\n\n```json\n\"ppx-flags\": [\"@ahrefs/bs-emotion-ppx/ppx\"],\n```\n\n## Usage\n### Defining styles\nThere are 2 ways to define a CSS class:\n\n```ocaml\nopen Emotion\n\n(* If you use ppx *)\nlet button = [%css [ ... ]] (* -> \"css-HASHED-button\" *)\n\n(* If you don't use ppx *)\nlet button = css [ ... ] (* -> \"css-HASHED\" *)\n```\n\nAnd here's real-world example:\n> It's in OCaml syntax, but you can use Reason too.\n\n```ocaml\n(* ComponentStyles.ml *)\n\nopen Emotion\n\nlet container = [%css [\n display `flex;\n flexFlow `column `nowrap;\n alignItems `center;\n]]\n\nlet shape = [%css [\n display `flex;\n flexFlow `row `nowrap;\n alignItems `center;\n justifyContent `center;\n transitionProperty \"border-radius\";\n transitionDuration (`ms 100);\n transitionTimingFunction `easeInOut;\n width (`px 200);\n height (`px 200);\n borderRadius (`px 6);\n backgroundColor (`hex \"29d\");\n\n (* :hover selector, same as `select \":hover\" [ ... ]` *)\n hover [\n borderRadius (`pct 50.);\n important (cursor `grab);\n ];\n]]\n\n(* Dynamic styling *)\n(* NOTE: ppx supports functions with max 2 arguments *)\nlet text ~size = [%css [\n color (`hex \"fff\");\n fontSize (`px size);\n fontWeight 700;\n\n (* Transition takes property, duration, timing-function & delay *)\n transition \"font-size\" (`ms 100) `easeInOut `zero;\n\n (* You can define multiple transitions by packing them into list of tuples *)\n transitions [\n (\"font-size\", `ms 100, `easeInOut, `ms 0);\n ];\n\n (* Complex selector that uses .container class defined above *)\n (* Rendered as: `.container:hover .text {...}` *)\n select {j|.$container:hover &|j} [\n fontSize Calc.(((`px size) + (`pct 150.)) * (`n 1.5));\n ];\n\n (* @media quiery with nested selectors *)\n media \"(max-width: 900px)\" [\n color (`hex \"ff69b4\");\n\n select \":hover\" [\n color (`hex \"fff\");\n ];\n ];\n]]\n\n(* Define keyframes *)\nlet bounce = keyframes [\n (0, [ transform (`translateY `zero); ]);\n (50, [ transform (`translateY (`px (-20))); ]);\n (100, [ transform (`translateY `zero); ]);\n]\n\nlet animated = [%css [\n (* Use generated animation name *)\n animationName bounce;\n animationDuration (`ms 300);\n animationIterationCount (`i 7);\n]]\n\n(* Compose things *)\nlet smallText = [%css [\n fontSize (`em 0.8);\n]]\n\nlet note = css ~extend: smallText [\n label \"note\";\n\n marginTop (`px 10);\n]\n```\n\n### Applying styles\n```reason\n/* Component.re */\n\nmodule Css = ComponentStyles;\n\nlet component = ReasonReact.statelessComponent(__MODULE__);\n\nlet make = _ => {\n ...component,\n render: _ =>
...
,\n};\n```\n\n### Composing classnames\n\n#### Cx\nThis package provides `Cx.merge` function which is a binding to Emotion's [`cx`](https://emotion.sh/docs/cx). It merges 2 Emotion's CSS classes into single unique class. See the [Caveats](#caveats) section for details.\n\n#### Cn\nAlso, there is [`re-classnames`](https://github.com/alexfedoseev/re-classnames). You can use it to combine classnames together. It's not aware of Emotion and simply operates on strings.\n\n#### Caveats\nFirst, let's talk about the difference between `Cn.make` and `Cx.merge`:\n\n```reason\nCn.make([Css.one, Css.two]) /* => \"css--one css--two\" */\nCx.merge([|Css.one, Css.two|]) /* => \"css--one-two\" */\n```\n\nIf the former simply concatenates two classname strings into a single string (and as a result 2 CSS classes are applied) then the latter merges 2 Emotion classes into single unique class and applies it to a node (as a result 1 unique CSS class is applied).\n\n##### Caveat #1\n\n```reason\n
\n
\n```\n\n```ocaml\nlet foo = css [ ... ]\nlet bar = css [ ... ]\n\nlet button = css [\n ...\n\n select {j|.$foo:hover &|j} [\n (*\n It won't work due to `.foo` class is being merged w/ `.bar`\n into single unique classname inside component\n *)\n ]\n]\n```\n\nTo make this css work you can use `Cn.make`, e.g:\n\n```reason\n
\n```\n\n##### Caveat #2\n\n```reason\nlet make = (~className, children) => {\n ...component,\n render: _ =>\n
\n ...children\n
,\n};\n```\n\nOftentimes, UI abstractions accept `className` prop to extend or override default CSS of abstraction. Since position of classname on application site doesn't guarantee precedence of `className` prop (in CSS, precedence is determined by position of classname on definition site), it's not safe to use `Cn.make` here. In this case, use `Cx.merge` since `Emotion` determines precedence on application site and guarantees that last classname has precedence over the preceding classes.\n\n```reason\n
\n```\n\n## Contributing\n\nSee [`CONTRIBUTING.md`](./CONTRIBUTING.md).\n\n## Thanks\n- [`glennsl/bs-typed-css-core`](https://github.com/glennsl/bs-typed-css-core) and [`SentiaAnalytics/bs-css`](https://github.com/SentiaAnalytics/bs-css) for examples and inspiration.\n","readmeFilename":"README.md"}