{"_id":"@code-hike/classer","_rev":"119-eb512662cae8d6600f2faa08b56df3b0","name":"@code-hike/classer","dist-tags":{"canary":"0.3.0--canary.143.e149ea9.0","latest":"0.3.0","next":"0.3.0-next.29"},"versions":{"0.0.0-aa6efee":{"name":"@code-hike/classer","version":"0.0.0-aa6efee","main":"dist/index.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"publish-canary":"yarn publish --tag canary --access public","script":"ch-script"},"devDependencies":{"@code-hike/script":"0.0.1","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org/","repository":{"type":"git","url":"https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"_id":"@code-hike/classer@0.0.0-aa6efee","dist":{"shasum":"ce2423505baa66679dc4477498d5226a1e282c00","integrity":"sha512-+NcPLh4d/AGFFK3wUQ2EzTI0zeeSIQUMczKEwwd8MlMYZl8rP/M6C6iWLwaAkGiOuadLDC/gO01MtIV18kSyQw==","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.0.0-aa6efee.tgz","fileCount":8,"unpackedSize":10892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLVxBCRA9TVsSAnZWagAAHS4QAJm4Q7KVdkXLnBB/+47O\nPkBnaYG6n62i7SO+h1zKRm/TNQ9dtYCvFgtZbilvwDK0wYX0pH/bRCr0M5Y9\ncmz1fRfvpX7p72NUflYkhe4tzt9aMz7OY+sR1X7y4GHaRgoMfFxvg8rkDhCZ\nIEPgty1xIiZSzRy/36vA9INixjqVlbOwDDX7qaWukCnomkVrStebtaByJOQ8\nYbA6N0m8JbWglc/BEhde8SC7kd8Y3H9PIiVVOaEA+4D3+rcBeFOQDH7UnIui\nWhVmoDxTpNgpUV1e+0A2Yl613Kp06J+ezky1+2lufSV594GhJYRUf3Tf+chw\nxcDL5TeASyCOlIi/hmtbxQ6/YvXpfBESJtL9hSn/c4exLzGESTSUqZpMV2Ye\n0Q37C1HqYSYMEgAMcTsygiRwNUe+TRcZ87kRYp6hcFhh6zhxnlgyrDJzbcrp\nwBdqpyC7iZXskj0EMoupdfOMkCQCVbWkajM/++mdithFQk2ko/aNac7NR6LM\n/NpKyvwvu6qm10p7T0n4ryU27zTobdO2sfyZuMacxCMaeYtH6uvlPVe95Pdm\nBBkbFeN5ErOWiGnrw1ts3vuzXGtOycb3Pt5bVUU0hjgRi0RAuf8+LTuofr1G\nZ6kMVXrSn/Td1qC69vSxhaOEN5TQYMFJ2a+YJAralBvBUNpF5h/pjKJzFnLw\n3jQM\r\n=9n4V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDi07JhFW6/GN4WyOhsdRlzAjPC0l8YgjUjqltGQzxsowIhAJnmTydlvYREaIcegHP1VZfLvhgdd+I3nnFu1g8TW7sY"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.0.0-aa6efee_1613585473234_0.9608471980595161"},"_hasShrinkwrap":false},"0.0.0-cde697c":{"name":"@code-hike/classer","version":"0.0.0-cde697c","main":"dist/index.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"publish-canary":"yarn publish --tag canary --access public","script":"ch-script"},"devDependencies":{"@code-hike/script":"0.0.1","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org/","repository":{"type":"git","url":"https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"readmeFilename":"readme.md","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","description":"You can also do this (to avoid passing `classes` to nested components):","_id":"@code-hike/classer@0.0.0-cde697c","dist":{"shasum":"ea513801c5cb131f6949c42ebf45f7c0f83a2843","integrity":"sha512-gR6iSjaSp7pMKX5Ug2tdnqQtaHLhk7RlU2enB3d/+KxKHYJc6k3+a5QiGLkvdnUD0GIiwLKX/hfKjr3ej4c1IA==","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.0.0-cde697c.tgz","fileCount":8,"unpackedSize":13033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNUa/CRA9TVsSAnZWagAAL+kP/RgXp/60aMucFhXU1FYg\n/gwtGfuD275miH+2LzIprQ421XiNEfLqja8r3v8PLrk+/0N9XSqm0k4gXAGu\nRKf3WXs25onmM5hJGhlH9H6s+p/7O3dn/WsOK6iajHpbUeMm+bQnOrvnDCDc\nQYWtdCG8JVeaC83n2xvB5czTYQ6PMfrSs+Yl63Oitq1gzh1P4tWeBXHEvbo0\nQsC7e+qF6caDRMzSme59eCj7Btod3C6+AhAPTHeb8+dxw6BcaNWHiJH+lKs7\nO8R/lr+Y2SI5JHLcXH/b7vDnVHKtPbmLMLzSccWjH0hNMuHgktu9Ms7Whvee\n/yRxH+cgXQHHi5i7qBNIXuGQaFap0P5L+3Wb7fFO6dtpfVXVNTRgXUY6Erpp\nAsihAnjE3K9tOqCFnludGGj4tQYI0+O5vGF2DWUUq79scJyL+/1EPeVoAK4U\nnHQaZ/SlbhWha+xhRKJXRRmg5m9pc5Yl1K2wzbC76CTzWUZ4WHoSXawJfHW5\nltfksjf2LY7uQWZ7KMoqZHqGbjSSLwVkIWOR8Zd9NnyHxycC1R/n6/txSoiS\nGxsDHW1lgFYsirsyqLfK5BHSquvUGEcguTeEcuCltPx7zaexDIScsnsoq+dZ\n8y3ayu1DZUi/4waUlId5rOudlWs2d7Se2/Fslxj3ht3OdEwNpKIomHWzj9ae\nPuSy\r\n=+1k6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9q+5CCwMivf//Zs24FG2BogHhG0PjIsgh7zH6s+tf1QIhAKgyOX5UtiBo1ESi/fN/QMJbDMf+st/IfyqlcahD5yZc"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.0.0-cde697c_1614104254633_0.45474403403601427"},"_hasShrinkwrap":false},"0.0.0-1f0ad83":{"name":"@code-hike/classer","version":"0.0.0-1f0ad83","main":"dist/index.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"publish-canary":"yarn publish --tag canary --access public","script":"ch-script"},"devDependencies":{"@code-hike/script":"0.0.1","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org/","repository":{"type":"git","url":"https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"readmeFilename":"readme.md","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","description":"You can also do this (to avoid passing `classes` to nested components):","_id":"@code-hike/classer@0.0.0-1f0ad83","dist":{"shasum":"b41d94d1b8caf977eb11faf54b9716dfeb228cff","integrity":"sha512-LkHr8aacu/5kF80Sm1zNMcFI7zg6DHjKeaOb8AEg0Hy9A/eVCpd2N3vYLwFKPCQ9MY9cThzc6Dz/VKcXqne6iQ==","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.0.0-1f0ad83.tgz","fileCount":8,"unpackedSize":13033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNpq6CRA9TVsSAnZWagAATR4QAJDX+NAEC1Qp18s0Okvf\nMZxcPWk/hMqPu+78Wdtun98ze65Jdb3ZsGp0uvgf/OtTDioffbUHefkcjrDh\nFlw/qT1e7R3DSj6LFCZq4BhZPkoLyIiCxAPPNZlKiFcKYmhIgvko5bOFJ50P\nOjujLINqD2VwNHRP5+iGREurHjzrUFU23eHfMaFgptpUhLf8Y9baRe1jhBHJ\nBm9mT2BKVcQ/kDFfAQrF9uExKTYjnqGSi7krkF8h3Nh3ZG488jJ/WDIlSr3L\nFRFO2vMu0MMmXu5kbByoFhfbLkROCHkVZV/0WfZTx6yKa2G9HMgnxRNyEgVJ\nKSvgXg44cxGjagTXSLNN2VC1VK6uNYZ8/Km4/T+YZl+iRxprZ1PP/3npjUOW\nYXeXGAxx+JEmfUaSvzmIDwaWOu591RqGN2nu4WM64fVPMvNzLzLgie6Dy9QZ\n/4/zJmk2wqGdoURHANYsztV1WQ/a5N7z+w8S13NcpSYMnbaVyqB/aOiEWiW/\nlwIpQ5Ckcj/Hv5E/ppuS/cmoEO1c+VjwG6uupBYnwkLmNVMD0p2jNt3rA8tV\n+dcp/StgkQJVqqHrkE3bIn+h1zWbmPWNaMpULxibpgmpnxwBE++6BcMIwWDN\nJNRpwEk+hW/vqIbNm0fn/o79VbNhh/Ykot4zbTfYfg92JLVWYlgOZZlMz5bU\npxO9\r\n=PbQ9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBAVDG79dZhjmSibhDe/sh4sLzW5LSyd/0NfESnXOKxfAiBSIpaOPMJVk9CB5NxQNGUOcUiL8CCHFlSRR1fOyDT9pQ=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.0.0-1f0ad83_1614191289700_0.9225209079757029"},"_hasShrinkwrap":false},"0.0.0-e48fa74":{"name":"@code-hike/classer","version":"0.0.0-e48fa74","main":"dist/index.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"publish-canary":"yarn publish --tag canary --access public","script":"ch-script"},"devDependencies":{"@code-hike/script":"0.0.1","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org/","repository":{"type":"git","url":"https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"readmeFilename":"readme.md","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","description":"You can also do this (to avoid passing `classes` to nested components):","_id":"@code-hike/classer@0.0.0-e48fa74","dist":{"shasum":"17243ca84d5af303c51e62b378e8db65e01cd3f4","integrity":"sha512-CyPYvfl4K5Hp9uyhLhUemul56eiGOF0FNXh5ALzzK9VNhRmRmj1O0mKtLDpoccI8W90r9kQES/nW2FC8jVVieg==","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.0.0-e48fa74.tgz","fileCount":8,"unpackedSize":13033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOCuhCRA9TVsSAnZWagAAx7QP/2yaDmXXZn3NaFgL+bOH\nYDVIT7hM8LV3JzM2jFUdlMOM/oXmiYhGeEeeER5Y4hRgH8/LFBsbw1+5eeVz\nQjAvogEKBpcY122EBzGmv+/r4WbdUP37IteYL8benmKf0Q9f4d6tvNWfp8yu\n/qpgaa4yzuvuns74ROHeLLMHgqy41Xfp6QNIA+I3FrGB2l2caOn7zjKQRYYF\nTsplkENFJNodCmkm3ZOwwD8P0ZUtPK5iom200mkLvIasiQpBgbeeRtZRmRhU\n/7z6l2si+8ABQEOykshi78M2ndcWBKogA1l8Nuv+wN0NqYulziZy5RKWZBUY\nO9T97myibxwX7tW7tPjOXBh2UAqeoaM6JdC4ssI69kU69I8QzdfncmtinGUY\nxwfloWKrrQpEKs9Etbp+crLPEOkLAxSJwZ1e6byoFNKiPpjQdXql0LtKtmFt\nB1SiLxPT65+ZbMO1eejZJrI9bc/1raN7It6Ex44kbDKNk+J4AOLNXrfb+h4d\nj5WxOxrBDTekkmrDt3mL3zq79tMlYoWdaYR3FH/PXLNIu4Jd0uG/uDhFFi01\neeZW4c1bIM7Fv48OMwoOZ6o4iAcEkiFufbW5NLCvj9bLnhs8Zz18eaRf+L4H\n31UVJEvD/SOlQ41YVF/KBvABx+ZhGBwFpto5uI32+xQ89Y1mLknWoRLaq48l\nxTC1\r\n=ohg6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDllzAb2iqbW1bI/+uXyI7fzvnzjeoJdxjZdKBVrLWs5QIgeKlw00CK2PcN7/LAckIQLYubcfnZbZUwn0Qvc79gKW4="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.0.0-e48fa74_1614293921450_0.896099948517016"},"_hasShrinkwrap":false},"0.0.0-2c9642f":{"name":"@code-hike/classer","version":"0.0.0-2c9642f","main":"dist/index.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"publish-canary":"yarn publish --tag canary --access public","script":"ch-script"},"devDependencies":{"@code-hike/script":"0.0.1","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org/","repository":{"type":"git","url":"https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"readmeFilename":"readme.md","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","description":"You can also do this (to avoid passing `classes` to nested components):","_id":"@code-hike/classer@0.0.0-2c9642f","dist":{"shasum":"2b9b9dc4cfcf872e03aa59f233a2c3f4dee5c62e","integrity":"sha512-zTMUpQDrUQTVgAVOQl55NbQtBWslUUVuvd9BzolRqb+moRqF9zNDwjF9KWS4wxPKbjOBs2V5e4R4L9DjT3+Cnw==","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.0.0-2c9642f.tgz","fileCount":8,"unpackedSize":13033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPFzQCRA9TVsSAnZWagAAVKcP/AlxCbXwe8qmat6PrXlw\nWvM3T/LqVsUYfp1uR6/rQ3KrDupI2Q3hzKR+E6s9H/ppzdU8EMYLETy0ODSm\nGSCJMy+zE2X2slpxIifgjquc0KddwJkFuyj1JHJPaki9XJCyf8UK8H2JLA0u\n861PvUsocvTgieYmIZ23Nz9JMSy1n5wtXXp6SdCT//a6wO10zBgjuyBYETqq\nxOeEL2oJ69qMmUL4BnamP0D+W8Q2x2m2BIIcIbsujku3DMe3cOAb0Pp/EEhW\ndHQ2wBFYdoHLQeaPvt8aeYJ+r9yWV0RqnalpSdjR5OeVIXXf7X93JTAHViM+\nNjtIW8j+Cfk3v6rF5t9Y6MdfUIX6j5v29Oty622/kx+4+gMd2Nt8xpz4Gdy8\ni7l1vGChE7wwI3aBM8cgGqBP+R5RcMqGaYYIFUGvpOUF7BFMnVCRGcUPqrNJ\nua948HUnxf0aspB1h0ztXyifp1pGE0Kacf6U5H1RGOHEEC5Uizpzxgj4KAwE\npkIdI2Zqd6odmExuAmpKo1pSUO5xL4N408zgIzT6qSR0jM4ixqPuTKdlnxQq\naAj3CTmQD0QPe1EM+uaEQW4c7PunoVU/JI8XbXbgc1XUfHYvM6Cm4G/p34PT\nxsoJVc0Qm9gUaGm+mBs5KD7jME9ALaivy8kPp45rRGk3hwtdMiWGvf8eqhZR\nworq\r\n=cAJY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCcHtxExjJ1TwVR32iGgp8ZM8CWisE/jKJ7KF+bwcTjDgIhANmVERJrECFd/I3JiNtvFn0YG9f1BTpVlruvILDzL/YZ"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.0.0-2c9642f_1614568656421_0.17181396242472902"},"_hasShrinkwrap":false},"0.0.0-6a4ea1c":{"name":"@code-hike/classer","version":"0.0.0-6a4ea1c","main":"dist/index.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"publish-canary":"yarn publish --tag canary --access public","script":"ch-script"},"devDependencies":{"@code-hike/script":"0.0.1","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org/","repository":{"type":"git","url":"https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"readmeFilename":"readme.md","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","description":"You can also do this (to avoid passing `classes` to nested components):","_id":"@code-hike/classer@0.0.0-6a4ea1c","dist":{"shasum":"b3871c6a5d084b4705d45d2d8e6a1b0c30ad1cd6","integrity":"sha512-NCUWOSm/YlwoVXFm26rsqt/usmeugU0OzDFNAfFFvhdDTWIBB/0+VKSNk6rPgd7dNZDnXGw7d2sms7ex1NukmA==","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.0.0-6a4ea1c.tgz","fileCount":8,"unpackedSize":13033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPF68CRA9TVsSAnZWagAAxroP/i0QC8kVvOAEh7LF/yJh\nrCqYWo6fJYvhQRbpXW0lo6El51WlrVFB6ivq2u5uQXn3j1deX1/JXIORjrYQ\nBXsuUKb4NhCvB7fhYO6Sw6Brtp4h/RpOcMrqkr00ZS4AIVUcqFwrC0xz2QBT\nVMtAKR6dhqT5jj7u3P+giu+fwCs3vUgwtcsGOiqmKcIfNhbY+NjRZrMx8D5Y\ngpEFgW76sVVAC3ApJoFPxu2UoSAoHVR+Pq21ehWdjWive7Hb9wpoAYnwPwRy\nK78Wo+vmCAYS+u6UiRzIycleUIap9yONsy7ZkZVwdUxsIoolzgi1JddkSrJ0\nyYCcjrb07dTIRhwHmVJw4ZxrgPRa2r3NVue5IHefmYIcVahCVYVJD3qEV8u/\n+k5ItaMyLYefCdzqihWIp7d59t+l0KloHvzSLGOJ+pYBzjM2qmcEKd0q15Z6\noZ5fi6qL9V9M8dAnjg71llXlHq1ZfVINWqwVcpd+yCZAQgrMAIzzPBGXKTn6\nZJrU/yJu8eflqB/U6Nmvzeu26ruCn3dcneo0Yfd7Qv0llqoGUv9kA70IC6dZ\nPGBpLg6yxBfKfmN0qGc1aGRiSH0ot96yvZbYGJCMTdHHOlLJfOrIWbTQkwX4\nrGxjNSXi1WPHK0lcfzeIdgzt/uwwNVFB3+n1CoMy/Z+wJwDb63LGHySGl+kU\nD+ek\r\n=0dNF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNMlGxD9hHlc/a6fhA+vnRG4w55jFHihpkGuWHrOSdiQIgD03c8T9Hy1wrNDkWpMbQS6vGzWf2rUQij9R3boU+FPM="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.0.0-6a4ea1c_1614569147491_0.2348208705702317"},"_hasShrinkwrap":false},"0.0.0-4333a8b":{"name":"@code-hike/classer","version":"0.0.0-4333a8b","main":"dist/index.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"publish-canary":"yarn publish --tag canary --access public","script":"ch-script"},"devDependencies":{"@code-hike/script":"0.0.1","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org/","repository":{"type":"git","url":"https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"readmeFilename":"readme.md","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","description":"You can also do this (to avoid passing `classes` to nested components):","_id":"@code-hike/classer@0.0.0-4333a8b","dist":{"shasum":"4e2bb3a304453b5ebcc8fdfaa976f4f2467016a6","integrity":"sha512-mMrpIUZuI9X2kwpA9iGvO8zobC5ygYMCpieqvGKLAhZ8Tk+SZJW/i8AMPAqMPt0nGeG4TiEa9spKSVsnID+iTw==","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.0.0-4333a8b.tgz","fileCount":8,"unpackedSize":13033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRYeECRA9TVsSAnZWagAAPjEQAJ/LIVoXN1QTr8R9isW4\nct25NkemubPAuoVou4s39OLiNyH2yHI4BMCHIsQzKdzvUkEOWususUflE23Q\nJj25noLeyjN6sdZoYkv9ZjG+rFhUxXIJVAMoY5fIDuH2dGvbZXmBdqmhNVG/\np9K8mabaGxrg1Z9Pu0ypuI83gu4y+KvCES9FtKQBKqU70tDV7BtUo0io93qM\nPTZna91qYKzDuSddUO1V6XasKELg51OeuJme9OAkFQwRf0QqTWhdBjdFgqBr\nkmq9meo5FRRi5A2jDHGQ9I5maHv84p7/ZeQQVbsMiJw+uVBIgP524uB7Tzql\ncDTogWzHqkNgqBkAwcbhTZTxbVU9wq3soMxYXOIVkWRCBOInNYjlzxnxZlIH\nvKxFvmO1rUJDcS7HCEN5CONGFIorcrGPD1tenOXxUUwNEVnXZ7HLd3aAJbDt\nyLH1frtSH2zRDuNbbqEzWsqjremr/ACjJSswFGQAoeTU/wJSruP2eS+YQyJu\nkqoupuL4ZvmIhU564CQO7Wgmr5UmvRWRAbLsE0/lQqq9+5EP4BW+O6rZA2PP\nun6kU09flo2PVjCLmQhhjps1l9YrmrGa2u9g96QBSeyPa8Q+e3RLoneK0seD\nE+mJ+hVsVw8bkBEDhPnFo+anmHx035hU5PEbYs5qcETjiuVlHX50jI/66jBA\nG+ZD\r\n=xGR0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3eOYByxvTxFJ0onZOKAkOrnCMU/kSMHtnSdR6tHDS+wIgIUExE0opLZ/W/atw2RPFqnZkHhrgxTjm8S/vZSWYHak="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.0.0-4333a8b_1615169411709_0.9715878041536825"},"_hasShrinkwrap":false},"0.3.0-next.0":{"name":"@code-hike/classer","version":"0.3.0-next.0","main":"dist/index.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"publish-canary":"yarn publish --tag canary --access public","x":"x"},"devDependencies":{"@code-hike/script":"0.0.1","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"5af3995f94e4c4c58f7db87c063465b4741d3504","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0-next.0","_nodeVersion":"14.15.3","_npmVersion":"lerna/4.0.0/node@v14.15.3+x64 (linux)","dist":{"integrity":"sha512-zbKKOA8JaWHIMXeBmmZmG9pJshKbbas8nbqECXPSdjY+o61tZckRzHj/xUYWrBVb7oDP//h2n10lVLE1d7oY/g==","shasum":"37a1b0c3f0f0a10ebf680f7ba4bece7f19daa3cd","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0-next.0.tgz","fileCount":7,"unpackedSize":14142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmEDCRA9TVsSAnZWagAAw/4P/iBbwX+mDciZ4O6uqATi\nsvbv2NdN+IwQ7EcKCEU1T7VnFHeJQfIL3zBPMxT2jIugA8j9QsVFIGmh/zEC\n7iOLKeSycqego8yEuSjsSsPisigMDrjR9Wrpexase+kGinLK4qYOy94db64D\nqtknEt1gqYrSKa2kRfQl5p+gtI7ykCalKrhES6/m1xWkerCZA0D6+QVXWjUA\nGmXcVc+cFp0rmDVej7R/mPaWQkGb2/8LOBXHzQ5ahjgvHvl+M46Q8rOIW7vu\nvDAvuTpmaEuO13yhidZm1G6pNNS89HIX4MzXOFIxcNx1yn9p7Qypm0f+fN5+\nD3bupw2nN9hRiPWMD4/cy+2p7vu9RD77K6NukVYc3EYEM2MXMB42wc+cnO/K\nMVYCDEbrCP+kncNddgJYn6ja8o4D/6j/kPdQYxWftlzN0MwFLWDcMSumJjoA\nI5PXYGeKuu+2pVHGRFfRgJm9iv9/rOuK/h8DmiuUXvmbW9qJDgu4Aa1ykXd8\nuJV1fx5aGLcYnQwLyh0t+cx98WVf+tEYLOKm9Ehz0G/LO1lGtboY+s/U3WaI\n+XMPJs3wkmfPeOSy1BaCbgmX3seU4ead3WHk8Ww65JQzNppMnVoKwtxO2bcT\nZI8DuKFbhqR2PTKhgMocwE71/Z+9GgEpBiG9pUEjLSWpymhIDIyaWSP6M48p\n8RNY\r\n=Mx/a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCcXyuTKQkstt7+MsIB+7Qf6TrFAHAYZrblMBMa7UZ7KQIgGkkVeq+Wjb7m+SsUyqX/ekQT3diiRPVjCzI18Zn5Rjo="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0-next.0_1615487235381_0.8591990494604997"},"_hasShrinkwrap":false},"0.3.0--canary.32.323f72f.0":{"name":"@code-hike/classer","version":"0.3.0--canary.32.323f72f.0","main":"dist/index.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"publish-canary":"yarn publish --tag canary --access public","x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.32.323f72f.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"323f72f61683cacadde7f5396509202ae58a45bc","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.32.323f72f.0","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-/G3pNqYQxBHxPIU9dAt8fSdBQbGxR1tAHAM0Xt73/eN0cLEtKImm691CSWTHbEtc/e4WoY/v2znjozKknzPIDA==","shasum":"167006b80cec17c27a8b53223eadc001ea5a5893","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.32.323f72f.0.tgz","fileCount":7,"unpackedSize":14177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSqQBCRA9TVsSAnZWagAAIxAP/RP2z890JznSR215Rxqy\nDmNfFLrE6XAfIScUuW7CqL3dNIKdOOTW5F3eBn9o9JgT/iZe3t3zX/1XiXC6\naj0ep52uVucfvLUtig6uBw8MSLhg5kv9Sai0AYNLpxx4DHorRQ0EhbtOl18n\nYPUPmbJ3xMIilF5H8xSiBIistUaUu4t05BoRU/XNQObTUjAoXuHef11+O61X\nIGR3MyvBDGVUI3J1u7ENTWDyemKV0mTzK7pm0w7V+897+JRRgyXchdU9dwaT\nzzaM+AjuA0H66hshFCV0D4s+9Wdf3eN8dNYXQn7rgqgU2PnO04JhsPlqtpfr\nuc4cz2nPFN3YUxkqCQdyvZtlbi3U7hIYwqenO7UFsS5denVYWn9zk1d/aoid\nOigsKktq9kiq2vX0dS/iJ8DOsxpwY+yRGnu30FIB57qbgccfzMapdVclnKyv\nwjwrSGQCwtseGBOX8RazjvMwzIawl2ErjNeu75YQqlnV2/uJALcbBqbXmshJ\nHlhErpmj5RPZbnpvmZRwfkDu6HFFycsBBFKg+lcUWLyzGnHxLH2MnJNguBsR\nYgknzAyS8ndSnX9UpLQ/KcILyntJKRDc8FX8/6wTUhcucawX+srZ+da/o7Gz\nAX3of1Z/uRg7u7tUkef+WiT3mLTnF1AAVzKP6qXUVw/WHKlqA8EpcpvHwg2G\n8hSl\r\n=wbvF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDy9z4F91eqbxUR/2dapjKFOB//dA/OBdiQz09EMSCSBAIhAIZAgmtxDSo7qmGL2tt1+3HKJzXqFtSkAGBQgn0rrjOH"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.32.323f72f.0_1615504385467_0.05405475652662872"},"_hasShrinkwrap":false},"0.3.0-next.1":{"name":"@code-hike/classer","version":"0.3.0-next.1","main":"dist/index.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"publish-canary":"yarn publish --tag canary --access public","x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.1","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"18ec9963887e9220e24ab2be9bf553c291f1e2a8","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0-next.1","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-ZZkTuP8ZSahIUHUgoVbOJgezmlgqLhuSZDaoG4BhbfgO5zmvV9MVkA4TwIjSwGJO43hlMTM7JCBDJIZeEF6qXA==","shasum":"998fd25bc1f2f8a2fd41645934674d13273c299a","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0-next.1.tgz","fileCount":7,"unpackedSize":14149,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSqXPCRA9TVsSAnZWagAAz98P/3VabrM0QXiC4U/6lxjz\nmX6LSKjgv/MHZz+99jO1x2phBeKiVSMGEfuCVAOtpmLM2oVRFFap0SMG0m39\n5NM0JulVxPvJB2YqKAB9YtvItBy7haWStPYIm+Qb57O63gY/FQ3jDsvOWVVE\nxUZ+HTx3F+jcCcx+wB9aTZb+WoIXiM+4+8ms66TQ8PckpKA8SQbBPO//u+nM\neFMlHJiDkQ9/o8/J3aeHcOwj6Eb7ZQGbNgDUE9sNac+l8rnsbvRcrmzePBIX\nCZVLcUCkzfw9JkwxLVCh6GeYUKf1lG89VFvkkaRgkTQzuLAsp14MtOonCvYY\nORpRyC6HC+pEyOb1U9vwJ3+MY/py1lSgGH7ysgZPDOhU+mqfH+erViX/I8ll\nCd8ND7zheQdz4HAIvSCfg2oxHBtCKeE8GP9DyW7ejnz+VxJUpOvBdazBntiV\nBMw3yXrY9vYUHUrlENb2FUJTSf9C6/VmX1mvvb50VipRsmG8X1bnWExNrqQ+\nikHXrZQnudNWqrwETDI/RTwL+90UUJFI4QGda+/OtxB7bovSFKTdXje3ZnQu\nsB0ndRw/WqFZGu7o5CcSq+oWheHkcqH1DVWzSP7zFxeIxZwcPAkDtIYXjzLa\nupLHMo7vL2G9q2twaXBENhe+3DVD0fq10pBDaaosEepNmIikctkKX6HM15le\niswT\r\n=r1VG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC4CQj/m/AF7DQDOBjoImr9SfgWl2vPr+P3iENXo/bKPAiBpbVaHsZZ2tK5s7TN5MQHWtPCLfpDQBEWGYsU5GCIg4A=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0-next.1_1615504846630_0.46302465562198725"},"_hasShrinkwrap":false},"0.3.0--canary.34.f4f0bfe.0":{"name":"@code-hike/classer","version":"0.3.0--canary.34.f4f0bfe.0","main":"dist/index.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"publish-canary":"yarn publish --tag canary --access public","x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.34.f4f0bfe.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"f4f0bfef366781ca65d41512cc3a6912c5cfdfed","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.34.f4f0bfe.0","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-R+mdv8f1UvzVeQ5h3UZ0VBXO6pkeNbzBJ45I4wxEk7iqkd3jKuq/1lKVNmPr1seEf6WZwRkLBkQMoYjygPSfPA==","shasum":"74996b30e9ae643ba631408ba1ffa029385f4deb","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.34.f4f0bfe.0.tgz","fileCount":7,"unpackedSize":14177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSrWmCRA9TVsSAnZWagAARu4P/RfDJ+/SOpbKAqUh0SKX\nslFgBXGLkvKAUhfQIuMEwK57SQSPJ9sS3YytejCdikpUTY8fZM3AnIzCNu4q\nTDw7g76f9SxBMCAOSY+PjC3dWeQYbY/UfJxkwxyuGmytmvTmHtITZmENbo5B\noQbXUmtNU1YMijpAYpN+HEd0DwPnk2OiwkMyi8H1TFZ07ghCO6mSOGGyU9Yj\nJqsnUnSSV9oLGgvcfET0q2Cdr8dFFNnXkRfFVhLUAy5uel8QSvB+1RYxCVJE\nUgjdxmWbeDXfi4XBwzPDOuBoxWSBNbwHpcOzgCtR0doRrzzeCNF5a2MJxw5m\n8yw0wayI+DY0x7iJ5/FVBlXtsb3knX5cTstO+21psdM4kw8/opWwN4uvX+9K\nes3IFjV5/sRJ0lfn8+Z8JcHToqz9SHBuIUsfkpAyVw3v9PWEQJenEVYr2KDa\nWJ1x0G/flzxxSqoVN930tRDI4IstDz20f7jhsf0CSaNopCel4q2Sbx1YTbfc\nXSrTV8lmUrN5Y+B1dzs73SaKiOsDjzhqXbE10xybU4x+xEjX76Ic5LJNSNkt\nGEVv1769CIZ9J+h3AX6K/GAiN/7tXSpGB36zmsO2WkGONYfa5Un81b5HiFMQ\nA7SlQhNhqQn0d/ab42jWNPpR48cjdlccOQYvlGwHbkT/eis/GIzKlKc569T6\nrqtE\r\n=/rE3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHINRWeT4W2r8jJ3ggcJ7Ap+3LV0N11APZa2Lw7V3htbAiB4IDGf2ItORkVyKTxrMp8BumOo7gTS3KT9HrBAZEMRjQ=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.34.f4f0bfe.0_1615508902184_0.5964166771124582"},"_hasShrinkwrap":false},"0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0":{"name":"@code-hike/classer","version":"0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0","main":"dist/index.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"publish-canary":"yarn publish --tag canary --access public","x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"269a97e9d5ac21fec0f226bdfeddd37c99664e33","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-Afl9A9Xe9be8l6Nz5SyGSBlNSxDzrEYpIz4RUgqI5gkbvaXzvT/oohvkhn1054hhFtjafBRHAZq4ETyo8IeTTA==","shasum":"2040d78265e52f24c9e0ebbe3c7755419e110d79","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0.tgz","fileCount":7,"unpackedSize":14243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgTlDUCRA9TVsSAnZWagAA9DAP/11ZFeaiAr4KN0gj1hcC\nlsjIsAUtfsLFCIpf5rE2d0n3i6Es+vuOSHYAyOZkgEYN411J63mjYbygoUoT\nMyzP4GDUQzEXOvM05Yqyyh2m2DO5II3z+I5vdpRx69wSbeURVUSkFQjrZhrS\n3hLljh4anCoyT9uAkIu4VY6PNjEDAwezRJSWuFofLUrUinkl5BX7GgUsVbzT\nqJpaTHr0bE7GPVJvllpEIKXHsQ58Qswg32ZWqWklrCPINqAUbr+IEL27u0qG\ndENmzF0zTz4ljyBCDiIX5vUX+C3vjE89mAQ/sSOcEPD9UZdNBH2u4VkSKozO\nwiaYClgy7Y+LUsKTVKH2g43lt55Hy2Mb3MnFrOniZgBBktF7HNDLyoHdMN7U\nKKGpg0DK7eLwnKDHJLaOZ7inb6bTRCvWrOzEHBMCuSgfjRthtv+SgwJvSbRg\nIsf3zOkEIjJrHJaWs8zxO6EZLehyVlOeBsZ8gHswgeCVIlBu2b7x/G8zFpzX\nYbkm6Nb5ZzTeXCayEOjYHV/OquCHvMMI9IHMzvU9fnPr7b1jFNQn9/NwUyCW\nFSsPuaRi0euuh8hK5/zrVHVv6kSA+5k1kKhJrjpNhM1GDsaVbeYE6nB/AOsm\nw9xQXz860xWgJBWBDznh/C1bzTzB1J9JJuMg2fnsqyfpg7ilDbnQcl6Quqdi\nvnT4\r\n=ACLh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDHfUpVTuzTzPHc1T9I83HE7A3jDMJZfyl5IgQxQnoMrAiEAowoZYLGXTLoUFMjHtLj9aI0aUsa8mfmF7liYjEwLO5s="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0_1615745236227_0.9967527081961272"},"_hasShrinkwrap":false},"0.3.0-next.2":{"name":"@code-hike/classer","version":"0.3.0-next.2","main":"dist/index.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"publish-canary":"yarn publish --tag canary --access public","x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.2","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"6c9d78549b02682cd8502391b9f3b85d0ee5080f","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0-next.2","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-Hn3hi7PpSFUyA7NjsXyjH4G195Q19hnmVTZCVJdNgEaKV2XC0Og+4RyLCmyYV5hFqfmxxVVXx3XYwLX3hwuL3A==","shasum":"6a5b5507c7812be2dab9047d2072c867c9c43b35","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0-next.2.tgz","fileCount":7,"unpackedSize":14149,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgTlP9CRA9TVsSAnZWagAALugP/1F13aGYs4MAzwWtPUJD\nP5vjcewvMwnzlkpSgHEgy3VkvYlBSsl8QXrKSDS4uelVwfcB+iiM7JyQb5XQ\nFgMALoLIuA4v8ThrgsTBXo9tY6SGvRieVX6hf1FDtpbqBt1vul5QK/jB3VJB\nGMMemcWpEPsvwrTpE5kVUdaApaQBOw6NhnU8mchFjJ8xDUmlNss1iOffYqhH\ndk7fCggE1pXhp5Zmj8yCrx1PS8Eq9VhjKLa6DiMCh+Rb3BxQsqqcgjT7YTq7\nRAaTLyPI+Jyz6kgqSGDxTqgS16Va/sOlq/hgOy5VOafTWJRi34UW5mZF0sfN\niNLlBHkFfvyI1Y6bqUnhOZ0rrXXiJs956R8iqoiJ+h1N1fmNIxfmsetElo0G\nVDAleXdTtEsdvOT5dHZoN104QxqFjP8Xfb0w0QtJpDLLm/EZiYougQ7RT59o\nS+g/5j/kt0a/CFzaSij0wxz7nUFH0RQ7Xu3n9+O2MSOk9JjY3mZ8X2ntB6HG\n2XMKprEw8w2J5oLRaVO004VpTm9YAH7lzD1GhTuF98TTlI6cGOyI8kLFBKEr\nVJTyht9tQecNbxssVGlhfJYq/m5vBJQ6QiZQzlRxyWUdX5jaUo4QAEDOIXjo\nb+Wc55P4I/rXn2Yv5jQ6SXn/vX17Te4tqt97Cn5tQ7zNaCEErFjFJ4Zv/7Yl\niot0\r\n=Ge6C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbKjEnmubPIpFzIGfaA+P2/DMDDKlwT4VgL16x91LJ7QIgNg9tonEBZWbqWkrkwI9e6ZMY++CRtO3ZBtYBjQ673/w="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0-next.2_1615746044698_0.23230484970531307"},"_hasShrinkwrap":false},"0.3.0--canary.45.6c84da7.0":{"name":"@code-hike/classer","version":"0.3.0--canary.45.6c84da7.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.45.6c84da7.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"6c84da7eb4b19bd4b845af42523b406ba918ff0b","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.45.6c84da7.0","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-dFtsV05VsX5tu97PKUwHUsX0QGqHFM/eaFjhgwno/IcJCYNvvI96MdOVdGS2DJEvsEVAxqImYylWpQJatvyBFQ==","shasum":"095f418359b1bc73b1451e93f48891ad21745e4a","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.45.6c84da7.0.tgz","fileCount":6,"unpackedSize":10389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWZWXCRA9TVsSAnZWagAAU8wP/3vJN35woAS3n6vNOJUe\n7p7cR4KgPzdqN1fHuPUOWuFQSxXCxYhO6lW2zt8dGVLkAqY1z8UA5a/hdFPx\nXXqYl7OsNN20hmuePR6fol6Xtd2e74X/5qBZBDK5AuFUdvv0NrVEHP7lbVO1\nn8kFAmUR2TOCsE8CQZzFTlr9pSBrTZmamk6PkUhWpxaT/LNVU7JqMPzyVxv+\nmBfczDmynbnKmp8tfw/Th/WMLl/YJFOS+M3tWDd0wrwr+u2jefnSl8CRMC+J\nZZc7OtzyXXH65pGtRsKH1xvt5lUtWjwGFr0BFQ1iB/Ng/66oCQVNm0AEeGgr\ndkJmtuQpIWDF9iTykMuAz7jFtwLAEeNXEAwzVaZsf+C2Mbx4Rt1ajuB0Mu3+\nIr7nQ6V0ciqgNrPTLGV9VnMe5/GZavZfzz8VK/RjQwBfnBPmhVQUuKS6HXU7\nN3VccjrCIfuSOQweRJ3SMNbJrn+YoXIMz6APkSjbzJl7x831MxapIaEA1GV2\np2ZTWNVMO3czYpR6E+6EQlIMt2fje7XPmmpKu1xzsTOS5OHNuBb7heVMv7I2\nXiJXGfPUbft4X0e8fBWuLBBhbson22WiGuxid6aYJvyN6ci9SwLgY/BbNDMS\nsILD97Sl2dyzV5ZirldTc6EL+5zPISoOYPUu/RSldUVlqAcYVYh5ii2wfSic\nTNUF\r\n=99Rq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCuN5JaorTQ3CVp/ejVUxcujOy5jQ5DX4g3Kiyagfg1JAIhANTHZO+JmywPgXAHt8t0CXxz7bTt2lHrmi/mkZEt6y48"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.45.6c84da7.0_1616483735378_0.12575689900277798"},"_hasShrinkwrap":false},"0.3.0-next.3":{"name":"@code-hike/classer","version":"0.3.0-next.3","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.3","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"78537ebb04d6370e4b9dd3a8f35a10d6fd2c0250","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0-next.3","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-UAh1hHiDhvxmV42LcLnWkgpcZqd5L3dHVGXV9l3sMaDTFSBGe3VWsBkpou5myFRNLsDRVw1eKuMuKi/tBpV6Vg==","shasum":"b7aca9e47c8edbc61fcd92ddbda0bf333407a3bb","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0-next.3.tgz","fileCount":6,"unpackedSize":10361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWZf5CRA9TVsSAnZWagAAZYYQAJFyqobKA5VQSlmHJQE8\nbwpL6byfZRAbe7tgeD9caT+Qm+kRxUF8CnuSnfVqumxgUC7MIbyXqv7DO+vc\n/Z5wpMDS68OR+DRmlTfvq6L/ojn0T6yUl/16wCe96bWYPuRGS3jj5tdKnxyj\nNop0q0ssX085vhG2gNzoCfTVM5U9RYwhtifJpA84kNeVJ3m9j1Tf3OXUXEUR\nhpL8WLKvAxBLXNxlmuCaasursH/Jewi3NjzxLAQp3pznkxdVq+ZHFXgO1evg\ncm2tAkgG2RYR0l1FUA5pyTHq9Cxr+BjmM7UNmbHmp4126JbvhUJWvLdUXHh1\nBNsuHRA+hrKTTrHKcxM4c2PXLs7/tNMlVKrisQrt6of9zmSfTjVZDxBQ/sh7\nhj9JnsUZQZsaUF8KcyJDEf11uOqU3INmwdgtZEDqgWABeY5RALM4HBHj5Axj\nT/7/IgJM7bpeVemKgCQ9nBjOtOEBlr/pXw8QcnE8/2WlM9PMAjzAvgW3v5d7\nd22FNIhn+7jFDwH5+tcsWBy+JLmydeF7cT+o7J8gYFsL8MwxX63NHzF1stsa\nXsIfrrGruS/PfV5JiBgOr3Ac7pi3vfcdBILtsjl/Vejf0WCE/1/kNdiwVe4T\n/hhWayF7l/9xls6EJvN4a2rwyZYZ1qpzYDXCZSY9BE0EFO/SDxuz9be9EDrr\nXND1\r\n=AbuL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGQZH43Bz5q+hWi4af2VUkztNqTkC9gj5FKr2Wlm/mP2AiBRgRpRAya1nR1UzTk13SPnZS+JNYPpUVdZGJjKN3B8uQ=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0-next.3_1616484345184_0.577275393886231"},"_hasShrinkwrap":false},"0.3.0--canary.47.52daf46.0":{"name":"@code-hike/classer","version":"0.3.0--canary.47.52daf46.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.47.52daf46.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"52daf46c233ff995d2dd63172c8d53060261e50c","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.47.52daf46.0","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-yIz77PJEaG7mWn8S4xZxJpqOghIutV6GrLfWkq18t89OTlnKv4FUbws5391p4eEEbWP6172RxdbWfiJjF6ki/Q==","shasum":"8b1b7d1e7cbbd893dd00e2a0bcd84c709c887c96","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.47.52daf46.0.tgz","fileCount":6,"unpackedSize":10389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWirFCRA9TVsSAnZWagAAUj0P/1huaF/dKCY4JKxVu/AG\nI9Tq8oGtRbQgvppyFbXLkkL9Ors0KY/6/oo9TF64/bZL5IljMHoz2GWqUiiQ\nJGjICwj9N6k3Hvtk6T5evn3HwzS87G6uxMkq9cO5GWVlIHzlvJDJnLzl9jUI\nn/bum7zDouh4DJjB+kipMhImnW+raTEcSOEzkOnGgJUvnCKzRoFz/2ESfUfG\nTbbdSzmYn+2uDPkKyFgOqUAz5Q3rdNp1LKA2Cz31I7vhGHCnsks9ILiLXupw\n/N6W2n5XJeFnosCVuIgsB3CFdjXboRyvm+9V6QHhI8sgzbIQDLEiNDHfwvCb\nMcM9CywqKiC8IQY3H/I7MgSyH9dd+CuRqd5TS8Dlz6eJVPbVsjDUe8iIIBCb\nns1IfkQ/PsFOzk8WyKI31fyvN3rsUP2dMd1EoQFUXSfJQs0MOt7pamhZS5t3\nL7LC1MOQ9YcvCgXiJ/CBNFf3kEGzPzpXVWDCktr6GMgpKbMWx6zCu4NXMDS/\naTl2XV71a3pQcRYp8yi/jDZrw3hAAT3Y+8cTwOei4mUH1HLT6S9pboRU7Q15\n2n4gDQsgE0eCHBmu2sE5Tpzmuc6LdO+rwsaw5C/+rmUXD1NFuZvJ/k3+1FOw\nhpAorXTWN3gXzqXarlrBkicftUPZFhvn9pBlLwhsJ4tEB0j24M9C7QKJYMQP\nwKnT\r\n=tkqj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDuABRXdYGRILJnLH/W6VLEbiaSmy3sdk3SVs0zRZ8SSAiADPgD2unmaO97P6wFRh83szi9Mwl6TQsPPD+JpAozokQ=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.47.52daf46.0_1616521924641_0.7943817444441554"},"_hasShrinkwrap":false},"0.3.0-next.4":{"name":"@code-hike/classer","version":"0.3.0-next.4","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.4","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"44ce0c148203f8222579db3c376d36a5ed414a66","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0-next.4","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-1lG0c1iFMHRuBcU1vf3Zd7hpzl5+X/XXVyEhQ2mRtZZtpBiTslYvodM7rHjbTugugGNR8m07HSnOEdKIrdrlug==","shasum":"bafa090fe18514f62228d51216f8119606a094a3","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0-next.4.tgz","fileCount":6,"unpackedSize":10361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWiwhCRA9TVsSAnZWagAApl8QAIEYZ4k970AwBZUa2yas\nXiivxTGW39yjgAgqME8noDMHR6fcmttoHdQXmoQByzQm6AkEyWwZZV5RuAfY\nluvw+/o2PX3SoRWOI2JC4nuiTIdTHUMPBKfPVwDNDSJdSCFGXJbjc41/PSQm\n07JLDiSj7saapMpp1Xnfb2eN2715Ev4/8PpF2KV3ZO+SS0WNzcXa7o0U6rCR\nw7IwdZv2FZqKN/n74ALULIkd1z3nA+s4QGOEDJ/eb/hl2KWFrQchw5xiSRdV\nTNkBSj+qlDVnO6Kt8rK8G21vuvT/MU7HCvua57xVtvkn/3NsIw0H9aoIOsJw\nwPqLgf7Cd9h/2Etp1kIHD1MM4CLzKhDund03/FwhkGu+Tfo8QVCTz3dPSVBP\nYxfeFeoOhLRSElo9moVpGOTzbAH1jmqHYK0T49zxgUtTZATLB1uTNaA35pNz\nwKaZBYGMs+HSmeaAjfRGA97Gh29pXMp888X1lcVE/inxuaiRKqMToFLI/sYA\nZ+MokGUgALNvzh6D0HAtMGuKr8lmOyYQMjKmu2sLn29C8tbuqlAsEE/0iNjF\nRwn5GfIAbfyW1qTBQxGuuNOuAk08Y1qIgjnJD+PQq9SxTOsxIGDHYfwI5rar\npJw69xE3d3FpIKh4C8Th3VbTqjEMhJk00bMkeqWMx7Yf1gfEGU88B4UsABBx\nQIvq\r\n=M9iw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICGWgI0SvVje6i30quHThyPPAG+pzGO1WPbdxBRFw1KDAiA3n60Tkdg/+nee6GzsIbt2CRHyx0Dp/OsJydhmnvx5Ew=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0-next.4_1616522272948_0.005602142761549578"},"_hasShrinkwrap":false},"0.3.0--canary.49.d3183ba.0":{"name":"@code-hike/classer","version":"0.3.0--canary.49.d3183ba.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.49.d3183ba.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"d3183baeb257ea8b9d7baa287d4fe93d2517f956","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.49.d3183ba.0","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-1+dI3YVfWKZ7kZGyhALvXrI88LcfuQ4TbdXhpDgKJ5Z5wIWHwhdaMlZyDrWIwfVrAwITEis023yRyHu3PkvK7g==","shasum":"42fb4545bf4878981bc541d44980c02091dffd42","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.49.d3183ba.0.tgz","fileCount":6,"unpackedSize":10389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgW8MWCRA9TVsSAnZWagAAQ0sP/3qnYH9Q0zi2izrR+oBy\n3RzHRfN568jnPGuU2NRTNhtZLCuSlJ6kh88F/mOEX742zzACBNlB/BCZiNHY\nHoHr25BT4lK+xB1lk1/63VgnYfPHEIV5HPXRs7J7gHGRfDhoBilcCvJmotOD\nraqzwxxgLW9NMQwRnqZD9gEG0mPqdonvJyUWjE74V8L+rpK3jh6kT9QBck4+\n1cTUwv2JLwH6lwkhb0oPQ4/J20x8wfzjbzGpqJoTw/AqMMw4uCMpqJhmkHla\nXDxdGEEpCGYf0pYEtu+PDKMRZFKqP7Uz7Wujt9j52MLQbmmYmyFhS9JibTh/\nzGiiDNFKsbgaJ9+1DEM791bKjXnDwQ2wlkMOV6VvcdF0vK4AyUbwz9UIyRg8\nXc+haWQYuD+K1v3+vbOl/F9GV2Jva8RM3OouA5IgbpU8T++jhnw7M/1Zp/bw\nC4vJ3myQk1eV7Wkesu+vbQd+QgDa7zmB5OlHF/3DuEQV7Vjx+cumo4LFMmuE\nudU7prPgluKaYH7XxQd8vxa++wX5DcCvaivVR/vpXvR8dyeeUtP37PNk/U4j\n+r18MTvlhul1vcsqF/stpmBgUGTINiVdynn34y622o0jlZ1xYIGs1Gjh/5nX\nFBHRXgRopKBmYeCOfNIjXpFHs94AQS9K0MYit0f8a5RL/BEDej7IC2PxS9TY\n2eTA\r\n=J8/J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA/OzoqRGoCJLBmlGG1chLMG/FjiOXMZvh0x3gPPlhPFAiAaMTfKdLW1nBSis6rQ27gpTd832UqEijWUbYQZu9ckqg=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.49.d3183ba.0_1616626454404_0.30932108905683275"},"_hasShrinkwrap":false},"0.3.0-next.5":{"name":"@code-hike/classer","version":"0.3.0-next.5","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.5","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"e6c5886085211baa544c3cd0dede0ca07804a5fa","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0-next.5","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-hUARQe6DqBf/51/SCJzfxE9DXTSarpRumMJ5b3FYfEUYY9RM1ov9vbQvdvfi/wHetw/vHzpKh5t0WTUpiVhCcg==","shasum":"b9df30618c604379426ffeb68cb8afb54ed607c5","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0-next.5.tgz","fileCount":6,"unpackedSize":10361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXAgxCRA9TVsSAnZWagAAlD8P/RIGmmLe3sn5sFWiJBcq\nCIkYSh5oxQnvW/6Klq1enl8S7O1TQctEp1ToKn7XXtkjAPfG7mP9gYlAX/Mb\nhCBknLqNaUstPaTKWuLnbDvbKjyh8zFP1Y3wrn28bk/mqhb7bcs7QveLXGui\n0HxPbP3PDhr1JxKiUuiZdFvHZLDhxfH/YZ6BT1eoQoi+5Mgoycz69x9svFuQ\nffhPUhn9dXoSYB937HM3wyiU1aSpmMJ7gKRUCSEI/z2vUNOmJPLwPtu5qJuA\nVuxDteAId041IS3wvQof19K8XwHKO95MdBZCA3uFxRT2xjZ/x5P/G+R8hVtH\n2/6N6BLztO37hjXU6S6FRwUjo0jem0Mvw+/eymWGuHgjEccMt5p7AzqLtLEu\nHS9AN8UrQXQBFUgrkXU2zd4cWpT/LGiaj4BQO8bFfaosZ2crUMp00pP346Ik\nsOk9+XZebhvSViE8QOUGhIXbngU/ovc9rUSM0S70erPuvFp5MYXXKE6MdhMC\naXlIbhSpp0nWN61SfQd2XjqffvT1rjp4e9JX9gi1BrXXPgWa+/hWJKcvGgkC\nOfGiZSd6G14gThrWaf8UEzooklQz0X477jYR5JC5VA69UIuKoWVdBY37Dqjj\nCpGNDXkbtlDGyJFcLPWb1UfvMFzNRWTtypxRAgpxou+L5U11ThOFKNrPDNCJ\nUxwH\r\n=jPon\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCRV/L0YpT1uBJgisDMSsymqpEpV2g2OeoT7UbDby+NgIhALEBQgZ8ItJjcyxWRS+6hy+aRH74bObH+UInd7i8wDfG"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0-next.5_1616644145115_0.5791155943252966"},"_hasShrinkwrap":false},"0.3.0--canary.56.84f43ab.0":{"name":"@code-hike/classer","version":"0.3.0--canary.56.84f43ab.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.56.84f43ab.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"84f43ab949834b5cfd0872258754e91f54964988","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.56.84f43ab.0","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-WPDoaZxJyM0BbDyoDnV8iuiZDYM++QpL52y03XZ5d3tnDDOAVx+mUn9KQgeGbnmtjNqi6nAgm9GNw5dBmtlPcA==","shasum":"5f4d113d820ff69437f601586dcbee04db28d166","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.56.84f43ab.0.tgz","fileCount":6,"unpackedSize":10389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgaydUCRA9TVsSAnZWagAAtxsP/j/aAMi9Ek+Up1NYQy4V\no+tsoe0cC02cu6xt8DfbevS5NKHP1yIKz/lvDsj9AaWCyipY1ASAwRy2Z1JL\nfFthOKqaa7TlffgptNkJexgMLwI1seqNL5N5OIko0Hz2IQzNAYx7/fmxIqcC\nPMYmbcWd0liFr7FUUKFPXAJa8e9+rjLqrIxzCX2AVnOivF6IBmhNoIRJ6F72\nQJNb0YNQTjjpYxz26pEvt6DfPSb9A6pbQ/+64KfcaQWF8BPvhp4ziT9Vl4P5\n+iCC5st45hosQctmF3r+afeaCuQ/JWrE4ldsYRaPLyZj9a81yHQYRt+kKuCX\nKpsbc6Mx5NGZsQGdKtnTHzQvBkHqofKtaFQTFXF9Fx8GbBYFrBJYr75wMdCU\n9Bqy4pOSS59O2+LedkOj3I0L5u+RXl+5WCQFNIVauHGyiyiLXSThnREYhV0x\nTvrq46XG08dFiLqbK4cjie5A7bhJ0hPsZ6h97OBt32d0v3eh7Nq5Vw8XAVX9\nh5R2GhZtJQz7JMAVq3Kxjq6mjTOEHRkh0FJGYN4vWw1XPUwWhTaea8HbPubF\nE3h6xaSU92QSReFIAehRxsETOZNZ2wPsWQmEBs8CfjCHkJr3Fws/A2LClto2\n93lCZgEL1bK+BQnrtD/v3LPmuyii/lcHucVBWiHG//aMYwmj8QV2bjm+d9Ym\nOz2Z\r\n=XLrD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbXywIw1E1L7x6//38yW1jQAfGDGOCeR36hLZSCrV4VwIga8uOlEWEuCbbg4DH8AM7YBC0Z84JJqigGHpy05En+wk="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.56.84f43ab.0_1617635156247_0.13974076214710585"},"_hasShrinkwrap":false},"0.3.0-next.6":{"name":"@code-hike/classer","version":"0.3.0-next.6","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.6","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"aa70756f1383a12c61658bf148c172f9fd0a3012","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0-next.6","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-iuOckJ6Ne6oG2hbsT6rMt50/z/NMzYlTlvQE+zr5OZmMxTrix1esnq0fJ9zs0rUrgrpZz3zAY3S4BfN2sZBoPg==","shasum":"6391262d7d10779edd4728fb74c87f75cab5382d","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0-next.6.tgz","fileCount":6,"unpackedSize":10361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgayh3CRA9TVsSAnZWagAA6t4P/A6t34uo/UTmWs0djHuy\n17R8lvMmcXCPRa7CbDSx0Lqz8cwPerxV1HTvRXqIft/45kaZ+wIFCPOoMf+D\nLQ1CB+A0j2DLY4q5059P5eOdWbCiOEJH06nEs1kjSo2KC3ZAbAdXddHTAufI\nkGnTdzyaM5NUPyIo0bbbevbaf6mwV4uN/HUXZKU4EmihLO90q2fjldUktrnW\nuaDWyxAraEX2PRY13JkbYm7kf5ND4RrDCXgTRHYbuXkSwHhigkDw3mTc19TQ\nDlarwHdt8TDscPjvRVp8YZI0HfJWHnH1QYrL8cCwPBQXKcv+edWAZdLQC47k\nysCZvQhd6MaH5jmOLIazdPmJxAdZDYsZv76FVba2kX/K1H4Z7ENaHQ98n7Sw\n33Z2aotPXRXrRo3mFMXAAW7rOFVp0hz9/vW79DrBY+XJadU8558Rp0yo3gCB\nRczTGUgvN7cY9EC99IJygWTWh2BFXLKpw2S7F5HWEJCK02j/dOg/DcQxDX5r\nvKmtvEjKBUg+3i4esj/7k+QUSHUmJfDekYp+rL+yD30PPDDoVIL2sUrAqbIn\nz4hTS7+pa6Lr++oOVdIIjW2PCZEgpwTlfzb1SF45lmv1+qU66sBbyQj7cm/X\n8R/WgSDD7FsoPFEMdkTek1lm6YBLeuz7OTmuNRRJ/7yaVpxDPcQ75biAK4DB\nBgjK\r\n=BSDS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDeVe2Wp3iZs1jYfQFSOgUoTeF7rLOYzLhxibeAUlmnoQIgCVKlu3Y/NPqADjxbFxTP7YcjUkA09+sNclbPk0SJIJQ="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0-next.6_1617635447161_0.3443602838513027"},"_hasShrinkwrap":false},"0.3.0--canary.58.8628c34.0":{"name":"@code-hike/classer","version":"0.3.0--canary.58.8628c34.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.58.8628c34.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"8628c345ac1298bffc9b7fbfbec64deedd1ed070","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.58.8628c34.0","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-R8/a75AVbFb67emcvq/PiKBL7hClVEPJJSqYK6eS6TK0NfKZaSrWeq5R9+o1p790i218cT3yhUs2i/N9ebOZ9Q==","shasum":"4962057b4564651388a519285068adfeca615335","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.58.8628c34.0.tgz","fileCount":6,"unpackedSize":10389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbHMMCRA9TVsSAnZWagAAF08P/ixlCyyQphnTDPPMFtqB\nFJ6ncHHNfyTs5LUNn4HU3M8i1+LJKi7fao6sDcuLKuHswmwtBCU/3X0hWbgi\nZ923DqWfpqyyIUAVhLqyjjWTp6ut4YxXLObnQhFxvnOLIaLq1a+qq5TzM6oy\nT9xtzE6g4ZQBXHA8mIAuv+YxvEt4ZgvltdHl9Ch9clLfT1mgzA3IIbpMI/u1\ngJj5nbL9Tm2TajtGTnhgA2l1o04fLClf9O2iN+JtPWCBlupvXNKr1w0+PklV\nUUrwOUBkFZKORQUOS8E+FD1CJhcC539l0t1qDt9wCGNF3pNHGGsd+E+XLuY7\n+tYjoAbIOwLN1d7eehdrFbZctfq2Y04aJbuQARCaYQwtiW8iLoCrJWpybZCj\nyh6HRZTUOVNfjkbWeq0DjxpD3XpYvWmh8x/BH0BCQ7KcjDpJ/fQ5+5BZPlbm\nedRWOEpM+seUtd2u0966PeKrDMp7qr0crzdekRRiC78bq2epc91PQ6dl6j9s\nkZhpAMgAd8aylCxpuadcKw11Zh37J/uihU3miiKLHkA5PciKuCDLwLtl2Z3h\nWj/qCTOaiiC9E7OjisZ6Wxt9+U+wkBfdJg3wZD5GGhd1ZLbuy6ICLHtwKHc2\n5dn+HuJPqrFI5JkXOy6lTtMU9aDJE/dq3zrYvlst5uR9sDy8VG/AzQonR46u\n+9YZ\r\n=MCOs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGXPWBmSVAPoFEmyaR0yrfnKY78nColELa52TZ6AnUMHAiEA1ctmUenyS8NDFrBMqgWGQjk1CedI6+nuSsUWrPBUaH0="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.58.8628c34.0_1617720075816_0.7808231379614954"},"_hasShrinkwrap":false},"0.3.0-next.7":{"name":"@code-hike/classer","version":"0.3.0-next.7","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.7","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"2f24d0d910de92f30ffec96a9f768f197f81f1c9","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0-next.7","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-1mdoDsEv50er1NJZJCn6fd3u80WOO/ukuBJiADvtRrA2QlyL64zFPsdzyHaoDCRBqJR4n5cv1XPfKz3U/5FN2w==","shasum":"76ea773790e7de0bb838e5cb8c3deee40fce06aa","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0-next.7.tgz","fileCount":6,"unpackedSize":10361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbHP0CRA9TVsSAnZWagAA1jwP/R7H9trL8ThhmTzcJ0yu\n1sRJF6RPkBCUHcf0/kEcmurF54vjQo/kHZVLVVtR5IREseC9E32p0uqfNt/J\nWzUVej9viHp5ZJTn699km91YUcSG7OaxtWFvvCNhM9yZfqVqx2NRAb4Q6ndR\n1gZn3zuzRHnXztBI6Bq/st2SCShf1IuBw6788P+2fU6M7B5tS5kxm/ybdJI8\nWCCBwfFcCFgc/B/nmTF0BUFwOCq6GDJa066Rv/efoF4g9yoA2/Cyqi8Cq2Xn\nxSOUSxsNdtWNODOAUh4M/Du8gxP/IpJwzxFOPrXV1Fnvy+8M+8WadSiEiWU8\ngkboH0NTLkx0Q6EsNtC0FgxF5fdxIZiZmL/ZE+HoO7ulN86ihuPMZyYjMwLx\nnLl5QzjNXOI2i4H3Ug/NRAS3EyW8WuSI/vZh/Y1/endxTFQjTJNrOyrbS070\nqN0d2kfmsmoQk8lroTU1iwJpFA0IrFpwcSg8SwCvOaJzM+GGuvZGQzqw1Ucr\nNxnVuxwTzQHaACJqhJUjuhnHjlBGwUBmEI1yngB3MFZddCeBw7wCHuzSL0yn\nCtyBkQMe5jy1Z4kLz5KYGwxS7/zi1OB2U9LkazEQLDj1Pjzk+tO2fjtpB2Fn\n4oLh9xug6+bKjLVn4CbaruPI5jD+PW1N92sM2rk+Ax+ZdxAyHHrfrLf+yMsI\nW7rc\r\n=+gx7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGQDe/Z0a6zsvo1+voW+BE++bGqYjZEUJGu2fd6InLWBAiEA3rtTzXy8jM9DOsJfwCqhiDa1E6FEKnlJcGCLU5IsSsc="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0-next.7_1617720308181_0.6385402489468299"},"_hasShrinkwrap":false},"0.3.0--canary.59.324d15c.0":{"name":"@code-hike/classer","version":"0.3.0--canary.59.324d15c.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.59.324d15c.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"324d15c1ddb76f7fe751901372b6e1596d1507dc","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.59.324d15c.0","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-kxyXkUAK9XJcQqn1I+qbH+YmHw5syse4lRH58McgRe9kJmgRfwNuoGtFL+O3DtTtKq/LGxXFavsqB5UUOVUB2Q==","shasum":"28a050ec4ff7bbdba7111aefdf728bb14ca435bf","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.59.324d15c.0.tgz","fileCount":6,"unpackedSize":10389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbN1DCRA9TVsSAnZWagAAuUEP/2HuyUVF5l+Sr5a+53Sc\ngFsn0xTolfjU0X3x6UkykCQlL3nVGgGTaPlyCZKV2RfeZNoVd3yBCj1E7LM6\nfhsO8cVB777ywaLTW+junLbP/4bBgxqWRim82Oh8VnMDIAC6F6vDNRS2unSC\nfVn3hSr6Pi0X0CZ79EwoVHNdPv1cQmGVX9QOFxwH36ljICBXKQ0YZURmduI+\nzmqYYZq3GuAjPL97ZT/7AbrtusCagtFbrbV8CwajR6siAwPxQwNtxJN++dXi\nGF8RAlSbuV9eeURtaO6IjL+X06qNY3r75ICG7J8x2wkrR2HSj1d16/uD0Aof\nqwxZDadZJtlALtVgz8R9pAB3c57mkcfAkLUxSJw2yaLhsiw2Pq91PaVTu2gf\nnWaSS/dODQspTEOh2XqiJYLMkIJRXSsBiIGA83g9yUg/1TXN2tUa1BooytJz\n6Sj/+utbm5KXXpfYus4RyohL0GD574cCyygrasxub4GreRvOgX0QVew9L0OU\n6EKRQH0GZ6LswaeugINdMVEKGF0kwPMQRTXb0/i3VjMhnWGeXgtTEMYwr14f\n+9OFpvTUlRXp8y7Ko8xEaRKcWSA7qEcq9bMB9ElQaJcdtOFSiqKhOZCe829O\nO+k74QD58qK7VUJBx7GRW/UWtHarDdSH5mwl2ytsoaDZjPi+tKNUaQEQywN2\n17WY\r\n=3un/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCSWEy5HUUn94i7o9j5Y3cfmZyqPfgOkoYCjFAQYpdPiwIhAIoVXqbn+o7Mb0JD73DHumiNu30OAF8mNm15kArs7wGj"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.59.324d15c.0_1617747266793_0.4696320434881369"},"_hasShrinkwrap":false},"0.3.0-next.8":{"name":"@code-hike/classer","version":"0.3.0-next.8","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.8","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"da9dd9108cb900fe07bdec4b3a7aa69730a8ae8d","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0-next.8","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-ia5uEDgCgJQSgKTI6XGKXcwYptGLSiQU7HriPBkicJTqF0ZomDm2+pf/nfXU5J0NtMpEfVtpRI0kwIPeWZ9FEw==","shasum":"5bb3255190a0dfbaa69998d9aef7366e6e6c0462","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0-next.8.tgz","fileCount":6,"unpackedSize":10361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbN5CCRA9TVsSAnZWagAACLwP/0HApK6h3t2z2z7QX/ET\ndAL5WmNhTs0lXf14DR6F0z4vzjk9oA+XW90Vob2+QJVQhNTbZ6wDZeRizS3y\nBU4Iy1kSPrjq8dv2jIwN5Qvvn3gNk++osvuT26F5lMt3rGZNIgKLa3Cvd6wv\nWiutqXPfX7gubJBHJhy8+KwZBpxZwVEowZ7OmRg4haTPD7FtQ+d3r/nzlNH4\np9x2wWXY3jw67nwiSxQ7iaWd3kxKAVH9k+13/XDAnAmL4eK6Wj1/psLzG13y\n8QOkJvXpqw9oRmw+veSOn2nSiypqey9FgSLrY8+gQ2IUzUHP6WgzzaSs/nUs\nX6X584wyymQcx2dlShuvq2YJ058y/NzE0TpmJLabe2WHSqkApgKriOyY/0Xp\nbVkeZM9YvNcKzi3jYMzzq9ledNXLj5LML6u0T28xcRBQEnSB0DpHe8bORSKx\nHCbIM1qlH0eeBGBLf6HYUxZzUILRppNxa6gAt/8aNo7lGxnTe9Ab1R6mPFG1\nVexPIa66rLiRuj1uXtFZesXBTQDw9MsHDo9ciew1VtTf1LhhVcWiGGqImLGi\nkHMAyAKfmxR37lmShQQuONt1noJtSlVlKCGXxZMhy1MNN8TWFXjvyA5sdBU3\nYBSTd9E4sXdH+lqScQrvuMM+odGf8+Pv0+4KNs1r2EtI6Ohg3G22PKDC8Jnn\nJy9t\r\n=MTsB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG+zV+gXmsUkxN8Fh8P7Sxdt8XLe6gXjSP8j3EJZtHdnAiADpnCyT1U7h64R9l+Ok8WLGP+YPzvBv6DUlALHZALJPA=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0-next.8_1617747521738_0.3658358800842729"},"_hasShrinkwrap":false},"0.3.0--canary.61.e6f2135.0":{"name":"@code-hike/classer","version":"0.3.0--canary.61.e6f2135.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.61.e6f2135.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"e6f2135dda53b72f5482000f4742836ceb5e33bb","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.61.e6f2135.0","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-qzJzE24zb2C5d44e/ZSWsRs4i/pthhVG+1rLtTZiylJunMOfPh26ICk23ZxvDaekC0ZuetDnWNivNDxFmR+39w==","shasum":"ad110012884d393a104633e8dee9be21c1deb4cc","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.61.e6f2135.0.tgz","fileCount":6,"unpackedSize":10389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb4lTCRA9TVsSAnZWagAAJucP/0C7vt5oB7kLa2WUC11z\njT+3clR3gWB4Wia4c5+C8kbvgVmUJE15eUlL3S241cOAOxzNIhELQswdh6fL\n3+wcPHWe+kIq+C91f0ixHXO6ve/+J4sHwlbSCNecMF+BuZIMpdEkyOHkeoSZ\nIFbRry+CEwQjSsFcyBc+1u8/MO5QH7vAf1xcIuI33r0mJljtENXwDc5RaWzH\nNJ5BXjcCFCXMAV4uaU7NqwRABWe98EB41QzykbAZeT2hG1UkYesXacOazx80\nuRHCeoBY+uLENnvDnWqTh9jM6a8/K5BeGMAs8b7u/jIkUmr2GYL+crtshcd0\nZiBbuSci21X174Jj+r/L/sRdXV21RAOEtYcoucMmHA8wbs+R1cRjOOhyobs8\nMlfPVNwfridJFJh5Dlz+i2gLPEiWuL4dGmbsvTvJQ35mX4UGYCOar9CYc3lx\n+ALX6x9fcmJLgjiJPA35In+5qeS9Z7JjxvQbMQN6mBVwZBADzYkTIxEeBN6l\nF6/zjicqfAJoqvmbQYeJfJXN4+rbSiIN44hhETb980K9gUbriThsiBi31WDu\nEznH6DZZ5qNKh/Q/zh3qFiXnDlRNgwmUwvOe3Os/Gw64aRg2BhJlUj9anOzf\nC4XwsK7oTLLmWAVNUAvdeB7jyh/wOD7tHEF3Jz1Lr5TpvwY6XoI28rEYfSDV\nnu8x\r\n=xhCN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhLz3rzZVu5a6ecvCillD5GJM3WEacMV/8H7N9sGYHoQIgYmsKGyVM29NPswg4sSZMtedknUiPiHajWeHwpCLPeGg="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.61.e6f2135.0_1617922386689_0.35404822126953683"},"_hasShrinkwrap":false},"0.3.0-next.9":{"name":"@code-hike/classer","version":"0.3.0-next.9","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.9","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"dd7a8e686fe040b3948672539a5e7ebda7789681","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0-next.9","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-qMTocL4O0l+vn3zKIZIZ/23nsFIeNpRYcW9sBkXYRdQmyi+yLu+uuIQEMm5e/vYH4pYAhbETvoSzTCznCF3RYw==","shasum":"5847a20eaaf8d5f9e1f754b99878d7af008ecfd1","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0-next.9.tgz","fileCount":6,"unpackedSize":10361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb4rGCRA9TVsSAnZWagAAYioP/0aBWShJ0A3MhpH6b+jX\nXjwgQr0YvWygfMhh2hTpHV8oGFsvuUY9ehZRyn2bbAzY1J8E0I0aGIZRqQOz\nRm4Dgjc0CoNAQA23zM21KwketSioSX94lkIkRF836wFD9N+K9FEyuiMSPidK\nIl8QPPFolCGsH0Pp6zciyiQMj3e3KOzW877kjSfeyvwBtMnqD4ujt7E1T6qX\nVcyKwU2naGztyzGC2GDMTw3ahEMNlXXSXXMZTBrsuoC478nshevPDhus07wb\nrS+KQbd3nfW8PJc6ZLYHI9XouKKzSZgyUv14DHQ9elcWdrDo6/iYDnd1IriR\nTe3gU7k5+VJzAi8O+3WehphU68OJe5cKHiJh+wfHw5RKnzqk/y4UTORtthSB\nIa4yi8iivilW5AoIT1BeOd/mIWQ529Acw/8dMDin0B+f1MFM0u0c5uIWhkxV\n++COFszZpJNT+yYGhKoI9gvBu8jVSLdmR7atN84BZNY0N2yIf+Tcd4xnjO09\nobtNI4hmfdtP/lOuxSlsNLI5nQZ+THGDG9gWpq1A+9+G/tw6UtKtJCIyp7Pr\nEQ1korFR9nKyzsdPB2jJCYceshimWGWPFN9383nUuRhIuQEICDi+Tq/QESzl\nS+w+AF+VB8FqHJOwiaqNdb9LoFYciLe2iMO3/XI/9pOXWSy0mKXijj2EtbQ+\n/Ix9\r\n=Oqcn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDp2d6nC2ldZvuOiCcCjGJXVUNLa9NAxZ2T9Mx9LCXbAIgIJCh4IL/pTA5PkueAeqoi/u4xrPFpLP6Hms+vJmTCTA="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0-next.9_1617922758039_0.8313988821858587"},"_hasShrinkwrap":false},"1.0.0--canary.67.ea5ba8b.0":{"name":"@code-hike/classer","version":"1.0.0--canary.67.ea5ba8b.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"1.0.0--canary.67.ea5ba8b.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"ea5ba8b8c9f41c09ac4d24999e0814a20f8a4b22","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@1.0.0--canary.67.ea5ba8b.0","_nodeVersion":"14.16.1","_npmVersion":"lerna/4.0.0/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-fA4+W2XXU4dqtQeDPD3gjGy16d2zQN6UcWGmFHqboATj25Vo678ApxQ7PaCUtHuenNnzaEH6aVY5rmmEt/l41Q==","shasum":"d9fc96b2f26f0513d56e158fefa1561cdc5d0b7b","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-1.0.0--canary.67.ea5ba8b.0.tgz","fileCount":6,"unpackedSize":10389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmyUyCRA9TVsSAnZWagAAMwwP/2F4BdNrp94ScyXYOMLw\nRwsGZqI1wP1itLATWNfGasEOUkKsuvJFAsfhLnFYg5lQDxyHQB3EQ31FJezj\ndK9iU3J7+AKSVLCJ3g9zwDzcT1nvFPCfYwaeQgxJT3O3j829WtbUiHQH2zoi\nZjjKlyM66pazjsXY16SHHKRelsN9YfMezN+Vi4gvNWDspQMHugBrKeh2j3pn\nTAppLfsNg5dvQUGv4dBf8fYLjP6W/8eJnsMTF6AIiSn9ClEm3Mun9SCj8NEl\n9WDkzjyaJvJr60bjvI1qfE8qKlByDSwTbdtfce4veaPZCnpB7WsakLs4KRqF\nD5uAyJz4rH2qX4UG1RxSuvbSO7JqKmbShmtTaVlvuvYrDSxqgCgxgsys54qU\nRMB5wnlDeiT7CA3+avZE5wxZZTzmjqcFoeLwevEST9xMWpohp8wN0mjHlFlg\n5Tg3xko/umZzlbhq8P0m9hQQXnXWIZY5ZcUHoI5HozOOk7rrivvMGzHYvBIY\nxkBI8MloKX8MFV/gCMNLvE3FJT0cKNef5bp3NsfcgVoilNoDLigzMxy3n9Ps\nCADpQLgKq7sJw2cwji4c6qTPd2cFHd3TjzrKrpKdApItCMGtOpVQpcjIV8qJ\nk4LU/B8r02fFOwAo8XMyTlR6BF0bgOyaysnGsqgyxFkJEg3nlFJoBRtIkAu1\nEEuX\r\n=OXpz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCm+Eq1L6jco07a1erqkAiCO44IbyK1PlUgXPkmFD8XqQIgL8d/0kBQvj1mWaj9aObmH7cfzzMjn/oZ8Eawwdef+ew="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_1.0.0--canary.67.ea5ba8b.0_1620780337614_0.8282017598207525"},"_hasShrinkwrap":false},"0.3.0--canary.67.ceecca5.0":{"name":"@code-hike/classer","version":"0.3.0--canary.67.ceecca5.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.67.ceecca5.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"ceecca5467b9d5227631917a0c4e417b27d34b4b","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.67.ceecca5.0","_nodeVersion":"14.16.1","_npmVersion":"lerna/4.0.0/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-jBV/khnakpAjipTP3zFcnfOCh8kHJVD5p8QTSxUUzaWSXSYh5kiIfsKgeXwrqNRklkkGdNEb73fEcjfdeqq5hw==","shasum":"f5862bfe0f794477fd737eeae45963ce756796ac","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.67.ceecca5.0.tgz","fileCount":6,"unpackedSize":10389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnF0sCRA9TVsSAnZWagAANxYQAIjqETQRf9mZExKYvHOe\n4bOJaQQdV/w+HL4cc08/qpxzaoY2uSYVRf+d5mtjKcoKLWoDEob7Bl2AhtB2\n5ad/W9vDxjqs8Gt24Eo3wtqRoyNXA2l6FVzRiR+k9JMMLdS0DzV6OTei1cQ7\nk7eocjw6C4vV5zAVCN6XsvQqRjVYwOowFGkC5V6e5eOepzeD580dfxQ5jgnm\nT9YDRFJ+xXADrxYtYBouKM48AR2mW51D7UEd0pn9sIvScZ4kHX6r/sBtaFHz\nT5hWPBZ0UrqSnp4kykTOTTOKFa+GwrhJJy30oiNLY8hpPh2S6KmmGI0MWJk0\nS0nS/1Y59l50BrV4ZvefPf214sDs4d7WgSfz0aZ2oj13rviGpzJeHjKk8eeB\nq0+UXkoZlgXhhCQrG3xul6DCvv9FpM0zAMVJj1PsTxwCM/L/8/w2zAWCwaPv\n+b+c2bNeLA8c0UsNBn5sUzhb9z1rBIIvPmmKPLpf9h+71Bm92+Uw5x+OVf5Q\nxEIpxIRh+hPA5OdwqqkIxvmnE8Lte4wxKMo8AJMclvbUiylfDBDGcL54yo4z\nRJzfN5m2L7qaYZXQxX1wGNOGpZr+Z1IXBVHLGkSUqHyf4wP02S6holVJjCRQ\nNMlvlV82RYXAOVpOE6v5nBucR3EncRUYJf1GPxoxyBMZRyv4KXLz35TNn2Hh\nhaxg\r\n=kMVg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCgyhv5PWBkR5xofMGEB3ExThdSKYt4aE6cefRbnoLC9QIgAm5c9ZG3e3GOOOrU3I8CUcHyNHSg+fdUlDEtXxwXkwo="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.67.ceecca5.0_1620860204280_0.020815032633030084"},"_hasShrinkwrap":false},"0.3.0--canary.67.10dbf6e.0":{"name":"@code-hike/classer","version":"0.3.0--canary.67.10dbf6e.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.67.10dbf6e.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"10dbf6e42a977864b8cb9ca51c82dbccd43e6a1b","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.67.10dbf6e.0","_nodeVersion":"14.16.1","_npmVersion":"lerna/4.0.0/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-RUAOxD/IKw/k16ymKsDNFRBcXPCx4puLruYg4KRJMJ8PSxm55OpnKYFWAUoO4+eE8E4+CxuA6ivTT6rmb/Kb2A==","shasum":"23e47d8743cfa0ef1dfb623c25f994c56cbb06a3","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.67.10dbf6e.0.tgz","fileCount":6,"unpackedSize":10389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnXPECRA9TVsSAnZWagAA4iUP/iav1AcJSPtnpG9YMINC\nPXoqa6eOTD5qOG9rmPDD1uWxW8vWjpJyp4kMJgMZFZrLsLGDV11UGZlVl874\nHXvbXkj8iMq1b6o+RYIDc7wz5nRQ9haoXY4yyA7wFlTg61/Zf5/tpnxTSDuM\nsEk4IiBKWnEJNLWOCFg2bVfVilCThKegHzu3eKdgZw89uLu1eFTxOxxMbmB9\nX5eoqbkkN+07zkk+dI+Cjaz/ICOyvxP55wBmpsaMXD8dXB39C90eFaTsqjkK\ngY+gKBXRMFIiVN3gGiodJnYl2nSkPy0XsmLIzvwROlo2JWGTlPm/rNpwb592\nXJrGNWRWNVhNlZ0R+lV3k6jsUIM6EHS1uRNw+b8I3OCTvMntQw0xMbic4UNx\nNVpXMbQhZ5nJaqOEJnPMlMV8V09sWcgwPMXFRa9SwHpTdQEieM4BBkKt7q+U\nCSfrfqd8HtM/WcOX8DQGLSbFHWobm6Dfp1+tcA9oiVRrZqPNGnMQW7p6N3pE\nduoQGePGYpcCfN3Q9GgSlkQ2US65B9lLtmPVpEwyiGZUUppzbpM5FKjd9w1O\ngC9oXwCmYa9vLeMjShHiAvyjWh6387FcDinC+5lwG6QgWEpvX8wIgevV3jyS\nOtQDvAgrGWC9tzVnW+V5K3qOMt6lxldtvdAJeOs5Ljf7MQ4fsmvTDpLxlCX8\nlLtA\r\n=hYoD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCOWxFomMegC2uwvPYdyK3OERIR7hjBL/+m+U6akICdHwIhAOpYWP0i1XUD+CsQmJDMQEhmmOBXvIpM/2GY9qbUvH88"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.67.10dbf6e.0_1620931523127_0.09627046637663117"},"_hasShrinkwrap":false},"0.3.0--canary.67.a667d8e.0":{"name":"@code-hike/classer","version":"0.3.0--canary.67.a667d8e.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.67.a667d8e.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"a667d8e2857766d8962b93003520044be91ffeeb","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.67.a667d8e.0","_nodeVersion":"14.16.1","_npmVersion":"lerna/4.0.0/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-2JX+rEEUgfSwSjBGaYeCAiy3X1v73r4kqR+XI1mzu71S142dQVmhDq1amYAdQ2gKsHdfjAbTs+apNxFrsoIiLQ==","shasum":"5c05c1aaafc09dc0037e1db8a3cba0cb1c82b44a","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.67.a667d8e.0.tgz","fileCount":6,"unpackedSize":10389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnYsrCRA9TVsSAnZWagAA9kgP/1Tf5NCpu8IlJ3gYD2CA\n72fJluRqrPj55fw0yAhhIHvzUcjxAqY/UkAJA1kW2LEjYYA4hd4j9ywxBunz\nPyqJ91ahWxQEvKKGawuhb3T7DcHwbn/L6msm/7Dhc48bk6WCcEVmIC2P4Cl8\nfXlow5rHHLTBLlgUKgJXXLPvcirH8KWXAAM8Tjm9/BKm+qDb7ZJ+Hy6Tiup5\nHRGfzjy463QNXVl3I3mr2vb6bAv0/cV2MQxuJ4PNrDwXkDxXZ1gncmoJO3zA\nFsHvU5A5Zg0Fxdt5EkOeKwU7m6g4UlkHRp/7CMaquHro2+CSoZ4qLL3M3Ybg\n4HzkRvp7nUsvjtt+oYl/4iiuF9iLRutAEkO0HVwZaobvLG9TcnnrZX32vBx7\njFO+CxumDCzhS05s6dCvwC169NUmRwlqFLhkmdP/kp9H2d/DPWWb3zJcayMN\n6Zsq5qWv2GSrpOWswPa2Dd2CvHHVey3SZ1GISdTv1Ns3yzXaFXIe8aWZqgLD\nVSzuJXMmyzgu//blqSIu6cjW6sHHdgy1HP7ZyEQ5YkSiS1p1HAeWo196UdGt\nHnqxs7B1lzd1LKtBKH1RbHSba78gYGmncfOJLDKGAeZ0XJKvwJXds+0CdhMl\njGbYfNMURHNWkijMygDEFJS/p3f0YMKPEF1mGSfIH0SxkRdoPS4Z1r6hEIUn\n0ynu\r\n=AIpG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6u+SdtEnedB6xpXUQ69w4C/YlmwdXMcHbyqxbGBBETAIhAL2v9fj0WVOT8Gh3aTCczAyNwyL1uPUQYYC7bvDt5Xqo"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.67.a667d8e.0_1620937515111_0.19431447197998453"},"_hasShrinkwrap":false},"0.3.0--canary.67.014d9f0.0":{"name":"@code-hike/classer","version":"0.3.0--canary.67.014d9f0.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.67.014d9f0.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"014d9f099d90854a8e272d44aeb8023e885ca482","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.67.014d9f0.0","_nodeVersion":"14.17.0","_npmVersion":"lerna/4.0.0/node@v14.17.0+x64 (linux)","dist":{"integrity":"sha512-yMOj902S9fU5a3MGlYlPlbsritRQIA2agJAUAxFWD81ndJH6hb08aKi1BwcQGY770+fmYRDK5uDdzTQnhvMwzA==","shasum":"bdbd4851de47b343a94e10e95eb04336d3db1b19","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.67.014d9f0.0.tgz","fileCount":6,"unpackedSize":10389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrt6xCRA9TVsSAnZWagAAPdEP/0suPU8miLRLZa7FDht2\n1SYRpaFeKYC+/iMmfgHoSyvnY2MKyZoWuur4BOv4HnXBtDQU6RLUO8x50EkQ\nE+yStQ0AgH1SuO7x827RUO4yPSNgQzucHbmLP7Ywxo63IV6HHfDLmws/fWOg\nb4BW3WcDGCuq+pUOYESZ4UeiiLz1ugvUECFKMhiQwH0VK7+mSbk35p89TDEe\nKOBmT4YaO0j66MTFV+jaPJYTurLcpX92BoFN01CjdLgP3vTG8fI8FaVe+o6E\ne/skyvudacDohbLIjwJA89nrK6MKHCnSeMLAzPbPzZl1WT13l2NuGKhPjN1T\nEMI6x/V1RQub2t3LIlnPDpOqqz6lh+n5LW249YojC26arHL2pw4rTRHXX+/p\nEaAJdn5FJUp8XBfmF0qZSu9Kk1lrhoym4XTt7rtU414e2O3ekeuqefGWwVx2\nK+L7yMm+KmSsXC+EZcnToU4ShbfUT3SlJsdidLJo6megcWr0e+5hRc+kN8no\nbvuFVSpBNIe1bKdlPL2+20F8s90cAb8g6kc43moO+8q2xm1OQGiqyELA7q63\ndUC4v7SbxQSSiXMV3bcTLr6MTO71ITNowhgprwHa15XJ062Ue4xd2zJwBrPO\nIXC42rRqapXsvD9fT0gzrP2SJdbutzMkdzl0uTn6sTA1mg9oqIDEhl4tp6HP\n5tKY\r\n=9Ydg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0PKiOu/9iWJ33vQ/VbV64NlNFIorYk9ZL5tfI6g2+AAIhAOHQLClFRx99O6fK+dhzQqIAcE778TaOke13aX8FytfJ"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.67.014d9f0.0_1622073009153_0.4525259891521316"},"_hasShrinkwrap":false},"0.3.0--canary.67.059c384.0":{"name":"@code-hike/classer","version":"0.3.0--canary.67.059c384.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.67.059c384.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"059c384f92c68a766571eb1f87ef2f2aace5e2cf","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.67.059c384.0","_nodeVersion":"14.17.0","_npmVersion":"lerna/4.0.0/node@v14.17.0+x64 (linux)","dist":{"integrity":"sha512-YgsmqA3vddtAqnOXmbeabysQ41c8NV1IJNIyCAmiw1FSQw/j2+g4xshodipUu+T2ILVwWc4fk5FlfXtlxRc8yg==","shasum":"f06a703867154bf0d2caee43b9957b4c111df798","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.67.059c384.0.tgz","fileCount":6,"unpackedSize":10389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwQfkCRA9TVsSAnZWagAAwF0P+QAel15focZhT17Vy9fT\nEW/lwCg2MMitCtScyUH5BKdqyRu1fy84bC0jv2rLFrckBeoU9WKPAMmIf46d\ngX+litQX30kKG+vzLQL7TJ9NxEeh2yoQaECxTwO5tteDLdvgR+9/tlWZo4wm\nEtBN8CiFqu/F6D9i3SdRDWeKXdMRiHwG1eY/7mTNnOtKZdt/ThPAimVxGPga\njqKK4NLziWzKjoSKQimeCDfsha9GV5yVfaCClvuOQsEUsQIGGka+W06DZSDi\noCKFdzrhNTvIGPuzhbNeNgjd9rbobO6vGltgiuYCE393PsW3Y0DxQP1gCGGJ\niBl8Iv9dKlTgFMpIcP1qpcKk3P66tPNMUvoaoK1KBnDzJpLYuTqosS2o4Ciz\n5G8YDibNGhvRj255hRMzArs8KbbeYMYjcuZlsYSONoE1ivUfGMNUdGcaGtXo\ntEZaZK00PitA6sY2k5sK76sR5n24BfsJh81kKRjZJb2/Xv4qE7a7V5xldyVx\nBvlGoi7NsYwmhOBoXd3PonaqOq3WJw1NUP6UtWFIDDIRTMRp/FIxtgOvXS/P\nXc8mAs/by+M/g+e0b/lrBhLuXWvJsWDIVoRTREpjcpBy23NQfS1s9cQxBHma\nX0rKOcgPwNzOZgVs5YxjM3aIyDYMNO4vcdYHpDyLU/1sq/bHo6/4d88g1V9C\nIyUa\r\n=vvgf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHisHnses1SclKGukZT7DQcjBFboI7K/NPZSEqCSZ/LCAiAzR3uGliPtXXNi334HuoUYhOZ1ReFi4l0UTg77Yg5YyQ=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.67.059c384.0_1623263204183_0.27117632444655726"},"_hasShrinkwrap":false},"0.3.0--canary.67.8191339.0":{"name":"@code-hike/classer","version":"0.3.0--canary.67.8191339.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.67.8191339.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"8191339b5e4cb388a451635bf2ef119349e7a2cb","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.67.8191339.0","_nodeVersion":"14.17.0","_npmVersion":"lerna/4.0.0/node@v14.17.0+x64 (linux)","dist":{"integrity":"sha512-RCPJRKIkzbvSVLRhcfqc5X2hIWKAileknCe/O9zw8dS8PbNZ++DMoZfQUQlGphi5wDvY7lim85FIrLwL8lxNSg==","shasum":"512fd13d268a40bcb554bd9eaff65d7da3c24569","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.67.8191339.0.tgz","fileCount":6,"unpackedSize":10389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgy3PzCRA9TVsSAnZWagAAsNgP/AusbK2Wgh5yleunGGd6\nOpGxGmLTh4u507XBIfk/b/3ZQAGaPvr1TMjFsjbcSoWQaBFyvzqqwEDlodpH\nKr3B1KG/8gO9Bt2UBw2EcjrfLgtjd4FqTgp/8SArGh/xIAEwD8LIUQ+CeHOw\nSwEht0+bARM9QnNN1/i8DKouZdFhdxqttG0FN1opolKIMxz7ZY4B0iL0TR/V\nVLPYiWqw4M2W2tF74kS+fNkKwNQcOo1WbmbARoLYeoGb+6xnuN2Y674161DZ\nYVUiCPL6h40BmmrSCEHJxNvJfgHGn/7IDjCZQhabvzSao4y9Jlq4w7hhODZV\nARdD/nr+zGqgnIMar6SU8hXBXLWuYaCu83/fxowyQZ+t717G7WyJWuPX6W/I\nBRynBs4IPJyyDLr3/VGihrvh0+9gCB9YAMjbDG0ymuO7U0dEJq4e12OAXpKJ\nIU0gns6WeqdT5TZrALWUjk0Gvy/0k2rlfcGXL7TzrRk9moL6Q1jy0+hg+S4y\nXZYhlMmoBQiFcyqXiSPwJ5AkAVG73IAYxSXCzp9mGy+h40Ag9AJVAvmylMP/\nwmj9PaR9fZ6uz3f5/5Idstk+iyRB74Sn4NTmKur5lEyQ9zrL7GhP+txsy1Au\ncvIeflVrSzYW46M+8SLdc703sz6vENBB96N5lWx/gJugMxM+W5Do5VycAWQW\nWlgp\r\n=TBq9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnprrUPRE/g8aoJHxqlKvsGHUUjezp+kcOoYPsEdXRewIgMyH9esqaRQ4DiBIkCLFOAApZTx/l4MuUVNMjPATxd7Q="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.67.8191339.0_1623946226686_0.20920075393640447"},"_hasShrinkwrap":false},"0.3.0--canary.67.0da7533.0":{"name":"@code-hike/classer","version":"0.3.0--canary.67.0da7533.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.67.0da7533.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"0da753337f195b9d0b9dae0b04d2ec3356f0cc61","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.67.0da7533.0","_nodeVersion":"14.17.0","_npmVersion":"lerna/4.0.0/node@v14.17.0+x64 (linux)","dist":{"integrity":"sha512-iiQfAqtlsj5A+9PoAm7MCn+RgSenvG62LjWjfXvItiFhT6zp3VEVBaKbHC7QbbYK6qeBiNDJoQ3UUAySYwflSw==","shasum":"62d6e8a1714e038ba6634f998243dc7880b597ec","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.67.0da7533.0.tgz","fileCount":6,"unpackedSize":10389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1M9VCRA9TVsSAnZWagAAE2kP/2tH2njqMHedRRTN45vy\nfj1eDSnItJ5F7AAb110O/ZGu0CxPp8Pb1MAVIVoCeZ8S8ZLYLLYrRns9rKs2\nQsJcWkzNwSzAgwXZn6jH7Oy3Wf1qU2ZEX2omEVUP8AeRCv6ze1kKV9pieCXr\nVO/DwDyNFo5L9Q35OLIQQNb5ukZDQ5TFBh1XLJT7DPr9fGzGKQ5+t/wwi+8R\n8USVM4WA7vzT+USj83bT1ZPtqCpGbtvVsSLL4TSWAtkU0mTYQAHOfQ32M/Tt\nrnAz9kYZu/cOytKBNhNv5RIurTAr66l2T68Co5xX5lQQa8HO4AlHA3c2yVAb\nqOtluCVTdI+iY5kboXoz2g0VoNeEqX7Pvkes4+N/FYR0D5AGlcCCwnXohJRG\nlUYJANeQ2mVnXicBl4YIulu6XcUaFvsUIaCPY7BA8PFyycdCg6mNQfd67gAT\nexBUwQUq/9SHE+xKMW60Z3NUU0cGiOIr930xMB1Z/5wVWG4xaUlh8Vti0rwU\n/Tu7dNTi14FNjNiSTgoOSy2QColkc6mqnZfQBT4r2O24APOODfKusHw+viPm\ni+oN568vj3h+cnNSlUau7iz4CWtjIz3oaMnHIdmYc+M/lXjtGmFODZPQU6V7\nSvM1Ec7FJF7HNJedvc9EEEZ0C5UgP5iSMLMwzuqZeAJzMda3WihqLaotyczc\nVe8Y\r\n=XRLJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5FZSpzzHZ64PWcRrxw0q5VkPE0jlpig72ftnMMj+g2gIhAPSv3M3lkKnmT8VBwvuZXC42qNUiej/K/O3LDG4x/ZSC"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.67.0da7533.0_1624559444498_0.6584430119630016"},"_hasShrinkwrap":false},"0.3.0--canary.67.b6f3cda.0":{"name":"@code-hike/classer","version":"0.3.0--canary.67.b6f3cda.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.67.b6f3cda.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"b6f3cda8880b0662248f9766423b41581f9d9c4b","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.67.b6f3cda.0","_nodeVersion":"14.17.1","_npmVersion":"lerna/4.0.0/node@v14.17.1+x64 (linux)","dist":{"integrity":"sha512-1dwdMQCZ+4CPWd7LBvJywHW8McTji+uq67JdmiQRncrrDsIAKRm8ZySRiOKrgHVp4zHxnxKjqy2PVGFUIagbYA==","shasum":"7b1949e8b4b3dadc33a1d7ed41d0ce8fc29a0896","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.67.b6f3cda.0.tgz","fileCount":6,"unpackedSize":10389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1NllCRA9TVsSAnZWagAAtZ4P/0FSllOCcSCAGAVtpA9A\nEiscsdwy3+36hNJjZdj9YTVEXUBQsbSU0Jsshw/34PhfJwwWm5qUza3viodn\ncV0RWF4bK2yu4cX6U8l/e11QX5Rfv6mGbe8bUciT8BFV1D3JAX60oxFl4dxd\nbAkARyVsdMO7QlKCwvrsUYK/xSMdBCX/W+ETiXXYwXGP8Dh21Npyr/K5janO\nry5BORwRLGbzvo91grnqEfeewONqaZoWM4KgYYp3fNX3+5PtS+VffXa2ZmJv\nZ4orDK4SbjypO+NfzcdBvCuYwDjlChwFcd0ym4twYNSZTbHXVOTEZ3QjCuKw\n4vIL84V+9/TUPdzVY5SakTUQBQQb4Kswy/Ioq6rxGiONgw5hQtDJQwEmfjzQ\nDYFJNCkrSKb8WRNcHsZrs2WXS/MecTmSh+6GHIgqWhfkIfy5SvMuxC28bIbA\nlnOsJQnc4BAtFPVA/s00PxSxHEOGwuVo/BNuOaZ5w1DnCXuKJ0sqGyddoBBR\nDSI4vg6SGg3yMcW7T+sytI9UxAOa3P3yLNujpkOmyAPGxQj89Px+ofewlvPD\nwnrBAsjXFVDPWeHXUuq3/YfWdDjk9UWwpwXpwpk0rN73md0QGvyVPcbswFLS\nJ1roH3gh1ri8OIhhl33ejUb5kvNg7RDSNReDq10qpRlI4W3+7xN10GcEb3i1\nZK4S\r\n=0aIy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIACiCHgoRwSpsqHuopP8pOdbx+dVVVFxgzrv4DwB5lPlAiEAqeev6H1zBZ1GhGr0YUaS9NMiJTlP7LmAZX5bu3jH4dc="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.67.b6f3cda.0_1624562021136_0.2796783344214744"},"_hasShrinkwrap":false},"0.3.0-next.10":{"name":"@code-hike/classer","version":"0.3.0-next.10","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.10","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"3ce6287460eef6e00f5d3717eb2dc60d90c99522","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0-next.10","_nodeVersion":"14.17.0","_npmVersion":"lerna/4.0.0/node@v14.17.0+x64 (linux)","dist":{"integrity":"sha512-mnPXmxwLvqfjZAAm4pX8dNV3mje/Yg/JGJdJUNtqoCPpQFNbqrQCZSmqY7Mz3q36wwC2u09aG5HVoRWws0YeIA==","shasum":"bcc26907047f825f8ca32851b4a0c165106465a8","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0-next.10.tgz","fileCount":6,"unpackedSize":10363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg10HgCRA9TVsSAnZWagAAu18P/itRQ6HnMp7xGsQsN21K\nYS/I3ObaKfNuBFYasHu1coy59dOidt0uLZeLlepivVjWOGHtcDWW4u7o51oV\nZ/sbG+zAR2hBqP8/kRlPeErCAXedd/lAbAwQgCrMGU3Ox9iwaRoVXc3ZhLPj\nUfbCyXkqd78GCRFZkd2wt+iyvvJwbdjjGSWOZfIlC14pAhLPWU0r7uHxwM2K\nkp8x52peBrYbqmVOO4R+o1qY4xd3SHv/nRKmSoKjde2qamTQvWY8mAEUpKNx\nswrnmGOZg3SEpDYx6khyfMA/rAvebsqJrXMwggn+wx2cuZLCDiULKroJ8meB\nwgD75fdDRxEfFVEhCwFBsh0zfRnJtaGU7dFSPLVtHrAcfFSbvBmDhn+dwjPV\nWfugCujGxRI6UYtsnaWH/C2VwElBXC17F1UYh2gSnr/kz8LIEvey/gLdDFUe\nPlknoxDY3nEfJDLuhP5k8xSNS+MO6H6E3mxr8/ttDfnjWRyfN/Mx991K6ywG\n8NjYWFabRL+I0pjz26Yq9Sc6YHw9UO95J6JRJMsjvalaa/Ex06CKJf1WPUDe\nD6NiTmQoRAI1FlDSqRz9XKD1Eyj4Z7QxHd6tuTIoEDjzu+ehKI8K/EcFK6Am\nTu39jbLmWKGzNl0AjklXf8AqdJt4ZJgyH+SkzFat+7BsQTsCIwglylqRqQSO\nkE2l\r\n=t4qv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCinoQm8PyTqDej9tRkOdN0P6NWSDlqfEO/Xm0gi9/T/gIgdGwIpd+syN1zvq+cocH9irMLMpTmezbm9TWflLSK+60="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0-next.10_1624719840305_0.1200038267647574"},"_hasShrinkwrap":false},"0.3.0--canary.67.2246098.0":{"name":"@code-hike/classer","version":"0.3.0--canary.67.2246098.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.67.2246098.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"2246098172b040d533938604fdc1feb7a3f8e727","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.67.2246098.0","_nodeVersion":"14.17.0","_npmVersion":"lerna/4.0.0/node@v14.17.0+x64 (linux)","dist":{"integrity":"sha512-MbmChqJXHw2+yHjlDhelYwq2oTCmo82Yy55k3/La7f8OXRKRXFnbKJsn+pr7+GFqkMapg6M9JSvtwyuc26jW7w==","shasum":"02830c4365f4dac175bbb64243ce604ba0b6f418","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.67.2246098.0.tgz","fileCount":6,"unpackedSize":10389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg10otCRA9TVsSAnZWagAAcqgQAJmhGhDl6lAUScH2ujmX\n8HOf3lvxc0mvze6vjF84sIRYLAAcdPuJ/GsqSAUurCxrEWwUrA+Heatog/xE\nosXWnILPozFakL0YByuZs85FvKWwaydzOGWtv2S0z4biLw78gdYgw1Rl8n/l\nsqagnoaT52qKnHUE1jphu7r+S0A/Jbwopy8XKAZcDbYIQI5V5vXQeR3V1I9h\nRKPZaxBLqOwaYVTi0M3zDWUM0HTxMMA5pjAwBbQ/imeRUbbpPqFwsmqJboGU\nB+eWIYVoXRaKhfVAMinHZMBl4u47THLs1cLhFaR+tny6gm+vyTGOZMp720WM\nH7CuMWb2sP/j6z1fmv9YOz7DE6BSykgzjjWGeuCgaKv+3Uin2LwafZ2HeP1p\nmj9fNTJrflendTKx1cdSTgIr2VjkjYokFYEKXsBjavOSItJZ69mwWVwBY/dO\nlnUtMxzbJ0AVs1uLkvvl26PE+3AAeJpcfqrmPO/ihPE9I4hq77eiMsUmBDmF\nNc0Pvq2GFQb5aM7syQiJJzMrvNFo6K7FbKS0WuW25RmAAg/KvcFakXDOQEGx\ne30luH2Kb7vaTFq6FzanlEavdj3Yn8qlxxIHWp7lWeTkBkZCwflHa0dFZr2b\nJ4XCCkogYyYjxNxz+CLJLf0u5YAgspOYgQ1DgM4jt6qrpG7AayEu0ajVqIdl\negCe\r\n=EmGi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHNQexAK3qSVjxxIAEHCJXf/jNZvSnHGWrHhtkmZwqmKAiEAki2B3df1SJTI/0xckxgADD2ZnBYA2c0FmYWAw88DF9E="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.67.2246098.0_1624721965256_0.7836320834102366"},"_hasShrinkwrap":false},"0.3.0--canary.75.a98c407.0":{"name":"@code-hike/classer","version":"0.3.0--canary.75.a98c407.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.75.a98c407.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"a98c407cd66b568b35dbe71e34fe9b4580b99588","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.75.a98c407.0","_nodeVersion":"14.17.1","_npmVersion":"lerna/4.0.0/node@v14.17.1+x64 (linux)","dist":{"integrity":"sha512-dRGNz0OKSiowRNGTYbzTZDE8gHH3jC8ASoH02Xlir8bFNz22WLfaWIJ//sq5xLaC1lb1LPvt99aqRrIZt0t3ag==","shasum":"2060deee965e44e4054f40478fea332c9244e5f3","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.75.a98c407.0.tgz","fileCount":6,"unpackedSize":10389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg6wAMCRA9TVsSAnZWagAAoI8P/AxbQcCnt+j0cZdJDPYi\nLG8swTYQt/ft6oVPyIvh4klG+uEkxsjUDK4YRVTYLMjxjjT3wmFn10Cc5n6y\nmpe08FZYRVizt+AGAbqYh0ilkxs5DuCwbzZ8hXSPq5gU0lPY89VQQZgH6QoZ\nVsk+VEpVwFvwZ2PSBu4oXDjaM8ngdfK9sitfmb4kDSCPdxCHnpMwy+lz/4XY\nUrNaXnpZmSoiZc7GQqXX0/50CAMUptMVzS4HTBgnyYhCEnrvWu+L14mtXklK\n+ab0kx5iSWMQyC1LfaVw78iWF/OlXB75i5lq0AFIj9+N773RWOENsfeYKgRK\nk+Hhfg6hnY3j5jpSDz5JfKW4rbJMd3SroN9SC26nihlBh/sKcylzGV/phQPF\n1FQUKLdkuHcU8Jd506nZ1Jh67nBnEHxADcvjmVXBm9C5HMCbFPfMNDkW4RX3\nNjY2+x5NyaFtfnupN87sWryoPbvfH4rHpDNLnY8Os1wWuT9woWFubmqNVdkf\nizEtIC+/MtLD/qMeTmLwa7m78VM3pOsaRyCNvVM+9B3IBmFsu50sGAOGxKlg\nL1F4C2IUsSOtk4AF62kfVPgruhKWTAWQ0tCkZk4XNqePVZwQ20ldzSHbKX8y\n69+q8t7uezuwQyfTeBJRU5/VmKoJXMUGVH7ns44J6PPxrr5VC09y5z33zKOR\nmZWQ\r\n=1v3u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHi2i8pz7RkZzgKoe2yAAyv5Y0IE1We3jIbAqfaE4PigIhAK3Ih/ftm9umsUZH1RY0kQDgvqDFuWPVwtPZv1YBslLn"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.75.a98c407.0_1626013707570_0.6893283003918003"},"_hasShrinkwrap":false},"0.3.0--canary.75.b3e0bf9.0":{"name":"@code-hike/classer","version":"0.3.0--canary.75.b3e0bf9.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.75.b3e0bf9.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"b3e0bf994f016d67dfdd881b3654e3efff8f798b","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.75.b3e0bf9.0","_nodeVersion":"14.17.1","_npmVersion":"lerna/4.0.0/node@v14.17.1+x64 (linux)","dist":{"integrity":"sha512-b+8lp306b5356C7EIheFWepddlJ5/ia++QnvMMZvm0F+4O8aYjGdEzQ+a1s824Ls91mKS4eWmeazjglfVm/55Q==","shasum":"074b116ed064328686a9bc3c0ed03fed80d4d5bf","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.75.b3e0bf9.0.tgz","fileCount":6,"unpackedSize":10438,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg6wNYCRA9TVsSAnZWagAACEwP/jbnScgFk+2a0i760GCB\ndZb8PjgF7toxW+0nMyeGS4yz+1d29ocU6xZ66L9M0PmrdWJn0eDclLS5VVoH\nIQTcfgl107dioi20m8Y1Bys09nnREPCq2qHxWAo5WZ3KDRIJ/0ke4yvrejAE\noEQrlZn3cBBPNqoP/dZ3fhxSN9lxvemup7D2ZyPXwcvxFNH5/U+WHaj+KK7q\n4zbfZPBprOzaHZ9Sb8MDZXdI7JeLHseSN9AeCzGCbc0AovAByzUV85CDOFog\nlm4HvMK0DISiPMcih1vCSii37crUCB7gBIye+ulE6CO9ohETLLQe+fM8I5Wq\nQIbeqyHR2LG1J2Hszcw6yxDRzCZoxp7ulINVqn3/+QQ8tVHV6hUQN7Vdz94U\nU+yFdTfLC8O3OiZoKUGHLX92XOu/MidwUynb2V/VW6uhygjpamaBDzSnZs8o\nys2ZMoyemZlbcxBQ9pz9AYIPp85psCKGckM3pERNkVSfkDBPvZDJ+NyuPOLh\nsY5Lu7gbeJVaO7FisfmETsSXu8kfN48lcMV2axTl7L71WWEspMnGbvnW0weQ\n24VcMcYemK1Q2rMhvwbdAV99j3y9yhIFC1BTf1JQcBeYb1MkP/SRw02kK/f/\ny//diQaSqmA0VDh60NS1eepiljWi6x6MEMtpfyJIx+MbJd2a6BrNydzEYYLh\n/+NT\r\n=A+KW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4nAviChSXnM3z2ivdf+CZDVAWtZ5WQKUKR2/8MMNUdgIgbhOP6oXu3+oJSm/TOg+f2fw4jQRZHdUA3DjcOF29fkI="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.75.b3e0bf9.0_1626014551851_0.4468035996083064"},"_hasShrinkwrap":false},"0.3.0--canary.75.9e3cd0e.0":{"name":"@code-hike/classer","version":"0.3.0--canary.75.9e3cd0e.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.75.9e3cd0e.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"9e3cd0ed86740b7f27c70e94fc19cda2847328d9","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.75.9e3cd0e.0","_nodeVersion":"14.17.1","_npmVersion":"lerna/4.0.0/node@v14.17.1+x64 (linux)","dist":{"integrity":"sha512-U2kufcO8+cwbnmBQ39VoVJLwTOHV/vlGPpTo7o2ZWcx1NZycexpOvs5RcWMaGKSIZoKeiw7tc0iGalvVpdWb0Q==","shasum":"5fd0dc4ac730f95c67b38f4bfe5eafad2235229c","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.75.9e3cd0e.0.tgz","fileCount":6,"unpackedSize":10438,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg6w1aCRA9TVsSAnZWagAAWIYP/iJpW7jGxvJtw+19g9CV\nQdHhv49xjR8lvJMdnCqILapLJ6HpIwmyZzhKWiyDXR1tTbsmpGrXNjQQhTLn\n+weH8ZcWHqzWF3vXCnPg1YXsX0t4Yt2+GgkogEsJtmQJgG/NX8c+8dtXbqKG\nbsELzmU9neEaLvO3rwlj7om5Q9Rrl3ulph25wMCQvLeoZIMLeXDjC6FHomhh\ny1He8kA6Wyp70aLkoYWAW5Syi2xtqVEVajVSb9M79TSVzHToO5wLS7eVvYZ/\nw8sJHaMbmTrczSp9dnFfT1WKnglsN2HzSoA1SO0/kWFw4kWdwJ53mAbiVWAN\n2l/vaVJReRnxSdowSJrMR4UsVk4vUX6ObVFrsy6p5fb95fcfbPby0t4CupN7\nvuS4ONCsaUXfIFkW/GiERSZYIlYZ6EUsFaBtvS18sMjUprBSmyEx32qEZbD/\nnb04xmxdS+5cjfvdtlUAxinH0Eb8L6kowedxI9SwaPT/yzTCcyvDvPQFbZQj\neT/rb5iPgPPLfj9Rw1Mxcb0Z6FVaA1fJDl9Yai64vF9ffO8kRBJojVyRVlNY\ndLN9CVWw6xUTRYvDoTX5DKwyVwIdosd/ePlKn92eJqC01oMMUOfNmWakjPOx\nJwoIkdi/0bClKghcbDynnmGKtwH/VN4Vn+41S5dffrJCilqAJ26hdZyYs7L8\nZeci\r\n=vFQf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH9ex5FvS1VF3fgjfBJ8E6mcyCr5yX4xUF5ZXYdGTYNgAiEA+/LuOUBT4MoMC3Ai0GOEpnwjn8I4BtZnpaQeP7gLWKk="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.75.9e3cd0e.0_1626017113886_0.6390778189264013"},"_hasShrinkwrap":false},"0.3.0-next.11":{"name":"@code-hike/classer","version":"0.3.0-next.11","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.11","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"0af981663c74dd5d89f486839bddf1740bafe4c2","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0-next.11","_nodeVersion":"14.17.3","_npmVersion":"lerna/4.0.0/node@v14.17.3+x64 (linux)","dist":{"integrity":"sha512-Jx+R2ddWE8GKfSry+HbJ4Ti/yVw5ef01VvwCOBC8JGGn5ZKvL7IQffj9u0uy151COZ3+omMWZp+/wm4ThUXhsQ==","shasum":"4addde1418131a389d6e07ebbd0d7016504b5a77","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0-next.11.tgz","fileCount":6,"unpackedSize":10412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8XCyCRA9TVsSAnZWagAA3IIP/1i/brmJt/20OUtsiYFW\nbl7N1ODrPn2vY7x9MCfeMtMF3uk20zvcfxtvAqW2GTRTaIW6HOaOw7XSE0oI\nl8tBc0NGvT1tVXNv1iMZmW1FiE+iVBfRCPBBPe3sS5Z+5q3z0gS8Ow0/8dei\nIGK6RUg33vxnT6DOCi3V3jctp8qXI9GyXf8iXvwczebgZZD/0SpuZwKYNr8n\nsJuYJHt6Ywvx7pAP4Q55JVYGCTaYLAMC8hhmlWkYBg3qqYdvhkXu/fGt5XS1\nDtPgkGK9fbvleOefzyw6WR6WCNDW19odKob8klh5MNKWW6qouFT21omISWHx\nKt7KskW05mhtauZcPiBOudcRVLBGm+9bvOSWd7bAh7OtkhieUrwvtUPkKd4A\nu6qXPD4GKTzaTttC+CTrI2JqAM8GyA2JzHRJ2k2vQEyRxdBHEX1KltRpYqG2\nJh3ULJC21ITP4gftmrEBSnVfTkGKauho+PxJ4uHsB0kzKPMLO6Ucq3OWJd+z\nysWta9z2/s7VjSXlG2/k+VvdiA+0f5C391me0wBloKIZhGwvgkrVoO/uTOlu\nEJbOBRY975PMq31aUM0HxQ4MnMl8IvgFx2TkT3keunFx89JJNYml+np4kzig\nMCJUa2uBC+xxsNHLiOcN48SdM9QPare/A4/vlJeexvqwnlO5zqzXy1A7OVjb\nbhVa\r\n=rvjN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmIf6cp7tDgrK4838UzLYplkC3YxVGzIlMYSAAsxrVcQIhAKgdtW9hmyw35FhVx/B57K8g88eGnpIYx7Ku5Zdo38fp"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0-next.11_1626435762135_0.2356663592804371"},"_hasShrinkwrap":false},"0.3.0--canary.77.ade5d72.0":{"name":"@code-hike/classer","version":"0.3.0--canary.77.ade5d72.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.ade5d72.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"ade5d72c2e84b4893c40b07e576b9aff818d6cec","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.77.ade5d72.0","_nodeVersion":"14.17.4","_npmVersion":"lerna/4.0.0/node@v14.17.4+x64 (linux)","dist":{"integrity":"sha512-fN+o0Y3zPZVjjbYktWwAjOlwUt6nhDtBA67ecOkLAjV5nD0r4wg9re/HeMm3wnXkTk9ECOnYL79MwOUQe63ZBw==","shasum":"a7e18594ff0d825754cc98c3dfb441c86ffe50cd","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.77.ade5d72.0.tgz","fileCount":6,"unpackedSize":10438,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDnTOCRA9TVsSAnZWagAAC8oP/jl5Ow8MVbHbtss6JPLW\nDcOlIeHCqHOI473p5R9MinXgQxOKP3eRO5+AmkoM5Ob4BleZiz7PG8DpH0lu\nY6zrZ4pMv+wt6wutGJvRxUM6lX5xu/B5GRIixMdljS8ImAfFYQTJ+elK0lN2\n5aPbqcffjZejlT+MdvPCY+74nARYdlBSTir6XWqtgtBKzYy5+Wm8nKqaezLK\noUwuU8gC9oxPQdnQ8Xv0U/+I0+NX2LOl0ddewC+6rQIONuaSnvumS50cDXdf\nMEuhRKLnDBNh4/0JLUzeGzrwfuxIf1OLlyQYgm28YZIv7xiqiNK3xBsv+tP+\nc6QPg/iIOriZ8O9ygqhK96zlJJRD+hdRxP6uNifBDg9yUhyc8xPTtp+Wb4EM\ncTcT1JO3Q/XGiRP3PY29AcZ3w77VZQ0Y8Y+u5oQW3Q9EaCpA4xce8DEpf7U2\nO+XT4Bh/bd9VCP6nzVmNMbRPwww31vMtmJa0huZzkqeOjkEJKlYtML3RWiLS\nzt2y7TFQrf9wbrRKl5yxsr3QqH7xypDGWEau6+m+HpY5NMsGZoy5YPoK0CCR\nruE3qiE8gFT2FHdMltw/BRN8uuVnBnddtdViZpI6E9qoFxWeI3pWIcuW+v0k\nbI9DTau5zt83LKIyT0h3+sQUOzQvk3h13HxxSlNSZ1mfRoRQmbkqm6Vp0bKd\nqUnP\r\n=Yxec\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAJraSaBwpTBphkxIdkvmAoEIPkcHOxXIONPPkxOpCIIAiEAzB6hScl27wdcRIGWtkBTT6h3vEYMhqw86WA/ryFu2bg="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.77.ade5d72.0_1628337358289_0.21636469607681552"},"_hasShrinkwrap":false},"0.3.0--canary.77.e1fb282.0":{"name":"@code-hike/classer","version":"0.3.0--canary.77.e1fb282.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.e1fb282.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"e1fb2823795e6394c8456c99eeef88344f3dd360","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.77.e1fb282.0","_nodeVersion":"14.17.4","_npmVersion":"lerna/4.0.0/node@v14.17.4+x64 (linux)","dist":{"integrity":"sha512-X2JOmVE5jELgjoNog/4d55mMVRymaG64/ZUqnBtl/IWU32M28xBIo88to2tU5BiVWbOIK6w68HgQVdTkWDaLmA==","shasum":"1facb514b00fb0fdcc826243d856065b668e8626","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.77.e1fb282.0.tgz","fileCount":6,"unpackedSize":10438,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhD+HuCRA9TVsSAnZWagAAjW8P/0BHESFXFriZeZ4cr7Im\nyRy74GHup0gwG0nJ311keJ2nKnFoIzy/FR4R/02sizGXGwbQajN04+Tw0kxj\nwYGNENLiutrIKdobd0niyeVjurCvE4T6S5XN6fcv0x0nkPeWs0OZTt/Fmfd8\nxXmIG669bn2UKWVV0SQ1AMK9ugm9n3bx6FlHw84rujaB5rBCAshrtfY/hkDi\nVOCyW6V6RHvEd91V+/jTQsaN7drZj3l55NpJn6gkhGDRShETtdLnvbKE3Kq6\nVxhmjSA7RtpPqOTRdaxrzJ9rT0Y14ZQm8qfkAfPBdBj66dMDXAXDi563mKv0\nKAkrgJjUWCj0ime4qwg+gh2XXqOWVtf8qGXwO1L1fVbYdy2UNe1gO8WB2/YL\nDTZfd15pVd0qkdBa0n9h6NS918pgCeo9qvQo9eMeyf4W6eOrk5NgVv2M1J0p\naJaeMQ56TXBXIx+hDtBvURivjTSJEV7b45+We1xFJnH5aEk1Hkc+k6h9VutN\n5/tfY8WLl7uAln9cxU4GocIkrywQTh8DJbmjS9xztWEovYDsjRR5d0rihHXK\nzsk4+mvWJsRr2OtprABb7Aamaolon3pDUY6iK4wTqcCmTO+HXLAiZn+ng8GR\nzfmYBbvl2YmPydIyZ81usETmFGiRdQNcKmClbVu4yTeWPmIoPk0HD8qEbk+N\nhd5X\r\n=QWKX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGhFkiENFlOWODxSpl77PcJZDrly57dcHdZr9xuxTZteAiEAx8nm/FYhS9VOPuYCWtkXYF3VeDt5n3D7wOe9i0m5Mu8="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.77.e1fb282.0_1628430830518_0.3839262240045176"},"_hasShrinkwrap":false},"0.3.0--canary.77.87864a9.0":{"name":"@code-hike/classer","version":"0.3.0--canary.77.87864a9.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.87864a9.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"87864a94ce18cb710aa1a30699add71915339dc1","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.77.87864a9.0","_nodeVersion":"14.17.4","_npmVersion":"lerna/4.0.0/node@v14.17.4+x64 (linux)","dist":{"integrity":"sha512-ChJviIRp+e2o4bdaz0n0BUkwTm+ijYMh3pL8/FgOH+qVF8JmGOdOMNFpbrw8bvupgX7aK/SCCNQ0Fr0MB7c2lQ==","shasum":"00eee02fcfcd4f6a342915da9f700926db612c97","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.77.87864a9.0.tgz","fileCount":6,"unpackedSize":10438,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhE9o0CRA9TVsSAnZWagAAr9gP/ixwrZyNi1uo+yE746P+\na8Q9ELVwXsWgY0tsRsVzCRDt/C29XhQNnDtkY3+hMEjxoGFp4+37SJhTzMtr\nl2K+Nnz9ttVsVS3WYQzI6ahdwbjNu3F/DPhiJBfvw3+KujYRvjyLmw9PA0cC\n3vJSjQYw8eHyCEn5EJKnskqnIql9kiMK9bbLdXm380kva89PABPVPvt6QeLE\nZ/Tr0JOKIYW8h7eJdn1uI4ojXVWHRECa0ozW/vzzZM02dqOYuCXNtEerq9N8\nDE1oMk0fiMHLN4uoJnxfpVT6qaqUXPgMto9UqRulIoxaJBbj0vMmYOgnaWZM\nRpnRCYlPAFhqk1bNQUbqyKh9TM9PKZZh7OhlFzCmIUyTJ55Z+7hKUjw+LNvY\n4jMcGJMSz1nKrm2k0IzZpocYVqBLwnxL13uGX+rtI2qS7AcwMFEEIbx3QLBH\nBktalF0N1OfCTOfBwAPqPcW5n/4jIg4B3AC3oqqHnt63R3GAnRQpbLqEEZcd\nT+H4h/BwOXZdLAyyT/f5oXmqJR4IqQZacxx7VfE3nE7SdTmw+U2Z3Oa97XLf\nUiUumxVuGeIatuIKxGbep9OaRK9avo95+rawzzkcHaIW42V+PKqSU5KlOJyK\nd0+SauFy9a83XJ3mR+1dljGtgT0iGG0LPJJZVVMhEIDCEyvEAK8Po9EKxuqZ\nQHHd\r\n=SmCV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGkyNAFS6gakT0f63Fn2a8L2O2vBg6gKe/vzMIu9tb6QIgDBL7HAHarTYXbPg1kEU0l2gLFHZ1o8XUuhBbad1ndAA="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.77.87864a9.0_1628690996275_0.706265510308558"},"_hasShrinkwrap":false},"0.3.0--canary.77.6c844fa.0":{"name":"@code-hike/classer","version":"0.3.0--canary.77.6c844fa.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.6c844fa.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"6c844fa2ccfc2fa1368e7b26b2a903f70aa3eee6","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.77.6c844fa.0","_nodeVersion":"14.17.4","_npmVersion":"lerna/4.0.0/node@v14.17.4+x64 (linux)","dist":{"integrity":"sha512-0IVHh3C3kOvGxUpHAqiP23HPuDNc7kaNse0jbdRNHXJd/kUlBlvRPiNMIH1rTvgvH8q/NmWxOAAImdRNvtlVsw==","shasum":"2c387cc424942447219460f2019dd37c3379716f","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.77.6c844fa.0.tgz","fileCount":6,"unpackedSize":10438,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFR43CRA9TVsSAnZWagAAvd8P/AsaF6JWiKVJ4AG646Ig\n7Qz7COT3matX7fUUxcyR9UZ4elDCCWfyVlfz11BUa2xJ1n+1IOftM/gWt3hi\nnua/5W+1+Z0/ZNBvMdgYdcA6K5j4i1ajaUPSVInTPaNHnjrTsVovevLOsbVY\nhANPi2zVxtovt7H73HvFa/gnWwPnqmmcz+gxgfxQnpVx1yh4vfWRiASk8jkS\n+gkTB4v7pWISQQ1sbdKooXaudo7KjFTx/M9TnEm+FPACqYmn5TV3vnw4V+Ik\nqbGncp0cWAR6/YPKTEVqCf3QtDxpnIhhWWXeJXcUb0TvSbbwaNZ/8/PfPBgd\nujp6DPZY4TNR9iO4aMl++DxhYPZDD7HMshyZTIyh+FBZBBHHwDh8pypQkaC6\nzPCNnEs5ILl8Gyljsd5PDrSa+/5rTlGY08csJ8amMY5Fq71p7EpDF2tPEJMf\n9PXOWJDUav7sJ4gaNRVuGeS7GMqdEoLsItMdzs0aGGzBHc2N/XF3qjXjQh1z\n7p6e+FjH27GMyKpfEFX6wGWdE2d2KJRdpKLHeVQFpr7VW9Ze433EnEthqiTr\nWbrTRUGQC8Ve6hVvPRILFzeBZWMcMDlHcsqdf5UmW+LZrNarRQPym474gWfJ\nrDoOCiOgUtewiBhmcITu9E5mI4/sxpORntq+nWP1x0S/81j94WLu2nyiPk51\nrsCA\r\n=DqcA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAEtZ+evPajiKUea6/zCQOdyDH/Lkc9Vwb4akZF3iTmcAiEA/UqJ8TQ0I3lU1vC7uRxhIrh+mEe8LYzM0Qu32ZLmTa8="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.77.6c844fa.0_1628773943661_0.6425537424737389"},"_hasShrinkwrap":false},"0.3.0--canary.77.c58a10a.0":{"name":"@code-hike/classer","version":"0.3.0--canary.77.c58a10a.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.c58a10a.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"c58a10af94bfbb73197c59ff8331d2b2635c9c29","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.77.c58a10a.0","_nodeVersion":"14.17.4","_npmVersion":"lerna/4.0.0/node@v14.17.4+x64 (linux)","dist":{"integrity":"sha512-QwuDB8H4dGG5ESqY4Y/KL/HaVoz8pjZAvxNh23WJ4ANL+HSZXMZ2sZuHPEE/B6qQjrGVa1JedxTWonBwcCr/KQ==","shasum":"22de957e8154feff0256ceb715ca7ddeb6a9ec71","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.77.c58a10a.0.tgz","fileCount":6,"unpackedSize":10438,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFSM8CRA9TVsSAnZWagAAO4MP/A5/otPI5VOygcZHTMbT\nizI6gGC3cyokUOKTcPc7uPu8mFAAH2T/VeaP1NhfYWPTxoul3T2/1gyccLRS\nBCsYR/AGVKc1mOqBce/4RBJS2mZYqpAvvsbhyvIQu/PIrA4wToUaaZl6IRrQ\nMbCi/ebYfZIYa0A4hEfap4m2qT0KCVb+R2VfYd+Ces9l6ViCe5afvS4mtl+V\nNiGUAMX2eNuKuz1L0MsPiYmZUpXj1Ym1WohsxWZbEfWDLtl7dFRnLtRryEwL\n2gnPE9PnliYDYYjaqKFm8+L4q0fronMm450l4ksVPXDcwmjlVIKWYElSCwtw\nXpjdlJecuZ9V/vb6GOf3BRs7sJ62oBfWfJQhACiS1tShRR0R5iPaD5U6m+BL\nE+shOwfqYKFShXQcTl+1CUZV6PrtSsO5dxqPCQVHi0mtapxg15kK7FHrxJnq\nyO8sGPaIUl7pDPAWOdagGlNKoyCP5B/ZsVM0QVmbNcqmabLifRfFz4pLdQpX\nHPq1NX492cL6kjFU79t5u9sL/t+UEpoeml43rPw0jO33vvNC6fCuEYjhQFaQ\n/i56jfTvRFNRkz42anl1u0mhE8kLKYxPIFj74d+2/0ngtaDLJNf04y9slG7S\nHxlsESeHWGpY8txev7J/JSSMrc0BP5WtSOAZku3Huuy6JkBlfA2PreQSHUaw\nuduE\r\n=LOmY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3C/Zs4NWv+jz8cE8C8j9dt2hv/4oC6b5B5/DnVnZeUgIgQi070ZHe+c4e9iQXge8ldRMJRdpgQKMpvL0d84MbgsI="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.77.c58a10a.0_1628775228603_0.40891579665365096"},"_hasShrinkwrap":false},"0.3.0--canary.77.2395a40.0":{"name":"@code-hike/classer","version":"0.3.0--canary.77.2395a40.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.2395a40.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"2395a401900a43082533413ce49183b211548e11","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.77.2395a40.0","_nodeVersion":"14.17.4","_npmVersion":"lerna/4.0.0/node@v14.17.4+x64 (linux)","dist":{"integrity":"sha512-h11JmynQ1DivYY4A6X1YZ8SOfmfttpmDqFgELPfY8FKFOwQKC70jJ8JL6I7uOv1uFK9MrOSQimUgTNgh6I9uTQ==","shasum":"6ed14a4d602a1d51f91216c7259cce6d28ad0d3f","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.77.2395a40.0.tgz","fileCount":6,"unpackedSize":10438,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGpEuCRA9TVsSAnZWagAA+KYP/1d3JYsOScK8Q5J243Um\nQBAxrn1oYf/G3klFERP7go4HXwhCzVuEWwNbsOFgZn7jxTGsFjr4soJ0ykjZ\niii8hYYDS6FrMmB2zDpolfrAf3LMq6rWJqte7mPpkpy2QRe8AOgC8EOEPLEt\nP1G8UpqHuZFZadGW9yB06tmRbFRF/LjiZa4vjUXjUhgoE2t24lnNCXbWCBjQ\nRv6+RidnKkC/e9QGpQ3VYoLq+kBbfTHiNhxd69B/yPKpkAeiJjS60z/Qng8r\nC3bWvnPjz95tsfOixp2JNbM5BUj2c/bnGmQzF/kSx/olgG5NM3HQ8/2pH6Wy\nTaonjAX9mu2tzkEe4CP3f6DHmIZXzOzXP78E/ZU5dlNq99rc/1eESoGxQGPc\nRsygkB/O/2GWbVnzguMhSjLniByBsOlm1U7T0ss4tWlFxCSR+nhFLM/ve/xh\niSYzMw6FtZGSPoddR4l7OMUw6ziB5X4HVQskiKM5DwdxOwDw+qEQP5OuccXM\nfkJqGlSsgPRlYxlxDjy/GqUsqpUSDPEDTzbbX0m3VjPbmfz1bnN1df227VD8\nILVX77x5GccH8puXL7/sVPVRCdA8g0gwVy9ONYf1QxnJg/i8R+vI09zrvjIN\nJYhs+URX0OoQIpdEIcsw07LKpvS+1z8OrlFXb0YBtpPOly9JyO/RtkAL+A/M\nV4n3\r\n=rJYk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEVo2njJQV8kC9ruaTCT5lBe3nOHTuUNfQOAsymrpGCtAiAJIWunoUs5ACZhIv45PmyWhMKZwY5BIPpg2de+rtOSgA=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.77.2395a40.0_1629131053832_0.7028615216080831"},"_hasShrinkwrap":false},"0.3.0--canary.77.dc9c2e0.0":{"name":"@code-hike/classer","version":"0.3.0--canary.77.dc9c2e0.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.dc9c2e0.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"dc9c2e059239013421ec870506b891a6332731cb","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.77.dc9c2e0.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/4.0.0/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-RkzIjPVGLyGhGBB9SvUWc8fLd9v4OjbfRW6I9gvV3wduw/nanAcY+Q/9ShC8ASLzfNZ+U6eVUtwKTWBdDZwHIw==","shasum":"e171f96beae2fded42391b684ebc0f5c75d2f159","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.77.dc9c2e0.0.tgz","fileCount":6,"unpackedSize":10438,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhPJVbCRA9TVsSAnZWagAA9WwQAIVOJC0iEqQFda4kFKhJ\nsPEoj7pmkM7V6KrOzkHCE33oV4tr0AGLN2hBNv1IkDp21pKFLa/sVOTsNJzx\npgnKy0WNHbjDNGgcQ8T4jqgHjrM6RhVUUH/83LVo6IsyJdPprXIjt5cMOtct\nX/oYLj9PFrJkP6ooq+drdqkWe1BO7kYsWsfZipdTwPIDba2SffehIgAzw8R4\nxw9Z8EwQNsZ8yL0up0T9ZqGDt+1ESosFtyYYQ4Vm4XMm1MQ8AmmuVWzYWaRQ\nTMRjPdFWhEy1sqEH0to0DEfhNJWMPqKaaBYKVu0RDTX+Q3zsWddilqm8oDFy\noZKVsAK9ORRcP2r/qOOF68D47fZan6mBs3j54InhjHh1xCUoTyyOoxmQwV2C\nuZBcF0q1bp/GdWbU4vFMXdFWLmGNQKtXD35bTtwdM0NQnY5VhOG5cW4NigdK\nPEdl0hA75u4+L9k0OAZe/xRk4g/q611QC1XUK/OTC/TmQ2Nv6tuYDfNpyQrA\n1/ZiR1xrVoc9B8+ns1c9qL1QgWDAlsRRHRDoXv15qDKZQWwYd+cfDN19oDaY\n50g2ahWb17Xukkcxk1wuJGUQ7ZMr5qLRrxWc2OQypdblk4XO193XMmICw1CY\nYNAubqWHBvhzeVak7EHETmsfPI6LC8WSBEjOi29r0guqh7C4YTJSplSdgIAs\nCn1a\r\n=IqF4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFslpS2yeODRKez/rBBSYI+/qugJlPSFTQv3g1mxlEyHAiEAjm22GN0eIOxkK3/JbZCd/1q9mtIUCVjmxxAWLqBLeiM="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.77.dc9c2e0.0_1631360347343_0.43884946288595295"},"_hasShrinkwrap":false},"0.3.0--canary.77.045c5cf.0":{"name":"@code-hike/classer","version":"0.3.0--canary.77.045c5cf.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.045c5cf.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"045c5cfb7a25f306dd081d1b28e678173dfd839b","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.77.045c5cf.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/4.0.0/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-aNqMe+oMFPRnaMnYtpsOUx7a6tlMoM8AVzDp5C9cOFoakSk1l+2KppOj5+Glxg4m5oQ0uyHCcRIT9cA6VG8HCg==","shasum":"11d05be6d31330f5b038f42d4ed2f2ae1786a859","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.77.045c5cf.0.tgz","fileCount":6,"unpackedSize":10438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBYdHUxBF7+ocFFmv909FWWatTf5VGlFyqMdqgdBdA5uAiEAlel6ASBsOkruZJNGkxxVKdxWby3quEZExPl/DUl6yZM="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.77.045c5cf.0_1632172923024_0.5603640353511867"},"_hasShrinkwrap":false},"0.3.0--canary.77.8e9455c.0":{"name":"@code-hike/classer","version":"0.3.0--canary.77.8e9455c.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.8e9455c.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"8e9455c6c52537c6f0fe4beebc78853bed601fc9","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.77.8e9455c.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/4.0.0/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-KEvP3b8iCmdU2AntCPcnz10Vtrrl/VI9Bo4GJC3m3Ky00M3c06l2hr1nmC5jJUkQ2AzsR48ENV6CWu3TQld9lQ==","shasum":"d86a0b0a45b221811c1e3e16d9ff78b4d140ef00","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.77.8e9455c.0.tgz","fileCount":6,"unpackedSize":10438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHUtP9D+X2Zm2iQ7jNMaRuGWvse2uOBKF3wpl7BbUClXAiAFvaYeGhDj8pNG2eQUH8YPEwcKvZ3GiBkLtYDQb0s/IQ=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.77.8e9455c.0_1632414729959_0.4042003288136369"},"_hasShrinkwrap":false},"0.3.0--canary.77.2616b6b.0":{"name":"@code-hike/classer","version":"0.3.0--canary.77.2616b6b.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.2616b6b.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"2616b6b6722b561a7cee4c1de5389c3cf45bf74c","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.77.2616b6b.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/4.0.0/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-OBkVLHwgRSEj84YldL+8y+3MZ45ltAyusjhpzxLfN852g3tn3ccwjJlGi8ZYaLuNZHopx8n9onn3q73lLgdHWA==","shasum":"d3004907726416effb217d80f10572cd2bba13c7","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.77.2616b6b.0.tgz","fileCount":6,"unpackedSize":10438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTWqrWllk/vfJJkDNkrsySYamkNA+AS1yDVZ6/CHhccgIhANG1QPlP3psS+cvA0fsABmCcLw2s5F0gChffWf1NfjXN"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.77.2616b6b.0_1632601733290_0.07206989429503419"},"_hasShrinkwrap":false},"0.3.0--canary.77.3bbe788.0":{"name":"@code-hike/classer","version":"0.3.0--canary.77.3bbe788.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.3bbe788.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"3bbe788e78697bb538a44d4675b49bcdb3e5e0c7","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.77.3bbe788.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/4.0.0/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-WoaI3Pd27HImpvgVFhoHQi1tlHIKHCxwauZ5JvzJIrLx8Xmo4s1Et2Jlx1cVIPGXLHfrpP1WuBTe5FqnjmSp6A==","shasum":"ca77da10f44f03536258dace75781490b649ea67","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.77.3bbe788.0.tgz","fileCount":6,"unpackedSize":10438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGTrWig7Ix+lOKnoSUnOEokeyODBodBrClllxgn6qE3DAiBDj1C9ygo1dwYVV+a1LURfWJ/BqRqkcCmzp7B+mjcr3g=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.77.3bbe788.0_1633343265138_0.14167041518484025"},"_hasShrinkwrap":false},"0.3.0--canary.77.4c6fb89.0":{"name":"@code-hike/classer","version":"0.3.0--canary.77.4c6fb89.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.4c6fb89.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"4c6fb899b4232bc8ea91185414690c202187a79d","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.77.4c6fb89.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/4.0.0/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-3Hwny9iXlr21peQsIxjwnq8/wifWmjB7mefeYI3wYVRe1WUqBx/pFr/uZ1IT/ggdKn2nVhEZXVS90ZkgTF2Nyw==","shasum":"1944e90ab736f5b317afba2c82aa2e203d2c6c91","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.77.4c6fb89.0.tgz","fileCount":6,"unpackedSize":10438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHWELs4xH1inwDnqff+vIx7LkrQ49uBqbh3IkdkkZnR8AiEA4kLFb3Z1l2erWnr4ClrF/n8Wcq2HNDQEksmEIGBzjEA="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.77.4c6fb89.0_1633343608052_0.18243812174380758"},"_hasShrinkwrap":false},"0.3.0--canary.77.979e373.0":{"name":"@code-hike/classer","version":"0.3.0--canary.77.979e373.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.979e373.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":">=16.8"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"979e3736f9c1202bac4f14cf192b3227271ec84f","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.77.979e373.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/4.0.0/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-YvT9I0dMw1CLAh23ZY5Ayn4yb5pik0o1oEGO165+ZzB24tKsbh4j6ncipWN75R2NVpSefBMQ0YERFNUKVuHm3w==","shasum":"3a6385a344b628c13a1565e016bf5c1449bf6b06","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.77.979e373.0.tgz","fileCount":6,"unpackedSize":10438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+LgYyf5V7yof26LB+odGJvyt8Oz6X44rneI56T1p8XgIhAIppFDcvRwWZ7aLSMCY1yanW5meMjSD8l9C4Y0YClDPB"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.77.979e373.0_1633343851291_0.09327192163951636"},"_hasShrinkwrap":false},"0.3.0--canary.77.122e7ce.0":{"name":"@code-hike/classer","version":"0.3.0--canary.77.122e7ce.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.122e7ce.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"122e7ce5b287bfc6f5361892909a656c0ac39920","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.77.122e7ce.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/4.0.0/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-XEFvvyWrg5ILHIYqlo3WtkCMBiCe7956bsJkEedE4GS7kEdWFcu2YF18AIqssZopuhTVOEO12cTWp0QmHbu4GQ==","shasum":"501f9727c6fbe01a188429965245d63cf402413a","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.77.122e7ce.0.tgz","fileCount":6,"unpackedSize":10453,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDGgM1SCMnvhzdhn58z7+WDzenOc7itEXGVG2bgsmLtEAiA0vHHAVykkBBmheDjgeAZHAo7wTtMZHHxDk+7D01oXlw=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.77.122e7ce.0_1633430774211_0.21892807829700955"},"_hasShrinkwrap":false},"0.3.0--canary.77.60a8361.0":{"name":"@code-hike/classer","version":"0.3.0--canary.77.60a8361.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.60a8361.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"60a83610037797fcba1934bc843134cd1cc406e0","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.77.60a8361.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/4.0.0/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-Z5mj30Ke3sIYNUoZLOJAqx92ZBveMpllVH8oKkgJTXutzZVPacqH61P1uH5c7RDtwgX/rdqSl/nC1XGQDvcumg==","shasum":"1848ba12f94ab863eb5477840c131d9998eead9a","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.77.60a8361.0.tgz","fileCount":6,"unpackedSize":10453,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEa9E84PZWtAoycDFNwP77yulV1JOGFdiX43URNFVnOYAiBvsV97vz3VLFD5hbWfQEvNpQ3HLnTLtD603eeKjSnaHw=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.77.60a8361.0_1634976026945_0.46150904631560197"},"_hasShrinkwrap":false},"0.3.0--canary.77.cd9e81b.0":{"name":"@code-hike/classer","version":"0.3.0--canary.77.cd9e81b.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.cd9e81b.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"cd9e81b72916f84904653dbc2a2f91811a340308","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.77.cd9e81b.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/4.0.0/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-sL20PItHzI9HYYVaiK8B/+EXsTpCzkugHm03yx5IsnF8yX4MotKCpt+VDSIK0YNbvmAYu0jHxvqvSWqtCGnlbg==","shasum":"f3d32f3440060ac16baf23b2c31aead4b87c52b2","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.77.cd9e81b.0.tgz","fileCount":6,"unpackedSize":10453,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHxiSkmIGrN8/LZouKxRDcthXeDKZPS4OhtJxPLbmw8ZAiEAzooYxiYgcP0dEvNvCHlyDTXMODDuE96l4Y7mkWqEUVQ="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.77.cd9e81b.0_1635887961909_0.11879610297059195"},"_hasShrinkwrap":false},"0.3.0--canary.77.790e974.0":{"name":"@code-hike/classer","version":"0.3.0--canary.77.790e974.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.790e974.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"790e974b182ea5fffc12dcbba46af2fe2107f248","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.77.790e974.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/4.0.0/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-QkYnr8iSslblvVVOwVNUP1rF2kqRAlIqu6vaqN/z5V4tDEW2zapt90Bbgd83xv0ZBckXb20lmfhaAebGtD5K9Q==","shasum":"ce4b425f006f92e6c45bacf702efaf17621f81ee","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.77.790e974.0.tgz","fileCount":6,"unpackedSize":10453,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEPvJIy8LOJoXc680hhtF7w1wMpbDbiE3ahZqaPzJrhBAiAs5jeZ+Yf9YUoUj8KnxQH/aIKLtv0A50myWjdT8ydi9Q=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.77.790e974.0_1636127328178_0.8926836725649343"},"_hasShrinkwrap":false},"0.3.0--canary.77.e9bb465.0":{"name":"@code-hike/classer","version":"0.3.0--canary.77.e9bb465.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.e9bb465.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"e9bb465ab104d9e5a844a0eb6c1d0c551136e3ea","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.77.e9bb465.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/4.0.0/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-ZxDJfbrvIzqGOHrcALPYD1Da84ZyUv5yCu7dXvIWJZ4CoQJHWGcYhcbn5q585cVaarJ/FlavY9VzfhyhE5scoQ==","shasum":"2cffb49ef3a3bb3e4db9e6257debea9a9bcc98ef","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.77.e9bb465.0.tgz","fileCount":6,"unpackedSize":10453,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChNPvGW3e9yrG7Iw8mVY2fOxaU3Drq843tG24vaJDx8QIgeGoXghYgI5gNR69w1VUTHO4559VGkQD3j8JdoS6HXgk="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.77.e9bb465.0_1636282208202_0.6760071744108143"},"_hasShrinkwrap":false},"0.3.0--canary.77.bd15ff1.0":{"name":"@code-hike/classer","version":"0.3.0--canary.77.bd15ff1.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.bd15ff1.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"bd15ff1e743945b8559512b871387f978a599199","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.77.bd15ff1.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/4.0.0/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-zD0UrSatXdSya+yTKu7wBFG7k9N399x3finVj6h+IzszA4YJUBq8Sfqx4fGcMbhJcIRYFjZHD+wY9N2MaG+sqw==","shasum":"07dd11bc050fef04b168cc79e851c4851dbc03bd","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.77.bd15ff1.0.tgz","fileCount":6,"unpackedSize":10453,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHLBR4QfUKsJ9KRoBVUVFN9CA91VeSTfJ9MH5QEePJtEAiBiF1JHVZMH5XxRIinuAC6hvxShv6k5k0Xs/Hk7jiWuWQ=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.77.bd15ff1.0_1636378298953_0.09416290741591382"},"_hasShrinkwrap":false},"0.3.0--canary.77.7150a39.0":{"name":"@code-hike/classer","version":"0.3.0--canary.77.7150a39.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.7150a39.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"7150a3912c39850db726e4c1a30c9655b7d14525","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.77.7150a39.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/4.0.0/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-BnFalXUPKUzW4RGZJ0EQ+QtRh9jyPqt0Tr+PwKziixQfcTWThMTotWZ3fW4Ui5jd1vW842QF5d99yhr0S8kptw==","shasum":"17f587fb4be15fe5c937e16fdfeb5a0713de945a","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.77.7150a39.0.tgz","fileCount":6,"unpackedSize":10453,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHgiDysAvJ52MnjBGbdP4GJxFiO1quYyRWiakqdqqZ7kAiAg/+PCRa2RXGQMj/FnarkPAe+n/3NLQ9HFhVf+rc2f/Q=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.77.7150a39.0_1636481547370_0.7676469961088499"},"_hasShrinkwrap":false},"0.3.0--canary.77.1351c85.0":{"name":"@code-hike/classer","version":"0.3.0--canary.77.1351c85.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.1351c85.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"1351c85b88dcf72dc8828976689fd84ca17ef0df","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.77.1351c85.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/4.0.0/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-axmJH7oDSFLMnYMS5niOkUadJYTLV9LU+2ldTURB27zC8cw1vHby9THMSi2E5EJ37nGTWyqYOJ8rs3wI8fmvHw==","shasum":"7506e621c5d476eccb3067dc203c0fcc74732688","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.77.1351c85.0.tgz","fileCount":6,"unpackedSize":10453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl7geCRA9TVsSAnZWagAAsQkP/0QWG6Ols31pkO8v/0Dn\ngDdfR9ivdiZlXDYn9H38EA6uo85GjrF1ZI7xBxbIyw3E2MFyYHSPtlQXQlAM\niMdqzrjnTFoQTezCyXd0dionwa8JAXH8ZZWuGh9sh3MSukAORCbAJXrbbufm\nU9T2eoROjYVyRMJmYU5xzVytpnX4ZiqbGjxP1CgrTptICt5Yh+YyWDYDqzZc\nSNTrAvQ+75iC58scGm4/GTOLdL91ILKoK6YEyc9ejdgswf35oarT13OLRpL+\nliJ5+x4peF8ErGjsT9FG2AHnkYxHJ4Sn/NGXgV7m/E4HNIqQtq8wbN6EB7I6\n4HastkKdWyJS45fqQRhDFy+P/vrjT8k9HTSD03R8jO69w0nSRbqXRCtkmU3j\n3F1WtoLuGcIirBeOcx2YL5s9PRHH7GJfY+wefLik35GsuQTx86H6H6KBfbCq\nBu/v9tlrBPgHdWXlRY6iuyQx+jF5t5mOvIghvbzRLpkPOpi2aSKrAYRm+rCI\njljsgMdHDUrx0b2m1Zj+g17jRxxAZhcNrfsVqvsjdwSWRiwlZWFK1B2linyu\ntvk7REkRFPJtY7TMPtkyU5RWZqxbNz3d91RcNPBpztwj2ReaAS4Ug5KqAh/T\ns262hFOM/kV6DbHLnfIXkaDzJti11fbXExc1ZVQep6aJc1Y2ZCo/TWx4vEOc\npYnW\r\n=y4YB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF/Io+aWD0hSyj2PTIZXmCmSSRntoBfHSU/NWP+9SxfcAiEA2w49vD48plgVsQUxbP+dQVrOeSCNUdi7C6L4D0u0OBE="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.77.1351c85.0_1637333022211_0.4585828022205998"},"_hasShrinkwrap":false},"0.3.0--canary.77.59321d0.0":{"name":"@code-hike/classer","version":"0.3.0--canary.77.59321d0.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.59321d0.0","@types/react":"^16.9.38","react":"^16.13.1"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"59321d098b05dd91119e5e0375c2842e3d23dfbf","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.77.59321d0.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/4.0.0/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-rCXkpyD9XeL1fI+vAjxaVQJN2R9IoIdMHBiXIrHLx6+XgH9bsl3wVD5fuSMmdrw5APA+6F+rs/nbDKat1OCsWg==","shasum":"9cc56ed5e07bacfc1dd93e4a372308d6c578ea8a","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.77.59321d0.0.tgz","fileCount":6,"unpackedSize":10453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhmjCVCRA9TVsSAnZWagAAjNYQAI92UwomzJxVXnXg0mqw\ngSQWcp+S0kt94+PX9jBvUbBN8zATFYPQs4ILaiSEBinQtNp66Vi73kWvT5FN\nJ//ESoD1s7+Tpevz2BDoB9uVNvNOawL4yLFNuNROIGCRfVGZA574sx4m3Z8Q\naiJXOdDHJbL6EEblI99wLDqobvFqiNDazkMqgtinWn+8USIlZE9SvrjUoYTE\nrLyUp+JmmERgArr7aY+f8+/LXhp10+nBMK/jZgX0Bt1QFoi3g+dm7c+t+xSk\njwy7EDbWDcuEU9ZTIRpYJr4LIjMxxjiEPep6UucVIsrXJboSirbymSZFradd\nopzwumxIpr9TdHO05/ekBAKw1nNi//ocDKlPggJ1PHhEkYbr9Wn/eJHzRi/U\nJDfC2B8l8IwmMnb56emyq2ckV0mZVYH5SlWx9nHF7KpP9vKRRDiOzHu6QR9c\ndtYBP3hoyVJ2KbV6ipqojh3qXecjrdzXcDXpAy15ttLhNlthlwfJLyar6RNg\nb7yb/R0uowzGgkZrE3yt/JDyV5d6F1dyvuh+s0NcynhoFqQW/dn1jtVnE6+s\n7ElALfGgnEwDsvinh+rteslNgUojE+MZgMaP8DSNpZbuNqkzV3CVAwcDQ7F9\nhs28IXmmeeangiQJRftHhqSgfqIrTWWgOpQF0lpPTiE751HuAMQ/8COyJytB\n6WD7\r\n=sBKR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlG+faAkIjjoO8uoNf9sMgxe4fRq4i0c8Xrikky8ceeAIhAP//9Sg4d37h3B6eZcju2i5Q206zv5tYHtJwALSP7YYX"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.77.59321d0.0_1637494933103_0.06288823626846618"},"_hasShrinkwrap":false},"0.3.0--canary.77.c8f7b29.0":{"name":"@code-hike/classer","version":"0.3.0--canary.77.c8f7b29.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.c8f7b29.0","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"c8f7b2929ddc229854ed919b6427e77291be9cbd","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.77.c8f7b29.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/4.0.0/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-Ga6a/evPbgW6Itxnfd2g/1X9KqePiwdU6dlVbXrH5odi3fQljEXCRBIapN4rJ/OgjLr/ay2BiZ6ggJ1PNKtACw==","shasum":"cb818221a661ebf85fb03c441d0716c6a4ae3214","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.77.c8f7b29.0.tgz","fileCount":6,"unpackedSize":10451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm3/YCRA9TVsSAnZWagAA/2UQAIgVK1eLgucKSAcQi3hT\ndRePHEYqQxLSRmseN77TrJk+1BeuxGqCC5VFceQ03Zxo7r5FqyQxq6k20rF0\nA/9pM3bqm7J8J5ALoNpiQMbMBpZmQkS6a6ss8Ovy4RA7A57SD+F9KGDfqO7I\np0nk5rWJ676bcNsLh0DgElePGnCKRIYvfGcjUVkXB7/fvn7MAxnLtp/KiXiw\no7gQLjD/mOyRkePuixEWIG++0DbWeUN97HVKLnMeLduKBXSkc7a1pONy+K8R\nCGug56aqWSgX1GXcoEw8lUdTSaCD76WR4dKV8BYBGqaMTkq/yOCB88G/wSlF\nE3qZssP8zmX5vrCaeiCkAY6SsLsAZyZmw9u5956To2UdBreNzq5OXplyaqLf\nSkohZ/0Q58GQA21/eZAU0VdPJEa3GGdPhrS2y6S+3HsknsT6NwZqvoqBMBiG\nW17kMsEZzJgk2+aseWUTT0KeV5cEDh9qvlJxRP3mLAb5sOKk91j3y/+yQ+u7\nkF/t24PBEX8QYbjRu1UGFG+lJaTsgbRgYQKl1WYoQ3D1y7anEiOKgsi95Rqf\nN4Emo6NvO2myxj5U9kuarJMcmPzrUk4+gX9CHQQtdKrSjP74UOY2PdxtPjiX\nfpbwN19DLDC2CCVyf3B3CHreuxMi6D9wzVnpMaZo3O847praarx98q/4hhFw\nheel\r\n=+GTR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsahz2lm4nK1OfVBL9SzEOHfWyHc5jclIR/VkJwUceEgIhAONe+13YqdiyHx6IRcDC64D54eXzr2QYz9MYE+DJ7ZS0"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.77.c8f7b29.0_1637580759841_0.19710344116419942"},"_hasShrinkwrap":false},"0.3.0--canary.77.eda31ba.0":{"name":"@code-hike/classer","version":"0.3.0--canary.77.eda31ba.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.eda31ba.0","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"eda31ba3ce0ab994f4d4238736294e2779fc3c1b","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.77.eda31ba.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/4.0.0/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-gzTl2J3FouRRyk6HjsZW4zUqM5XIVDOd1Q36JkyEBJcINNMirK2Bjp+doBjH4pBvIVFeP9rnDhP7cIA9TR1bRw==","shasum":"f4f9997ca1a2d2400d8e9c372e4d066a43a6c5dc","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.77.eda31ba.0.tgz","fileCount":6,"unpackedSize":10451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhn2HeCRA9TVsSAnZWagAAdV0P/iuYtqP0OYaqlgJMPhWU\ns9CNZCKf88BZoMR7Nz5CPj0L/kkadh9qbS+m2rSG0dHRUUmEz7BWtXhpmtt8\n2Lf4oZFW2xqRaS5C3EIqplWAMfvYVF74uG3eEDPc8buxTKx1uKBlMv+AF1D5\n/NqS6Xv+ftqUXxdosj7YtRJU+GNnKCpg4F42Xn3vI01+qp37Ah7HWnxp1cDd\ng5+YB8S1h3wfBritpqvOsj9B8rlxA5CgYbHhnGbiJfesdwOWAbAT4tu077gh\nCQpTTPunlHAgpwiSoyxw/vm68Icj33AJ6mQ1ifUCKXslpvkLtiqYrJ7IC4it\nIsGMbwqFJ0petycb/XZ0g0itI+nzpLorHSqnF5DfPIv/00hG8r7VVQuyYuD4\nQu3Yqxt9xqaYNV7A5Gl6nXmn3m+LpLJP3CTwnq9CvFIzT9+1kJFojNOu8hed\nMyuBgvZMNZW2MOk6XBIVgQ9PodMQyltVzBGD+3gaEL63peC5OzNtBolXt/nz\nqyypteP9Oj5Obam+l2mMwYkTSHVMV+wfZI4a0iTdeAk/5BBMON6kFUdzEKle\nfzvsp68Sa3SjRsaKcvU1bH4yu/6ZVQIcp36Vzx/hqoVwzin1nXsW+7ftXbqA\nec5c4niycAVdjuClYoYb10uwo4uz3MUYu1+G+mEprdvB/J5K1REI7knI+g6C\nI5Ui\r\n=MZ1z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIASEirHosz0DZEFKSJF6DiFcAPqrOZVTY+59OI9PwCuDAiAtb2T6TqVy/oZEgoD0E5FtUUOv/JT/BJIeDQ2OUtGOIg=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.77.eda31ba.0_1637835229892_0.31023420151292447"},"_hasShrinkwrap":false},"0.3.0--canary.77.5617b6a.0":{"name":"@code-hike/classer","version":"0.3.0--canary.77.5617b6a.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.5617b6a.0","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"5617b6a0c697c7518c81daad7ab2161c2189cb81","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.77.5617b6a.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/4.0.0/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-RG0wQN1juodpYA/iCkpLTCCtedwCFLFvHbUyD18EZ+a5a2FLqqjrGr90+bpGeGDJQPMohXzTogCkId6/Es2TUw==","shasum":"8abf7818d94d13d76911f2655c73934514d9a01d","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.77.5617b6a.0.tgz","fileCount":6,"unpackedSize":10451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqK8gCRA9TVsSAnZWagAA1+sP+wQIJZc7QBrlgVxj/hmR\nR2duhCFNK1h6nsuo1VVRVRtgR9VnXvbJwfN8zfWQ2oRxeLmpu4AGE4nd1i4X\n4VFqNSd/mXC/Djxc+ZPRSdMnqT+OZyx/aU/xBCWd1QOCQSsihrq5UjT6d7TO\n5H3LeJh1a8GHsjCX5bkl6Vf5bfpSd46c/Htj5DEYkMNL4Khhxh3slFUs85nJ\nNEEa4rO9EZJqadRkvgshrOJpYAnbsDbZBo3HkjH1dzLbFqKTrqN/13kB+kQd\nK4oAFWzlxqT3SbYt3P0ilg5k0al3L6QXu/GhhBcJWZ/YuD4fSPekUhI14lAW\nP+lBPFnCjFZ353PsojegBhRG041tAElHJ4N7HXtmqAlIpX185hze4WR0OPQz\nqRB3XsUJTJpLgiF16c4GHJ7wqjHdW2cvgKOD5reCLgycfTA84h7a97FR6rMy\n1y26XDDIZVADWcA5ZcoUi1sIplP3Bp9KW4jvPd0nWFw/4gWv7Oeh/cRApChL\nyGysX8rJGZrIMxJ9DFQBXJUWcSjt/YrX+0Hapkxq4xzDPufmB1pCjuxXwfF4\n/lQxfRpo3vI+Xa/LhKbNN9+J6Yb2OmwaihS0ivENgu8SnPFJidnj+zXNlsEH\nepDB44nl1uLofRQqCHqjp6gNhYm5SfQMw9EDCNF8ilhqnVtc+qLWMUnYYIgp\neO18\r\n=Gd8T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAq/mtuRKyimuJxHfZwgf1/XZ/9Y9Y8E3xnAHSPqrHjdAiEAlNXqD7W1nZBP+le68hfY4WCqasUrVysBmWJibCrrUi8="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.77.5617b6a.0_1638444832687_0.889639296940707"},"_hasShrinkwrap":false},"0.3.0--canary.77.15bb99d.0":{"name":"@code-hike/classer","version":"0.3.0--canary.77.15bb99d.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.15bb99d.0","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"15bb99da55a6bebca0da1b8baf5a5083b2c5652f","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.77.15bb99d.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/4.0.0/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-OzzUlZtFyUi7ws/SDArfk/vXbdUudkK36LIgIgX7MaT76o8itfjKTPitttyWTcrNdNT8L7rh2G3n2xF1IN50lA==","shasum":"ca0c3dbd688b8c802c307c8cc8ff3d75d89f5ac5","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.77.15bb99d.0.tgz","fileCount":6,"unpackedSize":10451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqMiYCRA9TVsSAnZWagAAK2QQAKP/gNuu4kEMmv19/1AJ\ndt+veiQgDoTHYI/k2RLjr5tRI3ag18D1DQ26glzRF4Kneaj4Qcd2cCKusz5V\njipzID38liOcPnnJ08qeyDH8lRuhR4lS1IxrjhDATiacrhoFRYh6j/pK4YkY\n6hTtf5u6XUIRRkugyVnYUSyUYqqoxwqdG/k+ApNXtEViX/Wg7dWo/yA4i27W\nIKfWblXtxvwfFZ1yXlMltEkTgV0gM+Rj54BXT44M9vQFjyS6WpMBq1uE+/em\nx7CIATi6p76f1QEJfH3i95HSRwTq0i/yVWHY0xyJm6ITo3QxIYZPA2kXwxgU\niSoossW1EgDwLy2r8txr62KhIO6ARWwgg8ff+aZfgamypYew0OFbEDLwjddL\nwlm63Su4bbP1EkzJ0K4Pfq/Q4JhdY47lC3iyYDCmO79CHzv61hgUBIollpJP\nEDMW2A/N8aaBEiNXCzPA3OTJzQuTJ2Pm80/VpEFl/4P7MWSKzRyvIfiVQTzI\nzj/sDMzv04yMhziHPYq4WWHtv95Wx8WZcH93FB4UtunrJME2ViFxsbPUoFBy\nydBTzVAqaWyt1z3ldOSoQmJ8W4eKmQAmUxvsmle0K3Hv+uC2RrVnR56s6ike\nh87xQgGvqvbsyTMHOFk6nNvUnNtOiSUR1WfcuxnTXtu9TCHOBjIuVhlkORGv\n4Qdo\r\n=kwZL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE/CfWnVfTI9+9W/4jru+NQFMILXFdgKG2vpUEroD/O7AiEAsfae170feNJRCFPmwGe+PfEDxONsrBB5V/gnKmFU9ro="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.77.15bb99d.0_1638451352333_0.49807971628383396"},"_hasShrinkwrap":false},"0.3.0--canary.77.efd8888.0":{"name":"@code-hike/classer","version":"0.3.0--canary.77.efd8888.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.efd8888.0","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"efd88888e4dfda97d334ec6f21ee4318944a8723","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.77.efd8888.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/4.0.0/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-3xgB8yThxMd+LtNeFArDhi0lhgMqOZT/B6eOZbczZ9mJ34AmaM5BjDgTtwNjRSkjWPxGsvP3ik+FS29+sM3l1g==","shasum":"365f7a2dd4c4670260a0e79b3d1cb9db223cbcfa","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.77.efd8888.0.tgz","fileCount":6,"unpackedSize":10451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqMjzCRA9TVsSAnZWagAAIQUP/3vr3GBng9G4qVA2xEmN\nH9RdGGbKRrl3O5iYRrDXlSafD25mspyFdfuG/K20XKuVj8dkrYNQ6JMCt7LY\nH2iEhQiLm+HUKStH2NaVi2nMEkNdie9DW+CI5JCxZOANTho2MY+CGGMjhqz9\nLTQuNL6ZqZCpXClo8zQo3W0zjuW2FCFzb6+FwFW1fWEWdzN/U0Ma0OucJ4Ew\niGVUjblIRGaf7Ljxaoz0wMB2PTQ4zf2S3iQrhh9kW0I6kNJ6AJZ2Z4APskLq\ncMMRhKzTgluqdpDUbAt9NRLeSZmt0g+G1eRIEbhlfTFEvWRtyxn083YcRhFL\nTozSAFzU5XQhPYfXeUQGbqCe9NqoJYTaYrUgNmCyXPyq/vcoKKctOqQu6t0G\nnsu8o04/FyGVV8yEts3ldZv0hM5BxtVs4EcMvQNWDbcsp0QMVOnHQMwxcUlb\njHbZpkRsCpuFNvN7C27rZjk/lSOiFNhrRcA/iLqKUvNONAStbdRJBqGpaXqp\nN82xdbwbvOd6b4qkS8C3S/SWKUi1fuzf4pb7gyoqP/FQnL35J2iODlDC4Wzy\nbntvBzzN9ZkUJf9BtuQDJYCR97hsz8nRX3hvEvcrZCGbjYPQC1Onqnl0nwOZ\nXGgWt9oFfhzu/oNHJ3OwD6TQQZdQPj14Zuz5kgHWEcJbqPXV3NyhQz8KuTiu\nY2h7\r\n=Q5x3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID1NREB1oPgZLzP/EQdFYE8eWCsM06LyHSvNvnPHeE6SAiBnrmdeeMdCGM/zjvaDIYke2mn40FOlPk0VKTFb0JOrYQ=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.77.efd8888.0_1638451443544_0.9557155514593487"},"_hasShrinkwrap":false},"0.3.0-next.12":{"name":"@code-hike/classer","version":"0.3.0-next.12","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.12","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"2ff863e56c8b735e55517b88528444f709a26a22","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0-next.12","_nodeVersion":"14.18.1","_npmVersion":"lerna/4.0.0/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-5qQmAbCRhdMs4uRpxtYiHYmX8dFxWo9rrVK5jYCvv50mX/iHQWRkfHKAD7nxMXbA6m96j2hmn9nEZYZdM594hw==","shasum":"d112f3c5fb86768a2fe8d3a7e11569a170450874","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0-next.12.tgz","fileCount":6,"unpackedSize":10425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqMkCCRA9TVsSAnZWagAAuaAQAIsTOtmmp8tgYQDyF9in\nqAX0yDvZf/TCWrkkfRxMtGX/THMG++YoYe0epbnk8/wYZKov4RhX9Yp1U/Yy\n6sjdsKRBWIr86NdEJVnlcfrZOQenFhik6MbFyI8DTUpOVIhd7k/5iSj/k9yA\nD4x9tS3WbuQCOt2OuYRDLXg/gyq5x5QhkfOBm5Ys8tKKKNsuZLvJh4mtJ7nX\nliZUIBaE1aCGFXYdghec2C4bA5LwDDdqTrWu3xffNheKk39fKnmu52LZhokQ\noFOP6XGInYiBP1KzuSxTstkEAnjnun7jwK+GkLHGLHbXNzWB4DfItPyw6bAH\nfG6i758O5nUcZek33sQ3EV2e8PbPnY1QDjuZ37WzheR2dkZDALRbjOZ5dbgj\n8cZEMI6BSE9WxiCV45UYQZzKkEoRE+jhA3x49qJgCxm1LsPyIG8neG+zFt9V\nPJBCGE+UbNeI9dJtFF3lQxspsxRGNOTA6QOnP/G2mOOp37FdAown/tB/GcLP\njVy4/VZxrmx9uS2kZgnOynp0E1eOVQ/uN4TdV/VrPFN5RKon7GPpYr7xIBTv\nL8cq+h597OHf1z74o+5uF+JBfB1BcagusNdopsd8XI91PzeCHiw4mAT/zTeq\n/X6VGuVoEdix5ssTyUPqmhfTd5fX0teXxY9hYXnlsYHDFSKFJWLAr3VVaarJ\nse1U\r\n=1Hif\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5YKd46B71rKv4OXQPUMXL42YGnFsSO70sRe9kNtA5cwIgW6CF5VktaeaT/Uy8uDamjUdQoxjK2KErDfTlJxTE1As="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0-next.12_1638451458554_0.4149700203364981"},"_hasShrinkwrap":false},"0.3.0--canary.86.f0a55af.0":{"name":"@code-hike/classer","version":"0.3.0--canary.86.f0a55af.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.86.f0a55af.0","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"f0a55af2796a8f99ba39f37bd2214c43687b1044","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.86.f0a55af.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/4.0.0/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-dNqfVMqT0unVBBSQm7SZ64cKgRQTgQIBVKOK5njw6ZOq0gGr5m1FEkryAbd2KE2vBOF0Oq5zdx5+7XFWOLvX4g==","shasum":"b4892f589906ba9fc2009649d4c6b24d0a360006","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.86.f0a55af.0.tgz","fileCount":6,"unpackedSize":10451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhq3bZCRA9TVsSAnZWagAAl+MP/RwrOG9nshC1+dM/xehr\nm027kp/JV+J36CLJTd+OvMMRBflpqxNwLq/yjjrBfdMyE/u3T9h6aqiY8O6R\n+R86qzpeoFvV+BV5S3vbce98MNuy8SvPQysZ1Rl/REAXxTnvqMvtCvoNZ3Ay\nJJIkaIQaC79UqkH2WXS4L1pcknYtwrmjgR56d0NQdmTLMrvIANSqTjCiXTCF\ng3Twk37iqYjwvebxwDX0MwmjopRSs5xEv6vz0hOoVM12yTelZTeSKFwNQRE9\n1mbzc3+ttkLuFEJu45eSW4lDZOo4R7zNKcAeT7dvR0l5FialHjSpEJdmIDR5\n36lH8EXzETvxtfNoLe21P4Coz7wYoeY0ONPUvQaOZiaTlEUaell+ELvfdO4Q\ntvhiSofhxX784lnj6ZLzOjfM/7HJ++0lMfw2DwuYphY/lAOFALiDYkf8bEu/\nis79YIBnIHRn6edtS4kQ9zjO065F3PWe7qQymGTQG6nGwYqyf/eOuwCEa5X8\nzLq4tLDUDGTL0AZeBsnz897NjrEwTxXtVW2HhEfqCMcMSlGMPWERykU//3ad\n4ku55NBTf4lrzvMkUW5mH6HscORBZENqqaqgahIOIlo+jvrSiVuJJqsv77iX\n8BVkNZXFvysmMsnoFJgMdfER/iDDsSpwysHA3kgJKdob/KAm0C68AbYBcSUW\nufr0\r\n=y5qy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7w1/fleU4A2fHJvv24dBHo0nKXw2hSiIjeG5ABJEY7wIhAN6aDQzUTStLTIqxIKcfsFcjYzDyasoW59VEyMWsC171"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.86.f0a55af.0_1638627033240_0.7338268580624931"},"_hasShrinkwrap":false},"0.3.0-next.13":{"name":"@code-hike/classer","version":"0.3.0-next.13","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.13","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"b02f8bed71dd0aa9537abea42f85f9d6e4dc3ae9","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0-next.13","_nodeVersion":"14.18.1","_npmVersion":"lerna/4.0.0/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-nvd6yq61wYTR8JJXmmGKFLvmqvx8SzxcKDzhWLGXmNZI3Qs8mK7h5XEj9iDHN22a2wOzk4CzX3JVGg9bXTTosQ==","shasum":"d265674e69c0c9ed0f5c891ac8400f71f1fccae7","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0-next.13.tgz","fileCount":6,"unpackedSize":10425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhq3mJCRA9TVsSAnZWagAA01EP/i1fWD8s4EmG0j9QG2LU\n9NK6zsuJaQ7MpzkglgJKEp6yqNAOJKLBtk7XmKZPZGkQm7SWWVKJ3spv8oNj\nTgMogMgLgy1LW3xgKCCDjyhGS7R94kz1EUyOZQ2lTT1JtEfBkqThGd2ZU5eb\nN6RZo+q3zQgfgW/i30iCb8fgRWOBBHgAfI4CtFFz4MXQ8sIYkjbYFKfW9Tzg\naCZwVJ9uAqILSp5NDfPDXvIBuCc10NFsfVkj4LWQsMyQ0QdzaCCG2HTEdAYe\nx1ONVMJ9YhcMX6LQz3MiI6+r4kK28R/NYOFqgzHpcFie2ZpKjyAAAk1FCGyX\nTBdMcyfrRMQmRo9pGAim8OcVj3ow7n8vyVW1RP0HBPH22W9+iVSsqt/8VgbX\nuwA8gx20dyXhWsLh6ngTUM5bB9jUrp90Dui7UgEJYS5lEn8tPWplrcc96ST4\nGmR8+XZH+zlLxBgGdH0Ew4mmacAHnFXqMgS/9qvcwF//f2eYPn4wFCJYCUIc\neM+HKIpvOYz4lXtCunM1T+0GDBzjgftJ6SQDTlKfnNGxw6f23cxodq1wY9vd\nswpSHzkQglxUvrFGz9dJrL9OY9hJyQ1Ah9RQHnJVqk7CnkMDrJgcCJLZVuQg\n+akuhqZJ1m41TZYhA9vjWEXDJcaWgE03S8lhu+QS/HdMMcUY0vcr2ySh2Mdy\nRcym\r\n=KoId\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCA7JM6p7fDPAKAfYB7WOU+XH18L6ghTkqc8Hm3DuM9YAIgXy8ylLIWcR/9/Ho4JYisB/XOxyVVHiZjRn/TBjqYjH8="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0-next.13_1638627721784_0.8545441089822639"},"_hasShrinkwrap":false},"0.3.0--canary.94.2112ee3.0":{"name":"@code-hike/classer","version":"0.3.0--canary.94.2112ee3.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.94.2112ee3.0","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"2112ee3a931529de6e410edf78eb62478d0b3260","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.94.2112ee3.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/4.0.0/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-A4nABD8GxMe4AOuFgoUmd0gabpWfYoXrgASniMjarlfzK8znce/jJozblL1n43ojYEn0hYzPjLpyX1U6A3eTAA==","shasum":"ed10bbbd8bb544bcd037fd4e405824915ed8d946","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.94.2112ee3.0.tgz","fileCount":6,"unpackedSize":10451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsegpCRA9TVsSAnZWagAAqngP/iTMfGPvcRJErwTn2itU\nV6un/ZiInGi8Wz+/nok/GRwYRjKQzb4fJRaTy5MaERAkGAyCFQeyiPaMjpoV\ncn05E8Htu0qPyiF6mgsneeRtNHFL0bYyjvJlySyhDJ26fhdjzXWLLd1VPEZQ\nPoJ8FM/4JcxP6SIZOR8nLfAT+zyq5NdNr7v7fizK27SmBZA9LwyatpIvRxmY\nXoyh4aSEa9a5wsvAqWZnhkW/DfZDD9PqFtIV0IHJ/3EFxw9n3MgR4ZBNGeiY\nHsgNEOF8SRRQh8VaC+veVMPT3zp5Dt5vFjzoo5ohojbljJ+mfpeDnJ4KHFWa\nt30DGkcW/hDHR7ErLbflli6HMi8Txo8jJiMgIUqiFgdbKyurXvN9JE+Wq4Qv\nQ+wLIdAE6bqyATpYWr89hn2PP6RQQjr8jk7DHFBzIgwrMKosqcHHr+fLmVi8\np/QDvi1t0B2UoIXj02rJCK2BlaEUyU9Z+D9Vm8XGYxV+BzChvvUTQ92j3Twn\nf5KuC7UryH/6hUCFFGSe3bPICeWJCNCznZXj79uJkhMn2jTldQCWKNMVLkX/\nOEqhz3Y2dovRQWDBHb1yNWRnRNNY83Efb8yjab9rVkNCYQyetUXdx1vcWgMH\nTKCmRPVMj9miyo+19quCHXYWWadrCCvQRDXLXQcBGFz8CqLNtn9PBvT14Ore\nwSyg\r\n=SVp+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDvfUEG7g8P2eUgw0rRiuhuM7bl7tqy9j8uqARX7a9jtAiEAvcCNkwfL2h4gJOznD/eW+nLcIdeuokGgK1Jo4vnPIOQ="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.94.2112ee3.0_1639049256950_0.7311788472069252"},"_hasShrinkwrap":false},"0.3.0-next.14":{"name":"@code-hike/classer","version":"0.3.0-next.14","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.14","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"e513a3060b937439d5f043f90ff7e44ebf255b69","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0-next.14","_nodeVersion":"14.18.1","_npmVersion":"lerna/4.0.0/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-nDhLXoLsBCDara0m/SuEarHGK45becvUbWjCy+hZ5gBeYqmyAn/1kPGhLg2TxXcL7vWmp9B5rSy5QAoAz9Vr7g==","shasum":"045aff11b9123a1c797ae71084bccf6b0c80deae","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0-next.14.tgz","fileCount":6,"unpackedSize":10425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsevxCRA9TVsSAnZWagAAkoYQAIWaMJdHksewaW7dt+cs\nW7qjPqymkW7aS4uWjbv0g2KWHTnuDbyNpCJV1CuV13UGNOGE6GtftdVUczTm\nMRqjCFhgmYYtJPvuwQivHQMPErCFlz7nnhnqJ57ALpT8KtsdiHmI8cOU43po\nrqZLddwO3jQPEVMWMIKYhW0njS81iwR1wffW6yz/UOzI+zyedNGHAXURiFa7\nildRr2W10yVlJ8uxsNkoxkOmzhwYbcYHKev0FN16qsSgbzjc9MqmDa6Y3pWM\nWQ/5s/+daFVSJ2QQ6Ddpam6u3lt/QMYRxxzH6OSka9JoWucL8wA3SVALtIAi\nZUnvc3i9IKnSctkofqqx3lf9mhW4ztprEXK0sbAIfzIYwr4nA64NBZtIE9V9\np7B1SLVvNL0yEKkqu5tjCSpN1V1D9+EEO1tc3OWfxe3zWzWp88KbvSiDZvqW\nYZNfKsO0ZuTh2oE6cnn9c+YnZbF/UqZpf9+FclGlBmnyMv32P04E7kIzkouS\nixga7I7iXg0k49pb2948IEII9aRFmNoS155xg82XFLIqwPHXk7M75DktmzHn\nA6RvrqV86UP2+QpB2+zVwhmrZQIhSURzCBaCRJId5SrhIa5RIIDnQX30pjaw\nUHCi//SZnKB14lYvojIo63cLLe0qrVNYtBDtnpBcBjqNGF0rZVD1UIQamA/z\n1FW8\r\n=ZOS9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDZQ20GrsTWB2PET6SCRX9icQlSvaq/eI49qm5cQOpjtAiEAvHOalPD8STbGI+nZV9XBouqe2zDe1pZo2vjesfT81QY="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0-next.14_1639050225155_0.28670680902509993"},"_hasShrinkwrap":false},"0.3.0-next.15":{"name":"@code-hike/classer","version":"0.3.0-next.15","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.15","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"6c641518ded0a2c094ffc40d7e5e76e60c9b2bdf","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0-next.15","_nodeVersion":"14.18.2","_npmVersion":"lerna/4.0.0/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-iJAneIYW/sWExqfwA4lwyex1MT7ok/O3CQSX67aAmozh1luBrjJ5MEE8bGckSfIH36QjfNt6m08sceAvcxpDqw==","shasum":"a03a399268b56cd2c0746cd193825d532572506d","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0-next.15.tgz","fileCount":6,"unpackedSize":10425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhvgdvCRA9TVsSAnZWagAA/xYP/jw7Y4HDUws+qk/4hvkO\nzzxyzCVlvc43B9kganz7fDa5ZX+11rHgZ2HrCMrJU0eOmmvTw7HxbgkT56SK\nkhDEbdni4YQB/JKk+YZsGRiLyw27PBsjh4+88ziqaEkIkYoa/OuGdSQiR4Mu\nKKpZhfg87FuktcycGi1wJphX0BFAhq/RpSkOZKQQst994h8+ktU+JQ6lXIQv\n6vs1zzJ64CRRcWTyT6lEK2KvqNjAEWyfM8hdNVQCOD7Y3UCMG2kjNP3+57gs\n8WJWEm2ECkz+ZFy/N/Xy0wHPJbwRLBsa3fcxYiHwjL7I/GNM+odqboQq9Fy0\n2CzH/qjs8OttN6t3jvW5F1s41u6MMPAwfAiB+4k3jOJrnCEA+THTFol33QT8\nNUC3sIoD4eXsb2BSMS4A556Xj3zKg8wQeurObcDaQzjy6KtHHcqR9nToEcNs\n2U8wU/mnRPG6NOmGBzK+SKz/bzqcOsxqbUyqzCo0MM/wv2c4SB63rUAx1uYQ\nbFXYRgH0J1LdtxRntRe0REQUEK+KEmvHxkI617FJ/Xrdg4uy1mYYTnObyCjz\nLWXyblzc+Eg90TzCAMBSN7eJ2k0qrxm7ZRedBwDXzAuhoXXY6hQUl6dUH/5+\njSrk4y9p06Pu7+b8vfiSNJVHJf+RN+Ymq2x9/1ZXPRl8v+FHl43cqh994mDk\nyyul\r\n=icr4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGaFyauHofSlRqfHt51PkP1eRfy9AS2CfTvhEtSaznSoAiEA+sPAQxS8OjjXvlM3zGOASifAhyE00grdoRD1g7jDrro="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0-next.15_1639843694912_0.3319547412804209"},"_hasShrinkwrap":false},"0.3.0--canary.98.5c1465b.0":{"name":"@code-hike/classer","version":"0.3.0--canary.98.5c1465b.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.98.5c1465b.0","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"5c1465be61812a625f48ff42ff431f286f189404","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.98.5c1465b.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/4.0.0/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-ds385VKV2G7y1+0N6zlztvPeDu80ZlrBCeBZuDl1UxckxzNgccQZrwAQEviUNCiuHCXJtnEhFtZ/DQvSlii50g==","shasum":"3eda32559efff7c675c5efcfe4b8d4406651cf7b","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.98.5c1465b.0.tgz","fileCount":6,"unpackedSize":10451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxclgCRA9TVsSAnZWagAAfQ8QAIz39cpJ1iw+LdXMLXTv\nle7NFQcTv5xRP6ELbJJQxqAiQ1j7vIpoxG7UsXT0hYRS+ZiyD7S8gZkgTj2a\nLLc2qmGOUsOvDmSDly8tdbbCyN4B7+Uv3xKfDIVkNwtL5igS4alhcNv5+1ri\no3bBFxpDdDM3EfWZz+biotYmAD+WFIjtEYqDV9hyFYX0gMB1T9kGSGZ30fff\nlcsTmLLbiz6CnibSHxHa1sAz/aD8AIZO83DMfuznS6nO5rtRWKQQ5S3qF89J\n0y4820ySnGuEdyzSRHPHXcXfEspZXNFO7MCWWyAayGASn3t32tUnkH2HZlzu\nPlKeoyVqXt5HsETiALCpXG+F3Vmoe/xaO6hGVZmSWqEfQYFUnna+/rI87Pid\n1CcxACZPSkB/DC/W50LxZTYQVJE7dofvBoOKpiC+P+Fkr3W25gPhbg9yZ9Mp\nztVyyl1G3k+y4aPbWqriWreRSVlJKVqSUFuBAlOFSOdD9+wc5GpBfeL4oDwa\n/Me18tsvuK2wfY4QzQgCJ8xw8cxZ2+PiY6t2s+1GctnbYuantoSPJyHQg+vl\nzF3bMq0ENAmutrxUfYSW6DjwSsstwYYQkBgwJZn3VvgcDMNcvUgeJWFl9yxa\nd8oIw5D7YT7Ci/tT7xMiSaS/IgrTQJoC5U2GdFIHcv+6g1BW3omIbAuowO8i\nDD9Q\r\n=CGY1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVNdcdAm2V1n5feOVPFqNEj17OsqCaY5Z2b+CsSRRIDgIgRvXtXeBxIRbGTYVjSDHU7O/L4IuHCskxUck+9lGJ0f8="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.98.5c1465b.0_1640352096812_0.3693049201823202"},"_hasShrinkwrap":false},"0.3.0--canary.98.d32feb5.0":{"name":"@code-hike/classer","version":"0.3.0--canary.98.d32feb5.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.98.d32feb5.0","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"d32feb5a2c44db04a719fb9fb1c5f1d044e18d17","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.98.d32feb5.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/4.0.0/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-1h7FLV0FzFR/QMfBIga6hSLGNVy0+74sUrVszNNdJ/vQ3BVO4tMJ1cU2DWNSZgXYTd8heMXOzv2Nva7PSUOI6Q==","shasum":"671380e452a000b9dc7f07a2b95791ffb21596ed","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.98.d32feb5.0.tgz","fileCount":6,"unpackedSize":10451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhx3LoCRA9TVsSAnZWagAA3poP/jRXVEcnDo2vIqRJPT78\n0hhOOmxME9sdlbuP4RL9IA6xiFRQvUuw2ZJEPmyBxceucR3vrWGrXzIge0Qy\nL1Rc5qFvBBI2tsnW58imalt1eO4cfVHUSIzw/n8HGm/DtHo3yB/nqVz4xXFd\ncB47PQ1m+gbk0o31NNO4Nz2yLxegXRudv4R3SE8wTiyn+AKSjs1lEQ79dGOI\n2dnjIW6D/jN+Mmiw0l03FKTkCmSK9lJ3NiluxRKZE9uYSXy2v5KeTIGAGvTe\nqLbcjPcdh0rXnr4BSgf0JhQUAFJAUiFH+CTXun+WBg8u4gwkKjrzt6BFd6gp\nY/tsVoHlV3V84dtpbLNvUO5ghKeo+b9DldjV+3cKwtEWuURQV6ozfD1zwpr2\n/3V5Kr2URml4RtwlEKRKiU2ncoZFF6DBeDOb6pGDBVWci3MmXl9opVeHEw3u\nPD4jDlLQL00inUji5oFXRy6tIsWEBgewaxJVo5ZQg7+Em5ysswGRNLnLfHNz\nJ+u6nzl8ytRoXxZlRCV/bnarqudYekFEWmQiaSB94/gBjkG02A4hk1MoxekD\n6uYYPjOm33WP1swNCkOa8QMogZTB9Q6Gnbo3v2ezQ3DUAbjJBNFwUFoqFGJ8\nzaGEitv6TBpV1m9EiXay5KxDq/jD7WtEPZ7ZFJuA9HZbnc/omtkwJV/uAhEp\nTxJD\r\n=NPf6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEHhCS27u3d/DWdacBaz1oxSh0PYn00BToqR4x5wEmBpAiEArrIL5eOPpAkRo7rA1J+AZ5ZZVBtx31CsaNZ0p9xJ3po="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.98.d32feb5.0_1640461032071_0.32489178001451546"},"_hasShrinkwrap":false},"0.3.0-next.16":{"name":"@code-hike/classer","version":"0.3.0-next.16","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.16","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"317c4d18cdaa2532f45c764bf52d37cecadc65f2","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0-next.16","_nodeVersion":"14.18.2","_npmVersion":"lerna/4.0.0/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-cGApdcwenUdBVRd1hYOyvcqVmQQ8N2KOTAFKFGt89B6Kfeg0AgiqFQvvcyFZFEbMDynM4I/jwvpAk2AOUOSXQQ==","shasum":"b0f86cde329059b117c5d9f61895455d379eaa99","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0-next.16.tgz","fileCount":6,"unpackedSize":10425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhx31hCRA9TVsSAnZWagAA8+UP/iwaTGYSo6QsQj6grWFQ\ncjvzQWcuN21xah4WIkC4+V6XiWJlIHi0wPC4+8X4XsOCcd8SWLDcyGbtieaR\nIPkKAP0yo8mw9gseb1cl/+TWWnqkOYWRmwO/FvAdoOsqkDKo5J1pJ4IEjXTQ\n1iWMwK6to3c4O5lXxDFpaSVIhK5+rwSb1alMu6QWa7I41tmcGeXUxeJO9o3D\nos/NKkcqsxmUDVyn0z/ivHvfhW1DIhZxfmziUpT4jtR2elX8zVnyddsmhDng\n06pvfbU1PM1qSsyoPQ/69Kl6AEncOmsUD0wmirezumwKv3P8MgA1WATMO4F8\nFiNrISMM/pWpSe3xSFAwXBnFWpeJvdXgcf1+UgF4u9dpNOVohcZEmrrEMu/Z\nh9sv+qZyPJ8vA4IjgadwNWfgHSxQyCDGBtjd1fYK6E7Iy9tPZ+J/vKBa1Wfy\nhPzfin0J9rzKa/frE6Tr+gsf6GD9qJM5M4Txek25sFMBb2cTg9PQ1q5f/VD7\np7pdsMpWyx6yJgyENwIyRKU2qboMlEfhYw//vMhBqoPdLQb6H8clUCAS3T9u\nbp66P25ovPcHgja+QQ7CMKC6risFnVYqdAaNvtS8xFHmyCX934nNEsgWEKWq\nQsobHeTIANg2siAVOhYVgluIUAb1G9YUkoc5tctFCrAvoFTxjPlEPc+RYDlb\nnQOk\r\n=/Eq8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+uU5frYxBIo3YeX+r2oyTZ2AAuQ6JAvHlZD8/eDMRFAIgTzhs+SIw64aiqTcTIAj0U5VkxyhGtmAJwLykNZcmr6U="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0-next.16_1640463713019_0.007152714203905175"},"_hasShrinkwrap":false},"0.3.0--canary.99.1f33495.0":{"name":"@code-hike/classer","version":"0.3.0--canary.99.1f33495.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.99.1f33495.0","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"1f33495ea77daf49c43fdb006771f0183c16f3ca","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.99.1f33495.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/4.0.0/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-pe9+kFB5kV+f9ek69ZFdKhf97P2Ezdf58goB4MWJaZoT1w1AB0rQrMTv6H3+1f6cN3CeZDr530L6wVnELNKbBQ==","shasum":"9d367f79856ac807e35a27e3ae87a50f7d494ce8","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.99.1f33495.0.tgz","fileCount":6,"unpackedSize":10451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyJkjCRA9TVsSAnZWagAAoy4QAJH94/Y9CwwvsHA+LOEF\nZCUbV1rHCQUhLhICl/zfAgYDMWlGnuPM5AYgNYyJ0bBbRszXaCGI8EESAQYr\nLWnkbmXd9i6w0wcp11Td1Xb/pTsxxqwD5RBcrg0U2SUDs5BuFSnj8eLzq7gC\n8Xqkj83aF7ZD8iWJ3yOHpaUf/sytjhXWcecLsG9D8xkABRAj5dXrLg5If2k7\nINAXt4OG2oXAYMqU+DqOA/UhEFamUWlpKkKmfI/3S71u5XDaXtTkrOWN6Ukx\nXJAPeBeK5sXxqt8atiLtgk/A93nop21Zg+GBORc1rpf1cZiZcJjWAp6ZwykN\nGQ1++W+yfMU9NV205pAWgZX+mpTcZdEKzcuv6IrV2o1KDT7vgcY2t+dke6ap\nLPNfSdbVNC9+C2J4lEOXXdNsdC3gX9zhS5+I16Fa2F31QLWt0XEj4yyRHY4S\n6FDAmkdJ/GB5Uzyu0gmACeWNH9ewNOy/1drsqAL2MKVewxbxqjtHZd2pbjhG\nr3kWV9kBr5AmF+T9lpPdhs9N8WDk3b1Yxj0c+f2cUAc8ZYBZIbToqZpIoQwl\nPrBF8mVrliq0nuxY3QnMKIouLRwUIRLg85dy1eIoJ6vAWZ8lO+kuHBZqJ57y\nhjSGFlAvm+7RBW7QxPgM8y/Y9wQ9X2nTDUO8YBFincky1t4g3KA142HYJVGV\nQBbA\r\n=A0Xq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5uCbCQ5dQgJEKV8Boan8wCxgDFCkrvyvEYC4xd166xgIgaJtKINuSfSOQBXOQG0sZ+mG9g/6eYLzqhh6k/upWbiY="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.99.1f33495.0_1640536355779_0.54222966035878"},"_hasShrinkwrap":false},"0.3.0--canary.99.4abcdea.0":{"name":"@code-hike/classer","version":"0.3.0--canary.99.4abcdea.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.99.4abcdea.0","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"4abcdea54694ae7f5a5a8a9368eefb56b2fb5100","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.99.4abcdea.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/4.0.0/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-bzmgV4yPO8AdmmtucnXSL0wf8NMdw8RGaIlZXd6BJnZ0i8fDW5XSOkntT3kXELSw9S4ddsfDUla69RTisFmX/Q==","shasum":"80afcc572d5e50f827b6ef9e7d6e7fd3382c40ed","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.99.4abcdea.0.tgz","fileCount":6,"unpackedSize":10451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyjCgCRA9TVsSAnZWagAA5EAP/A2rl3/UePLwAelNiX4p\n3mugVKDQxMLaTQ296O6qFQEINmD35MbujxUwibZC70tXiEVlZU98BcDeIRv8\nlfofnEILBBqzCH6jXFB4DiuKEi3J3kzMzVmfsEZpq3q0WUjkK01GcHs5E96m\n2UDgpcEmFQNNKWLO4UVsQN8jXBc+Tc85Erj/OzXEl3ctHdgiH2AfGVnNQMqj\nA5CtT/CNIiufqf6opMegBV4csNuEGNrj/+n0zya2GoEkc0OJHmUgDrQIB+uw\nF8ra5ZFkLMwhRamvrt/+HOlW0Mrr1hnQ9NFhnEhXmnmZgv5fy6GWVCXBStDU\n9DyIS0KjshsLAR4I9NWUMDjbMgiAOdzUnCBlb/kUGMAb4B8RoIC+N4fdSppo\nQsar1w+5dl7Wwvx/+LzOnxkUP2RTvDk6Ql0bzWUJNt9SsqNuEc4ym6tQ3OLR\nIy0LXif6MFwcwlUmugNJHXgUPuGm31oONPZpIzdaTJeB+V5pkk/FSl13BZVG\n1D5WG0jLxSceKBkqyn+PyM4UMjXSJtlG+NhzvWocWRDYUkAzbjjdlTXAee/t\nUWJSi37O5lx7AvvX0scZa5RUr0SbJ0J2zUgKwKyCcuDrS7mFF1UZqwoNDD7m\nD3U8LuRVTwoUhi/deJG7LM/mOrJh5Dk0yASFIG4g8VUMFRIHwzXtE40ksVrR\nCrzV\r\n=JtK/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCP0hNuwx5TfQAeI1/yfrfzzvbz745WfW3NGwPU5Cd80QIhAIyiOpv5O4KMfqtf/JUkvrQACIsaDv8XJNAYmKExJVEM"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.99.4abcdea.0_1640640672411_0.4765522374009532"},"_hasShrinkwrap":false},"0.3.0-next.17":{"name":"@code-hike/classer","version":"0.3.0-next.17","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.17","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"8e7fdaab18a8dd309ae2336c60ec89d5d5d92733","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0-next.17","_nodeVersion":"14.18.2","_npmVersion":"lerna/4.0.0/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-PsUJJ7ymvwDiXPaVZujHA8oNm8pW71GgY0mqCt2/ZFFlpj8RCyk2KFEpYOa+LtX5eaLj2mxLDGNe/PnS6vEdew==","shasum":"7b700a6092e505b0df86d903c0f894275232cb9a","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0-next.17.tgz","fileCount":6,"unpackedSize":10425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyjRaCRA9TVsSAnZWagAAtI0P/2b4OVBODPYouRjU+/OB\n2OUY4NfBIttUwOwbm/6OOXS//GI6K6VHa6L30my78qVxB44PtWmxwCSOZfsS\nFhLvvlrPXyKI9KZZJKyA1tFrq0xYgEjFcpKST2el0pZh4EjmOH3WP7IHgHH7\nZuwEMVKZl4Lik2GNFNazBd4NnW0RO16INZP9CXye5+Fb06yDFogs3LwWlwXx\nVu/6D8erH+KF/vvNp9CNGdvFIees9Qk9zh8yesTpSR5Q4sLUUljSRMum5gfv\nsQ8Du8XI5O+suWBFanIx9lwQPols7KmUhK00VxZxgDD2zzB6DHJDFk/7s1es\ndFRg7alLsEMC1f1QUK+x+Nfdd3O28R9g8+4vaaMv2XlzRf0dzNNTSxhm17ZA\nvRBm/mKqSLvDs/bBbqffDNFJyPI6HHymkDDHizDHuK90D8Z2Bdi9DDITDjvw\n3pzP6Ph1XBfUqVlXZrLUB/weoestPdJaq+c8pR+ZrmdouP4Onv1Gv9TIxcLN\no3Gd+fWi96lCQrVdPalf/EspuHsKbDHtJKpBBgXAzGekWXQo+3ULKFsRNK39\nQQqRP8c4YD0QP3me3mtCVeGvbm4xGHBYjRur/2dLvTK/dVWu3p4tx3yYjIPx\n20XSQaVOkXwPY33yQUdQaBjFLyi17ZRFmI3abJ7l0lmkV2zRGHxzqRVVJbIa\nDCT3\r\n=BRQO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1KiV4ooGCmnSudrsSbmO4lkpC/v2J6R3tnFm7Wkp/2gIgbum7mDx5biCv29vlxEasVayz43+99ZpAIXU+GTYoUlw="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0-next.17_1640641626131_0.7702395849934089"},"_hasShrinkwrap":false},"0.3.0--canary.103.faafeb2.0":{"name":"@code-hike/classer","version":"0.3.0--canary.103.faafeb2.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.103.faafeb2.0","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"faafeb2c8feb34106587779a61ce09010ef7238f","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.103.faafeb2.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/4.0.0/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-r3Qf7fo9V0rckNhMPQ7MYWV6KJCpYPuJ9N10C0vpVHRTpLrJH5EYUZFiei2VbKZK6gQSZvGzkEhNwEmEajEWtg==","shasum":"03184d6a1d699b69f6d4d08238bb876a9ac693f5","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.103.faafeb2.0.tgz","fileCount":6,"unpackedSize":10453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh11SGCRA9TVsSAnZWagAAHEEP/0qRhwjQj6YapdFQHRQy\nQYVTGTWGWQoyoZCnR16qVhJD40VG3MAla2RQMEVeEtIIH/CHlciq1CyozXLx\nNZ4fGojKu5H7rzAv9kFu9gZwNOsEBlVV7MmosexbGOBMVmiUMoAsJ8yaiG3G\nObnM/IcmWhWwXprLcmje/QVKWlxHBBIo6AjBGKeV7Q0zHbm+KD8Z+t9CdBb4\nlV8QqSbXO2LxKZPG3u9gJMtsJ5qSxKZZVxzkFR2864lcSfMUZJHkpWTaKSgn\nY/UC32Sms/XEBfDks+ZkQ2nLHS/gyuze8qS0nJ04leJ+j+gJiYlYqGQ+VPJy\nwKxgWMNj+9aA+aR0dvN2C2SZy2OrcrAoDZxtYM4XM4Ljm6C6qH4phmzAFm9T\npHlvQTfrI89kd8iReHGwZKRSJlChJwvamjdSLYl9kcekN98v4PB+jHQpF9Tn\nPCsQJQlXqmwmWqCtquwShlTRKKdrY67r2Ju1i+CcZ3jVj8K9CpgkJUYhI50c\nf2x+01o697TShsdaH92Fj+BTtABgiFaNockOM7lLCjOLEQvuXft5euw+SJr+\nK9IMY3sa41sCNvvFNmleOgjYkScne3wGtoMMLtYFsioLu0paZB8BZn+BtZAM\nMJfEzif+OXmrqTmz3l42aid7ACB7eSLEeO8ZMXZ2G85CF3xrEIzH6ypnEpU6\nchLE\r\n=Bqxa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJQkM/N86D6MhosIYMkQpFt0A2vkfojxg9PESPcee9iwIgVc9EG1EkF5qmFgDilozQ/nuoiIijueTljLtSKu1cpg8="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.103.faafeb2.0_1641501829852_0.6075667937442528"},"_hasShrinkwrap":false},"0.3.0-next.18":{"name":"@code-hike/classer","version":"0.3.0-next.18","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.18","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"5800ad9f8c2c1b49f8db1e525467556ddcd172c8","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0-next.18","_nodeVersion":"14.18.2","_npmVersion":"lerna/4.0.0/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-p60oNndiKT1VMcbmjVrIMwUDIEyFKJrAPX4A+5CYCceoYatYq5HA5l3SQzKOWja9h1VA/eMNEY5nMycpraa1Qg==","shasum":"8cf5ab596177f94b192538e3b579b49c50cfc7fc","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0-next.18.tgz","fileCount":6,"unpackedSize":10425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2KZwCRA9TVsSAnZWagAAlssP/2UTFl23V6GpjHQJrjRG\nyKWmnGvXxasB1V0V8R6nOD81WMGiqBQQAztzTldyRyBfeA1Clux6G+mTYgWO\nEEc0Ah57D3fhn1+pefY/s4zfRUyJn56vlH+yCbR6gXyT/Cqh6DhEb8KH9Uln\nurXPVv5i5wc9EGTUHtoLg3ZF3rBizM1tSK5cZRJOLIye8SIE2I5RMGQpmiXI\n18p0NKP/9/qy1RxDwKKTkfp/4GtgXEbMYv1/v/ryWooXUByffxS5AogfrAU7\n9YfW3VOnHvgxubnLTkesDHlCxU158qzJ+LsLhTnsvFGOs7CFHf1tntxBaqb2\nTTh9wAFrSZM/UDEp2Mjg9c8diLWtnsfG1KrvtYXvzhV/85L2I6EZh3r5HHLT\n36pSFp11Zq5MIhqrbNDYcog4PKatKi2I+a5NpUGetTc/rQ2JF9tZOOEs0eFm\nge+GmhJFna815zsVKV4sqGhY8zUWhieKlnrYNoEUW2MdwUaGg6XtDjQ4nX1T\nzb2SNHmZplTTL/yfprlwpoNyGqLFn3xfk5mXX7E4OFfi2Ns+QzRnHU2achc5\n5aHx6gsUb/J6uHxTXtH4bT6YaGI7Vh2kfkYHK0Juz9WNCQWK79SOKyeeggC3\nEUcQ413SWfUzjAZ/HBsxCf/8g+W897f6NzM99k5b8Hc9I9uE5uLKaL55kVAW\nD78C\r\n=UdZo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwV/9rX8BrJLNSzz85Om7Uo+DipRJ4MIFym56zw52GOQIhAJS8/gq60crEHai/Tt9rsDyd7J3XxIHZugbeln7skt+Y"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0-next.18_1641588336761_0.9114423129402882"},"_hasShrinkwrap":false},"0.3.0--canary.105.d3f27ad.0":{"name":"@code-hike/classer","version":"0.3.0--canary.105.d3f27ad.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.105.d3f27ad.0","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"d3f27aded88764d43892bb074815fd8fc089bf4c","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.105.d3f27ad.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/4.0.0/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-zh5G1r51Tz4FeF1FYIZnz9PQBe/zL2+U1wI4fEBWdILp8/qnvLwtSd/rWd38wfbtT8imURefm02Z4O5r1YzO2g==","shasum":"e90e96e88c225529153ff2a521584de3e5ee196b","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.105.d3f27ad.0.tgz","fileCount":6,"unpackedSize":10453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2LPBCRA9TVsSAnZWagAAJuoP/0M4Isx587kJjp0Yxjbn\n54wkQrU5spl/AEhYk2zGc3E+qfyNvmK5AyoV9uI6/Z6vOntAHS83DxrZhPWI\ntab3+zmd3hAuOWQ1gJ6qZ/K1QrmrDvMWl/g3+86m5cqxOwrSJTQDdbfS0Iwj\nqxCfiPCQdeQdWt88EJGptnBMvsVFkVyfPnG460rYy+Wb3QYYSbZABulcaZoK\ng3WMJ5Ae8QZWFsccj1/PYo/a+UlDlUUDYCbsR963r2zGCE6nPWaEO8Ql2Eo4\nclmx/QVdpec403oH7L/U+aklLAAhcYke3iylF4DT/SF3E7OTh4HO/J3YrRCz\nEnqlxrjWb0r7QLSlpmXdTR7YNdItk0OM0ZCM1X4PmiK2ApyKKr0NJUPPCi/x\nx5EKmviXV4AZu2o7PVQb7/UWzLlkMMTjOoQD+dvMIOQoxID+8NIoVO6nqvb5\neUSKZw/FPKUsp3nhkN2QldPz8eYiBxaVIRdJM7GriAvtb0QSD+XGcMa9ho1F\n5XnlSYiLpI3qClnq3zMlSCuEDdqfWfGYNwu16jbIPL0/jYNL6TxMeUa4FQPn\nB5XKjwtFA7BK/1NIRyoVcEjjRg7JzrpmOG4wFP2wmSA4vgSaq3zZl+GqBWje\nbF+UR4NVtDwS0sg+1wFUeFkfeR3lmIH8rC6wro9CTHGHHruked15IlSIOjH5\nMZ08\r\n=PCq4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzLxDMvgcYrtj1RxkvTJvcRZo2LjRLQvGM1yTBFR4kEgIgYl2fnfoZj2GYsGLbIdsJYf3IKHJr2iUQz7lIDvkmBU0="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.105.d3f27ad.0_1641591745645_0.8717455851193974"},"_hasShrinkwrap":false},"0.3.0-next.19":{"name":"@code-hike/classer","version":"0.3.0-next.19","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.19","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"31e8622e544d27c18ac15465cb7eedb14b41d375","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0-next.19","_nodeVersion":"14.18.2","_npmVersion":"lerna/4.0.0/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-SHpsaxm3MAzfKLfGrp3xnr02ECGr874qM/PHqdIt7+hxNo0CNm6L+96ITE8Q8ib4DoDesJdQmcPtt3Ol0Dx/Ow==","shasum":"093cb9315f05e4a37afd2f2ca4b1f5fa136495b0","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0-next.19.tgz","fileCount":6,"unpackedSize":10425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2LVsCRA9TVsSAnZWagAAKN8P/2n1psjLsPL8wfh3Z+m8\n+0N/YbyqjOHs9ylTbTtpTNOyABZZPVRE25gsMgYjmoQ4SmUM/LKWLWtJzeAn\n/oG3R0eGgVFzVUEvcnDqntpGg8SxceJ+7yZU6ByKwFwPtgLUBLCCagqzX46m\nRqhPq9HjPlwW9zsWCMauBap/FgmnKVPEEtHmC1EplS+vOoV6bUqUu/+1BY/2\nzSFYhn3awR4qler0Hg+jKz0/dRRk6oisLHqiKjVf2NJMz/TGh0BNhJf6sYn1\nhGQHz7iIaTFacMNC0zT1bBtuIwEgp9O6Mj45ipE3a0vOyWZKFfy1kQZhyjDB\nyDKiAfw8DsHgGoiLZmJ7+3JYTpgU4WYmGRotWCR9I3zr17BQ+Ac9mUFPTAIP\n9cCh2QjrwhxCJUDW4rKXa7JTr094B0b/Bnket7Rr5RoruZBoZTtuuSsaRP15\npulhkdn7Kbm86P6H9uSn2QTrzM6LinZsyIf7CtC1CLUsjuvTd2iVhjhLTavo\nSFwgIIIaYm4KB+PW81fL1lowky//sO0nZMzdmgsdT6hNwR/4MLZsl2nsFLZk\nDFx5zjxGP1vHq9ZYIj6Gp5EflCgUOviqAsqtRAoGxEMCdAAFK20Wcg+lOU/1\noM2nqWYEUQskIKe7owSGpAhiikLM+e5veVJlFbSQrOftH8USgBj1O0UGRqzG\ng3AH\r\n=5KJh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICOfjXcxOr2S7qVNLQ7o7hK+m4zflLUy6NRlYNgr+R8eAiAxkbg2v1KzE49vfSgw3+b5Sh9T3N1a/cMi37Q6fD5CzA=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0-next.19_1641592172241_0.5526503997968142"},"_hasShrinkwrap":false},"0.3.0--canary.111.04b44e6.0":{"name":"@code-hike/classer","version":"0.3.0--canary.111.04b44e6.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.111.04b44e6.0","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"04b44e6d7fb3798aebe32eebcd3fba6ebb55b82e","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.111.04b44e6.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/4.0.0/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-agdb7tVZbQeG3NV3rZeFypAm0lYar+OBzpxisEYK/u41iCrsDntm2wSkIKGVU7u3H87KQ87361U0ZHR34dNUPA==","shasum":"2e175864c2bb46df1780fd5672a11dad9dce0808","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.111.04b44e6.0.tgz","fileCount":6,"unpackedSize":10453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5GEKCRA9TVsSAnZWagAAtCYP/1tKOYSW+1ddb6obxpZU\nHBbTnM6J5PD/VOG4WkIdAK80TOpjk19pCTcjt8hDBPkInm4GCZhu+5tUU7Mh\n/SDRIfDjEMRmyuZI40VFRZLFDkIWQllAOBQWBV+1uazFojFJaJHELj6g/WLz\nFete4gPxM2U4TlDnoSqu+1GTJVqdttn7TYP1UnHKha43f/IivXU+WWOG6mPc\nDCXZuNiXHlv4T9gf0PeixAQnL+Dq+KUG+eqMBV+46wnDRJ4qCbnDG2XCSPZ0\n8cUMUnGW97w/FlNmPkN3cLFK27gtq7d07uKdT/tFbxrl7iilSr5nUhmm1Ec0\nFlmQyliwo11dCpEGF1rKfdeJGj4ZhWfe5UOHSN0ajHOSx1LFS/fTSesf0isQ\nAQoHBN2zsX/ucowSXcavCTraW6ubtRVA80rek3gurHNWXx6Gbl6vvFXPbbiP\no7USdJiJ7XT8TwpF5HYbvVelZGSxvzr02lg1m3qpR9AglMJQ8GrlIiZp9bZY\nQT5q78msXU417rQEoljZUFexa2rNDfIrCFf9VH/GzR9t0TILusUOQS3NX3hO\n0qu3z8F3+IPm7hI5KEv5lb2T6QQD5TX9CvQZ//HJJpyiyVdP9MsCDQqquBva\nwbkysSKTPXnKROywrHrSJcoWcBZS3vjoP2Sxe6yeutASKEE9IfliZV+fvjV5\neDrI\r\n=WsC/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAszqeXa0ZNK4BFmeCXKgK4ebiefNRlFs7B6ndWX4PyiAiEAtfQRCsUTNVmsyFD5XUt7a89lA4VDP/YRaFmeGc9s98s="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.111.04b44e6.0_1642357002513_0.3995671189856389"},"_hasShrinkwrap":false},"0.3.0--canary.111.a1cf9e4.0":{"name":"@code-hike/classer","version":"0.3.0--canary.111.a1cf9e4.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.111.a1cf9e4.0","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"a1cf9e4fed74ec7d6353db38b3c85547c1c64607","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.111.a1cf9e4.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/4.0.0/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-adQMvtf1mFS+uuYeS/mBpkd0k5Vdd5ulci3TKBo4pfRM7Z7q/c4ruew6L2XZcI54aE4kNw2Ux22vSFxdXqfGgg==","shasum":"e528eb6dfd2aab4ad7a64ffa671dd57b844221e0","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.111.a1cf9e4.0.tgz","fileCount":6,"unpackedSize":10453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5G7FCRA9TVsSAnZWagAAbIQQAICTc/iiYVOCNqh1YTsD\nJRq6osb2iPtuIWZzmqg5TYFgH3rvSM0FYvdwnZcS4GGgmK/slkWxtNvlz42a\nkp1xzfv14lk9A56lhqTq3LiG0s5jktDl1OZuVWDBfJSSv9tw43Wgsxq5J/70\nf/I48RxoTrFUZgztiM4Z5Stip5dOH8NQnNeTGoaxnQuC1SRiwr8gR2SI9ENV\n2We36MdRRVgtgfgOe3gZDmeNIXQ5AU875VG8+k1B6nc6v6EBz6MfOp07LCJr\nXcZG8tzV1j7/L72Yqsl8m/y2CPaRV8Cwiokj1T5RRk+KGrJXPl4s1vShGc8H\nrnfxs6/Kv5A6e0rYT3mww9qFIccochDpCXKLmaTeXGP0CcBTHeFOTe8kFEc5\nXjNiWYQMbYqUeEtOhvyYDX7lbLMapJFdogcW3qPl7H7YODkQ/zabevRUEsv/\nvmkN813iMuGvxHKT1/aiD0hR2o77x0+Oy7sjuUiXKatR7+mJJOjPRvNYdGe+\naQlXefTO5Uj+g1nVPSBoTgYHEkEpVDoZdtYVyJpD18fVZ7OlgCqx5zsXU+E+\nk8B6fZ60dP7bc+X6ZfVhEUFGPSW6CmBDMBJaA/7zQTGXk86cwupwYDRb99KG\nb7I7S4pZi96YYlbFfMW5jrF0Ig4GLs8Gkf3Ioz318xuTTgHk3VGnfdTeoAA+\nkgkz\r\n=TWFM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH3ekw/QvLHbJoNHj8wH4t8E26L+WayHX+yGCi37QiDpAiBd3IRrGZdh8qQYHoF276CDA5hmfziKqInSTYhAld306A=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.111.a1cf9e4.0_1642360516862_0.4221743189056104"},"_hasShrinkwrap":false},"0.3.0-next.20":{"name":"@code-hike/classer","version":"0.3.0-next.20","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.20","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"eb0f9519b43ee053534e07ac94026e01160c2eea","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0-next.20","_nodeVersion":"14.18.3","_npmVersion":"lerna/4.0.0/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-PrVq/5eny/bVmWMK7ExPeDGBDt4xB9zseBqrbB2v3KDA/8hgJO6e/1D0TgjVNKlifXkWdqD3t/MF+SBn/QGbSA==","shasum":"051dee00d403a71723ae7909810b7b2031b0c213","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0-next.20.tgz","fileCount":6,"unpackedSize":10425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5HC1CRA9TVsSAnZWagAAttgP/1zhNbwNmTzVm+W+nxx3\nxKr41oLNxky3sTW9TD7haK4QiZzh0g9yDZakuN1wmjyWweXApDwOtfFegxIo\n/JS/7hE5ROQLYn6omQ582DQfN1ZKVbUqkRu3zGP908pEc7tQpAT1TzYMSQ9/\n20OxLioG2/8kHlRY9zTPsLIhGFb9zm7qvm4yZ72l/a+fV5f4g1pzcQMqpHnE\neK9Z7YYSQauNNrJnPOTpojwTRuGhJHWKSid5EGSj6MqlpJEUGJswZcyztEAV\nNHG0sYD6GNt7vskAn7q0bivU6dFsxD1QOsbfzNqceXEMbZT+8Chi8zy4OShh\nvznGW3jRnQ2eiambQZ/T7D/yJRoAtUteDnBjiGhYf+8DaT1wnMtXf1A3MDTh\nPZ5s4V79ssIZldcesvSBOItHL/NQY/d2mo+Fx1ZCljFsgAgFF+4GrzWvd5sW\nw0bFMk3O8WnLheZx3WU5ToejdciHcMaPGCgmpDCCTHcTCz99FHsKYftG2A8w\nQm0Fda1Cu+q7q4eYmTuUFl4ULJ2D87SUrEEq6eG0ViQ9DCUMCj94ZNvlN1aN\nTpqt0AN4WfVzt74XRw4y71rrWMr0QMAwDFObbaXKMEn3GFNItXVdesJsZlGJ\n6RhcUWcDmMtqcFEd58AINdppFmWyMrxAZukot3q1kAt+IlWnsr6GzkGFmcP2\nCKJt\r\n=pqZj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrRnp30T2Cf6Zr78N8c/yUxK/Iwqyn+KvMPQL4KP4F8AIhANZ/Mn0ZqpLPIj1s1UMrLAQ5GVk6lSCDbfMeQLI1w1V8"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0-next.20_1642361013399_0.48762544062086"},"_hasShrinkwrap":false},"0.3.0--canary.116.7b3a2f1.0":{"name":"@code-hike/classer","version":"0.3.0--canary.116.7b3a2f1.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.116.7b3a2f1.0","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"7b3a2f1d07038f12c9db1e8bdfd1ff0e8c8c26bd","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.116.7b3a2f1.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/4.0.0/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-lGlePwYcVPOb8tTFSo9gE1qWvDcpK+9lzlEIGckmEjofurdLMLUVv5YZA1keJYwD2t0wz2lH/4d02jsR0l1o0Q==","shasum":"efac8a7b1131da076a176ad2dcd91c7cbb308eb5","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.116.7b3a2f1.0.tgz","fileCount":6,"unpackedSize":10453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7rytCRA9TVsSAnZWagAA9o8QAIjE8ELTdj+KdGoTMTZO\nMa0w3osGKuxzHGzkM0rVB17UB6WxuAvfE7lxEl6WexxE1045KCuJgUUTYoUu\nAraFmOKsRT6SrdH/WNzHG56GUgdL+3ER2rHtcXkTWLOk7U7tPjSCcYN1voDH\nPBIPSqqWowqdkWi3779yTJkdNj1WuoabCAiU+8j2m/QuRWNtpfRH8TshUyrA\nQ4ZpmpufyjI09NQmDVi+tx2HHV/5xHtRh+wLPD4BjWU9S1Y0+7/AiFXStlYt\nGZE2YZoDur2zUKFvAdz64Bn5BtgpU/WXRGKRVxokk4/YHADgZdOWu1kAbapx\nH1PzjxkwqPumL7dMfzEaTivbiGQHPJToU9M3Q9hnwKXIjEgs0GaABvmWhP/w\n2YgapQdfrhCC/6V6O8D87S4bfeoVqTeuoODwWFESDqmNZeXaecDDTgE8fw97\npHrZBXYF35AyOqKRPaiCRX3OrgMu1UDaC5IDJOu0MjwwfxDrVrlbRRpvOBbs\n0v7To9DW2P/0GdEauD1BYU3xWMmgWW/e/LS3WNYwvh5jBEJpjyXPuKjOun4+\nrZp4u1NrVPIlRllk2TZncdKaBaLYqFbD3zK4rjWHpjKOHNCu/kqhT6R9KL8I\nUInmgm5DY7zDnbs4yAR59wp4h8W2XXYQb9Z1CHkqbn/rc0RD/eZ1sSd6P/51\nLlvh\r\n=3eGk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVpkVTFnrrFITE/KcglWA5uB39ozz+ud+6v6e1x5s8ywIgKw549ee8xlpzCbBEOOwG8gVwTDVGqZshkjluKzBOvss="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.116.7b3a2f1.0_1643035820856_0.8748629041424976"},"_hasShrinkwrap":false},"0.3.0--canary.116.c7cd6ea.0":{"name":"@code-hike/classer","version":"0.3.0--canary.116.c7cd6ea.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.116.c7cd6ea.0","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"c7cd6eaf73bef094f5d01657ba598d6907fd01e8","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.116.c7cd6ea.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/4.0.0/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-gqHsa2sn5mJDhUi5Jmt7URUyGXbYRVraH92zOHhI+imLQH3svx9oHkyZ9yzXE5PyF8t/O79qHE3i/X9GXG9mhg==","shasum":"624039598d5913885f0611c7ecca14f6c2a199bc","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.116.c7cd6ea.0.tgz","fileCount":6,"unpackedSize":10453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8CoiCRA9TVsSAnZWagAAh2MP/3Vnr+/vpgx3q2shnv5R\noFSxFZNqLIXpZ2ek21b5dhRvflXKxymkSmHozs4Hu0PolIbWqCTYsP17GB5v\ngyQJ/DbxoQr1XZz8PgEljr4oGb8J35y5rPw2jjGV8DbTEMf9rujcJgCjoj4p\nx0CVOdTeFEMof+tfQitTsI0oTLZRF+ThqC8y8SICuhdEpuVL4dWCo7nQiauy\n0cRRyv72Mtn/cQClkGqS/rPTXVckbiBStZ1XAfqNoufb/fIONZpvP9v3eg81\njeimMF8lZQGaZK+QHdgDBpvjRyOK3L9bi32QJcURdmRr9A8QCshFmH3LChHe\nRG7INSW2rKCg1mx+hTruO/z5zASActK+Crb3Y+7N0nECEmKcnJ/bbR15cVY1\nHnqzmxcJTCaZDwD0xqwSkbTrQFKBuStliJvlDTHAnzaCwTUcRgrbRP42WQuV\nLu/TTEhqN62wdm75d8uzaH9DpAKxcBRiJFb5Ivud4YaVKrZoyPIlyuYTq2wF\n84PmnWa5rnTAGZooVv03IBMFMfcJiiz9HfYKzUSEpxxud8jSlwGo6zJYCjqz\nSaX5wJGSloMYLWd/mxTgtSN7t1L+GDInh+VbyB8ku73DlQcoSmnGB67BvAJs\nZ5QfEwrSoarMAmDnWtUmAJPry2CM6Wwf3TzJ/BSaM8yMmmW7xbic+xdosfAS\nUf05\r\n=nzOA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGoD7FT2DmVVIEhM9u65HC0yptc5gR+zj4C6UlOQEMbwAiEAivpq7HLUwPevQLb0IaKFavIyijIMehqG0kclO4DI5FA="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.116.c7cd6ea.0_1643129378516_0.9101670028345412"},"_hasShrinkwrap":false},"0.3.0--canary.116.21b32dd.0":{"name":"@code-hike/classer","version":"0.3.0--canary.116.21b32dd.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.116.21b32dd.0","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"21b32dd0ce0d8a111b74a0a18ca4782985d87240","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.116.21b32dd.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/4.0.0/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-P1GQMk+rIEIJycOhSC+/OduzIAHznNkNzYR/Jpg37mmgzp7txjSnri2GRUH3tWhy8zEZW4SW4T0Q7PFF2Tpyxw==","shasum":"9a0a44e9806bcf5aab89875a79eef7902335771e","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.116.21b32dd.0.tgz","fileCount":6,"unpackedSize":10453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8VfBCRA9TVsSAnZWagAAWu4P/2KEEO6scwE1YzMDWLTb\nxLIdggYeIi1IhuK1waB7SEb9Ug5yyY9Pit2twhr8izroxDOnWFSWNlLROEqX\nWwXJKKTOy4E8nDeMaFzRvH05j/wvRFJZO/+sUGEiCm5VlBnA+JKxSZb11XrH\nLAc9Uyeg7wcDSUMiVmhsg0e/b6U/0XcH558ZwIM35IK3T/hWzN62592JHXcK\nuLlMQK6NpVEeu1JSCM9lLoUyaxNSEdFoZqeP5VRNpbDb47Q4LdQg4JeY0CHn\nBTxVp8H8fcDYHR6t53blk0yFYKI+u4p/jHgPNzmpSDkU9vKZnMavNPFJ1ZPO\nFpd+0X4P8z4zljac434S/tcjDbBlFMcvLM+U617eYeOeC/R2f+LrFI8Ic9FK\n4VE1hCSivlZ0A9vdsTRjIv5aimnSyywc4fEhrRLvNpXI1n9vqgdoo+cZnKlf\nljShMitEdB+INrC3f0+SJw79sEiqbS1S8yBLNybanZcoi0u1GeNW+dhdrJcr\nFdqeLhdBHgtO0+NLrapzwGwvDVoRog0y8mAvvgi3p8Bkhp+bdBkYy3dk1O+n\nUYrntXRhQTKVH/92mkevL0xdUkeKzyQCIbqbfbaGNKjNpntQe/A2HC+3DuHh\nLZRC1CCL6r/BEsPWQhhCbjf3Mk180JGoB5f8wd15Bg9rvcjRswEOg2y4tj4W\nPYyY\r\n=ZBBg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHz8wRtmrxS3rGsPOpYOUkBXLaqBmVtDM5CJlT+Gob2zAiBBrXC4ePTHM+GtbUQ0M7XVPb55ZipQTlPqxlbhQDHuDg=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.116.21b32dd.0_1643206593796_0.7675414642082952"},"_hasShrinkwrap":false},"0.3.0--canary.116.0186a87.0":{"name":"@code-hike/classer","version":"0.3.0--canary.116.0186a87.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.116.0186a87.0","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"0186a8722f3e14c54e147a04d3911ba83ba817e6","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.116.0186a87.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/4.0.0/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-Kl8ivqEzgh1K/DySxCcEjCc2M6ccKL1CXqiswHFyHjyUYaPeoKsolVYy+OXkpibIP2DiTAIAt4REQmyqs3ummQ==","shasum":"240ef681be0d8dbad87871a5f303d9b65ba55d69","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.116.0186a87.0.tgz","fileCount":6,"unpackedSize":10453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8WPuCRA9TVsSAnZWagAAz9kP/RrcaT8cyqA8KuSX8ED6\nU+5tdzPm9KH59a0LcScXCGaTr4JUfqgkU5WHVwvvKH75CFN9cZGUyqW8oF+p\nkNMRT1/VxIuHkEUtKFWDiHwWoGuStQySD/LDZu+fFtG8Oo49Efu7tXdWmFUv\nxGA+X8Hn+7ykdKFFSjYxQ0GO/BMD7LTrOpCN48lfGA5LznKDZ9UbPke2KQHo\nW9Pyf+voGlzCgTqpbCKiDqcNyf58o75CKUtKDokBTL4+rrlB6CSl7l5oZAo/\nh4FX/e/1BRpKuzp21M5xM2GMg0wq9Qth7COdZMinVNkTOLiqzBRAjdi0OYFv\nlXUHxxw+b/PQekLEqcXvHFp2htHmddmZwlV+puWLN8QTdLdUoNllvPuc9agn\nFSUJNbuhY0Ob+pbHLMUdVtH+Ekwhoq4t7cnLgQJGYp4SlmQ6SqYDIznNp5Z6\ndsT3qKTMXsDxWI2DH354IAFCinl0h11XQh5g370igNL/wrTovepQ8RxE+L4I\nLnXcLPYJa2GYB6BGPWOniobVJ3r12SwQMW5ytHp2cAClycitAsW88lzoYT0T\n+ozaevIcdU2eu0myplXkLY1Cnr/GadZsWbSt/tMvq0afmdMDF/DbIF4kHEDR\nU/lGKpflGtv4bymSEgAhqum/j4VVlbvTEyVywHZajy1DB2j2pxoKp8xzL5av\noH5H\r\n=w+dO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCa1OamSjozRA9NHIZrkwmi8GMA+EoY4Lm9sCv4Ibwj5wIgeLOd9UqrlBAHBhAGZtcKAa8Hrhi4pbXlwjffX/Oc2CM="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.116.0186a87.0_1643209710839_0.8548961638922761"},"_hasShrinkwrap":false},"0.3.0--canary.116.9c7c33a.0":{"name":"@code-hike/classer","version":"0.3.0--canary.116.9c7c33a.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.116.9c7c33a.0","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"9c7c33a1dea75eaa3bda350f7e95cfee102f23da","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.116.9c7c33a.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/4.0.0/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-VQywauIrmMhBy2Yuaad3VUHIdUsr9rdCRyZfEWBG4xyrNouO661LTTTBHiXIdkKPA2PpEjmwdHX3G0XrYH9P4Q==","shasum":"8cd8ea54ee4fb7f1c6aa0c7ec6b2a67e7574a4b7","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.116.9c7c33a.0.tgz","fileCount":6,"unpackedSize":10453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8anoCRA9TVsSAnZWagAAagIP/jd5HOP+EfemN9EuGZvd\nBBQPobFMsZxFUFfms07YTA7LAijeYcfXIiSSaf5unFa+baVs1mx158XDoD36\nSz2XZv+DN6+ncsXvK1pon85TOp400jU9SGVcBT1SAtz0HY+1PhNXSaU1/buW\n5pqIGTA5mRuAfPSSg+QgNGhI/9ugZnw9eRzbyavWGeSlNwaRDtXoNTVg+A7V\nAE97Ndof5jxW+t/vfefFHgp1eyG7reQKJ48Lprd+Nxt4rzkla8C8Fwl/0V+c\nWlOcnwGzY4vmQRz+BcUjIrmxte11RC7jq7hjsyjN9SOHr9sY7+UjU83Th26F\nYZDStSRzKUurjqiy4Prhs71kTbxvmbFFNE68sgJpg1fN8tiE27Bk7ir1kYtQ\nWfyGjCRGGt3HemnB0i+Zyd/uIWqDJJ/xzo+/3Y/GfKrPcK6jmYIpYioSKR+Z\nYv4I0skF59ue9KoDIMX66IPYoBJNcTYFyGD0aB3GB/EIdGi78wNa3ax4NgJz\nelNhmLcayoOps1nUi7ujt56qcwQcwowtI2CdJzRorO5alCr0ap/1jFcBUm7F\niUYNdRlejbR6xx7oCRdwC+f3m5kbPWaMp5sKSQLCkTM9mlXViVtp9pZ3FiXG\n/CnR5IpCzAjuJT1yfYP1HxEmX1lOYwn1O6zManGeqSKiWHyeY2JircnCH2Ok\n5Stl\r\n=k4oh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPTVJGndzA+byOHFvowscTO9FVa5DqTFMgoQN2GEBaWQIhAJigfdGEib5h3Rji/GxVtZsmx5G17FpP4EVP//6rhs1F"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.116.9c7c33a.0_1643227624368_0.19511703325794105"},"_hasShrinkwrap":false},"0.3.0--canary.116.f0bb3a7.0":{"name":"@code-hike/classer","version":"0.3.0--canary.116.f0bb3a7.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.116.f0bb3a7.0","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"f0bb3a7e1e5902552a4a03fb2367f9428c72303b","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.116.f0bb3a7.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/4.0.0/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-nV4GN20AbhmIyZH9txZTKy2G3wYUuBcNudQlPb2UWAgw1ksJNNiVfsCYEzFEmimRTa6Nxi9QWS0Rav7MYMHXuA==","shasum":"11ad13e37fcbf2bab38ac892c13495fc173a27a0","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.116.f0bb3a7.0.tgz","fileCount":6,"unpackedSize":10453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8bO9CRA9TVsSAnZWagAAOZsP/1fgaIFFnHsuJqQTyHdd\n3+8fzuG7h7+G9/cSzZtFh8NWw63ylFwtzpomxXwMJgMnmMUh86vqxtMQF13V\nRH8FMG49xYl3vZL+pyTYCLi8aijEjEHxiXFSA8LFKh9qRRDOVuBHnopGV8bC\nmT25a7ddIJz1t3SfLE3dBIIIXPh7m8Z4bm/rsDxwA5TD3by+Mz04FnGw+jK2\n5Tj3cT5XH1pPOj0VLaAdOd5YhNmatD2UeUEQvihGNB6FqraJLciyIvTtIWn9\nsZpnPupt4c5KwLJdiufkxsE/cATvv0gSL96B8MUGbV6XgC/NgPndCTUpnYkY\nAxEVMMRcQb6zSnPrnnaL9mzcegEfmiNsEOoqHl+sGgm3Nfau9bpNdD/2QD+l\nA0rYqqf0WJcsUKsJm13cn82hw0mXDOzSz/Ao61xY+O7BUSUHF4QrjvnkXrq4\nIYpJSIHuelTdaGX0Yt6f/veaTlaVifcK9Trss/mYxVWpjsjwjql9CuXJcg4u\nR3WbrrOwALVJyoW5OsYJ58FCZm3k3hO9XoUVL3UsmYRsgnHa8uE2VpAPH0cn\nJeq39csPYoDidmbDq++h8dXNRvDl/f/m4XfCsZUoAnJwjunkDdOoATtGbssK\ntRgi43X++w2NDuNm8hRTagJpGSMSNCykRvW2ocH7mTR6GwkzOXQM9vksQuYI\nx+Ky\r\n=EIkV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRUrUQiVicyquVTdvN59135KwxpMTmbxJqoaD0BzLekwIhANnxbkoDhbc+LXVr3tDLKxP3WTEethzi4lT+o+bVNok8"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.116.f0bb3a7.0_1643230141714_0.8766308319902174"},"_hasShrinkwrap":false},"0.3.0--canary.116.11d0cf6.0":{"name":"@code-hike/classer","version":"0.3.0--canary.116.11d0cf6.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.116.11d0cf6.0","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"11d0cf6b389c59c2064aea2dc38517699b9d7620","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.116.11d0cf6.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/4.0.0/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-3IBylWeVYYWX+ZFV4bYU9qVWsnioaXxHNBhmNJQj0bVWbLSbHBMjcyCaBA0ZmDh7wYVWbJMAQ5ECVQfjWCHwAw==","shasum":"44a19e0328b5d9bc7fc08bae746064a1e24a37d3","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.116.11d0cf6.0.tgz","fileCount":6,"unpackedSize":10453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8dPzCRA9TVsSAnZWagAA+1IP+gMyQ7tZOo7B5us3vR72\n8MuiPzr/09gAdlzvbMbwYxk3XvBpJ4BJ2qBd3aJ13idaOOGbw0uanZs0vQox\n9EWnivGkT/R86nY15E1e3lZkU7gTEVf9k1jMbaxoP1KsiYRr3j1PfyzFXGjw\ndWx3BQOWIcGjJ4A3HQqnr3iqieEwIGSD8PGdMuIsJNeXs8EQUKKSqjxBGlRe\nKaL5FAnEXr/KHXN2+cNGg93dMSYgcfJvNh5wdcA9a43WYgZVYsgWfR4ySV3w\nZAITzRb87bZ5TCCY+w/2PY1RO5k7BwzVve9igGNel4r1Jhgxh8EbDSSq79Md\nBh38LGtw6pNBxOIZm6BLEO4xREdLh322lReBd98ASLt7lJKR8R0I0mQX/b5i\nb+i9FUi+US5PY+Dwb111OFWotMENAJFrFLNRL+cnKG+UJRu8mq9u5cxRt+ut\nmQStXq1YVhXDlH6ogahFTs1htnGGhaBL9y6Nh+jg+3mkmikjojkpoI5vqUaT\nKk23HEOF12bC8/VLUzkZWxd0iKLDhBu7650cvVcRFDPIZkXHADNcJozw/NFd\nLhGhv9oOlQ6B8k7t50EyBzPWDDlKPCH+VQZIQRlMh9QYtzrwwresm/LinSJX\nrxz4ttojD4vnhQSg/UxCDQrhC1+fDXS0FvBPjUhhMHn+/O+vnlqmPkfWkQne\nS2E8\r\n=TbfX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDPorsvNTq0GfykWwoEz8hbbDZAeoI6cyshAHZIdK36JwIgIGtlJBnp6IPWCsDOyKcbfPV2QGZ+URFJx8qSv/V7miQ="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.116.11d0cf6.0_1643238387682_0.29413884217035413"},"_hasShrinkwrap":false},"0.3.0--canary.116.d35381d.0":{"name":"@code-hike/classer","version":"0.3.0--canary.116.d35381d.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.116.d35381d.0","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"d35381d40383ea6bcf71c794b8ebe1fdaaf01720","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.116.d35381d.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/4.0.0/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-PFVQJ0d0NaHc9V783ZaACC4RPHikgR6bJ+9QFEUR11drNZNBus6koWhDysQR6A3RoudS1yTh087ifgX3qeJqVA==","shasum":"6e975281bda801c5328bf592fa4e6af037b6bfa9","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.116.d35381d.0.tgz","fileCount":6,"unpackedSize":10453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8gtMCRA9TVsSAnZWagAA1UwP/1mIL0unq/nSTiMjDVsk\nmWcrqAiVfsRk7XpPoJNPJA+38FImkbGKmyQFQdc2zd1BWccTTVuxyrtlWFR9\nANT/tpr/4AL/7A5QcVz2b0ahS0gq6VS7iKffFzJxTvY7H03JhVbPAw+rGlDv\niLyHs3mdDd8my0N/F6G2e6FcKUcuSaPOz4DWF3cFyBfsBc7O/fqG7BfwRu4u\nV3A7nmxKEp2WE/qEBJDPRLklYuKbxV9EyyqE+zIvIOunf0wy9jKZHaGow7AT\noV3YSUJonqylWaL6eruwiuTi8rBZyabRJrUWQB5e57/vBEOX392Ocou8+PP+\niiwACGAgcU0/V5lrVSHnmeAKbFwX8XaGfXy6fo8mhnwEfsbHIxOcnYaJ/9zl\nmqiQMCEpXb4jlhGekvxQFsb6GTN+pbRxhKTlCHCfRN7OVx6lE7RQZlg3u0F1\nKAR1RHwU947t8vaH/cyqRAlmMqTAU7dV7l2WjdBT7IXF8Cil4JIxTJEyDEXt\nLT65KEuo+6gIkpdalNaKxu8kW6P53JUm1HZ2EGbCT/fK+cIHzJMJ7sOJOWde\nPQMVgRtxwUTBx52AhKeCDpGUfNgZ583M7fttUByFcxX2VdAM+MvgEMapZ//E\n5J6yLZihU6o9W/Ijs761IzZihut50UOsd9GmfH891pQRhPEHAwqpsjFsBWqA\ns7a4\r\n=MwT7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDr0srLLsuK2Vuo68p820TL0nWZkj31vHdPphohN88gWgIhAL5jjwMGhMHBwSU4J2zjAXFktdLw6LeO6axt585o7QXs"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.116.d35381d.0_1643252555892_0.41916313758356116"},"_hasShrinkwrap":false},"0.3.0--canary.116.ba9be7d.0":{"name":"@code-hike/classer","version":"0.3.0--canary.116.ba9be7d.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.116.ba9be7d.0","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"ba9be7d9dd7e3e6a7d8278d815c606eb7e4c6a12","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.116.ba9be7d.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/4.0.0/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-JQnw/4TdUtrk3dXNHUBnt08W/0fkVhN3cX+n51b2YbmLEZN7t9W1H5OIM6WCWis8AOrGi1BAAmha9zvn+bS9Fw==","shasum":"cc327fb335994597eee523a05a1530ea3121d6be","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.116.ba9be7d.0.tgz","fileCount":6,"unpackedSize":10453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8rqLCRA9TVsSAnZWagAAztAP/1rUd15vaJk/Fyt6lDar\nO23BZtBYX/AwxyjNkgsKbWckqZBIZXN7vQNuvI9nDRjb7jQSF2GjyjusI1q/\n/1W46c1X6f6a/ZDIXqTvh7KlkzcroR0ZUEVC7VTB19i77TrUmcI6b3JJkPCY\nn/IPTdvtRhjCMfYc3FYd0Tv0/j1A9/Lefkcnsyet70m/azajAPO6NsmMaN2g\neSnt1VyvaYWaQBParmSEm4Ie/kdeGnYeaO3HgDYwaPoTBFITWte87qMrZLdQ\nkbDE6kLinyVL3UJcaome2gKDoQzK8vCpjZulK0qPKG2j9cNUE0svy/CW+0bL\nMw0tfZ9UPIeoqRYXofQ1SRRRiSigPlP6HfbxqV7iE1hbIm3fh69v4MLqJ7s5\nJ/mMBU0uAhqHmTTbvsB+epfMnmDgU28RKLDIofK6uG2ucZMYRMnT04q+NSgL\nH57SJVeID7l3RsoBaNjTjJsfGrSt8MG5bbq370CCvdsUxosgneMFgQSbcse3\nbJmXr9WyWilXd5A4ZyX+OjIbnoZOx+qaXYEYlQH9fjjZLnb3hzGiysYhVA+a\nUXWObUJ38nyDNLCUbO1jMAFPw+8RWVH/+MBgZuzHcl7bRG8ZU6shTlVdpy1t\nJDvCHtMq77nXz378JHisxNCS3RDxPMTFa3/+6jCVBk14bEoGlf5VHK6EHCu0\nLq3Z\r\n=mhBo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA5z7VqhNzRSI8CXzGi6W8oCN9RPxBNdYZoyf+93jJw3AiEAiJIqrp4yI6O5boLR0xsoT294/JLMjJQWP8a57k/wphY="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.116.ba9be7d.0_1643297419402_0.38967252338929126"},"_hasShrinkwrap":false},"0.3.0--canary.116.9a0c186.0":{"name":"@code-hike/classer","version":"0.3.0--canary.116.9a0c186.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.116.9a0c186.0","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"9a0c186a5a916d99f38e4240273751b7a6dfbd35","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.116.9a0c186.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/4.0.0/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-+IyHPQFar0fs8Cgi/xogTFChOCRd0AnfjFxQ1I2jZytAy9n4mE7AjkPxeifD3v0JBgGdiI/6T/tqw9yXuuvSqw==","shasum":"e8baafdff5a2d155dcc9714f8105e9be766241b2","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.116.9a0c186.0.tgz","fileCount":6,"unpackedSize":10453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+8d4CRA9TVsSAnZWagAAsg8P/i7/XitnejKwyfp7YjjA\ny0hAZ8alUD4rgo9YCO2+BORtYf7TRtuUEjQCNcyHeGU86n1tYNm8IPY/FK4+\nnOn8ORtEYKIXb8RTOyqKtAAe330+wf6VtgYOgeCeC9NVxLMSjl1Bix5qSmeW\nWfxjs7OB5NoPbZhA0Wp/NRlXZp0x25HblqIH4+b8ANQC7EF+cZ00VWwl4nT/\nee6z8bd8GO9HVzGDYC+5b4jagIWz/HWbUgCW+YD7UKQcylWtrmGAS0MajPFx\nkA4P8EU8ECPiIEFj0v1DPG+8bdBnb4ZVimCJJd2HxpfpKLjHFnMrUdO2FrlQ\npmnGsg5hV9oi+X3BMbsAgOBu4yU7ODDQoBsYHUVLKFSIFCua4QeKyUYZjP2E\nMKl1S7tg7e81/wdVWqLdIVKZmbMKOUW/guKT2r0UdV/QS4qm04Rnwfnn87U1\n0cFZ/0/Sa2E6ADicI2HhI8VpcQlSTBRhfmenhNj3rGsYkXxVRtv09+ieylcC\n85dHQo3Y0cEQ+vq8q9bbVJ5yDxwMcSCSmlB8C7VLmgF/0O1gZs77bCJtyWK/\npRixiISQgUUr6dmk+0Ce4J/6jlO4rO/ZFMS+NxoQVSZSYBi1i2psxagDOVs6\njGCcMauKoPTGFCDoDW/0vbIRrZPaWuerngFvP/2iOnr7XWhERtyNcoZzQK0s\nh2M4\r\n=lJd7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCeukcaXHjnqRzPmomMXLhK0gtE7ZC0zoXzegWWz0E9sgIhAP2BW18c8ZbDtNq4TSKfnGPkS35Fhz84uW76dc479LW0"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.116.9a0c186.0_1643890552034_0.5784539880786355"},"_hasShrinkwrap":false},"0.3.0--canary.116.056ec02.0":{"name":"@code-hike/classer","version":"0.3.0--canary.116.056ec02.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.116.056ec02.0","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"056ec02d2e35682bf2f8c6423410d8622ba10691","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.116.056ec02.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/4.0.0/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-YPElcVHflu4ALQwB+UILqSZJlQURtP+YNefECU8bA+kRbRz3KCNcHWefWSz4HXfPFWlmajCTNqP/qoHqt1QVpw==","shasum":"42aa8e64465eafa038f017a19753d0dd7bd4b39e","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.116.056ec02.0.tgz","fileCount":6,"unpackedSize":10453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/VXdCRA9TVsSAnZWagAA9N0P/jh4fUrjHop+PjKS2AzH\nyFgqgn8Rmqf6donOB6Y25RtBKzuNF2SeCViEXo7Gzhl/BRRnuobWekCh37N0\n7omwG9479Op/WjHUKgL1+wqEXmXmNLNZ7EqdSI9OcxQ3TBwEGRQibRLGscso\nf2ua21NH6kK1044kdeWVnLX2naDVEv5xIVe5rw4yYSJJB+9DJs3eRmN1W+mt\nZTy2ItSG18Zo2cYMpncys2Uz/WlPcZkam/a2MIg2N/5KUwhjCd5cQLEYz8UI\nXUx+IyeDxoX129DhlV5yD5gXzXPDRXcJ7peA5rIL29ejiInddlY6gVA/nVzp\npNKwqvPdjJRSiSCcoCh2LXF2d2afxfw0ksHKlAwNOxQC5Zh8l9iBeViGEmdc\n0HWdYP50cBJ7Iyaq+5eRPKEmhNr/wqavo14x/aG1xjuIpBzodzR4Ua6jYi8+\nR4M7zL/Vq2LhTfBiFzc7rpOHklz9RVOoiWo0l2bTxcvnQLoKx20EaC8D+iFh\nsZC7wnTtz43dXu16lxAU16rjLvEuF9NOv/enGCryMYkfDPDZHCNbbD96hHRy\ngUt0qPOz1fz3qc1xRmkaKTTpS2ltvJPJowfqS6pb3WfPoZQ9bowTLLeSLTln\nF22ICyKgXHGMxiFSXK/HhqRgltG8HavbjtV9q8bQ2puZPdhEOcVo/SwZYY7s\ngpe2\r\n=JHam\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXAVZKw7uiMxvZqRrT/4xJhZpGUgGSyDRlXw0VbqVjygIhAINy4Z2Zbv3F8MoPcx3j2k+9wKdJFA02gt01FQ4xOFmY"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.116.056ec02.0_1643992541707_0.2616974609405869"},"_hasShrinkwrap":false},"0.3.0-next.21":{"name":"@code-hike/classer","version":"0.3.0-next.21","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.21","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"9744527cb78d571ebf4aac98a38c161805599c52","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0-next.21","_nodeVersion":"14.18.3","_npmVersion":"lerna/4.0.0/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-exKgGv61N9+tre9X8puqPOsjUEQwoK5Z3VXnj6o/MKAlMmmcX6+JrbdJLTK5RcM9/pniRUIYJp4iRtRAp+fOtg==","shasum":"1e04430e07d94ff05ea64cc924266e8d5e8750b2","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0-next.21.tgz","fileCount":6,"unpackedSize":10425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/lACCRA9TVsSAnZWagAAejwP/jj17XVuSS33u1uvkRbK\nQlh8RtEwhaV3NmqVOd4JAlabuTB+DqA+uaeIvaqcq05wpEFnDdv7G5pzmOGp\nNxXCLAG9jGcxRMrLMIDtGNWLt/uzv4JP/OZwEYGKBJ3NRgl5NjTGPYBAhACb\ntTMqAlkGkyfvL1w+6uJxGXkH2Ss5260mf/bWaG0orp2aZIuCbvr/d8xmwebv\ntq82OtWQtdCc1QnRidpyu/kEJ8Z8sTqWhvefy2iqWl4k3+kRjbV2Tjy+VHSD\nD5t2pxKInFyvH7IvWGj3yaVMtf3PWEAeHC8zHAhl45IksmYHdK6uHGjIy5vy\nlGZr4b3uSZFeqSpFQPNCn/UBzx2eCrxB1YvgToh1ioFt1htpXgmjquthLCzU\ngG2A34w1A7qEILNOcl86HqZ0ShQIvERmEUtv+a5ms1gi3PkvrPZmDYz4Ep/d\ngz3C+6WxXdhBR0kqIO0mKtGE6BNr53usvr7CfBSpfSYQsQJNtzYRTCkkM5Aw\ngdDnIl9p6poJ+JD8IocU/vOVrGP1KckbH4vmRa/p4HwOWTDLbMnWlQWIkJxG\nz5I63d4MwnlmSwb6fQWmNQlwlBXyvyCwUlx7WNgQvy5KWqqW0KLBcudnOqQX\n5F+Rx5KGFX1Ds1QODsTAWYYTjneOL/Hyi3KC1iw01RqT6n6Ph93EhNbYa+Kz\nZ9X/\r\n=J/kr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCs31w+4iqo16evUIoXqjWcCPyoIJ7iyJ3MKczC0DYwlQIgaO/A2DkCFku4LL1WKwSjfT8S9tRjm62IE/Or/2EPbyA="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0-next.21_1644056578103_0.6280394613251772"},"_hasShrinkwrap":false},"0.3.0--canary.124.5b2426a.0":{"name":"@code-hike/classer","version":"0.3.0--canary.124.5b2426a.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.124.5b2426a.0","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"5b2426a56d00e948be868c77f7bcb60b3b77ca8e","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.124.5b2426a.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/4.0.0/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-p0+YB1HBjqE7MoCeksnjqmb+aOc/BfDIzSKJJLXTI7eaVDH6L4F/N0x9yYAoRKBogQo8u+wTB8sLF8Lpcj5X9w==","shasum":"b7fe171dca29f8e476d463de2882cde3c9420131","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.124.5b2426a.0.tgz","fileCount":6,"unpackedSize":10453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/7mrCRA9TVsSAnZWagAAvSAP/ijb6WxqRSLWJGdRifEu\nIJdUn8lyJzeuX79YQWAUm0qgCJveL4MXY8jnnTWfFln+UpabxMMX9KxOPHg1\nHEcnhKg21KZHMHtCSBw7xjORVGpP5kEVnykX0NeL1yqhYLKrnG4CeLvJ42co\nt3+lEJuVGIeQ1kEYRgvCoy4RKYQvZjCDfY95uMuDYRM0Sn1JPztpBSxPDb3Q\nDWkj0VKCdNeTpNI3R+zXiyhByUizzUgmf1G6tD6QkuMrcygCZRoiz5cma2p3\nhpL/ZKab3j0zIe5Z9jvA6csrGuuitqGQHauT+sduN1KVTutx19t9ijgrViP2\nfDkQLxsPWst9jyEnnjReB+aa+5uDU1LV5UVDnSKileS5ZhYPRUGj3/fH4/DN\nHqLORMKofJSQ8urrXI9ECIQQmG4XX1+jcZmZjtEKyJqB+m6vXaZOwpp3p1Ps\nAeSwgEgmWlY10wEIJ+t1wg1peCsZD+Drof4mS37IFJmx/P5+ln1daCQU1M+y\njQ9rZHqtBqAbtNQQEFVTtpYLQgmaIfI8Co1Gyticc9mF1cb95d3KtMueG6IG\nANEuE06zsEsxjXa9QLmldiwSPSQRRTfFk2fT7UM/c43dlvKEWrHYI4seDgaq\nEYRrH7vbCSqN6+EhtSaUhsXK0WSoKVJEXMXkx3w2VTk34nQxbSOZBwPvjqCB\nqOnv\r\n=/KKq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCXg9xtLCS/iHRviGEXbxT9xWbp67yoGRU2FLH1mn/v/AIgM6+u0DRGRUaiz2aPqEjFn5qSmUnNv/dbz31DUDFfouk="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.124.5b2426a.0_1644149163788_0.3989410787646448"},"_hasShrinkwrap":false},"0.3.0-next.22":{"name":"@code-hike/classer","version":"0.3.0-next.22","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.22","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"4c01ec74b88457f115f3fd8bbd3a75122fe90a2e","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0-next.22","_nodeVersion":"14.18.3","_npmVersion":"lerna/4.0.0/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-zZ7e2xazh2d9GYojgfPMT61Y6+NJ2lcAaZW/bBtONEbP4r42efjcBD9vS/JpGOM2wENbgNtVXi8kNPzHA0xcBg==","shasum":"6e2439b541b6522a8951d76c039bfce2c34eb89f","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0-next.22.tgz","fileCount":6,"unpackedSize":10425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/7vbCRA9TVsSAnZWagAAJlQP/iIhATYJ557GVGBFacia\nm6Obj0ehVDuoTrys9rKyxUUAEea3o1/md2JTBWHULcgGRx0azD6TzTlvZc7N\nFiYDoOo94XdnTJko2I/EfHd+vmRasH6zy45ecscXRGZxrh8mEANMCytb0Kba\nFo82B67lPt9WX3md90ANv25yh/9BDQGEwXaS5m4I8RDGHtPLUcBjlvsJBYIF\nXKBs3TSBaEzTBgUNFxL8FTCAfdkTiSYk4RIwPHi08vN1w+y3trwIevnwqPpK\nKARZ6dpEU1gdDNekhwoe5mom8i+knVsDzVzI9BX6qeZDyjDIS9nSqw9A5AaX\nNLiiJNqaydbEdHuy/6QaVbv8iPTRyzsfp0CYKLCSXv9BxMXR32BcBK7gYjoF\n25R17Nr3s5aEGU/KCkT4mtE/jwHgYksBsCZYtTL3Hnx4kgNDG0Fg1grL/tDz\n76r1YDQI4uqTXIr3Zo7c1+TeUK3tWxyZoxX6MIzwFAsAKiqAkLnT4uK9wJLo\n9OaOoQXW9tJhQBOMSEiU4W48ZamVo4l4tV200ZxvrOeTO9LluM6l1rcCSJG6\n9otXWGzLh4lfJ0PClaqGEh0J0yTWrjSWKTahqSh7oWv0xk7KgALTMF+fj/2g\nYos0jFR1NDzvCITZovFHZ3Briu5KyBvyFrM3D4I9HRGmoUmXE6VPCHWxiWPM\nUPdQ\r\n=Nijj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICFSzYWhTXH7HE9MnrTuWl6rPX2P6mDpqvKuFcEm2T0QAiAUABzbqfKXe8AmX0WdhjBzd++2VCKgao0Ut1Rz0fKdTg=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0-next.22_1644149723146_0.9595089374436416"},"_hasShrinkwrap":false},"0.3.0--canary.124.5f18de1.0":{"name":"@code-hike/classer","version":"0.3.0--canary.124.5f18de1.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.124.5f18de1.0","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"5f18de12466bddc2e654adece40f758abda49e5e","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.124.5f18de1.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/4.0.0/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-LFAp1Fgq7Knpy6J+8E0h7cCGwdbgrrn4IxoUMbIPzIXhl7/Giejm0qSYGl06TnIUcHjbe90CQzAYoCzVU4wbyw==","shasum":"51223faedfd2b1bbebb7a5512caf036c94d74c0a","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.124.5f18de1.0.tgz","fileCount":6,"unpackedSize":10453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh//G2CRA9TVsSAnZWagAASfsQAI1lkn9wte+o4HCz7tre\n0Hn066eQ3bcPQNTET+920W4DeVdosIYwb32F4lAgZ95LtGHwgpBwvlijVfWZ\nPDE8vbe6714xMSAxOu/2Ap/HzrGOf2ARtpSmeaKmHzQJWFysk1Vhy5+r7jZ/\nEodRYHBFcxvHSUccjwY2DeX1tTJIJDLq4BWow9vVGuJE1TErTqxEEQiDy/4m\n4kzmm9ggU13FTnAi0rOVqrNmwiywA9uW6bG481BFGPESBqAMz00FIXIE0zDC\nPFtLNHCq64wq80aKdh8U7BLkwDgrhbysoQZQRtJAe25LJ7AnzDeuULQZd2y9\nDBYBJwbqiQIoBqWoLvlWpdFv403PwB9D9aoml7HdnBGMSuJfdpiqQvamSjKi\nVLkkQvzGUupnkcejSMyOsFESmMeTZaW0WT5eShC1DWKVD/7N0UIYAbz0gAnz\nbl/CHLIhwomlovfCktTm8C8uFzhAeHx9iPADuaGTp+SeKJKnwevNWNBFuGaw\n2wvcpJaWkNSGB9ShXbIAiqHlbpIltpgFX67sG0ppmJndG9KQJByBk6Tm9CrZ\nRA0Inaem0sDDpJsKyoxh4sK3EXUngrHqcZ+mKdzr9gAMN3htnQ4pK+hejjCC\nYIYYQlC9qBHW0ICdQx8tnmejszS/dK2Yuvz2Y8jQgawhEyYU866FFz8l2BMN\n2e97\r\n=WB3S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHjdADXHHFwXmwxMqX9MZ4B8J0Cqcpj52HbqS6yGnzruAiBZlvg8YfdU2b+cuMZXVtRUfBf7vE6pQSEWvzxLIRoXFA=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.124.5f18de1.0_1644163510172_0.5374848306315028"},"_hasShrinkwrap":false},"0.3.0--canary.126.19a4397.0":{"name":"@code-hike/classer","version":"0.3.0--canary.126.19a4397.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.126.19a4397.0","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"19a439797d7dc2abd29bc671d282b1022540eb0e","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.126.19a4397.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/4.0.0/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-hdGrZbG5vViKnA4t0iAlYeEnDggW5zDoOcGPqrDp6ZPruAS66P1rem9QD9y6klG7oKnADvkNhwf7L0CJitydVg==","shasum":"2a55f95b154b563b3159b68bcd988af822002dff","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.126.19a4397.0.tgz","fileCount":6,"unpackedSize":10453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiARlmCRA9TVsSAnZWagAATPMP+gIrS9Hm48jINaJk1Z1O\nYVzjNJa1x39A/m7KMyHylAPzuH7J2FdtuJ2Seax98VGShNS6lUGSrhaWEbP5\n5P/gpuTM+H0Hx3ESMSmY1VvI4C+iLVdWKyrkgOjFvKxmvVLdZ+jDdmgczvOV\nx2lUhDGdWTYCLXdYkVutwy1rN4tsaFYN8rHI1JVh0qdWcdKNPlxfCwpcp2J8\n3Eej4FKwe05nE2ceHxW7BqWcPzqArHEgEE3ifDynwUJeDSd3Mw1NmMxn5RLz\nnQbqvripAMF4jGojI5YApjXWfUEEkFjL67NBSJ0TtyDGhqyo5B4IlxsW8kVI\nQMQ6h+INxt3Ul6VKvUb3UNu2rXuYFiSefaapqb8y/aBlvuunI9imcvJn3g2C\n7jHR4xUTxizVe6bf9VumneQ4Tc0VQ6/accjHkGwt5SGe58n5G3kIF2iX6eOE\nMRArW+w6MahVMLstPCfYPuEjIhM0vAA55LUaG26rKBFGUbpR7t4JaXjrBC83\n0IDjw6QAGHH7SX6slNa9+bjyOGMao5h1enHz4HLA/36rfoWlPvMtlAxuRRhv\nLIDC1rPlaO+l4YHQtg8YGcOXvL3Udt9Q5mUAGFGdHK8yAV1zlYxwT4tw13C4\n7QBDnmdZzc5SlNIgxEIDH4zT/3pz1tHLOzN0KIxgZItVD25g0gLn2wn0nOhI\n3mLm\r\n=FS4Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICLhl/UFkWOnyknTZR0dN3fL4tf1G6Pm6hU3Xb1k50G4AiBtErS9E8GhPUsWcnat5P9C1CgJ64S7bkE1Ut81jMuEyw=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.126.19a4397.0_1644239206834_0.9911090945806671"},"_hasShrinkwrap":false},"0.3.0-next.23":{"name":"@code-hike/classer","version":"0.3.0-next.23","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.23","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"84e96ac2e51b18452011b97878026260a7740158","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0-next.23","_nodeVersion":"14.18.3","_npmVersion":"lerna/4.0.0/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-AukD7ZyB/NSgnnYSBsYJREhX0kUBe0QczrSlOpF283F1y+9YEMEickB+TgIfGpe3yW+7XNe/PUNi+MTGl67kog==","shasum":"69070beb5ab599d4fc6691aa9df52c55a76bf4b3","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0-next.23.tgz","fileCount":6,"unpackedSize":10425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiARqhCRA9TVsSAnZWagAATBYP/j16Wg5oSYC4hFniQtAw\nHXl6Jaq3OLQ/Gd3V560gbJWvjlVpz+G9dl5VD7oEzNuNKbpJeQopY+7/bM+X\nPKmqlgFuktoiiI6G/KPdc73/9010clSb9atkvTxqYsPa2I8N2pqUW7Tu0c8o\nqhfbcwJo48XTJbrQLQxoBstnEZfUMvbGi4DH3IHLbIQjVIjN09YPcDq1qsao\n88u5jidD2ITj5CRFjRxOz5SzQADYHx8cBkc5bAhHVntrV/s23lNNkJ+uKAr4\nIYtRYHtWgZuqs9PmP3wOYDnqbrv1a5YrRhYipv/7Ao8DTHoh6WLHMzaOMPpQ\nK2gw7TGOduNZykBq/jVJyTxirZzQCg3P9kJcBpwLoexn5eWSjpjSXYlrBtWG\nlpR8A2DPGsOjSobX9Rr3QJ3cQKtqZg+Be59d2Q0CRd+u/HozwCMeoJTIuaU/\npQxcyXz85NQwocfQLPgQKBTPr8GemBnEbc4CVwjtsivcP7ytj9S1QFPqgO+D\nWG6k/nSh6+3ybOW6D1q1x6hbzeXFF21xB6oWki82OHPwiiHHtOSOWk0FPWoQ\nSztMwf1EK4tUXQlEBHaWNZ1d+zYrR05yfnLzRl77n+pIpPvQI1SZpy7M9u1W\ncjtWGbCE7DjJXYku09e2L3R8Ug9BnM0mr+MYt6UqKN6kzSP1wMOyVOUsjyLO\nF+VP\r\n=oRts\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC67uJHsAujACq6l+nNVNGv56KyZvaMNJyEF4qOE4a1lwIgG4I7qtx5wE3plFS9LVCDv6hBZ2lFj019HftYLnI/nGE="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0-next.23_1644239521613_0.9554848793405541"},"_hasShrinkwrap":false},"0.3.0--canary.129.a5da30c.0":{"name":"@code-hike/classer","version":"0.3.0--canary.129.a5da30c.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.129.a5da30c.0","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"a5da30c300a3dde24ecde0928d5b83b1d65a816e","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.129.a5da30c.0","_nodeVersion":"14.19.0","_npmVersion":"lerna/4.0.0/node@v14.19.0+x64 (linux)","dist":{"integrity":"sha512-wbuuCyolBTr/YK8+yWsnAawA8q0YUC4QOhddmgEA5UhYUBw4oR4dyXPXgIZ1PRptS7thOcLumhmLNCxuzH6UZA==","shasum":"02d9e40aeafac004f8b9ab6a7dddc2005c852347","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.129.a5da30c.0.tgz","fileCount":6,"unpackedSize":10453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiCBIYCRA9TVsSAnZWagAAE1gP/18oDrbEEsSkYmuk3bDr\nRmLZz2GOdaADI/S3QTZMwxgXF46jbI5jq34qcSsXbOfy/ug7O/5TRkwORoK/\n8T0xU1okBy90e0Fe+EkNs3NxsoSDBk1LewersftcxpNZt+CanjQ6XHmNaWIp\nom+9xnNckYis7YA+ccFf9tThu8vqDOsdEWZMXwUE9ktu0j7ay3LRDQowGdms\n5ktk1geyCiqs/viWq5Ituh4Kkl+VSKbIjjoKOTaY0mVYKdqAqf2yDTFmKeDZ\ni1U+8xemx/6H2eElBf/tHGM6AHoNuNK0uvG6qEgZ2A/Vfqsr5ImNTgrI9QP9\n909052MAZQAgzZtMKF4x6tVjQSUHqS0K1HkCosLj7NfqJOTdtpX7aHl5dxv5\nlhXlsJJucV8hsoLAFev11wI5dx9U8oZFXcxbEWiTVL6HqLBTeNpfE0ps0lsb\nl1VFIcRG/xXy1DacF0bwcHZgntWcqSkjDtSRDc2fopz00ZMt7VEsy+7j8Oyb\nL0BFUelALBo9sAcTkiodmgKSfZiXN5dEJ8qkAm8+er1B1auTXnHWVvMWobZV\n/57alt1al4tEFZbbKo7adlYcapp454+QcNhN3aUuhOqLMrND2YdiKKel0379\nswvD2o7xR2x1QGuyXlUmi/tICA/GJgKlkQx7aoyDP9qXR8hRGYEJafkyF1OE\nxuD0\r\n=1kcT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFpz0YwaAkpfnBOKSDlhAwnSvr5AiTGOBnmMZC/HqrPeAiAYPJzCpaZ6Fceh3kNv2cIt1hAXdrDgdCIIaOOZTvwN2A=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.129.a5da30c.0_1644696088658_0.5990586638959865"},"_hasShrinkwrap":false},"0.3.0--canary.129.45448ed.0":{"name":"@code-hike/classer","version":"0.3.0--canary.129.45448ed.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.129.45448ed.0","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"45448ed8ae120c2c40cb7a951c6bc448b5d31301","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.129.45448ed.0","_nodeVersion":"14.19.0","_npmVersion":"lerna/4.0.0/node@v14.19.0+x64 (linux)","dist":{"integrity":"sha512-fGsXmvkbcZbDrss89gJ5P/3c0bRWMMc4zS1gFZPa3ikplmKAEt0yPYVCQ3KXoSA+OQRCn/qe2TZ7hXKaMitTMw==","shasum":"b3af16f67f2515b749eca344e7f8c39176bf7d00","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.129.45448ed.0.tgz","fileCount":6,"unpackedSize":10453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiCseOCRA9TVsSAnZWagAA4h4QAKAOtUe1YmlTsOq9e+cX\niipFrX0iiA3OzcEeL+PMHwTWtU09X6uOj/OuW2cvXQ8VscjJF7/ye1zZHsFo\nxOVP4YOl5QGDzOhrGrXbRNNWkvqZudRqtMBV2xta3RmCnQDJZ1zFwoILrbXn\nm5Idp5KfyX04FnIu75/CiOreyX9Qt5biF00xexPBVPIT0geEmy+o0cMVEXho\n7tftWbf91hejb5YjQI9pXr+CDA5kT0Q/PFdz2X677SCdx7EzRRDFRdJ9O57Z\nb0SYDry1hfTegH9NkxFIPBCPS60m5UABOg7rthbyxEgd006WnE0IpgpYiIcl\ndWacGwGoCvX8ag2SWq3an1hSt5iAOze/yldkUCgd4ue5KZOSwsLQX9uNfLSB\nTahaNwpSRlcEO808Jfnd/l/N7oOWi5pf5fpZK9DxuaZUx103FYo+lRAgRCm4\nAuvHx8UVSuHgw362XVobtIi9GW9QczfsbWGWp1lltIezbgi3EkYOfTDqjVDe\nhAsK+WF6t2INTDkq52mTfCtfGvtgSDMYCwAuW0FCH4VzQ8eiE/DUIhAQU9ru\n/GoBBpCmTwSR43HktKW4D+df3bkfprlX9fBFvJ0VGza1YXDnpTElwxIdXaIr\nGZi/1kPoNws/l170tf7ETA4nTq9cQUU3fTSstA388KUaSXC/EtScbOf/lpIs\nbt1s\r\n=kbVw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHxD7EmFmAIXW6iUhG7pjfxcTCsGab4g2GhP/xP9mFQjAiATH+i6hlaBjS1zpM/JfaatNQhsL4CAwZknv0Vugb2fSw=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.129.45448ed.0_1644873614727_0.09474410675943257"},"_hasShrinkwrap":false},"0.3.0-next.24":{"name":"@code-hike/classer","version":"0.3.0-next.24","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.24","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"a6393956156ca3e25c779d083a22b9aa00bb5895","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0-next.24","_nodeVersion":"14.19.0","_npmVersion":"lerna/4.0.0/node@v14.19.0+x64 (linux)","dist":{"integrity":"sha512-p8ucUyyQvSlgHcr/G/TxgLSsJwUqObnwmRaf3IrQuIAkV3lWkgbS4wQ66JrdU6IoJEBjobmotgU0EErA6RLt8g==","shasum":"5deea0846d05c4f6d0bb0dde4a5c3671ae9ea71a","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0-next.24.tgz","fileCount":6,"unpackedSize":10425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiC5yQCRA9TVsSAnZWagAA9WkP/1FdLW70dHgoDkh9rTrX\nT7EPeHU/zaKnULL8e/2jfSuWS8Fz3n7/ipToSGuoldMMG8s6ThCjixcZlyCm\nebUhSYOedtYSqTm5FPYCG0Qdogz+NZoyaYevSRU/0qlzHiClK03DlObJcBm6\nAU8qlzoYoiwSrhVs/6ejrGI/yHGvILuaur5gz6mE5X0wxBPFhQv34W86tFty\n+GjsqQvO17IT/EPU3B6K6Bqnuj7+64cwopWzL9LFvHcbcBt/HhsueTveIJX1\n/2t6u014SbxMi3hcNODp1VyHhMf3G96ytVszhKGDsZsj+0Y7RsiOIAOArF/+\nhIRcX1t5Y19vp6jFeIdRfPiEdmXI3ccfHcG3TUQaP+vcChJCepb69rCyhCjU\n4D4bCLaM7VHRe31VhxmvZJSLR0zIxwmheMHvtpWMRX3InwPqwR+tynmQ7pw0\nZXB6LjsSk/jhtSJvyW1AwgDXaIlmTRmqQtkJ0vQCqdM3aGRuV3S0WbuYRdfH\nTQYj5lCulUz+8YifGQugOHc5pf0qSL1YoKwvzHrEPcYHeVjMGRwd2Jg0ZYEj\nuj2IHxocRECZXgf1t1Xsy3lSYQvS3BBQZz20QMfLJn9eoQNA6I+fwTCtDOtN\nPU3VtJm04lW+7r/Ff1cLDlurrDU6UAJzHjqPYtnwngLKLAP2ol1fKahKeGQR\ndu7w\r\n=q7JL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDDjNRQ/DYAEkGwO0fEcVoq83Nld7iwwYVlsalKDqFgvAiBHIrPpuEDn2C6bPRL6PUAWib/tyZ04LvJQ+jdCsk8JXA=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0-next.24_1644928144414_0.11434357496594161"},"_hasShrinkwrap":false},"0.3.0-next.25":{"name":"@code-hike/classer","version":"0.3.0-next.25","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.25","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"bbd5983f42c9491005970b27923c5bf8a6d6dba8","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0-next.25","_nodeVersion":"14.19.0","_npmVersion":"lerna/4.0.0/node@v14.19.0+x64 (linux)","dist":{"integrity":"sha512-KVjWihFdvy0lZ6Z0hupaVlbGKzJ5cwSf4DTnOo+xScRo0MVvraQ1wrQ3C0BfLjt0p3t16kZXuEE3hzX6OGo07Q==","shasum":"9bd956d048166ecbc5dd8cd9febb0615e5954b81","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0-next.25.tgz","fileCount":6,"unpackedSize":10425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFLl9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6RQ//VMOTNWCS/umAKVWttAofeEdXdgGPzF5BnMhldpT35AYu6kOv\r\ndkg5owNVLOLe7DQbskbLyfo7C28U/T6/iwaJW+FIVrW0WN9LUuX462t4WumW\r\nXvfeeG0ekHzWwT7J3uWhchVo6kcEopvpB52ocycZqaGnzN/WVbUc6R7ZKhd6\r\neFUUiSK2QtAWvFfupeYzOK3YkAtaK1HWgUc3jbFHyDYsZePQ/90WlWU4ESXw\r\ntcXaBCMCKoffV/jIuRjHkO+VcqZCPUj+phMTsr+egtcta9BNM7OD7AU5TSNK\r\nQO5kY0JNXrnkk1HqUX69s3c/71edElIG6l31aRAOnGvOOWiOyJC1cPNUN4KF\r\n4s4yvarNpQSYDc1ggZagJkITVNf/oURrkT857aZx6subxGnIh/fSRn+M3zF1\r\nUcSuuz+aZAcIhMmMuZ67xgIEgOG0FvS15MiUwS9nx3QrqzWH3MM0vovoN2Iq\r\n9XBzoigRbf89kiA1ERoq2XKxlSt0gFH8V9zoFl0ojBu5LHvN3ICL1IlBJ+Rv\r\nqSbOEfhaolj9M2TeLw3PmXTeToHzUkT71Df+P+ARYm+xR8TUQzTDnZtAsJwE\r\nI/EICARRrdRHGnOOgeVwQZWo6xwtbdE8YMhTrif6fTvd5Y2h9KT/+8SAdgUt\r\n03W9V4TbzqLXY1wJxEsKVcZgvJkbgbZh9L8=\r\n=bDO0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDxAIpyN8SRiJgygzvatQNTiedEU7LIjEf5o3xSPmCDwAiApim+ci2PecO44+T09FXi4QquzwRN2qdJvGIdDShoTbQ=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0-next.25_1645525373685_0.6008783787005045"},"_hasShrinkwrap":false},"0.3.0--canary.135.fbbee30.0":{"name":"@code-hike/classer","version":"0.3.0--canary.135.fbbee30.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.135.fbbee30.0","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"fbbee306e10f7a4a94565775d39b4251ee871e5d","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.135.fbbee30.0","_nodeVersion":"14.19.0","_npmVersion":"lerna/4.0.0/node@v14.19.0+x64 (linux)","dist":{"integrity":"sha512-jEbHee5RWzdGU8umswBgOCfU28SU1icLLmUUH678Xqe4ofVonw1ys3Kwx5alX5g/lPV9oD0EaqAoJH11KaG8Kw==","shasum":"22037ce93eca64e043064c4132a2b801c3f77694","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.135.fbbee30.0.tgz","fileCount":6,"unpackedSize":10453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFOoHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqD2g/9GgOWT18nFMYDPQIJK2VIMJNIn79uDOXcBmlgVVPJGdrb/aTs\r\n5j/Y1exenccfT0Uh0fSmvL24jz/zFAHm65x5MwjYXvFC2pdFiqVpRKXhMHbW\r\nB4TehqZCp6uKL86QBlawEQiEsFxzeVAtJuGsIyEhxPiICmMP4BelbMh8lk8t\r\nD3XEFj+XwK7DnMJcXXFAYtd7Z8GiKyV8WFQ0lQhCBZ0wBrKQQ3M5t0pHf8Xd\r\nnDx93EkAgTyX7HbFQ2+Pvq0U9uQOHgykxQWQQgkqWv/JD0XyKCRPLCno4IS1\r\nnk4KZD7bE2kXAx28f4ReTzBE1w8uuT14xmrd3nicJqqquoSi2SuSUuaDgjNU\r\njhcIU82uYZcjes83OIhiZ8lBH7kRJ1hvauZkjGkWcg36paH8aa5NY2zua9nH\r\nVpwYb8ovBaphrD5TXpnkiYNAmpTOj6Rm9zBUyCBsqbB6cCoSipSMo6HgIHrs\r\nVRHGI+0MksiPCND7GVEmJ+K48QSIYN0pNFaslmgQlQxGjGKe1nQjx2yIvSzR\r\nMwCEf3oJVpNpZi3PnIHLgN3i6LoQ5zLHFC6yi3TbLp8hkV6p+NxZ18tE4bXo\r\nxVb0X1Erpkx9Xgi67hcfHnX9plBMU+UjC0MawC9vD3ZfKRuurBmSQ8yI/tk1\r\nfNzvYAJOUKTRSJGlkPd2VfyBkPrcIanltoM=\r\n=5w80\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC0tV+QlRS5gEb2xqHfwTd6kuP3MGVVNeKTyEYHvhPznAiEA+DAizh+AowXvSBVjz+y6Txgr32KX99YN2xkOxBLtyR4="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.135.fbbee30.0_1645537799408_0.8405469757800046"},"_hasShrinkwrap":false},"0.3.0-next.26":{"name":"@code-hike/classer","version":"0.3.0-next.26","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.26","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"e4381689d697871f36e97d9c7f649983749e6743","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0-next.26","_nodeVersion":"14.19.0","_npmVersion":"lerna/4.0.0/node@v14.19.0+x64 (linux)","dist":{"integrity":"sha512-jaYKeH+ElcfgA3EC26j0SDb0xWYeDJgFO4wKYYuvcNtKQ6mb9knWwVLoa1IEHg0mmRwAVr4jPY5BTgrX+M76DQ==","shasum":"702aaa8d690bc5f9e8c83886a86ef2f1b528120d","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0-next.26.tgz","fileCount":6,"unpackedSize":10425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFPQSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqkAw/9EdQCxpf2V+DNryZg1Nc4SgfJghoJxrYDI+UBBNXDWhGiIpca\r\nJOKBsQ5c0LC0ewnVYLD1Bm5A0ib1+ddEm8MMkH9f3gOmgqbhxoW4kvT8LC8f\r\nI9nW1NvGplcJDymTbY6mPS3gJi8Vmu+WsP1dVqN1mdniURzfWPl9RI5w6VO2\r\nklJGpal/UyEgcGaHj4Qvm69UYSM7rPMw6PHyVuWNnPYWP3p798wu4IW/WtQN\r\njy9PFw8iFJTYsSlrNLjxJ82Q04tz7ZCHATZbOKx8g77N4Pp9/uwwQEgrM9fR\r\ndsgJ5audRezYMnwtoWPG23ddzo4HauSbCJcNMzrivg2YGdHWOVnLRngsYh8J\r\nClqsJq9aYa91udSt4iBz260PAclziuv2GZ31h1/lG+biER3BENHW45e/jlfY\r\nWyd3gPO2Yi8mvib5jpMtbzvgoZuMgZ6jLa8ufhxPBmx6OzteRD3sXpw+pSgw\r\nP4/la+ZjVRdxJVJzuL5xiBlHUk8eUGhhhkFGh9oAs19ymPnzcwY+rpb+svXW\r\nLyNpdAPH/69GpeJ68xfRU84EPViyi5+kXVmXCxCLb9Z+jI26+HmcQ3wAoQhj\r\nlswSV1v7GaAKdZbeq6CVZ0o3SiLNWy1L5YNyrgpLpIK2daQH3VD22c4hIHGm\r\nTy9Z0K3UcfJW9yce7NL0dJ8zUC3wy32vkWk=\r\n=xrvv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDL4MthLUFf9eWw1RTKCFFvmVXeuJjYhTfyBQ/WjYBb6wIgEwhto9ZGAwn9wgoErbylmtJlA0tHuMtzGcrDz9SST+4="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0-next.26_1645540370517_0.6295081927343742"},"_hasShrinkwrap":false},"0.3.0--canary.136.91e3d56.0":{"name":"@code-hike/classer","version":"0.3.0--canary.136.91e3d56.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.136.91e3d56.0","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"91e3d5681f7497ddd5884d7c7ead70f8340f41a0","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.136.91e3d56.0","_nodeVersion":"14.19.0","_npmVersion":"lerna/4.0.0/node@v14.19.0+x64 (linux)","dist":{"integrity":"sha512-396GQnHnKQd3Il03XNTMGKlPFi2xrkVTDBrNolWuAWhpJW5PtqGXlpSl0ISAoFR5cs3TFrcMhv4kbmkICrYcXw==","shasum":"d9e617c60c5410fa2c7031fbd1f580b5a3d7462b","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.136.91e3d56.0.tgz","fileCount":6,"unpackedSize":10453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF2c+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmring/8CqVrjj+TAmm8inWtTpiXP9ipDlhZnrXseJcs2dMP/quBWnzH\r\n8Dt6Knh0ihXkpsl0BEUeObJ8zHNMzzwlQeum2DbWawMDha9dwff/qPvUfAMX\r\nhXcds8sXUZ7+3sMZsX/2mheep1Xdi9kaQdirjC3gzrgCb17tXH2oWd8ob97e\r\noafBbp+ke1AR5M2ZzZWRx85i0bxNLPsW6NoGCcZCcXDYvej/x59jfKsDGOeJ\r\nEiGfGH+pB2Ssvdc+GDKLnxkZ/9asW3nRfBaPoOtGj3bPHlBPZbhwf/sgwMPz\r\nbUVlE3otyyefO7jqDcUoD4igpguHgH/X+iwvktKHDnk1XdAux5y1I68/+LfC\r\nuyzYQWKRUzZ65f+rvEJwrB6Dhl7HQnN+A0Q9mg5Rb2V4y2ySPVcMboB3ZmnG\r\nF9EKfXFWC3JP4ZI8gsU/qRoqGxU0w0UCctJmASLjir3KDZvdBG0PqFtr+3Xl\r\nsAyjl8hkClDlc3a08wIy42qjrdkSoXvv4cIHMBnMSzjxGpEbvZkglu3aEP0I\r\no/lnCbdkD1bDB/Nd3bibSMFo5NBXtx6aUn7FE8DbOUPsTyr911PWPRAfgrCe\r\nd0H8h5MMpZnn3JBpOr70h0MazcQdmvnKU06rj3Pm70ZftDLorJZ5Rey1Xb9D\r\nlDqgpEgKnnoljLR5k2m6HibRcd64D1jpTyY=\r\n=KEuZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBiDIUXEomF1d4oL0GKF2Bf9fvXPATwL0AUbjESqY0QWAiBLm4FEwQUHFRrZXanzRu2QIrtX1SI9m3Hf5Ty/Ljf8kg=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.136.91e3d56.0_1645700926206_0.4519106120025207"},"_hasShrinkwrap":false},"0.3.0--canary.137.04897c8.0":{"name":"@code-hike/classer","version":"0.3.0--canary.137.04897c8.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.137.04897c8.0","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"04897c8d9f869739a3a456fe922999ea39818806","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.137.04897c8.0","_nodeVersion":"14.19.0","_npmVersion":"lerna/4.0.0/node@v14.19.0+x64 (linux)","dist":{"integrity":"sha512-kCnqVAeYsuzT7H0PuPTDRQtG6cX5CRuXimzqZswPY8kmsInS5lsgL0wEM0OtjOC8Y8uAZYTFli0GkvvhYUpfuA==","shasum":"167541c83e835b26d664e676f72d9c0c19497cd6","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.137.04897c8.0.tgz","fileCount":6,"unpackedSize":10453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF6NfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmozUw//SRte66C0gq+4gZ9Ow+EeqHhGY4OpcyEdR7qS4ZWwYUaJnVwb\r\nY8YDwc+lpclJM+GgDa4sgBLRkD1VLoGCPwGmHFQLLOlQ3RWI+uviZk3+EngF\r\n29JOUzjUFxck1ZLW5AIl/OvWafSbm5Fbr2o5SfrB+qw8nXOswcuY5WwBBf6c\r\nqR7T2+rw/FYZEPHYihd4mO8NOOBKMR69VOTvgK2/GAjbUnp8emjmMSZjAxJ7\r\n6xYTmPQYWcIfTpfosX6CYnV3vmeyXwO7tUnqRi4dj6HOyIiidqjBqPsexRao\r\nnHSkz8tW/Js9i9fFMYcbrxhoCwqGjLOe6bIYHM3aikIfFyJ3/vz2HS9SxEPN\r\npzH2q1XeiOjsPvPRNKVAhRo6uKAy2KaSNMUEj0jhXwgtKsNsuEOsTHrxCA96\r\nx1EMIlr6fEXvyYkDufAXK2yQHGlMXzhp0uLNKdgQNTFIHaHgDamtFLbSfK4w\r\nFKXpLXzhaFaRm35qUsdtkoQ8n5hxwB5c0TFjpHdu5QO7/qTJwdVLbb+iyIl9\r\nUxynZ62gDzGyVtQsztFwqDtLGht1jgZc0S869vMhEgTEAkV9ThwjOgh9Hgj2\r\nCLQnABzpjT22M3uTLoEbfxy6dU1sLMFkY8mYGVEVeCroug3VqJTTmGGm0Bv4\r\n5NQtDr8Ejx9U1JeXB7x+av9/3LtMb9QQQaU=\r\n=Dy89\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4RB1pMir0Sb2sRyQAZOgxyzo8jCqqU5To5lZX+9k34wIhAICTML79EoR/zeTfI2HuRZtDPcdEVMzfb0W3vhzlbTqR"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.137.04897c8.0_1645716319185_0.44526019785696436"},"_hasShrinkwrap":false},"0.3.0-next.27":{"name":"@code-hike/classer","version":"0.3.0-next.27","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.27","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"0138068772d700880a75b287d9ee9d60ece5ac41","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0-next.27","_nodeVersion":"14.19.0","_npmVersion":"lerna/4.0.0/node@v14.19.0+x64 (linux)","dist":{"integrity":"sha512-xWEE9JXETIxTnRKpm27eBraOgXxZ5c8go9ez1t/oP03lN9IquVeNkcuI4W+dvTHMWFZyQOXbvhyIcJfmfjS26A==","shasum":"c364f5805446a5232c58fe6e08d00acec8e233c1","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0-next.27.tgz","fileCount":6,"unpackedSize":10425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF6YvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpaTxAAj/5NM1qOJ17hnhppDJUyisthMYMMSSYCq66dJ91D9WAAEejX\r\nOSkvLdNFcIOdDrntgKTTrKNVY3OOzvYWLVHEcLBtj363imoUWjrMPh96b/Jf\r\nhL4QsUtFGuqE1y262MG7pqYx1f/11Ebs+N3fugescQj0nNGOnQCrpkV8QSX/\r\nF43j6k/qUXCB6tSS0osrdjtiFCQQV7BOSJ2JYSq0NjTNHlVL9+8RuEu8exMS\r\n5HWe9p9W2Pihvd+9Fe0t7alSbKnCA89kzCmCRREaP7KkJLPG2U4IH63iR7g+\r\nQxLSAKMO8/ZdI7r9Ff2tdvCqlx5iqNcF9UQb77gb24pLgW3HjwPO2VxM+LlJ\r\nqPwpu2o8WPwYJxZ2p7GyKb1da5mGk5DU+KBf4oNo/QZe8225JqjRgW7aBrbg\r\ngzCvTf7S5dTQy1W5rx5FHa6vh2hIwbQC/yckxCGzPhabl59RntAaaLq3Xwpn\r\nzT2pxuHMPA+liVkTZdpjuIaRk3gO1r7obBTv/L1Va0y0IbrF0XytacE53F5n\r\n0jlmObj3/WzmaNqcQUVhtK/Rnu1hpBHn6NVvJbM4pRtMvILxc/FwsdB1rxlz\r\nnY8oZio1Y0Mr3S4XbDUlQ+RmYZZmQ6Mz+RAmrvIriaLEHdpcRDefYFo5SZye\r\n93vCIAiGs7bPrsHqsK/t/dZCA+L9Rde6QvQ=\r\n=vnEL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHTpTxptaNSr4BRq6OwZhLkJ9GEE6X0T3p9xFR6piyxgIgBjKZJHkl8SdscQzYE0YwC8HqcYVMoul078K3csdfXYQ="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0-next.27_1645717039534_0.43005258624629383"},"_hasShrinkwrap":false},"0.3.0--canary.139.45d5e45.0":{"name":"@code-hike/classer","version":"0.3.0--canary.139.45d5e45.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.139.45d5e45.0","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"45d5e45f79085154ca0b49cf4721bbe0a24ace93","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.139.45d5e45.0","_nodeVersion":"14.19.0","_npmVersion":"lerna/4.0.0/node@v14.19.0+x64 (linux)","dist":{"integrity":"sha512-6X9mBR9G60Zds8tm9g/EG2ybP2Ka/9NCeG4hXMKYZj7Z7LBI5JUDSEJnsrhtEsBNjfq59n8bGFYd0cj5MFwNpg==","shasum":"7375a7dffaa725e2684723a4ff8b3bb3de7b519d","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.139.45d5e45.0.tgz","fileCount":6,"unpackedSize":10453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHfy7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqidQ//VkFoa6WcAzTxDylJLee2l06aPdzXtBtZ7vguITM6Zsy0EV8e\r\nxpWVx7r1VFj5LEM8Tb7MOJF84fRrxiLz1wlHZqQNxCCL39THHdF60IvYitiW\r\nboENbJj3gfkK1SUMCwt2XKpVl/BNVm0cOgncXxqf1O3Z7XygQcaCQ77r/sEF\r\nGgvtZdSz4P0RNyuHAtqCNzdEEbOhumqaPM9dKMnentBEawLQRuFRLCTXVqan\r\nsAwhxtVz4mIinulupTpXfud2j/wkC9bobjKPN6BBS4GpliYw+wvrR+LXD8r2\r\n0ITfRDmXA4KGCM2OkR03Ni6F2E1cgSeeXreFfU2A5vBwOsKdukyV+/qfzZNN\r\nlktw61eAqURbf7Ax7/2t6L6CJN8KgH91h2/fFwq1uQz0VJchE8hzEd7NPuqj\r\nV0bhCHnz7+HKE4x1OXDIIB60f8lX8ldvOk/9jwuQEz8u7RuvXQCnxIx5KFxa\r\nf5sMyHlAanvlKMIrDu9pwOWB07djVnOpgCXsMxIaDq7jNkWklyq7T+03NZvr\r\n2mGx/CFdW03FYkrAHn9k8CJI5Pv+t7srgYmWEUdAdTd6+dH1kaSi3jRnHOeV\r\n6AagW7oWK/GlQW30s1D3afNUneNm+oaHTkbRgv1mwpvpjA6nF3d4ZTIMXqzg\r\n/FHcdLgX4/Z+wC4GQdIDmdA2+RrmZdiIBLE=\r\n=AKN1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCo/h/QiKHCsbVmnkx/PrtelY+rqScfEFfA0joBfnzPMwIhANaWvOzLHXrEq0r0fnmEcr/LrJogfLDLhpfVRN91x9ZS"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.139.45d5e45.0_1646132411080_0.17466870102113563"},"_hasShrinkwrap":false},"0.3.0-next.28":{"name":"@code-hike/classer","version":"0.3.0-next.28","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.28","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"edc97e07567ff3642fadbcefad2e03e669932869","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0-next.28","_nodeVersion":"14.19.0","_npmVersion":"lerna/4.0.0/node@v14.19.0+x64 (linux)","dist":{"integrity":"sha512-JC1IqHCJCxGwvXrYB4NyjjCAdKJciq5DlP7lO3UeLeqaoQ+nGZvLilIDrZWifF+n8JDIzZrzpchCEjXFjFfjlA==","shasum":"e8121af1e9f0128ecaabf7ccefc37236ce5692fd","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0-next.28.tgz","fileCount":6,"unpackedSize":10425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHgPIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZGQ//enYCNbkpNTgDfsc6/hIzbNt3d8ApWUMjnEGE2ZrNWuxT0vvQ\r\naek7rADSDWtoK0rxzIbkOlslfXv/mP9NoHrpAb1cmhQT3SmwVr8k2PNUPer8\r\nVdOD9wMcuRoFReIvkqAEvOsCE50q/wGqu4eaAqueroVu4nglEX/Oo7YsBeQk\r\nTETxTx/uDZVtfPUyoWwN17OEVeLMKY6jQ6lJQpuh8YX/lSy7Pl23IOwonW+w\r\nui/4oTuNIfH5A7VsStypTl0oqG6zpSHDdSN77usd+DJ4/4ce2AfiWuo0zdCL\r\nABRJ0Ca6cYtDMfj7AHpP/sTIcz2AfrdoCVP6gD6AglcY8WI1g/YSIUAgjlhk\r\noMOHKmuXZeOk5+kmKTX1c6c0BV6v16ARzHUf/nU57EiSh+UoQhR6aSChszEa\r\n4nBbUPk0l+khzdxH2zZj8LO28fvzMbT8UcHNhsJlKb/k6wryjogiB9F29147\r\nPj+PPlhKH4giT869jPqzHXUvvPfC7JNLtZQhwX7YLZ3GgOuSg/aVg58rFDhi\r\net87s872XAOTUoTbRHNHN99Fuy0+NPacnPcqMsgHq3iJqcZFX4b9avfDE/Sr\r\nxE1aG5twNnxUxJdmvCwVOivY5Jy73ol/8T1w68v7uoqtklAuwmwuBGzn1Vd9\r\nLOneb1bz6WD153Yvq1cXGc/dg6XRZ0AL/n0=\r\n=DgHe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICBy+iNm19Br7twdxFqFL0/JJQgnxiYmTLVsir+PwBkNAiEA0qZIl1osnWhc0JbjZLo4aX4IAGys8kWspzPKGpf6bxo="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0-next.28_1646134216715_0.8070176791249326"},"_hasShrinkwrap":false},"0.3.0--canary.143.e149ea9.0":{"name":"@code-hike/classer","version":"0.3.0--canary.143.e149ea9.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.143.e149ea9.0","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"e149ea9d1e6ed42004dc25bf7fa951461ceda8fc","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0--canary.143.e149ea9.0","_nodeVersion":"14.19.0","_npmVersion":"lerna/4.0.0/node@v14.19.0+x64 (linux)","dist":{"integrity":"sha512-0/RKZiK014Q5sYW1+T8CdnAOEFKN1+sr+hUkBHae7+QS47hZ70EBe4J+GBCexNSOQIVZ4n084WWA5LSJxSCwUg==","shasum":"8baa4cd8dbb0a7498b8a7c4be6967b2d7ba8a8e4","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0--canary.143.e149ea9.0.tgz","fileCount":6,"unpackedSize":10453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIJ/iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpVlQ/+PimU9k1usAu7xYSHAVhFzk5bewtPTYBBBdcZ8e5QaM0sxXkp\r\nWuHpwei5MUyqtQV8Gb9avrmftmbKjIkz042lSFhUeEWg1qJ1WCK5zD45Jk33\r\ntBgAgtgbyftdE3LvZTP39Hgxp0LKkHc7c6LW2EJ/PCrqL4zgwxNaQYojGFkM\r\nAkhiQTi0oOcZlHSS3JHmC391zfMKwAfMwVjIDRVfrCN1gNbTdFFWCO6zIeCr\r\n6tM2MvBv+3d8svy+v7dDMQng0keJUgivMtAECIQPTCOpZHrzDqvo0O7pBWzU\r\n1iupDVUUBmdUXYSF2vyenUxGv3umaQxm0mgyLMRomYNi0bIokKoYheRiKGRB\r\nKjQk34/MhdnnVaxRjkxp+Lx+4c+OYnzo4yJCqaNBY0qRfrSnZhinQ0plYt5L\r\nkOKXokD5RFLKJe2DdwUxEYJ07B6RJIL3XRE/FRlg+nD0VbsCAaIg8jirGEbk\r\nsqJPrx9FhYRep0LKagQKYoTn4FA3p+oi7VpITSzmDjNIgMoJzfAfm4z61fSL\r\npaEUmD0mJFL4XABLyVC0Dxbb84TJncX7NQFTkDgcboaS4UqHsiz16WtALo/L\r\nzXi9mixCr3Hb7XfQjeXPy1n5ctf2eow1oHkVbA/y+Ilo4VUuXjsYPMJALkmn\r\nA3gY+p87uZRyNAt1Grk9W6w+YEJTbWaGPB8=\r\n=3HW8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA+GZGbemfYZLeb2MoF8E+mhfpSoratl745zqkUbJaoaAiEAjh2tYsHJIa7u4dbHDCVdrpiYB46xdSM3jLv8KMGE+1I="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0--canary.143.e149ea9.0_1646305250613_0.6140855191834289"},"_hasShrinkwrap":false},"0.3.0-next.29":{"name":"@code-hike/classer","version":"0.3.0-next.29","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.29","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"4659155fee2ddb781b41ea02cd2dae72d2f78a4f","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0-next.29","_nodeVersion":"14.19.0","_npmVersion":"lerna/4.0.0/node@v14.19.0+x64 (linux)","dist":{"integrity":"sha512-YYhjvK0pv9etSWj48G2+elsCT89l0wX8vUwyAVzPKR+DkN0drDDv5Gq41BEbVA1JGSKfxHN1wj239PYYVJWyJw==","shasum":"2e1bf857cc99ae37f00ddd1b2182cea6e965aee3","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0-next.29.tgz","fileCount":6,"unpackedSize":10425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIKL4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqbpg//Vkjxct7KYQjYVDGqqKs+dmlo0ke+1lco3sH3ij6z2u3qjMMZ\r\n1VD3RBoRcRWnh6RgDjYnujPL/TPkGW+L9p6Kk087fTAvd9xVnNWbFlfEmD9u\r\n8mN7GO6fpj2fHw7w2HnYuCPc+vsEhJY4rypzBjzITQNVjDLqyfuqv4ITZqIH\r\nTLLGkmPZWQ9OUr9rAvYNEfkW/tPlqd39UVO5HTScnxFOPXOnzslkTXOVBkiP\r\nqvprPg7WoOjy5kvrnlt7YzLE5jrwCwb2pNphkrGK478MLgds5TGoTrTRwr1f\r\nwEN7YzUu2lzdTOYETTOso0Qgtqp+CBHWT1DqAmf664SN+H6P1H5GswYvf/Aj\r\nuPxYylEO+QNIblzhRMsB7L+zmtPINQ9G/psNF7oZNz+fD27ayFIQUbgId0ls\r\nIQBV4gQleuJIaSkwE1XnCTXK/fsUZWM37HPiVUhgy/EjgWSqH3TKzV1B+JXP\r\nn8WFrmBMZN2KjTyYuAb2Tv0K11h109NLkWE9/PCno4FQR/JoudXC1hYCzcDg\r\nqk9+ke67SUtqhS4hFfY60Yqbz5O/XJEM9vLo3oBhwmwr7gkLecJTIQaEqV86\r\nDMlFYA+6m+kQOd1gQ3hNDu0SDj/12FjFJ5OC4fvm33+ESBP6+yGXtoE3LvBO\r\nqoIbVl9u+PPmaVb+AQEuhXZm0mSbmq4oDkA=\r\n=jh3f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIElvujHw5dz438827QPiwtpu1NsXd820LTHQCt+Pd8B/AiBZh7U7eLIjPz74gGKN81gCFwB9Ef/SxEfvnjyqEIl2+w=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0-next.29_1646306040800_0.9354568726777823"},"_hasShrinkwrap":false},"0.3.0":{"name":"@code-hike/classer","version":"0.3.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"^0.3.0","@types/react":"^17.0.2","react":"^17.0.2"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"0ffc2950cc2cba8295568ee91ea7649e80afe58d","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/classer@0.3.0","_nodeVersion":"14.19.0","_npmVersion":"lerna/4.0.0/node@v14.19.0+x64 (linux)","dist":{"integrity":"sha512-kT6cRR1H7KCSXiPEAI1I5qUUBhQVIQwViSlhTkzQdkzOc0f/4TxRBWYfEby2ICItqELXPHFf/tSlU9uSUKf3pg==","shasum":"030e16dbf06ec91c6c18d8dce08d3d010b5b4424","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0.tgz","fileCount":7,"unpackedSize":12459,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIQXqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrjiw//TsdnxWSIlhPWNP1lzRjMPG0gWhOO6DQBo0atbgXv/UkXRYgQ\r\nGKo4b8zOMI+7fM0npJVP4AQiZI1a0S4nohq71X4R++WGjJdcr+LQqPNE3tZI\r\nNjPiFZnKogzqposgo+R1ne+DIToTprvtkpueyl8Z3u4M6umu/hh7i/R9MI2z\r\n80MOCco0yIhAVvw0rG7bfBUSVtvFYaUlseYadHzUfLk5AHaun5qriN7Rj/ed\r\nmZiNXY9iDChYwTclgBr/kDMeBPZBR+T+FJnoKXobnyO/oNiwhLRO/g567a65\r\nxrgXRBsImLaeZc4oAj1wR3dk9CyIVOlBb77QLXHYfagPgyTPi6xCj7p7/yGd\r\nHZgiY0/BTW/kEI2H5KkzyvfyET5VM4HkZ1wncrrxBHu72aAzLgdicHgYjSRN\r\nkUDWGklGqiunYKT9yMos9D5IIdoMRjF4HrdgSHRgW5HTvS+GNqns4hwtGCM6\r\nWzIJEAYDMDQ89GsZPFe9CIguTfA6K5nL+r3WLpEMUtLU8CF7Vlm0XpS+IzVK\r\nSSMyE+bXaSBDsLstVwRPyXNKE5SCZWH9tgCT9P/SsqA8VIQO665z15YZNTQw\r\nsxiNuzuFhzKmnEm3MRoCD3nCVdwQeUT3dlBIvqjfyv0sogcdtFcRX8xGhaSN\r\nItjAe1QtpGsUchHeQm8oEEfHL9jnp6FnTug=\r\n=LSqE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYIGC+ookirRg3AJz8TJU9HqY78VM8W8hSst7b/Zr6lAIhAKutvYlf+oONu/j1oF3bdg+1bb9UM1aQmo2m2s/g1O4c"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classer_0.3.0_1646331370672_0.383748041446355"},"_hasShrinkwrap":false}},"time":{"created":"2021-02-17T18:11:13.033Z","0.0.0-aa6efee":"2021-02-17T18:11:13.465Z","modified":"2022-04-04T23:57:04.464Z","0.0.0-cde697c":"2021-02-23T18:17:34.954Z","0.0.0-1f0ad83":"2021-02-24T18:28:09.826Z","0.0.0-e48fa74":"2021-02-25T22:58:41.663Z","0.0.0-2c9642f":"2021-03-01T03:17:36.570Z","0.0.0-6a4ea1c":"2021-03-01T03:25:47.624Z","0.0.0-4333a8b":"2021-03-08T02:10:11.830Z","0.3.0-next.0":"2021-03-11T18:27:15.569Z","0.3.0--canary.32.323f72f.0":"2021-03-11T23:13:05.614Z","0.3.0-next.1":"2021-03-11T23:20:46.791Z","0.3.0--canary.34.f4f0bfe.0":"2021-03-12T00:28:22.309Z","0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0":"2021-03-14T18:07:16.338Z","0.3.0-next.2":"2021-03-14T18:20:44.825Z","0.3.0--canary.45.6c84da7.0":"2021-03-23T07:15:35.517Z","0.3.0-next.3":"2021-03-23T07:25:45.357Z","0.3.0--canary.47.52daf46.0":"2021-03-23T17:52:04.793Z","0.3.0-next.4":"2021-03-23T17:57:53.115Z","0.3.0--canary.49.d3183ba.0":"2021-03-24T22:54:14.557Z","0.3.0-next.5":"2021-03-25T03:49:05.291Z","0.3.0--canary.56.84f43ab.0":"2021-04-05T15:05:56.396Z","0.3.0-next.6":"2021-04-05T15:10:47.343Z","0.3.0--canary.58.8628c34.0":"2021-04-06T14:41:15.979Z","0.3.0-next.7":"2021-04-06T14:45:08.326Z","0.3.0--canary.59.324d15c.0":"2021-04-06T22:14:26.901Z","0.3.0-next.8":"2021-04-06T22:18:41.896Z","0.3.0--canary.61.e6f2135.0":"2021-04-08T22:53:06.831Z","0.3.0-next.9":"2021-04-08T22:59:18.191Z","1.0.0--canary.67.ea5ba8b.0":"2021-05-12T00:45:37.728Z","0.3.0--canary.67.ceecca5.0":"2021-05-12T22:56:44.395Z","0.3.0--canary.67.10dbf6e.0":"2021-05-13T18:45:23.248Z","0.3.0--canary.67.a667d8e.0":"2021-05-13T20:25:15.290Z","0.3.0--canary.67.014d9f0.0":"2021-05-26T23:50:09.476Z","0.3.0--canary.67.059c384.0":"2021-06-09T18:26:44.296Z","0.3.0--canary.67.8191339.0":"2021-06-17T16:10:26.919Z","0.3.0--canary.67.0da7533.0":"2021-06-24T18:30:44.674Z","0.3.0--canary.67.b6f3cda.0":"2021-06-24T19:13:41.264Z","0.3.0-next.10":"2021-06-26T15:04:00.434Z","0.3.0--canary.67.2246098.0":"2021-06-26T15:39:25.421Z","0.3.0--canary.75.a98c407.0":"2021-07-11T14:28:27.708Z","0.3.0--canary.75.b3e0bf9.0":"2021-07-11T14:42:32.025Z","0.3.0--canary.75.9e3cd0e.0":"2021-07-11T15:25:14.060Z","0.3.0-next.11":"2021-07-16T11:42:42.277Z","0.3.0--canary.77.ade5d72.0":"2021-08-07T11:55:58.477Z","0.3.0--canary.77.e1fb282.0":"2021-08-08T13:53:50.669Z","0.3.0--canary.77.87864a9.0":"2021-08-11T14:09:56.520Z","0.3.0--canary.77.6c844fa.0":"2021-08-12T13:12:23.852Z","0.3.0--canary.77.c58a10a.0":"2021-08-12T13:33:48.736Z","0.3.0--canary.77.2395a40.0":"2021-08-16T16:24:14.063Z","0.3.0--canary.77.dc9c2e0.0":"2021-09-11T11:39:07.675Z","0.3.0--canary.77.045c5cf.0":"2021-09-20T21:22:03.133Z","0.3.0--canary.77.8e9455c.0":"2021-09-23T16:32:10.103Z","0.3.0--canary.77.2616b6b.0":"2021-09-25T20:28:53.424Z","0.3.0--canary.77.3bbe788.0":"2021-10-04T10:27:45.269Z","0.3.0--canary.77.4c6fb89.0":"2021-10-04T10:33:28.185Z","0.3.0--canary.77.979e373.0":"2021-10-04T10:37:31.459Z","0.3.0--canary.77.122e7ce.0":"2021-10-05T10:46:14.337Z","0.3.0--canary.77.60a8361.0":"2021-10-23T08:00:27.068Z","0.3.0--canary.77.cd9e81b.0":"2021-11-02T21:19:22.229Z","0.3.0--canary.77.790e974.0":"2021-11-05T15:48:48.326Z","0.3.0--canary.77.e9bb465.0":"2021-11-07T10:50:08.545Z","0.3.0--canary.77.bd15ff1.0":"2021-11-08T13:31:39.093Z","0.3.0--canary.77.7150a39.0":"2021-11-09T18:12:27.485Z","0.3.0--canary.77.1351c85.0":"2021-11-19T14:43:42.400Z","0.3.0--canary.77.59321d0.0":"2021-11-21T11:42:13.587Z","0.3.0--canary.77.c8f7b29.0":"2021-11-22T11:32:40.012Z","0.3.0--canary.77.eda31ba.0":"2021-11-25T10:13:50.027Z","0.3.0--canary.77.5617b6a.0":"2021-12-02T11:33:52.837Z","0.3.0--canary.77.15bb99d.0":"2021-12-02T13:22:32.483Z","0.3.0--canary.77.efd8888.0":"2021-12-02T13:24:03.674Z","0.3.0-next.12":"2021-12-02T13:24:18.728Z","0.3.0--canary.86.f0a55af.0":"2021-12-04T14:10:33.377Z","0.3.0-next.13":"2021-12-04T14:22:01.917Z","0.3.0--canary.94.2112ee3.0":"2021-12-09T11:27:37.272Z","0.3.0-next.14":"2021-12-09T11:43:45.331Z","0.3.0-next.15":"2021-12-18T16:08:15.098Z","0.3.0--canary.98.5c1465b.0":"2021-12-24T13:21:36.985Z","0.3.0--canary.98.d32feb5.0":"2021-12-25T19:37:12.196Z","0.3.0-next.16":"2021-12-25T20:21:53.142Z","0.3.0--canary.99.1f33495.0":"2021-12-26T16:32:35.935Z","0.3.0--canary.99.4abcdea.0":"2021-12-27T21:31:12.548Z","0.3.0-next.17":"2021-12-27T21:47:06.277Z","0.3.0--canary.103.faafeb2.0":"2022-01-06T20:43:50.012Z","0.3.0-next.18":"2022-01-07T20:45:36.896Z","0.3.0--canary.105.d3f27ad.0":"2022-01-07T21:42:25.819Z","0.3.0-next.19":"2022-01-07T21:49:32.383Z","0.3.0--canary.111.04b44e6.0":"2022-01-16T18:16:42.642Z","0.3.0--canary.111.a1cf9e4.0":"2022-01-16T19:15:17.096Z","0.3.0-next.20":"2022-01-16T19:23:33.526Z","0.3.0--canary.116.7b3a2f1.0":"2022-01-24T14:50:21.003Z","0.3.0--canary.116.c7cd6ea.0":"2022-01-25T16:49:38.662Z","0.3.0--canary.116.21b32dd.0":"2022-01-26T14:16:33.969Z","0.3.0--canary.116.0186a87.0":"2022-01-26T15:08:30.995Z","0.3.0--canary.116.9c7c33a.0":"2022-01-26T20:07:04.504Z","0.3.0--canary.116.f0bb3a7.0":"2022-01-26T20:49:01.935Z","0.3.0--canary.116.11d0cf6.0":"2022-01-26T23:06:27.845Z","0.3.0--canary.116.d35381d.0":"2022-01-27T03:02:36.041Z","0.3.0--canary.116.ba9be7d.0":"2022-01-27T15:30:19.622Z","0.3.0--canary.116.9a0c186.0":"2022-02-03T12:15:52.165Z","0.3.0--canary.116.056ec02.0":"2022-02-04T16:35:41.875Z","0.3.0-next.21":"2022-02-05T10:22:58.465Z","0.3.0--canary.124.5b2426a.0":"2022-02-06T12:06:03.928Z","0.3.0-next.22":"2022-02-06T12:15:23.284Z","0.3.0--canary.124.5f18de1.0":"2022-02-06T16:05:10.339Z","0.3.0--canary.126.19a4397.0":"2022-02-07T13:06:46.952Z","0.3.0-next.23":"2022-02-07T13:12:01.758Z","0.3.0--canary.129.a5da30c.0":"2022-02-12T20:01:28.835Z","0.3.0--canary.129.45448ed.0":"2022-02-14T21:20:14.859Z","0.3.0-next.24":"2022-02-15T12:29:04.530Z","0.3.0-next.25":"2022-02-22T10:22:53.824Z","0.3.0--canary.135.fbbee30.0":"2022-02-22T13:49:59.556Z","0.3.0-next.26":"2022-02-22T14:32:50.678Z","0.3.0--canary.136.91e3d56.0":"2022-02-24T11:08:46.359Z","0.3.0--canary.137.04897c8.0":"2022-02-24T15:25:19.338Z","0.3.0-next.27":"2022-02-24T15:37:19.671Z","0.3.0--canary.139.45d5e45.0":"2022-03-01T11:00:11.258Z","0.3.0-next.28":"2022-03-01T11:30:16.860Z","0.3.0--canary.143.e149ea9.0":"2022-03-03T11:00:50.946Z","0.3.0-next.29":"2022-03-03T11:14:00.931Z","0.3.0":"2022-03-03T18:16:10.817Z"},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md","description":"> Classer is a tool from [Code Hike](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"}}