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 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
- Usage
- kebab-case
- core
- Caveats
- background
- CSS variables - var()
- Inspiration
- Ecosystem
- Other Solutions
- Contributors
- 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 as
well as 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


`

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 /' }
`

$3

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}
`

$3

rtl-css-js also exposes its internal helpers and utilities so you can deal
with certain scenarios
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

$3

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.

$3

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 was a major inspiration.

Ecosystem

- react-with-styles-interface-aphrodite:
An interface to use
react-with-styles with
Aphrodite
- fela-plugin-rtl: A plugin
for fela that uses rtl-css-js to convert a style object
to its right-to-left counterpart
- bidi-css-js: A library for
authoring flow-relative css, which uses rtl-css-js's core.
- jss-rtl: A plugin for
jss` to support flipping styles
dynamically.

Other Solutions

I'm not aware of any, if you are please
make a pull request 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