rtl-css-js
Right To Left conversion for CSS in JS objects
Last updated 10 months ago by kentcdodds .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install rtl-css-js 
SYNC missed versions from official npm registry.

rtl-css-js

RTL conversion for CSS in JS objects

Build Status Code Coverage Dependencies version downloads MIT License

All Contributors PRs Welcome Donate Code of Conduct Roadmap Examples

Watch on GitHub Star on GitHub Tweet

Sponsor

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

This module is distributed via npm which is bundled with 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:

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:

<script src="https://unpkg.com/rtl-css-js"></script>
<script>
  const styles = rtlCSSJS({paddingRight: 23})
  console.log(styles) // logs {paddingLeft: 23}
</script>

You can also control which rules you don't want to flip by adding a /* @noflip */ CSS comment to your rule

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.

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 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.

Inspiration

CSSJanus was a major inspiration.

Ecosystem

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):

Kent C. Dodds
Kent C. Dodds

???? ⚠️ ????
Ahmed El Gabri
Ahmed El Gabri

???? ???? ⚠️
Maja Wichrowska
Maja Wichrowska

???? ⚠️
Yaniv
Yaniv

???? ⚠️
Jonathan Pollak
Jonathan Pollak

???? ⚠️
Ali Taheri Moghaddar
Ali Taheri Moghaddar

???? ???? ⚠️
garrettberg
garrettberg

???? ⚠️
Miles Johnson
Miles Johnson

???? ⚠️
Kevin Weber
Kevin Weber

????
Justin Dorfman
Justin Dorfman

????
Royston Shufflebotham
Royston Shufflebotham

???? ???? ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!

LICENSE

MIT

Current Tags

  • 1.0.0-beta.4                                ...           beta (4 years ago)
  • 1.14.0                                ...           latest (10 months ago)

29 Versions

  • 1.14.0                                ...           10 months ago
  • 1.13.1                                ...           a year ago
  • 1.13.0                                ...           a year ago
  • 1.12.0                                ...           a year ago
  • 1.11.0                                ...           2 years ago
  • 1.10.0                                ...           2 years ago
  • 1.9.1                                ...           2 years ago
  • 1.9.0                                ...           3 years ago
  • 1.8.0                                ...           3 years ago
  • 1.7.0                                ...           3 years ago
  • 1.6.0                                ...           3 years ago
  • 1.5.0                                ...           3 years ago
  • 1.4.4                                ...           3 years ago
  • 1.4.3                                ...           3 years ago
  • 1.4.2                                ...           3 years ago
  • 1.4.1                                ...           3 years ago
  • 1.4.0                                ...           3 years ago
  • 1.3.0                                ...           3 years ago
  • 1.2.0                                ...           3 years ago
  • 1.1.3                                ...           3 years ago
  • 1.1.2                                ...           3 years ago
  • 1.1.1                                ...           3 years ago
  • 1.1.0                                ...           4 years ago
  • 1.0.0                                ...           4 years ago
  • 1.0.0-beta.4                                ...           4 years ago
  • 1.0.0-beta.3                                ...           4 years ago
  • 1.0.0-beta.2                                ...           4 years ago
  • 1.0.0-beta.1                                ...           4 years ago
  • 1.0.0-beta.0                                ...           4 years ago

Copyright 2014 - 2017 © taobao.org |