{"_id":"bidi-css-js","_rev":"9-70e6588462bbb0893bf0f78c6494e882","name":"bidi-css-js","description":"Logical, flow-ralative conversion for CSS in JS objects","dist-tags":{"latest":"3.1.0"},"versions":{"1.0.0":{"name":"bidi-css-js","version":"1.0.0","description":"Logical, flow-ralative conversion for CSS in JS objects","main":"dist/bidi-css-js.cjs.js","jsnext:main":"dist/bidi-css-js.esm.js","module":"dist/bidi-css-js.esm.js","scripts":{"add-contributor":"kcd-scripts contributors add","build":"rimraf dist && kcd-scripts build --bundle --environment BUILD_NAME:bidiCSSJS","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"],"keywords":["bidi-css-in-js","css-in-js","flow-relative","logical-properties-and-values","ltr","rtl","cssjanus"],"author":{"name":"TxHawks","email":"TofuxHawks@gmail.com","url":"https://githb.com/TxHawks"},"license":"MIT","devDependencies":{"kcd-scripts":"^0.16.0","npm-run-all":"^4.1.1","rimraf":"^2.6.2"},"dependencies":{"rtl-css-js":"^1.4.2"},"eslintConfig":{"extends":"./node_modules/kcd-scripts/eslint.js"},"eslintIgnore":["node_modules","coverage","dist"],"repository":{"type":"git","url":"git+https://github.com/TxHawks/bidi-css-js.git"},"bugs":{"url":"https://github.com/TxHawks/bidi-css-js/issues"},"homepage":"https://github.com/TxHawks/bidi-css-js#readme","gitHead":"eabb1e8528e940d984ab40503aea374d4736cdc2","_id":"bidi-css-js@1.0.0","_npmVersion":"5.3.0","_nodeVersion":"8.5.0","_npmUser":{"name":"txhawks","email":"tofu.hawks@gmail.com"},"dist":{"integrity":"sha512-nrg2e9AvvC4xrfuic4LZ8b96tUgOzqhXIpAY3zo1ZT2bji2JBAGM4HJ/1uZ+hNTU/MSJ9DVEQ1YSemFztZ+zFg==","shasum":"ef20797d98ef08735a2df0425d9630e5b4e60380","tarball":"https://registry.npmjs.org/bidi-css-js/-/bidi-css-js-1.0.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEZdWWDIu4O/qBYNvIVbByJr0xcqB/VjOpnO3rlNmW7jAiAd+sV9gE4jZaItfb4GouLcq/t4mN/F1fXoz9536abKPg=="}]},"maintainers":[{"name":"txhawks","email":"tofu.hawks@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/bidi-css-js-1.0.0.tgz_1505742489507_0.3830146270338446"},"directories":{}},"1.0.1":{"name":"bidi-css-js","version":"1.0.1","description":"Logical, flow-ralative conversion for CSS in JS objects","main":"dist/bidi-css-js.cjs.js","jsnext:main":"dist/bidi-css-js.esm.js","module":"dist/bidi-css-js.esm.js","scripts":{"add-contributor":"kcd-scripts contributors add","build":"rimraf dist && kcd-scripts build --bundle --environment BUILD_NAME:bidiCSSJS","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"],"keywords":["bidi-css-in-js","css-in-js","flow-relative","logical-properties-and-values","ltr","rtl","cssjanus"],"author":{"name":"TxHawks","email":"TofuxHawks@gmail.com","url":"https://githb.com/TxHawks"},"license":"MIT","devDependencies":{"kcd-scripts":"^0.16.0","npm-run-all":"^4.1.1","rimraf":"^2.6.2"},"dependencies":{"rtl-css-js":"^1.4.2"},"eslintConfig":{"extends":"./node_modules/kcd-scripts/eslint.js"},"eslintIgnore":["node_modules","coverage","dist"],"repository":{"type":"git","url":"git+https://github.com/TxHawks/bidi-css-js.git"},"bugs":{"url":"https://github.com/TxHawks/bidi-css-js/issues"},"homepage":"https://github.com/TxHawks/bidi-css-js#readme","gitHead":"5b9d6680012d4509bd0db39f4eb64a4061f4f64b","_id":"bidi-css-js@1.0.1","_npmVersion":"5.3.0","_nodeVersion":"8.5.0","_npmUser":{"name":"txhawks","email":"tofu.hawks@gmail.com"},"dist":{"integrity":"sha512-lotksUKzn5aEcfluH75ZnQHKyeS6JZL/1HYde5GtagzFER8hHIie2DW1ZfRvW1amIlfFaTvIhiAmi8lJGEsipA==","shasum":"dfa206f4c4fefa74d4e77387737670cc8779074c","tarball":"https://registry.npmjs.org/bidi-css-js/-/bidi-css-js-1.0.1.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF+miiR5ZbUSlViu9mlgYP0+fmSzsB0asYXNNiKCPx10AiEA1GcXKQEeyxlD0IajvUXLd2LynRD5vNOWb9Eusl3KJyM="}]},"maintainers":[{"name":"txhawks","email":"tofu.hawks@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/bidi-css-js-1.0.1.tgz_1506111990646_0.6164705383125693"},"directories":{}},"2.0.0":{"name":"bidi-css-js","version":"2.0.0","description":"Logical, flow-ralative conversion for CSS in JS objects","main":"dist/bidi-css-js.cjs.js","jsnext:main":"dist/bidi-css-js.esm.js","module":"dist/bidi-css-js.esm.js","scripts":{"add-contributor":"kcd-scripts contributors add","build":"rimraf dist && kcd-scripts build --bundle --environment BUILD_NAME:bidiCSSJS","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"],"keywords":["bidi-css-in-js","css-in-js","flow-relative","logical-properties-and-values","ltr","rtl","cssjanus"],"author":{"name":"TxHawks","email":"TofuxHawks@gmail.com","url":"https://githb.com/TxHawks"},"license":"MIT","devDependencies":{"commitizen":"^2.9.6","cz-conventional-changelog":"^2.0.0","kcd-scripts":"^0.16.0","npm-run-all":"^4.1.1","rimraf":"^2.6.2"},"dependencies":{"rtl-css-js":"^1.4.2"},"eslintConfig":{"extends":"./node_modules/kcd-scripts/eslint.js"},"eslintIgnore":["node_modules","coverage","dist"],"repository":{"type":"git","url":"git+https://github.com/TxHawks/bidi-css-js.git"},"bugs":{"url":"https://github.com/TxHawks/bidi-css-js/issues"},"homepage":"https://github.com/TxHawks/bidi-css-js#readme","config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"df2f17e454fc9eb97e4cb793bbbd2392e478e355","_id":"bidi-css-js@2.0.0","_npmVersion":"5.4.2","_nodeVersion":"8.8.1","_npmUser":{"name":"txhawks","email":"tofu.hawks@gmail.com"},"dist":{"integrity":"sha512-K1HAare54zoYWNuXjkyr+6xfYKI8vz38Z3uPxjTzPyhGi8x5ITY1BqNJWKv8TiGHg4fYatJT/Ab7fMXn0GSN3A==","shasum":"b55b7098a9694225dc284c801eb72ad8da8d4e5c","tarball":"https://registry.npmjs.org/bidi-css-js/-/bidi-css-js-2.0.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE2/Q3M5yTRTjP51s1RqNMTGcdcDcnbS7BYCr7kyKc3eAiEAoXlKWo5hVRCIy2/UEI5tkLASvseqHMGaNpuhbovZyRw="}]},"maintainers":[{"name":"txhawks","email":"tofu.hawks@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/bidi-css-js-2.0.0.tgz_1509013904964_0.19106594356708229"},"directories":{}},"2.1.0":{"name":"bidi-css-js","version":"2.1.0","description":"Logical, flow-ralative conversion for CSS in JS objects","main":"dist/bidi-css-js.cjs.js","jsnext:main":"dist/bidi-css-js.esm.js","module":"dist/bidi-css-js.esm.js","scripts":{"add-contributor":"kcd-scripts contributors add","build":"rimraf dist && kcd-scripts build --bundle --environment BUILD_NAME:bidiCSSJS","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"],"keywords":["bidi-css-in-js","css-in-js","flow-relative","logical-properties-and-values","ltr","rtl","cssjanus"],"author":{"name":"TxHawks","email":"TofuxHawks@gmail.com","url":"https://githb.com/TxHawks"},"license":"MIT","devDependencies":{"commitizen":"^2.9.6","cz-conventional-changelog":"^2.0.0","kcd-scripts":"^0.16.0","npm-run-all":"^4.1.1","rimraf":"^2.6.2"},"dependencies":{"rtl-css-js":"^1.4.2"},"eslintConfig":{"extends":"./node_modules/kcd-scripts/eslint.js"},"eslintIgnore":["node_modules","coverage","dist"],"repository":{"type":"git","url":"https://github.com/TxHawks/bidi-css-js.git"},"bugs":{"url":"https://github.com/TxHawks/bidi-css-js/issues"},"homepage":"https://github.com/TxHawks/bidi-css-js#readme","config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"licenseText":"The MIT License (MIT)\nCopyright (c) 2017 TxHawks\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"bidi-css-js@2.1.0","dist":{"shasum":"c608fead16c81a9b9df372736b0ab6789e63f0d4","tarball":"https://registry.npmjs.org/bidi-css-js/-/bidi-css-js-2.1.0.tgz","fileCount":10,"unpackedSize":106403,"integrity":"sha512-5YP0OaRowTZx/cDQQ3Ms736ipYHegbwljTOGxCtLGxqk9kKWXlUSakM+tmj2NLst0ME/fK3N+6AZSom4XyOuiw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmiCPSwO7qMz8V8JoIGYt2gTsO1LHmc1NQCsAe0oFiCAIhANhWr4PqlXCLEP8rxCI3yjNSc468xV7TnCQTvFBajpXv"}]},"maintainers":[{"name":"txhawks","email":"tofu.hawks@gmail.com"}],"_npmUser":{"name":"txhawks","email":"tofu.hawks@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/bidi-css-js_2.1.0_1520875402107_0.08727603405793127"},"_hasShrinkwrap":false},"3.0.0":{"name":"bidi-css-js","version":"3.0.0","description":"Logical, flow-ralative conversion for CSS in JS objects","main":"dist/bidi-css-js.cjs.js","jsnext:main":"dist/bidi-css-js.esm.js","module":"dist/bidi-css-js.esm.js","scripts":{"add-contributor":"kcd-scripts contributors add","build":"rimraf dist && kcd-scripts build --bundle --environment BUILD_NAME:bidiCSSJS","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"],"keywords":["bidi-css-in-js","css-in-js","flow-relative","logical-properties-and-values","ltr","rtl","cssjanus"],"author":{"name":"TxHawks","email":"TofuxHawks@gmail.com","url":"https://githb.com/TxHawks"},"license":"MIT","devDependencies":{"commitizen":"^2.9.6","cz-conventional-changelog":"^2.0.0","kcd-scripts":"^0.16.0","npm-run-all":"^4.1.1","rimraf":"^2.6.2"},"dependencies":{"rtl-css-js":"^1.4.2"},"eslintConfig":{"extends":"./node_modules/kcd-scripts/eslint.js"},"eslintIgnore":["node_modules","coverage","dist"],"repository":{"type":"git","url":"git+https://github.com/TxHawks/bidi-css-js.git"},"bugs":{"url":"https://github.com/TxHawks/bidi-css-js/issues"},"homepage":"https://github.com/TxHawks/bidi-css-js#readme","config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"e1cc25465e73ec10885ff309f261c66d26e52be5","_id":"bidi-css-js@3.0.0","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"txhawks","email":"tofu.hawks@gmail.com"},"dist":{"integrity":"sha512-iCEFRroPZeEPgFGP1JAscwzrvqsL3xDQvWdw0jcHpAi3h8C4tXm5kMWwoI6R1UtXe9zI1zLt/1WFlOYK7oGMjA==","shasum":"5162b8a6df14967e6fb4ac94fe67a426e14ab857","tarball":"https://registry.npmjs.org/bidi-css-js/-/bidi-css-js-3.0.0.tgz","fileCount":8,"unpackedSize":106308,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEQNZ3wEK2FWe0YTJw2iDJy6/co4GohtW4bamdSb29ksAiAr/B0i6btBjgLOLLUTsFTtk7ffOHqmfimsRUG4TJeQ5w=="}]},"maintainers":[{"name":"txhawks","email":"tofu.hawks@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/bidi-css-js_3.0.0_1520875569409_0.9086160388856792"},"_hasShrinkwrap":false},"3.1.0":{"name":"bidi-css-js","version":"3.1.0","description":"Logical, flow-ralative conversion for CSS in JS objects","main":"dist/bidi-css-js.cjs.js","jsnext:main":"dist/bidi-css-js.esm.js","module":"dist/bidi-css-js.esm.js","scripts":{"add-contributor":"kcd-scripts contributors add","build":"rimraf dist && kcd-scripts build --bundle --environment BUILD_NAME:bidiCSSJS","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"],"keywords":["bidi-css-in-js","css-in-js","flow-relative","logical-properties-and-values","ltr","rtl","cssjanus"],"author":{"name":"TxHawks","email":"TofuxHawks@gmail.com","url":"https://githb.com/TxHawks"},"license":"MIT","devDependencies":{"commitizen":"^2.9.6","cz-conventional-changelog":"^2.0.0","kcd-scripts":"^0.16.0","npm-run-all":"^4.1.1","rimraf":"^2.6.2"},"dependencies":{"rtl-css-js":"^1.9.0"},"eslintConfig":{"extends":"./node_modules/kcd-scripts/eslint.js"},"eslintIgnore":["node_modules","coverage","dist"],"repository":{"type":"git","url":"git+https://github.com/TxHawks/bidi-css-js.git"},"bugs":{"url":"https://github.com/TxHawks/bidi-css-js/issues"},"homepage":"https://github.com/TxHawks/bidi-css-js#readme","config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"de6c9612ef9b1eb20de12ac751baf65241e4f477","_id":"bidi-css-js@3.1.0","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"txhawks","email":"tofu.hawks@gmail.com"},"dist":{"integrity":"sha512-+7tV2kPdPzNFIQhbwYu0XsBaNcrRnaAhppO7q8J9J8J0S+7LYTwzka7NReIR1H748xQzZXlCT1OvHMc7sQULXw==","shasum":"369c611b0ac6b5fc8e834f7c36b2eada60a7fe61","tarball":"https://registry.npmjs.org/bidi-css-js/-/bidi-css-js-3.1.0.tgz","fileCount":8,"unpackedSize":108388,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEpSGDBCfn4Di2xitKE3zpoCsaeOTMIbqqfx4rHZtGabAiEA1bvyglbHNqtloaXxUNaEtvQVScyNCVEg3gKH9RTiSXw="}]},"maintainers":[{"name":"txhawks","email":"tofu.hawks@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/bidi-css-js_3.1.0_1521047644706_0.9439961731871267"},"_hasShrinkwrap":false}},"readme":"# bidi-css-js\n\nLogical conversion of flow-relative properties and values 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\n[![MIT License][license-badge]][LICENSE]\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)\n\n\n\n## The problem\n\nWith properties and value containing a physical direction, e.g., `margin-left` or `float: right`, CSS has traditionally been planned and authored to accommodate for a single-direction flow of content - either from left to right, or from right to left. Reality, however, often requires that we author our styles in a manner that can easily be applied independently of the document or component flow-direction. \n\nCSS seems to now slowly starting to progress in the right direction, towards allowing the authoring of flow-realtive styles. Flexbox got this right with `justify-content`, `align-items`, etc., and an initial [CSSWG proposal](https://www.w3.org/TR/css-logical-1/) to address the issue is in place. The most basic of features, such as `text-align: start` are already supported in some browsers and others, such as `margin-start`, have some prefixed support. Most of the proposed features, however, are not currently implemented in any browser support.\n\n\n## This solution\n\nThis library aims to provide a way to easily author styles, (mostly) in line with the CSSWG proposal (and expand on it a little bit), while still ensuring backwards compatibility with the way thing were done before.\n\nIt is built using the core logic provided by Kent C. Dodds's [rtl-css-js](http://github.com/kentcdodds/rtl-css-js), and is basically just a thin layer around it providing different behavior.\n\nIt is a function with accepts two arguments: a CSS-in-JS object, and a string indicating the flow-direction according to which the styles object will be parsed.\n\nIt will convert, for instance, `paddingStart` to either `paddingLeft` or `paddingRight`, as well as all other properties where it makes sense to do so, depending on the provided `flowDirection`\n\n#### Not a polyfill\n\nIt is important to note that this package is not a true polyfill for the proposal, as all start and end properties (and so on) are converted to left or right values (etc.), and will not automatically flip when the flow direction of the element, inherited or otherwise is changes in by the html `dir` attribute or the \n`direction` css property.\n\n#### Four directional shorthand properties\n\nThe proposal alters the way values for four-directional shorthand properties (`padding`, `margin`, etc.) \nare written when using the `logical` keyword.\n\nThe values of four-directional shorthand properties, _without_ the `logical` keyword are written \n clock-wise: `top`, `right`, `bottom` and `left`. While in `ltr` mode, that would translate to \n `block-start`, `inline-end`, `block-end` and `inline-start`. However, under the new spec, when the \n `logical` keyword is used, values order is interpreted as `block-start`, `inline-start`, `block-end` \n and `inline-end`.\n\n Earlier versions of this library got this wrong, and it was corrected in version `2.0.0`\n\n## Installation\n\nThis module is distributed via [npm][npm] which is bundled with \n[node][node] and should be installed as one of your project's `dependencies`:\n\n```sh\nyarn add bidi-css-js\n# or\nnpm install --save bidi-css-js\n```\n\n## Usage\n\nThis library exposes a [CommonJS](http://wiki.commonjs.org/wiki/CommonJS), as well as an [ES Module](http://2ality.com/2014/09/es6-modules-final.html) and [UMD](https://github.com/umdjs/umd) with a `bidiCSSJS` global.\n\n```javascript\n// If using CommonJS\nconst bidiCSSJS = require('bidi-css-js') \n\n// If using ES Modules\nimport bidiCSSJS from 'bidi-css-js/bidi-css-js.esm' \nconst styles = bidiCSSJS({paddingStart: 23}, 'rtl')\nconsole.log(styles) // logs {paddingRight: 23}\n```\n\nYou can also just include a script tag in your browser and use the `bidiCSSJS` variable:\n\n```html\n\n\n```\n\n### Logical properties and values\n\nThis library is intended to mimic the implementation suggested in the CSSWG's [Logical Properties and Values Level 1](http://2ality.com/2014/09/es6-modules-final.html) proposal, with some minor additional sugar. It only covers the `inline-flow` (e.g., `left`<->`right`) aspects of the proposal and not its `block-flow` (e.g. `top`<->`bottom`) aspects.\n\n#### Flow-relative properties:\n##### Longhand properties\n| Property | LTR Value | RTL Value | Notes |\n|-|-|-|-|\n| `paddingStart` | `paddingLeft` | `paddingRight` | |\n| `paddingEnd` | `paddingRight` | `paddingLeft` | |\n| `marginStart` | `marginLeft` | `marginRight` | |\n| `marginEnd` | `marginRight` | `marginLeft` | |\n| `paddingInlineStart` | `paddingLeft` | `paddingRight` | |\n| `paddingInlineEnd` | `paddingRight` | `paddingLeft` | |\n| `marginInlineStart` | `marginLeft` | `marginRight` | |\n| `marginInlineEnd` | `marginRight` | `marginLeft` | |\n| `insetInlineStart` | `left` | `right` | |\n| `insetInlineEnd` | `right` | `left` | |\n| `start` | `left` | `right` | **This property is not part of the official spec and only included for convinience because `insetInlineStart` is so cumbersome. If you`d like to keep 100% compatibility with the spec, avoid usind this property** |\n| `end` | `right` | `left` | **This property is not part of the official spec and only included for convinience because `insetInlineEnd` is so cumbersome. If you`d like to keep 100% compatibility with the spec, avoid usind this property** |\n| `borderStart` | `borderLeft` | `borderRight` | -- |\n| `borderEnd` | `borderRight` | `borderLeft` | -- |\n| `borderStartColor` | `borderLeftColor` | `borderRightColor` | -- |\n| `borderEndColor` | `borderRightColor` | `borderLeftColor` | -- |\n| `borderStartStyle` | `borderLeftStyle` | `borderRightStyle` | -- |\n| `borderEndStyle` | `borderRightStyle` | `borderLeftStyle` | -- |\n| `borderStartWidth` | `borderLeftWidth` | `borderRightWidth` | -- |\n| `borderEndWidth` | `borderRightWidth` | `borderLeftWidth` | -- |\n| `borderInlineStart` | `borderLeft` | `borderRight` | -- |\n| `borderInlineEnd` | `borderRight` | `borderLeft` | -- |\n| `borderInlineStartColor` | `borderLeftColor` | `borderRightColor` | -- |\n| `borderInlineEndColor` | `borderRightColor` | `borderLeftColor` | -- |\n| `borderInlineStartStyle` | `borderLeftStyle` | `borderRightStyle` | -- |\n| `borderInlineEndStyle` | `borderRightStyle` | `borderLeftStyle` | -- |\n| `borderInlineStartWidth` | `borderLeftWidth` | `borderRightWidth` | -- |\n| `borderInlineEndWidth` | `borderRightWidth` | `borderLeftWidth` | -- |\n| `borderTopStartRadius` | `borderTopLeftRadius` | `borderTopRightRadius` | This property is, at the moment, missing from the spec, but is expected to be defined at a later stage. See [w3c/csswg-drafts#491](https://github.com/w3c/csswg-drafts/issues/491) |\n| `borderTopEndRadius` | `borderTopRightRadius` | `borderTopLeftRadius` | This property is, at the moment, missing from the spec, but is expected to be defined at a later stage. See [w3c/csswg-drafts#491](https://github.com/w3c/csswg-drafts/issues/491) |\n| `borderBottomStartRadius` | `borderBottomLeftRadius` | `borderBottomRightRadius` | This property is, at the moment, missing from the spec, but is expected to be defined at a later stage. See [w3c/csswg-drafts#491](https://github.com/w3c/csswg-drafts/issues/491) |\n| `borderBottomEndRadius` | `borderBottomRightRadius` | `borderBottomLeftRadius` | This property is, at the moment, missing from the spec, but is expected to be defined at a later stage. See [w3c/csswg-drafts#491](https://github.com/w3c/csswg-drafts/issues/491) |\n| `borderStartStartRadius` | `borderTopLeftRadius` | `borderTopRightRadius` || This property is, at the moment, missing from the spec, but is expected to be defined at a later stage. See [w3c/csswg-drafts#491](https://github.com/w3c/csswg-drafts/issues/491) | -- |\n| `borderStartEndRadius` | `borderTopRightRadius` | `borderTopLeftRadius` | This property is, at the moment, missing from the spec, but is expected to be defined at a later stage. See [w3c/csswg-drafts#491](https://github.com/w3c/csswg-drafts/issues/491) |\n| `borderEndStartRadius` | `borderBottomLeftRadius` | `borderBottomRightRadius` | This property is, at the moment, missing from the spec, but is expected to be defined at a later stage. See [w3c/csswg-drafts#491](https://github.com/w3c/csswg-drafts/issues/491) |\n| `borderEndEndRadius` | `borderBottomRightRadius` | `borderBottomLeftRadius` | This property is, at the moment, missing from the spec, but is expected to be defined at a later stage. See [w3c/csswg-drafts#491](https://github.com/w3c/csswg-drafts/issues/491) |\n\n##### Shorthand properties\nFrom the spec:\nThe shorthand properties for margin, padding, and border set values for physical properties by default. But authors can specify the logical keyword at the beginning of the property value to indicate that the values map to the flow-relative properties instead of the physical ones.\nThe following [[CSS21](https://www.w3.org/TR/css-logical-1/#biblio-css21)] shorthand properties [ ... ] accept the `logical` keyword: `margin`, `padding`, `border-width`, `border-style`, `border-color`.\n[ ... ]\nWhen the `logical` keyword is present in the value, the values that follow are assigned to the flow-relative properties as follows:\n\n* If only one value is set, the value applies to all four flow-relative longhands.\n* If two values are set, the first is for block-start and block-end, the second is for inline-start and inline-end.\n* If three values are set, the first is for block-start, the second is for inline-start and inline-end, and the third is for block-end.\n* If four values are set, they apply to the block-start, inline-start, block-end, and inline-end sides in that order.\n\n**Example:**\n```js\nbidiCSSJS({\n margin: 'logical 0 10px 0 20px'\n}, 'rtl'); // => { margin: '0 10px 0 20px' }\nbidiCSSJS({\n margin: 'logical 0 10px 0 20px'\n}, 'ltr'); // => { margin: '0 20px 0 10px' }\n```\n\n\nFor convinience, the library also transforms the following properties in a similar manner, although they are not included in the spec:\n\n| Property | Example | LTR Value | RTL Value | Notes |\n|-|-|-|-|-|\n| `backgroundImage` | `logical url(/foo/bar-ets.png)` | `url(/foo/bar-rtl.png)` | `url(/foo/bar-ltr.png)`| `ets` is short for end-to-start; `ste` is short for start-to-end |\n| `backgroundImage` | `logical linear-gradient(to start top, blue, red)` | `logical linear-gradient(to left top, blue, red)` | `logical linear-gradient(to right top, blue, red)` | |\n| `backgroundImage` | `logical repeating-linear-gradient(to start, #00ff00 0%, #ff0000 100%)` | `logical repeating-linear-gradient(to left, #00ff00 0%, #ff0000 100%)` | `logical repeating-linear-gradient(to right, #00ff00 0%, #ff0000 100%)` | |\n| `backgroundPosition` | `logical start top` | `left top` | `right top` | -- |\n| `backgroundPosition` | `logical 77% 40%` | `77% 40%` | `23% 40%` | -- |\n| `backgroundPositionX` | See `backgroundPosition` |\n| `background` | See `backgroundImage` and `backgroundPosition` |\n| `borderRadius` | `logical 1px 2px 3px 4px` | `1px 2px 3px 4px` | `2px 1px 4px 3px` | Will hopefuly be included at a later stage. See [w3c/csswg-drafts#1776](https://github.com/w3c/csswg-drafts/issues/1776) |\n| `borderRadius` | `logical 1px 2px 3px 4px / 5px 6px 7px 8px` | `1px 2px 3px 4px / 5px 6px 7px 8px` | `2px 1px 4px 3px / 6px 5px 8px 7px` | Will hopefuly be included at a later stage. See [w3c/csswg-drafts#1776](https://github.com/w3c/csswg-drafts/issues/1776) |\n| `boxShadow` | `logical -1px 2px 3px 3px red` | `-1px 2px 3px 3px red` | `1px 2px 3px 3px red` ||\n| `boxShadow` | `logical inset 1px 2px 3px 3px red` | `inset 1px 2px 3px 3px red` | `inset -1px 2px 3px 3px red` ||\n| `mozBoxShadow` | See `boxShadow` | -- | -- | -- |\n| `webkitBoxShadow` | See `boxShadow` | -- | -- | -- |\n| `textShadow` | `logical red -2px 0` | `red -2px 0` | `red 2px 0` | -- |\n| `textShadow` | `logical -2px 0 red` | `-2px 0 red` | `2px 0 red` | -- |\n| `transform` | `logical translate(30%)` | `translate(30%)` | `translate(-30%)` | Currently only operates on `translate[X]` |\n| `transform` | `logical translateX(30%)` | `translateX(30%)` | `translateX(-30%)` | Currently only operates on `translate[X]` |\n| `transform` | `logical translate(30%, 20%)` | `traslate(30%, 20%)` | `translate(-30%, 20%)` | Currently only operates on `translate[X|3d]` |\n| `transform` | `logical translateY(30px) rotate(20deg) translateX(10px)` | `translateY(30px) rotate(20deg) translateX(10px)` | `translateY(30px) rotate(20deg) translateX(-10px)` | Currently only operates on `translate[X|3d]` |\n| `transform` | `logical translate3d(30%, 20%, 10%)` | `translate3d(30%, 20%, 10%)` | `translate3d(-30%, 20%, 10%)` | Currently only operates on `translate[X]` |\n| `mozTransform` | See `transform` | -- | -- | -- |\n| `webkitTransform` | See `transform` | -- | -- | -- |\n| `transformOrigin` | `logical start top` | `left top` | `right top` | -- |\n| `transformOrigin` | `logical 77% 40%` | `77% 40%` | `23% 40%` | -- |\n| `mozTransformOrigin` | `logical start top` | `left top` | `right top` | -- |\n| `mozTransformOrigin` | `logical 77% 40%` | `77% 40%` | `23% 40%` | -- |\n| `webkitTransformOrigin` | `logical start top` | `left top` | `right top` | -- |\n| `webkitTransformOrigin` | `logical 77% 40%` | `77% 40%` | `23% 40%` | -- |\n\n#### Flow-relative values:\n\nIn properties that _do not accept the `logical` keword_ , values containing the following keywords will be automatically transformed. This is not 100% spec complient.\n\n| Value | LTR Value | RTL Value | Notes |\n|-|-|-|-|\n| 'ste' | 'ltr' | 'rtl' | **Not part of the official spec** |\n| 'ets' | 'rtl' | 'ltr' | **Not part of the official spec** |\n| 'inline-start' | 'left' | 'right' |\n| 'inline-end' | 'right' | 'left' |\n| 'start' | 'left' | 'right' | \n| 'end' | 'right' | 'left' |\n| 'start-resize' | 'w-resize' | 'e-resize' | **Not part of the spec** |\n| 'end-resize' | 'e-resize' | 'w-resize' | **Not part of the spec** |\n| 'bottomstart-resize' | 'sw-resize' | 'se-resize' | **Not part of the spec** |\n| 'bottomend-resize' | 'se-resize' | 'sw-resize' | **Not part of the spec** |\n| 'topstart-resize' | 'nw-resize' | 'ne-resize' | **Not part of the spec** |\n| 'topend-resize' | 'ne-resize' | 'nw-resize' | **Not part of the spec** |\n\n## Caveats\n\nSame as `rtl-css-js`:\n\nThis library falls short of a polyfill, and does not accommodate for dynamic changes in the flow direction. \n[See here](#not-a-polyfill)\n\nWhile not actually a real caveat, it is worth noting that the proposal changes the way four-directional \nshorthand properties are evaluated. [see here](#four-directional-shorthand-properties)\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## Thanks\nKent C. Dodds and all other contributors to `rtl-css-js`. As mentioned above, this library is not much more than a thin wrapper around it's core logic.\n\n## Contributors\n\nThanks goes to these people ([emoji key][emojis]):\n\n\n| [
Jonathan Pollak](https://github.com/TxHawks)
[💻](https://github.com/TxHawks/bidi-css-js/commits?author=TxHawks \"Code\") [📖](https://github.com/TxHawks/bidi-css-js/commits?author=TxHawks \"Documentation\") [⚠️](https://github.com/TxHawks/bidi-css-js/commits?author=TxHawks \"Tests\") |\n| :---: |\n\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/TxHawks/bidi-css-js.svg?style=flat-square\n[build]: https://travis-ci.org/TxHawks/bidi-css-js\n[coverage-badge]: https://img.shields.io/codecov/c/github/TxHawks/bidi-css-js.svg?style=flat-square\n[coverage]: https://codecov.io/github/TxHawks/bidi-css-js\n[dependencyci-badge]: https://dependencyci.com/github/TxHawks/bidi-css-js/badge?style=flat-square\n[dependencyci]: https://dependencyci.com/github/TxHawks/bidi-css-js\n[version-badge]: https://img.shields.io/npm/v/bidi-css-js.svg?style=flat-square\n[package]: https://www.npmjs.com/package/bidi-css-js\n[downloads-badge]: https://img.shields.io/npm/dm/bidi-css-js.svg?style=flat-square\n[npm-stat]: http://npm-stat.com/charts.html?package=bidi-css-js&from=2016-04-01\n[license-badge]: https://img.shields.io/npm/l/bidi-css-js.svg?style=flat-square\n[license]: https://github.com/TxHawks/bidi-css-js/blob/master/other/LICENSE\n[emojis]: https://github.com/kentcdodds/all-contributors#emoji-key\n[all-contributors]: https://github.com/kentcdodds/all-contributors\n","maintainers":[{"name":"txhawks","email":"tofu.hawks@gmail.com"}],"time":{"modified":"2022-06-13T04:35:38.104Z","created":"2017-09-18T13:48:10.572Z","1.0.0":"2017-09-18T13:48:10.572Z","1.0.1":"2017-09-22T20:26:31.767Z","2.0.0":"2017-10-26T10:31:46.213Z","2.1.0":"2018-03-12T17:23:22.174Z","3.0.0":"2018-03-12T17:26:09.530Z","3.1.0":"2018-03-14T17:14:04.845Z"},"homepage":"https://github.com/TxHawks/bidi-css-js#readme","keywords":["bidi-css-in-js","css-in-js","flow-relative","logical-properties-and-values","ltr","rtl","cssjanus"],"repository":{"type":"git","url":"git+https://github.com/TxHawks/bidi-css-js.git"},"author":{"name":"TxHawks","email":"TofuxHawks@gmail.com","url":"https://githb.com/TxHawks"},"bugs":{"url":"https://github.com/TxHawks/bidi-css-js/issues"},"license":"MIT","readmeFilename":"README.md"}