Automatic RTL style version from Stylus with Gulp

January 01, 2015

Use, which is just a gulp wrapper of

(Grunt wrapper available directly from RTLCSS author: <>)

To keep both LTR and RTL version, we will need also

Given that we have one main stylus file in e.g. app/stylus/main.styl and we wanna generate main.css and main.rtl.css in .tmp/styles/:

var gulp = require('gulp');
var stylus = require('gulp-stylus');
var rename = require('gulp-rename');
var rtlcss = require('gulp-rtlcss');
gulp.task("stylus", function (event) {
 return gulp.src("app/stylus/main.styl")
 .pipe(rename(function (path) {
 path.basename += ".rtl";

How to tell RTLCSS to ignore some rules: (Thanks to @MK in comments)

/* Ignore whole rule */
 top: 20px;
 right 4px;

/* Ignore just declaration */
 margin-left: 10px;
 padding-left: 10px @css{/*rtl:ignore*/};

Examples of behavior

Screenshots of results

Just for illustration