Generate a WordPress rtl.css with Gulp

.csscomb.json

{
    "exclude": ["node_modules/**"],
    "verbose": true,
    "remove-empty-rulesets": true,
    "always-semicolon": true,
    "color-case": "lower",
    "block-indent": "\t",
    "color-shorthand": true,
    "element-case": "lower",
    "eof-newline": true,
    "leading-zero": true,
    "quotes": "double",
    "sort-order-fallback": "abc",
    "space-before-colon": "",
    "space-after-colon": " ",
    "space-before-combinator": " ",
    "space-after-combinator": " ",
    "space-between-declarations": "\n",
    "space-before-opening-brace": " ",
    "space-after-opening-brace": "\n",
    "space-after-selector-delimiter": "\n",
    "space-before-selector-delimiter": "",
    "space-before-closing-brace": "\n",
    "strip-spaces": true,
    "unitless-zero": true,
    "vendor-prefix-align": true

}

gulpfile.js

var gulp			= require( 'gulp' );
var util			= require( 'gulp-util' );
var flipper			= require( 'gulp-css-flipper' );		// Flip CSS from ltr to rtl
var change			= require( 'gulp-change' );			// Use javascript to change contents of file
var csscomb			= require( 'gulp-csscomb' );			// Tidy css structure
var cssnano			= require( 'gulp-cssnano' );			// Optimize css
var autoprefixer		= require( 'gulp-autoprefixer' );		// Apply browser prefixes.
var rename			= require( 'gulp-rename' );			// Rename output file


/**
 * Right to left
 */
gulp.task(
	'rtl',
	function () {

		var theme = utilGetTheme();

		console.log( 'RTL: ' + theme );

		return gulp.src( './' + theme + '/style.css' )
			.pipe( flipper() )
			.pipe( change( cssTidy ) )
			.pipe( change( cssRTL ) )
			.pipe( autoprefixer({
				browsers: ['last 4 versions'],
				remove: false
			}) )
			.pipe( cssnano({
				core: false
			}) )
			.pipe( csscomb() )
			.pipe( rename( 'rtl.css' ) )
			.pipe( gulp.dest( './' + theme + '/' ) );

	}
);


/**
 * Tidy up the css that is generated by SASS
 * Maybe replace with a proper beautifier at some stage?
 */
function cssTidy( content ) {

	// convert spaces to tabs
	content = content.replace( /\n\s\s/g, "\n\t" );

	// more space before a block comment
	content = content.replace( /\n\/\*\*/g, "\n\n\n\/\*\*" );

	return content;

}


/**
 * Remove non RTL properties
 */
function cssRTL( content ) {

	// list of lines from rtl css
	var content_old = [];

	// processed list of lines
	var content_new = [];

	// list of properties from https://github.com/twitter/css-flip that we will transfer
	var properties = [
		'background-position', 'background-position-x',
		'border-bottom-left-radius', 'border-bottom-right-radius',
		'border-color', 'border-left', 'border-left-color', 'border-left-style',
		'border-left-width', 'border-radius', 'border-right',
		'border-right-color', 'border-right-style', 'border-right-width',
		'border-style', 'border-top-left-radius', 'border-top-right-radius',
		'border-width', 'box-shadow', 'clear', 'direction', 'float', 'left',
		'margin', 'margin-left', 'margin-right', 'padding', 'padding-left',
		'padding-right', 'right', 'text-align', 'transition',
		'transition-property', 'unicode-bidi', '-webkit-transform', '-webkit-transform-origin' ];

	// split content into array of lines so we can loop through them
	content_old = content.split( "\n" );

	// loop through the lines
	for ( var i = 0; i < content_old.length; i ++ ) {

		// store current line so we have less characters to type (and to simplify code a bit)
		var line = content_old[i];

		// check to see if line ends in a ;
		if ( ';' === line.charAt( line.length - 1 ) ) {

			// Loop through properties and check if they match the current line
			for ( var p = 0; p < properties.length; p ++ ) {

				var property = properties[p] + ':';

				// if valid property then add to the export list.
				// Otherwise it gets ignored
				if ( line.trim().startsWith( property ) ) {

					line = line.replace( '-webkit-', '' );

					content_new.push( line );

				}

			}

		} else {

			// It's a selector/ comment or something so add it to the list.
			// Empty selectors will get removed later with cssnano
			content_new.push( line );

		}

	}

	// join list of lines so we can return it as a single string
	content = content_new.join( "\n" );

	// remove settings that don't matter
	content = content.replace( /clear:\sboth;/g, '' );
	content = content.replace( /float:\snone;/g, '' );
	content = content.replace( /text-align:\scenter;/g, '' );
	content = content.replace( /margin:\s0;/g, '' );
	content = content.replace( /padding:\s0;/g, '' );

	return content;

}


/**
 * Get theme folder from theme parameter or use granule
 *
 * @returns {String|util.env.theme}
 */
function utilGetTheme() {

	var theme = 'granule';

	if ( util.env.theme ) {

		// check for a command line variable
		// use it if it exists
		theme = util.env.theme;

	}

	console.log( 'Theme Name: ' + UtilUpperCaseFirstWord( theme ) );

	return theme;

}