Skip to content
PostCSS plugin for RTL-adaptivity
JavaScript
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Add test for "left/right" subparts of selectors #48 Aug 24, 2019
.babelrc Update deps Jul 30, 2019
.editorconfig Update linter Dec 12, 2018
.eslintignore Update deps Jul 30, 2019
.eslintrc Update deps Jul 30, 2019
.gitignore Added support for a custom prefix (other than 'dir') Aug 18, 2019
.npmignore Update deps Jul 30, 2019
.travis.yml Turn off node < 8 on Travis Aug 24, 2019
CHANGELOG.md Update changelog Aug 24, 2019
LICENSE.md Update docs Mar 7, 2017
README.md Update changelog Aug 24, 2019
package-lock.json 1.5.0 Aug 24, 2019
package.json 1.5.0 Aug 24, 2019

README.md

PostCSS-RTL

npm Build Status npm Package Quality license

PostCSS-plugin for RTL-adaptivity

Generates RTL rules with flipped properties. Use one file for both directions!

Examples

Simple properties

In most cases all you need is flip property name or value from left to right or change values order in full-valued shorthand from top-right-bottom-left to top-left-bottom-right.

LTR input:

.foo {
    float: right;
    margin-left: 13px;
    text-align: right;
    font-size: 13px;
    border-color: lightgray;
    border-width: 2px 0 2px 2px;
    border-style: solid dashed solid solid
}

.foo {
    text-align: center;
}

LTR+RTL output:

.foo {
    font-size: 13px
}

[dir] .foo {
    border-color: lightgray
}

[dir="ltr"] .foo {
    float: right;
    margin-left: 13px;
    text-align: right;
    border-width: 2px 0 2px 2px;
    border-style: solid dashed solid solid
}

[dir="rtl"] .foo {
    float: left;
    margin-right: 13px;
    text-align: left;
    border-width: 2px 2px 2px 0;
    border-style: solid solid solid dashed
}

[dir] .foo {
    text-align: center
}

Animations

Flippable keyframes-animations will be splitted to two direction-based rules with -ltr or -rtl suffixes

LTR input:

.foo {
    animation: 1s slide 0s ease-in-out
}

@keyframes slide {
    from {
        transform: translate( -1000px )
    }
    to {
        transform: translate( 0 )
    }
}

LTR+RTL output:

[dir="ltr"] .foo {
    animation: 1s slide-ltr 0s ease-in-out
}

[dir="rtl"] .foo {
    animation: 1s slide-rtl 0s ease-in-out
}

@keyframes slide-ltr {
    from {
        transform: translate( -1000px )
    }
    to {
        transform: translate( 0 )
    }
}

@keyframes slide-rtl {
    from {
        transform: translate( 1000px )
    }
    to {
        transform: translate( 0 )
    }
}

Value directives

To transform declaration values use value directives:

  • /* rtl:prepend:{value} */ - to prepend the {value} before the current value
  • /* rtl:append:{value} */ - to append the {value} after the current value
  • /* rtl:{value} */ - to replace the current value with the supplied value

Source

.foo {
    font-weight: bold;
    font-family: "Droid Sans", "Helvetica Neue", Arial, sans-serif/*rtl:prepend:"Droid Arabic Kufi",*/;
    transform: rotate(45deg)/* rtl:append: scaleX(-1) */;
    flex-direction: row/* rtl: row-reverse */;
}

Result

.foo {
    font-weight: bold;
}

[dir=ltr] .foo {
    font-family: "Droid Sans", "Helvetica Neue", Arial, sans-serif/*rtl:prepend:"Droid Arabic Kufi",*/;
    transform: rotate(45deg)/* rtl:append: scaleX(-1) */;
    flex-direction: row/* rtl: row-reverse */;
}

[dir=rtl] .foo {
    font-family: "Droid Arabic Kufi", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
    transform: rotate(45deg) scaleX(-1);
    flex-direction: row-reverse;
}

Ignoring specific declarations

To skip flipping specific declarations use some of supported directives:

  • /* rtl:ignore */ - to ignore the following rule or the containing declaration
  • /* rtl:begin:ignore */ and /* rtl:end:ignore */ - to ignore rules within scope

Ignore one rule:

/* rtl:ignore */
.foo {
    padding-left: 0
}

Block-syntax to ignore rules within scope:

/* rtl:begin:ignore */
.foo {
    padding-left: 0
}
.bar {
    direction: ltr
}
/* rtl:end:ignore */

Value-syntax to ignore a single CSS declaration:

.foo {
    margin-left: 20px;
    padding-right: 20px /* rtl:ignore */;
}

/*! notation will work too:

/*! rtl:ignore */
.foo {
    padding-left: 0
}

Usage

  1. Plug it to PostCSS

    const postcss = require('postcss')
    const rtl = require('postcss-rtl')
    
    postcss([ rtl( options ) ])

    See PostCSS docs for examples for your environment.

  2. Manage direction by switching between dir="ltr" and dir="rtl" on <html> element.

With Webpack:

module.exports = {
  module: {
    rules: [ {
      test: /\.css$/,
      use: [
        { loader: 'style-loader' },
        { loader: 'css-loader' },
        { loader: 'postcss-loader',
          options: {
            plugins: function () {
              return [ require( 'postcss-rtl' )( options ) ]
            }
          }
        }
      ]
    } ]
  }
}

With Gulp:

gulp.src( 'style.css' )
    .pipe( postcss( [ rtl( options ) ]) )
    .pipe( gulp.dest( './dest' ) )

Options

  • addPrefixToSelector: Custom function for adding prefix to selector. Optional. Example:

    function addPrefixToSelector ( selector, prefix ) {
        return `${prefix} > ${selector}` // Make selectors like [dir=rtl] > .selector
    }

    note: the returned string must include prefix to avoid an infinite recursion

  • onlyDirection: generate only one-direction version: ltr or rtl

  • prefixType: Switches between adding attributes and classes. Optional:

    • attribute (by default, recommended): .foo => [dir=rtl] .foo
    • class (useful for IE6): .foo => .dir-rtl .foo
  • prefix: Uses a custom string, instead of 'dir', for the added attribute and class selectors

    • e.g. 'data-my-custom-dir' (for attribute prefixType): .foo => [data-my-custom-dir=rtl] .foo
    • e.g. 'my-custom-dir' (for class prefixType): .foo => .my-custom-dir-rtl .foo
  • removeComments (default: true): remove rtl:* comments after process them

  • fromRTL: assume all styles are written in RTL direction and generate corresponding LTR styles for them

Thanks

Great thanks to projects:

You can’t perform that action at this time.