Skip to content

Instantly share code, notes, and snippets.

@BinaryMoon
Last active Nov 26, 2016
Embed
What would you like to do?
Generate a WordPress rtl.css with Gulp
{
"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
}
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment