https://github.com/kentcdodds/rtl-css-js
RTL for CSS in JS
https://github.com/kentcdodds/rtl-css-js
Last synced: 10 months ago
JSON representation
RTL for CSS in JS
- Host: GitHub
- URL: https://github.com/kentcdodds/rtl-css-js
- Owner: kentcdodds
- License: mit
- Created: 2016-11-16T18:36:55.000Z (over 9 years ago)
- Default Branch: main
- Last Pushed: 2023-04-26T02:59:43.000Z (about 3 years ago)
- Last Synced: 2025-03-17T06:05:58.592Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://jsbin.com/kaxohix/edit?html,js,output
- Size: 154 KB
- Stars: 163
- Watchers: 8
- Forks: 31
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# rtl-css-js
RTL conversion for CSS in JS objects
[![Build Status][build-badge]][build]
[![Code Coverage][coverage-badge]][coverage]
[![version][version-badge]][package]
[![downloads][downloads-badge]][npmtrends]
[![MIT License][license-badge]][license]
[![All Contributors][all-contributors-badge]](#contributors-)
[![PRs Welcome][prs-badge]][prs]
[![Code of Conduct][coc-badge]][coc]
## The problem
For some locales, it's necessary to change `padding-left` to `padding-right`
when your text direction is right to left. There are tools like this for CSS
([`cssjanus`](https://github.com/cssjanus/cssjanus) for example) which
manipulate strings of CSS to do this, but none for CSS in JS where your CSS is
represented by an object.
## This solution
This is a function which accepts a CSS in JS object and can convert
`padding-left` to `padding-right` as well as all other 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 work in progress).
## Table of Contentss
- [Installation](#installation)
- [Usage](#usage)
- [kebab-case](#kebab-case)
- [core](#core)
- [Caveats](#caveats)
- [`background`](#background)
- [CSS variables - `var()`](#css-variables---var)
- [Inspiration](#inspiration)
- [Ecosystem](#ecosystem)
- [Other Solutions](#other-solutions)
- [Contributors](#contributors)
- [LICENSE](#license)
## Installation
This module is distributed via [npm][npm] which is bundled with [node][node] and
should be installed as one of your project's `dependencies`:
```
npm install --save rtl-css-js
```
## Usage
This module is exposed via [CommonJS](http://wiki.commonjs.org/wiki/CommonJS) as
well as [UMD](https://github.com/umdjs/umd) with the global as `rtlCSSJS`
CommonJS:
```javascript
const rtlCSSJS = require('rtl-css-js')
const styles = rtlCSSJS({paddingLeft: 23})
console.log(styles) // logs {paddingRight: 23}
```
You can also just include a script tag in your browser and use the `rtlCSSJS`
variable:
```html
const styles = rtlCSSJS({paddingRight: 23})
console.log(styles) // logs {paddingLeft: 23}
```
You can also control which rules you don't want to flip by adding a
`/* @noflip */` CSS comment to your rule
```javascript
const rtlCSSJS = require('rtl-css-js')
const styles = rtlCSSJS({paddingLeft: '20px /* @noflip */'})
console.log(styles) // logs {paddingLeft: '20px /* @noflip */' }
```
### kebab-case
This library support kebab-case properties too.
```javascript
const rtlCSSJS = require('rtl-css-js')
const styles = rtlCSSJS({'padding-right': 23})
console.log(styles) // logs {'padding-left': 23}
```
### core
`rtl-css-js` also exposes its internal helpers and utilities so you can deal
with [certain scenarios](https://github.com/kentcdodds/rtl-css-js/pull/22)
yourself. To use these you can use the `rtlCSSJSCore` global with the UMD build,
`require('rtl-css-js/core')`, or use
`import {propertyValueConverters, arrayToObject} from 'rtl-css-js/core'`.
You can import anything that's exported from `src/core`. Please see the code
comments for documentation on how to use these.
## Caveats
### `background`
Right now `background` and `backgroundImage` just replace all instances of `ltr`
with `rtl` and `right` with `left`. This is so you can have a different image
for your LTR and RTL, and in order to flip linear gradients. Note that this is
case sensitive! Must be lower case. Note also that it _will not_ change `bright`
to `bleft`. It's a _little_ smarter than that. But this is definitely something
to consider with your URLs.
### CSS variables - `var()`
Since it's impossible to know what the contents of a css variable are until the
styles are actually calculated by the browser, any CSS variable contents will
not be converted.
## Inspiration
[CSSJanus](https://github.com/cssjanus/cssjanus) was a major inspiration.
## Ecosystem
- **[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)
- **[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
- **[bidi-css-js](https://github.com/TxHawks/bidi-css-js):** A library for
authoring flow-relative css, which uses `rtl-css-js`'s core.
- **[jss-rtl](https://github.com/alitaheri/jss-rtl):** A plugin for
[`jss`](https://github.com/cssinjs/jss) to support flipping styles
dynamically.
## Other Solutions
I'm not aware of any, if you are please
[make a pull request](http://makeapullrequest.com) and add it here!
## Contributors
Thanks goes to these people ([emoji key][emojis]):
Kent C. Dodds
💻 ⚠️ 🚇
Ahmed El Gabri
💻 📖 ⚠️
Maja Wichrowska
💻 ⚠️
Yaniv
💻 ⚠️
Jonathan Pollak
💻 ⚠️
Ali Taheri Moghaddar
💻 📖 ⚠️
garrettberg
💻 ⚠️
Miles Johnson
💻 ⚠️
Kevin Weber
💻
Justin Dorfman
🔍
Royston Shufflebotham
🐛 💻 ⚠️
Oleksandr Fediashov
💻
Lingfan Gao
💻 ⚠️
Miroslav Stastny
💻 📖 ⚠️
This project follows the [all-contributors][all-contributors] specification.
Contributions of any kind welcome!
## LICENSE
MIT
[npm]: https://www.npmjs.com/
[node]: https://nodejs.org
[build-badge]: https://img.shields.io/github/workflow/status/kentcdodds/rtl-css-js/validate?logo=github&style=flat-square
[build]: https://github.com/kentcdodds/rtl-css-js/actions?query=workflow%3Avalidate
[coverage-badge]: https://img.shields.io/codecov/c/github/kentcdodds/rtl-css-js.svg?style=flat-square
[coverage]: https://codecov.io/github/kentcdodds/rtl-css-js
[version-badge]: https://img.shields.io/npm/v/rtl-css-js.svg?style=flat-square
[package]: https://www.npmjs.com/package/rtl-css-js
[downloads-badge]: https://img.shields.io/npm/dm/mdx-bundler.svg?style=flat-square
[npmtrends]: https://www.npmtrends.com/mdx-bundler
[license-badge]: https://img.shields.io/npm/l/rtl-css-js.svg?style=flat-square
[license]: https://github.com/kentcdodds/rtl-css-js/blob/main/other/LICENSE
[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
[prs]: http://makeapullrequest.com
[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
[coc]: https://github.com/kentcdodds/rtl-css-js/blob/main/other/CODE_OF_CONDUCT.md
[emojis]: https://github.com/kentcdodds/all-contributors#emoji-key
[all-contributors]: https://github.com/kentcdodds/all-contributors