{"_id":"glamor-tachyons","_rev":"2998244","name":"glamor-tachyons","description":"A tool for using Tacyhons with glamor or other css-in-js libraries","dist-tags":{"latest":"1.0.0-alpha.1"},"maintainers":[{"name":"wookiehangover","email":"samuel.breed@gmail.com"}],"time":{"modified":"2023-08-29T08:40:52.000Z","created":"2017-08-27T22:36:59.452Z","1.0.0-alpha.1":"2017-09-21T04:35:29.414Z","1.0.0-alpha.0":"2017-09-20T21:46:36.028Z","1.0.0-alpha":"2017-08-27T22:36:59.452Z"},"users":{},"author":{"name":"Sam Breed","url":"@wookiehangover"},"repository":{"type":"git","url":"git+https://github.com/wookiehangover/glamor-tachyons.git"},"versions":{"1.0.0-alpha.1":{"name":"glamor-tachyons","version":"1.0.0-alpha.1","description":"A tool for using Tacyhons with glamor or other css-in-js libraries","main":"index.js","scripts":{"build":"node generate.js","lint":"standard lib/*.js","test":"lab -c"},"bin":{"glamor-tachyons":"bin/glamor-tachyons.js"},"keywords":["css","glamor","glamorous","tachyons"],"author":{"name":"Sam Breed","url":"@wookiehangover"},"license":"ISC","dependencies":{"lodash":"^4.17.4"},"devDependencies":{"code":"^4.1.0","lab":"^14.2.1","postcss":"^6.0.9","standard":"^10.0.3","tachyons":"^4.8.1"},"directories":{"example":"example","lib":"lib"},"repository":{"type":"git","url":"git+https://github.com/wookiehangover/glamor-tachyons.git"},"bugs":{"url":"https://github.com/wookiehangover/glamor-tachyons/issues"},"homepage":"https://github.com/wookiehangover/glamor-tachyons#readme","gitHead":"8a54e99d4965439fd0a86249b62d387d59e52f00","_id":"glamor-tachyons@1.0.0-alpha.1","_npmVersion":"5.4.2","_nodeVersion":"8.4.0","_npmUser":{"name":"wookiehangover","email":"samuel.breed@gmail.com"},"dist":{"shasum":"76c295f9c3bfad056a30341a5a9cea7ac865d78d","size":21295,"noattachment":false,"key":"/glamor-tachyons/-/glamor-tachyons-1.0.0-alpha.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/glamor-tachyons/download/glamor-tachyons-1.0.0-alpha.1.tgz"},"maintainers":[{"name":"wookiehangover","email":"samuel.breed@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/glamor-tachyons-1.0.0-alpha.1.tgz_1505968529343_0.8329261858016253"},"_cnpmcore_publish_time":"2021-12-21T03:48:24.330Z","publish_time":1505968529414,"_cnpm_publish_time":1505968529414},"1.0.0-alpha.0":{"name":"glamor-tachyons","version":"1.0.0-alpha.0","description":"A tool for using Tacyhons with glamor or other css-in-js libraries","main":"index.js","scripts":{"build":"node generate.js","lint":"standard lib/*.js","test":"lab -c"},"keywords":["css","glamor","glamorous","tachyons"],"author":{"name":"Sam Breed","url":"@wookiehangover"},"license":"ISC","dependencies":{"lodash":"^4.17.4"},"devDependencies":{"code":"^4.1.0","lab":"^14.2.1","postcss":"^6.0.9","standard":"^10.0.3","tachyons":"^4.8.1"},"directories":{"example":"example","lib":"lib"},"repository":{"type":"git","url":"git+https://github.com/wookiehangover/glamor-tachyons.git"},"bugs":{"url":"https://github.com/wookiehangover/glamor-tachyons/issues"},"homepage":"https://github.com/wookiehangover/glamor-tachyons#readme","gitHead":"2b6cbc1bcf46978a629e25958fe7176382ecdf0e","_id":"glamor-tachyons@1.0.0-alpha.0","_npmVersion":"5.4.2","_nodeVersion":"8.4.0","_npmUser":{"name":"wookiehangover","email":"samuel.breed@gmail.com"},"dist":{"shasum":"e92c4f21ee6eb3b783341659d2a2a5492eba889e","size":21039,"noattachment":false,"key":"/glamor-tachyons/-/glamor-tachyons-1.0.0-alpha.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/glamor-tachyons/download/glamor-tachyons-1.0.0-alpha.0.tgz"},"maintainers":[{"name":"wookiehangover","email":"samuel.breed@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/glamor-tachyons-1.0.0-alpha.0.tgz_1505943995954_0.35049219569191337"},"_cnpmcore_publish_time":"2021-12-21T03:48:23.263Z","publish_time":1505943996028,"_cnpm_publish_time":1505943996028},"1.0.0-alpha":{"name":"glamor-tachyons","version":"1.0.0-alpha","description":"A tool for using Tacyhons with glamor or other css-in-js libraries","main":"index.js","scripts":{"build":"node generate.js","lint":"standard lib/*.js","test":"lab -c"},"keywords":["css","glamor","glamorous","tachyons"],"author":{"name":"Sam Breed","url":"@wookiehangover"},"license":"ISC","dependencies":{"lodash":"^4.17.4"},"devDependencies":{"code":"^4.1.0","lab":"^14.2.1","postcss":"^6.0.9","standard":"^10.0.3","tachyons":"^4.8.1"},"directories":{"example":"example","lib":"lib"},"repository":{"type":"git","url":"git+https://github.com/wookiehangover/glamor-tachyons.git"},"bugs":{"url":"https://github.com/wookiehangover/glamor-tachyons/issues"},"homepage":"https://github.com/wookiehangover/glamor-tachyons#readme","gitHead":"514ffdddcce3b8361d124a9f1d52a08db739c878","_id":"glamor-tachyons@1.0.0-alpha","_npmVersion":"5.4.0","_nodeVersion":"7.9.0","_npmUser":{"name":"wookiehangover","email":"samuel.breed@gmail.com"},"dist":{"shasum":"2f3f8277f4b7f153f9c1abf3f2520558f3a1be5b","size":19936,"noattachment":false,"key":"/glamor-tachyons/-/glamor-tachyons-1.0.0-alpha.tgz","tarball":"http://registry.cnpm.dingdandao.com/glamor-tachyons/download/glamor-tachyons-1.0.0-alpha.tgz"},"maintainers":[{"name":"wookiehangover","email":"samuel.breed@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/glamor-tachyons-1.0.0-alpha.tgz_1503873419345_0.7275136772077531"},"_cnpmcore_publish_time":"2021-12-21T03:48:22.176Z","publish_time":1503873419452,"_cnpm_publish_time":1503873419452}},"readme":"# glamor-tachyons\n\n> A tool for using [Tachyons][tachyons] with [Glamor][glamor] or other CSS-in-JS libraries\n\n## Background\n\n<details>\nIn 2016 and 2017, we've been using Tachyons for a good portion of our CSS at Credit Karma. With a large number of front end developers, spread across different teams, all working on different pieces of the product in parallel, we've found some useful patterns for improving the developer experience of using Tachyons. Here's what an average component might look like:\n\n```js\nconst styles = {\n  header: 'mv4 f3',\n  main: 'ba br1 pa2'\n}\n\nexport default () => {\n  <div>\n    <header className={styles.header}></header>\n    <div className={styles.main}></div>\n  </div>\n}\n```\n\nWe started using this \"page object\" pattern to not repeat identical Tachyons `className` strings. The pattern helps with readability, especially when navigating another team's projects.\n\nIt's less cognitive load than our previous approach (webpack + sass + extract text plugin) and doesn't require an extra build step. Plus, it makes overriding styling for a shared component much easier to add.\n\nBut in several ways this pattern is less than ideal:\n\n1. **Lacks strong enforcement.** There's no guarantee that every tachyons class will make it into your `styles` object.\n2. **Relies on an external systems.** We load Tachyons through a Sass build pipeline in Webpack, so shared modules tend to depend on Tachyons implicitly to avoid duplicating it in downstream builds. Sad!\n3. **Reusable components require extra work.** If you want to reuse a component but alter some it's Tachyons classes, you need to expose extra props and provide a good way of merging them. No matter how you do it, there's more work to add a consistent, well-documented api.\n4. **Anything goes when Tachyons can't support what you're trying to do.** Inline styles, individual Sass files, and other imported sass/css modules are all across our projects to add custom styles.\n\nOn top of that, there are a few recent trends in CSS / browser performance that are hard to do in our current setup.\n\n* Removing unused styles from the payload\n* Inlining styles in the `<head>` to avoid blocking the render while CSS downloads\n* CSS-in-JS techniques are gaining traction and libraries are becoming battle-hardened\n\nNot to mention that our page object pattern is already CSS-in-JS! The natural conclusion was to survey the CSS-in-JS landscape and attempt to augment our in-house solution with some updated tooling under the hood.\n</details>\n\n## Installation\n\nInstall with `npm`:\n\n```shell\nnpm install --save glamor-tachyons\n```\n\nFor usage with glamor, be sure to install that too.\n\n```shell\nnpm install --save glamor\n```\n\n## Usage\n\nIn it's simplest form, `glamor-tachyons` changes Tachyons classes into JavaScript objects:\n\n```js\nimport { tachyons } from 'glamor-tachyons'\n\ntachyons('mt2 pink')\n// => { fontSize: '5rem', color: '#ff80cc' }\n```\n\n`glamor-tachyons` can also convert entire objects containing Tachyons class strings with the `wrap` method:\n\n```js\nimport { tachyons, wrap } from 'glamor-tachyons'\n\nwrap({\n  h1: 'f-headline red',\n  h2: 'fw6 underline'\n})\n// => {\n//   h1: { fontSize: '5rem', color: '#ff80cc' },\n//   h2: { fontWeight: 600, textDecoration: 'underline' }\n// }\n```\n\nAlthough [glamor](https://github.com/threepointone/glamor) is in the name, it's not required by glamor-tachyons. They're meant to go together, but there's nothing specific to glamor apart from producing output that it (and other CSS-in-JS libraries) can use.\n\nTo use with Glamor, simply pass the output of `tachyons()` to one of Glamor's APIs. It's easy, give it a shot!\n\n```js\nimport { tachyons } from 'glamor-tachyons'\nimport { css } from 'glamor'\n\nexport default () =>\n  <h1 className={css(tachyons('f-headline red'))}>\n```\n\nFor convenience, the [`wrap`](#wrapstyles-callback-object) method accepts a second argument that makes converting a page-object of Tachyons classes to Glamor one step! It's the same result as calling `css(tachyons(classNames))` for every value in the object.\n\n```js \nimport { wrap } from 'glamor-tachyons'\nimport { css } from 'glamor'\n\nwrap({\n  h1: 'f-headline red',\n  h2: 'fw6 underline'\n})\n// => {\n//   h1: css({ fontSize: '5rem', color: '#ff80cc' }),\n//   h2: css({ fontWeight: 600, textDecoration: 'underline' })\n// }\n```\n\nTachyons also has global styles that it needs in order to do it's thing. We didn't forget about those. The `reset()` method will pass each line of the Tachyons reset and global styles to a callback that works with [glamor.insertRule](https://github.com/threepointone/glamor/blob/6634946ed433bca8098a507022250717f8029029/src/reset.js#L1), similarly to Glamor's own reset.\n\n```js\nimport { reset } from 'glamor-tachyons'\nimport { insertRule } from 'glamor'\n\nreset({ insertRule })\n```\n\nTogether, `glamor` and `glamor-tachyons` let a component seamlessly and declaratively manage CSS composed by Tachyons classes. The following example, when server rendered, will include an inline `<style>` tag comprising the styles for _only_ the Tachyons classes referenced in the component and the global reset.\n\n```js\nimport { wrap, reset } from 'glamor-tachyons'\nimport { css, insertRule } from 'glamor'\n\nreset({ insertRule })\n\nconst styles = wrap({\n  header: 'mv4 f3',\n  main: 'ba br1 pa2'\n}, css)\n\nexport default () => {\n  <div>\n    <header className={styles.header}></header>\n    <div className={styles.main}></div>\n  </div>\n}\n```\n\n## API\n\n### `tachyons(className): object`\n\nConvert [Tachyons class names][classes] to an object of CSS properties. `className` can be a space-delimited string or array.\n\n```js\ntachyons('mt2 pink')\n// => { fontSize: '5rem', color: '#ff80cc' }\n```\n\n### `wrap(styles, [callback]): object`\n\nReduce an object containing [Tachyons class names][classes] to a nested object containing CSS properties. Allows multiple levels of nesting.\n\n```js\nwrap({\n  header: {\n    h1: 'pink'\n  },\n  body: 'black'\n})\n// => {\n//   header: {\n//     h1: { color: '#ff80cc' }\n//   },\n//   body: { color: '#000' }\n// }\n```\n\nAccepts an optional callback as a second argument, to be called for every key in the object. Offers an easy integration for `glamor.css`\n\n```js\nwrap({\n  h1: 'pink'\n}, glamor.css)\n// => {\n//   h1: glamor.css({ color: '#ff80cc' })\n// }\n```\n\n### `reset(glamor): void`\n\nApplies the Tachyons [reset and global styles](https://github.com/tachyons-css/tachyons/blob/master/src/tachyons.css#L28) by calling [`glamor.insertRule()`](https://github.com/threepointone/glamor/blob/master/src/reset.js) for each line of the reset. An object with a method named `insertRule` will work.\n\n```js\nimport { insertRule } from 'glamor'\n\nreset({ insertRule })\n// Side effect: global reset is now applied\n```\n\n## Notes / Open Questions\n\n* Where does the Tachyons source go?\n  * Tachyons is added to your JavaScript bundle in the form of a modular data structure\n  * Difficult to get around this\n    * maybe use a webpack plugin at build time to change the class strings directly into js and strip the dependency?\n    * maybe use a webpack loader to pre-process and inline an object of Tachyons classes by file name?\n    * or that webpack plugin that lets your inline output that exec'ed at build time could work.\n- [ ] Support Tachyons custom builds\n\nResearch / Prior work:\n```\nhttps://github.com/quora/parsecss\nhttps://github.com/hugozap/reverse-tachyons\nhttps://github.com/raphamorim/native-css\nhttps://github.com/Khan/aphrodite\n```\n\n[tachyons]: http://tachyons.io/\n[glamor]: https://github.com/threepointone/glamor\n[classes]: http://tachyons.io/docs/table-of-styles/","_attachments":{},"homepage":"https://github.com/wookiehangover/glamor-tachyons#readme","bugs":{"url":"https://github.com/wookiehangover/glamor-tachyons/issues"},"license":"ISC"}