{"id":15503853,"url":"https://github.com/kentcdodds/rtl-css-js","last_synced_at":"2025-10-07T10:32:44.689Z","repository":{"id":45582747,"uuid":"73949486","full_name":"kentcdodds/rtl-css-js","owner":"kentcdodds","description":"RTL for CSS in JS","archived":false,"fork":false,"pushed_at":"2023-04-26T02:59:43.000Z","size":158,"stargazers_count":163,"open_issues_count":4,"forks_count":31,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-03-17T06:05:58.592Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://jsbin.com/kaxohix/edit?html,js,output","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kentcdodds.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-11-16T18:36:55.000Z","updated_at":"2025-03-13T07:28:51.000Z","dependencies_parsed_at":"2024-06-18T12:32:46.337Z","dependency_job_id":null,"html_url":"https://github.com/kentcdodds/rtl-css-js","commit_stats":{"total_commits":79,"total_committers":25,"mean_commits":3.16,"dds":0.7088607594936709,"last_synced_commit":"20e37cd08846c5065ecca21284c66c54ac121958"},"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kentcdodds%2Frtl-css-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kentcdodds%2Frtl-css-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kentcdodds%2Frtl-css-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kentcdodds%2Frtl-css-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kentcdodds","download_url":"https://codeload.github.com/kentcdodds/rtl-css-js/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244660594,"owners_count":20489363,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-02T09:15:00.118Z","updated_at":"2025-10-07T10:32:39.645Z","avatar_url":"https://github.com/kentcdodds.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# rtl-css-js\n\nRTL conversion for CSS in JS objects\n\n\u003c!-- prettier-ignore-start --\u003e\n[![Build Status][build-badge]][build]\n[![Code Coverage][coverage-badge]][coverage]\n[![version][version-badge]][package]\n[![downloads][downloads-badge]][npmtrends]\n[![MIT License][license-badge]][license]\n[![All Contributors][all-contributors-badge]](#contributors-)\n[![PRs Welcome][prs-badge]][prs]\n[![Code of Conduct][coc-badge]][coc]\n\u003c!-- prettier-ignore-end --\u003e\n\n## The problem\n\nFor some locales, it's necessary to change `padding-left` to `padding-right`\nwhen your text direction is right to left. There are tools like this for CSS\n([`cssjanus`](https://github.com/cssjanus/cssjanus) for example) which\nmanipulate strings of CSS to do this, but none for CSS in JS where your CSS is\nrepresented by an object.\n\n## This solution\n\nThis is a function which accepts a CSS in JS object and can convert\n`padding-left` to `padding-right` as well as all other properties where it makes\nsense to do that (at least, that's what it's going to be when it's done... This\nis a work in progress).\n\n## Table of Contentss\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [kebab-case](#kebab-case)\n  - [core](#core)\n- [Caveats](#caveats)\n  - [`background`](#background)\n  - [CSS variables - `var()`](#css-variables---var)\n- [Inspiration](#inspiration)\n- [Ecosystem](#ecosystem)\n- [Other Solutions](#other-solutions)\n- [Contributors](#contributors)\n- [LICENSE](#license)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## Installation\n\nThis module is distributed via [npm][npm] which is bundled with [node][node] and\nshould be 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\nwell as [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`\nvariable:\n\n```html\n\u003cscript src=\"https://unpkg.com/rtl-css-js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  const styles = rtlCSSJS({paddingRight: 23})\n  console.log(styles) // logs {paddingLeft: 23}\n\u003c/script\u003e\n```\n\nYou can also control which rules you don't want to flip by adding a\n`/* @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'`.\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`\nwith `rtl` and `right` with `left`. This is so you can have a different image\nfor your LTR and RTL, and in order to flip linear gradients. Note that this is\ncase sensitive! Must be lower case. Note also that it _will not_ change `bright`\nto `bleft`. It's a _little_ smarter than that. But this is definitely something\nto consider with your URLs.\n\n### CSS variables - `var()`\n\nSince it's impossible to know what the contents of a css variable are until the\nstyles are actually calculated by the browser, any CSS variable contents will\nnot be converted.\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):**\n  An interface to use\n  [`react-with-styles`](https://github.com/airbnb/react-with-styles) with\n  [Aphrodite](https://github.com/khan/aphrodite)\n- **[fela-plugin-rtl](https://www.npmjs.com/package/fela-plugin-rtl):** A plugin\n  for [fela](http://fela.js.org/) that uses rtl-css-js to convert a style object\n  to its right-to-left counterpart\n- **[bidi-css-js](https://github.com/TxHawks/bidi-css-js):** A library for\n  authoring flow-relative css, which uses `rtl-css-js`'s core.\n- **[jss-rtl](https://github.com/alitaheri/jss-rtl):** A plugin for\n  [`jss`](https://github.com/cssinjs/jss) to support flipping styles\n  dynamically.\n\n## Other Solutions\n\nI'm not aware of any, if you are please\n[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\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://kentcdodds.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/1500684?v=3?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eKent C. Dodds\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/rtl-css-js/commits?author=kentcdodds\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/kentcdodds/rtl-css-js/commits?author=kentcdodds\" title=\"Tests\"\u003e⚠️\u003c/a\u003e \u003ca href=\"#infra-kentcdodds\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://gabri.me\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/63876?v=3?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAhmed El Gabri\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/rtl-css-js/commits?author=ahmedelgabri\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/kentcdodds/rtl-css-js/commits?author=ahmedelgabri\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"https://github.com/kentcdodds/rtl-css-js/commits?author=ahmedelgabri\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/majapw\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/1383861?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMaja Wichrowska\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/rtl-css-js/commits?author=majapw\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/kentcdodds/rtl-css-js/commits?author=majapw\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/yzimet\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/6600720?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eYaniv\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/rtl-css-js/commits?author=yzimet\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/kentcdodds/rtl-css-js/commits?author=yzimet\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/TxHawks\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/5658514?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJonathan Pollak\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/rtl-css-js/commits?author=TxHawks\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/kentcdodds/rtl-css-js/commits?author=TxHawks\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/alitaheri\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/8528759?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAli Taheri Moghaddar\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/rtl-css-js/commits?author=alitaheri\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/kentcdodds/rtl-css-js/commits?author=alitaheri\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"https://github.com/kentcdodds/rtl-css-js/commits?author=alitaheri\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/garrettberg\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/844459?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003egarrettberg\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/rtl-css-js/commits?author=garrettberg\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/kentcdodds/rtl-css-js/commits?author=garrettberg\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://milesj.me\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/143744?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMiles Johnson\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/rtl-css-js/commits?author=milesj\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/kentcdodds/rtl-css-js/commits?author=milesj\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://www.kweber.com\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/2785791?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eKevin Weber\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/rtl-css-js/commits?author=kevinweber\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://stackshare.io/jdorfman/decisions\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/398230?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJustin Dorfman\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#fundingFinding-jdorfman\" title=\"Funding Finding\"\u003e🔍\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/RoystonS\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/19773?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRoyston Shufflebotham\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/rtl-css-js/issues?q=author%3ARoystonS\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/kentcdodds/rtl-css-js/commits?author=RoystonS\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/kentcdodds/rtl-css-js/commits?author=RoystonS\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://twitter.com/layershifter\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/14183168?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eOleksandr Fediashov\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/rtl-css-js/commits?author=layershifter\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/ling1726\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/20744592?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eLingfan Gao\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/rtl-css-js/commits?author=ling1726\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/kentcdodds/rtl-css-js/commits?author=ling1726\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/miroslavstastny\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/9615899?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMiroslav Stastny\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/rtl-css-js/commits?author=miroslavstastny\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/kentcdodds/rtl-css-js/commits?author=miroslavstastny\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"https://github.com/kentcdodds/rtl-css-js/commits?author=miroslavstastny\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors][all-contributors] specification.\nContributions of any kind welcome!\n\n## LICENSE\n\nMIT\n\n\u003c!-- prettier-ignore-start --\u003e\n[npm]: https://www.npmjs.com/\n[node]: https://nodejs.org\n[build-badge]: https://img.shields.io/github/workflow/status/kentcdodds/rtl-css-js/validate?logo=github\u0026style=flat-square\n[build]: https://github.com/kentcdodds/rtl-css-js/actions?query=workflow%3Avalidate\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[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/mdx-bundler.svg?style=flat-square\n[npmtrends]: https://www.npmtrends.com/mdx-bundler\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/main/other/LICENSE\n[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\n[prs]: http://makeapullrequest.com\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/main/other/CODE_OF_CONDUCT.md\n[emojis]: https://github.com/kentcdodds/all-contributors#emoji-key\n[all-contributors]: https://github.com/kentcdodds/all-contributors\n\u003c!-- prettier-ignore-end --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkentcdodds%2Frtl-css-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkentcdodds%2Frtl-css-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkentcdodds%2Frtl-css-js/lists"}