{"_id":"@andarist/rtl-css-js","_rev":"2-67c59e77cc490cac89c3a9f18f630930","name":"@andarist/rtl-css-js","dist-tags":{"latest":"0.0.0"},"versions":{"0.0.0":{"name":"@andarist/rtl-css-js","version":"0.0.0","description":"Right To Left conversion for CSS in JS objects","main":"dist/cjs/index.js","jsnext:main":"dist/esm/index.js","module":"dist/esm/index.js","types":"types.d.ts","scripts":{"add-contributor":"kcd-scripts contributors add","build":"rimraf dist && npm-run-all build:**","build:bundlers":"kcd-scripts build --bundle cjs,esm --environment BUILD_INPUT:src/*.js --no-clean","build:umd:main":"kcd-scripts build --bundle umd,umd.min BUILD_NAME:rtlCSSJS --no-clean","build:umd:core":"kcd-scripts build --bundle umd,umd.min --environment BUILD_NAME:rtlCSSJSCore,BUILD_FILENAME_SUFFIX:\".core\",BUILD_INPUT:src/core.js --no-clean","lint":"kcd-scripts lint","test":"kcd-scripts test","test:update":"npm run test -s -- --coverage --updateSnapshot","validate":"kcd-scripts validate","precommit":"kcd-scripts precommit"},"files":["dist","core","types.d.ts","core.js","core.d.ts","core.esm.js","core.esm.d.ts"],"keywords":["css-in-js","ltr","rtl","cssjanus"],"author":{"name":"Kent C. Dodds","email":"kent@doddsfamily.us","url":"http://kentcdodds.com/"},"license":"MIT","devDependencies":{"kcd-scripts":"^0.16.0","npm-run-all":"^4.1.1","rimraf":"^2.6.2"},"eslintConfig":{"extends":"./node_modules/kcd-scripts/eslint.js"},"eslintIgnore":["node_modules","coverage","dist"],"repository":{"type":"git","url":"git+https://github.com/kentcdodds/rtl-css-js.git"},"bugs":{"url":"https://github.com/kentcdodds/rtl-css-js/issues"},"homepage":"https://github.com/kentcdodds/rtl-css-js#readme","gitHead":"97bbf55e68aa27f5b79a14845ff8a6375ff45a0f","_id":"@andarist/rtl-css-js@0.0.0","_npmVersion":"5.8.0","_nodeVersion":"8.9.4","_npmUser":{"name":"andarist","email":"mateuszburzynski@gmail.com"},"dist":{"integrity":"sha512-LVSV2tfUOrjrtlOlphtESzuP+NAHLuXJ7SXzobrvmJAaehSZj2CZigeE4s93p8SXjGsDB+mFgEyYdi3UMzTaUw==","shasum":"2c78d4552432db1b88bcf6f89cb7ce5f3efcdfe8","tarball":"https://registry.npmjs.org/@andarist/rtl-css-js/-/rtl-css-js-0.0.0.tgz","fileCount":22,"unpackedSize":193980,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCWuIzaFoueP9X9q3+W16y2LUxIaPbDMx74IiHQUFnsQIgUhTEhA5QHO6TO7laEcdzL68DCqWoC1kkH0TNDQcJOqc="}]},"maintainers":[{"name":"andarist","email":"mateuszburzynski@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rtl-css-js_0.0.0_1523609468424_0.24731033152697468"},"_hasShrinkwrap":false}},"time":{"created":"2018-04-13T08:51:08.378Z","0.0.0":"2018-04-13T08:51:08.593Z","modified":"2022-04-04T13:57:30.916Z"},"maintainers":[{"name":"andarist","email":"mateuszburzynski@gmail.com"}],"description":"Right To Left conversion for CSS in JS objects","homepage":"https://github.com/kentcdodds/rtl-css-js#readme","keywords":["css-in-js","ltr","rtl","cssjanus"],"repository":{"type":"git","url":"git+https://github.com/kentcdodds/rtl-css-js.git"},"author":{"name":"Kent C. Dodds","email":"kent@doddsfamily.us","url":"http://kentcdodds.com/"},"bugs":{"url":"https://github.com/kentcdodds/rtl-css-js/issues"},"license":"MIT","readme":"# rtl-css-js\n\nRTL conversion for CSS in JS objects\n\n[![Build Status][build-badge]][build]\n[![Code Coverage][coverage-badge]][coverage]\n[![Dependencies][dependencyci-badge]][dependencyci]\n[![version][version-badge]][package]\n[![downloads][downloads-badge]][npm-stat]\n[![MIT License][license-badge]][LICENSE]\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-7-orange.svg?style=flat-square)](#contributors)\n[![PRs Welcome][prs-badge]][prs]\n[![Donate][donate-badge]][donate]\n[![Code of Conduct][coc-badge]][coc]\n[![Roadmap][roadmap-badge]][roadmap]\n[![Examples][examples-badge]][examples]\n\n[![Watch on GitHub][github-watch-badge]][github-watch]\n[![Star on GitHub][github-star-badge]][github-star]\n[![Tweet][twitter-badge]][twitter]\n\n<a href=\"https://app.codesponsor.io/link/PKGFLnhDiFvsUA5P4kAXfiPs/kentcdodds/rtl-css-js\" rel=\"nofollow\"><img src=\"https://app.codesponsor.io/embed/PKGFLnhDiFvsUA5P4kAXfiPs/kentcdodds/rtl-css-js.svg\" style=\"width: 888px; height: 68px;\" alt=\"Sponsor\" /></a>\n\n## The problem\n\nFor some locales, it's necessary to change `padding-left` to `padding-right` when your text direction is right to left.\nThere are tools like this for CSS ([`cssjanus`](https://github.com/cssjanus/cssjanus) for example) which manipulate\nstrings of CSS to do this, but none for CSS in JS where your CSS is represented by an object.\n\n## This solution\n\nThis is a function which accepts a CSS in JS object and can convert `padding-left` to `padding-right` as well as all\nother properties where it makes sense to do that (at least, that's what it's going to be when it's done... This is a\nwork in progress).\n\n## Installation\n\nThis module is distributed via [npm][npm] which is bundled with [node][node] and should\nbe installed as one of your project's `dependencies`:\n\n```\nnpm install --save rtl-css-js\n```\n\n## Usage\n\nThis module is exposed via [CommonJS](http://wiki.commonjs.org/wiki/CommonJS) as well as\n[UMD](https://github.com/umdjs/umd) with the global as `rtlCSSJS`\n\nCommonJS:\n\n```javascript\nconst rtlCSSJS = require('rtl-css-js')\nconst styles = rtlCSSJS({paddingLeft: 23})\nconsole.log(styles) // logs {paddingRight: 23}\n```\n\nYou can also just include a script tag in your browser and use the `rtlCSSJS` variable:\n\n```html\n<script src=\"https://unpkg.com/rtl-css-js\"></script>\n<script>\nconst styles = rtlCSSJS({paddingRight: 23})\nconsole.log(styles) // logs {paddingLeft: 23}\n</script>\n```\n\nYou can also control which rules you don't want to flip by adding a `/* @noflip */` CSS comment to your rule\n\n```javascript\nconst rtlCSSJS = require('rtl-css-js')\nconst styles = rtlCSSJS({paddingLeft: '20px /* @noflip */'})\nconsole.log(styles) // logs {paddingLeft: '20px /* @noflip */' }\n```\n\n### kebab-case\n\nThis library support kebab-case properties too.\n\n```javascript\nconst rtlCSSJS = require('rtl-css-js')\nconst styles = rtlCSSJS({'padding-right': 23})\nconsole.log(styles) // logs {'padding-left': 23}\n```\n\n### core\n\n`rtl-css-js` also exposes its internal helpers and utilities so you can deal\nwith [certain scenarios](https://github.com/kentcdodds/rtl-css-js/pull/22)\nyourself. To use these you can use the `rtlCSSJSCore` global with the UMD build,\n`require('rtl-css-js/core')`, or use\n`import {propertyValueConverters, arrayToObject} from 'rtl-css-js/core.esm'`.\n\nYou can import anything that's exported from `src/core`. Please see the code\ncomments for documentation on how to use these.\n\n## Caveats\n\n### `background`\n\nRight now `background` and `backgroundImage` just replace all instances of `ltr` with `rtl` and `right` with `left`.\nThis is so you can have a different image for your LTR and RTL, and in order to flip linear gradients. Note that\nthis is case sensitive! Must be lower case. Note also that it *will not* change `bright` to `bleft`.\nIt's a _little_ smarter than that. But this is definitely something to consider with your URLs.\n\n## Inspiration\n\n[CSSJanus](https://github.com/cssjanus/cssjanus) was a major inspiration.\n\n## Ecosystem\n\n* **[react-with-styles-interface-aphrodite](https://github.com/airbnb/react-with-styles-interface-aphrodite):** An interface to use [`react-with-styles`](https://github.com/airbnb/react-with-styles) with [Aphrodite](https://github.com/khan/aphrodite)\n* **[fela-plugin-rtl](https://www.npmjs.com/package/fela-plugin-rtl):** A plugin for [fela](http://fela.js.org/) that uses rtl-css-js to convert a style object to its right-to-left counterpart\n* **[bidi-css-js](https://github.com/TxHawks/bidi-css-js):** A library for authoring flow-relative css, which uses `rtl-css-js`'s core.\n\n## Other Solutions\n\nI'm not aware of any, if you are please [make a pull request](http://makeapullrequest.com) and add it here!\n\n## Contributors\n\nThanks goes to these people ([emoji key][emojis]):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n| [<img src=\"https://avatars.githubusercontent.com/u/1500684?v=3\" width=\"100px;\"/><br /><sub>Kent C. Dodds</sub>](https://kentcdodds.com)<br />[💻](https://github.com/kentcdodds/rtl-css-js/commits?author=kentcdodds \"Code\") [⚠️](https://github.com/kentcdodds/rtl-css-js/commits?author=kentcdodds \"Tests\") [🚇](#infra-kentcdodds \"Infrastructure (Hosting, Build-Tools, etc)\") | [<img src=\"https://avatars.githubusercontent.com/u/63876?v=3\" width=\"100px;\"/><br /><sub>Ahmed El Gabri</sub>](https://gabri.me)<br />[💻](https://github.com/kentcdodds/rtl-css-js/commits?author=ahmedelgabri \"Code\") [📖](https://github.com/kentcdodds/rtl-css-js/commits?author=ahmedelgabri \"Documentation\") [⚠️](https://github.com/kentcdodds/rtl-css-js/commits?author=ahmedelgabri \"Tests\") | [<img src=\"https://avatars1.githubusercontent.com/u/1383861?v=4\" width=\"100px;\"/><br /><sub>Maja Wichrowska</sub>](https://github.com/majapw)<br />[💻](https://github.com/kentcdodds/rtl-css-js/commits?author=majapw \"Code\") [⚠️](https://github.com/kentcdodds/rtl-css-js/commits?author=majapw \"Tests\") | [<img src=\"https://avatars2.githubusercontent.com/u/6600720?v=4\" width=\"100px;\"/><br /><sub>Yaniv</sub>](https://github.com/yzimet)<br />[💻](https://github.com/kentcdodds/rtl-css-js/commits?author=yzimet \"Code\") [⚠️](https://github.com/kentcdodds/rtl-css-js/commits?author=yzimet \"Tests\") | [<img src=\"https://avatars2.githubusercontent.com/u/5658514?v=4\" width=\"100px;\"/><br /><sub>Jonathan Pollak</sub>](https://github.com/TxHawks)<br />[💻](https://github.com/kentcdodds/rtl-css-js/commits?author=TxHawks \"Code\") [⚠️](https://github.com/kentcdodds/rtl-css-js/commits?author=TxHawks \"Tests\") | [<img src=\"https://avatars1.githubusercontent.com/u/8528759?v=4\" width=\"100px;\"/><br /><sub>Ali Taheri Moghaddar</sub>](https://github.com/alitaheri)<br />[💻](https://github.com/kentcdodds/rtl-css-js/commits?author=alitaheri \"Code\") [📖](https://github.com/kentcdodds/rtl-css-js/commits?author=alitaheri \"Documentation\") [⚠️](https://github.com/kentcdodds/rtl-css-js/commits?author=alitaheri \"Tests\") | [<img src=\"https://avatars0.githubusercontent.com/u/844459?v=4\" width=\"100px;\"/><br /><sub>garrettberg</sub>](https://github.com/garrettberg)<br />[💻](https://github.com/kentcdodds/rtl-css-js/commits?author=garrettberg \"Code\") [⚠️](https://github.com/kentcdodds/rtl-css-js/commits?author=garrettberg \"Tests\") |\n| :---: | :---: | :---: | :---: | :---: | :---: | :---: |\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors][all-contributors] specification. Contributions of any kind welcome!\n\n## LICENSE\n\nMIT\n\n[npm]: https://www.npmjs.com/\n[node]: https://nodejs.org\n[build-badge]: https://img.shields.io/travis/kentcdodds/rtl-css-js.svg?style=flat-square\n[build]: https://travis-ci.org/kentcdodds/rtl-css-js\n[coverage-badge]: https://img.shields.io/codecov/c/github/kentcdodds/rtl-css-js.svg?style=flat-square\n[coverage]: https://codecov.io/github/kentcdodds/rtl-css-js\n[dependencyci-badge]: https://dependencyci.com/github/kentcdodds/rtl-css-js/badge?style=flat-square\n[dependencyci]: https://dependencyci.com/github/kentcdodds/rtl-css-js\n[version-badge]: https://img.shields.io/npm/v/rtl-css-js.svg?style=flat-square\n[package]: https://www.npmjs.com/package/rtl-css-js\n[downloads-badge]: https://img.shields.io/npm/dm/rtl-css-js.svg?style=flat-square\n[npm-stat]: http://npm-stat.com/charts.html?package=rtl-css-js&from=2016-04-01\n[license-badge]: https://img.shields.io/npm/l/rtl-css-js.svg?style=flat-square\n[license]: https://github.com/kentcdodds/rtl-css-js/blob/master/other/LICENSE\n[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\n[prs]: http://makeapullrequest.com\n[donate-badge]: https://img.shields.io/badge/$-support-green.svg?style=flat-square\n[donate]: http://kcd.im/donate\n[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square\n[coc]: https://github.com/kentcdodds/rtl-css-js/blob/master/other/CODE_OF_CONDUCT.md\n[roadmap-badge]: https://img.shields.io/badge/%F0%9F%93%94-roadmap-CD9523.svg?style=flat-square\n[roadmap]: https://github.com/kentcdodds/rtl-css-js/blob/master/other/ROADMAP.md\n[examples-badge]: https://img.shields.io/badge/%F0%9F%92%A1-examples-8C8E93.svg?style=flat-square\n[examples]: https://github.com/kentcdodds/rtl-css-js/blob/master/other/EXAMPLES.md\n[github-watch-badge]: https://img.shields.io/github/watchers/kentcdodds/rtl-css-js.svg?style=social\n[github-watch]: https://github.com/kentcdodds/rtl-css-js/watchers\n[github-star-badge]: https://img.shields.io/github/stars/kentcdodds/rtl-css-js.svg?style=social\n[github-star]: https://github.com/kentcdodds/rtl-css-js/stargazers\n[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20rtl-css-js%20by%20%40kentcdodds%20https%3A%2F%2Fgithub.com%2Fkentcdodds%2Frtl-css-js%20%F0%9F%91%8D\n[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/kentcdodds/rtl-css-js.svg?style=social\n[emojis]: https://github.com/kentcdodds/all-contributors#emoji-key\n[all-contributors]: https://github.com/kentcdodds/all-contributors\n","readmeFilename":"README.md"}