PostCSS-RTL

PostCSS-plugin for RTL-optimizations.

Generating RTL rules with flipped properties. Lets you to use one file for both directions.

Example:

This:

.foo {
    float: right;
    margin-left: 13px;
    text-align: right;
    border-color: lightgray;
    border-width: 2px 0 2px 2px;
    border-style: solid dashed solid solid;
    animation: 1s slide 0s ease-in-out
}

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

Will converts to:

.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;
    animation: 1s slide-ltr 0s ease-in-out
}

[dir="rtl"] .foo {
    float: left;
    margin-right: 13px;
    text-align: left;
    border-width: 2px 2px 2px 0;
    border-style: solid solid solid dashed;
    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 )
    }
}

Usage

Just plug it to PostCSS:

postcss([ require('postcss-rtl') ])

See PostCSS docs for examples for your environment.

Future

• Processing rtlcss-directives