wsp-plugin-rtl

A wix-style-processor plugin that transforms CSS direction expressions, based on a given RTL/LTR parameter.

Installation

$ npm i -S wsp-plugin-rtl

Usage

Expression | RTL | LTR ---- | ---------- | ----------- START | right | left END | left | right STARTSIGN | '' | '-' ENDSIGN | '-' | '' DEG-START | 180 | 0 DEG-END | 0 | 180 DIR | rtl | ltr

CSS

.my-selector {
    padding-START: 9px;   /* START will be replaced with left / right, given rtl = false / true */
    float: START;         /* Same as above, applied to the value */
    padding-END: 9px;     /* END will be replaced with left / right, given rtl = true / false */
    direction: DIR;     /* DIR will be replaced with ltr / rtl, given rtl = false / true */
    margin: STARTSIGN5px; /* STARTSIGN will be replaced with -, given rtl = false, and will be removed for rtl = true */
    margin: ENDSIGN5px;   /* ENDSIGN will be replaced with -, given rtl = true, and will be removed for rtl = false */
    transform: rotate(DEG-STARTdeg);
    transform: rotate(DEG-ENDdeg);
}

Plugin initialization

import styleProcessor from 'wix-style-processor';
import RtlPlugin from 'wsp-plugin-rtl';

const isRtl = true; //or false for LTR
const rtlPlugin = RtlPlugin(isRtl);

$(document).ready(() => {
    styleProcessor.plugins.addDeclarationReplacer(rtlPlugin);
    styleProcessor.init().then(() => {
            //start rendering your application here - otherwise your app will flicker
        });
});