Add RTL CSS bundle (#1493)

Add an RTL CSS bundle

The RTL bundle does a few things including putting the filter checkboxes on the right side. We probably don't need to build the RTL bundle unless we are building for all languages or locales, however it is so quick that I think it makes sense to just build it during dev mode since it makes developing RTL styling much faster.

J=SLAP-1465
TEST=manual

Build a site with the RTL styling and see the filter checkboxes on the right side

conf/gulp-tasks/library.gulpfile.js

@@ -2,6 +2,8 @@ const { series, parallel, src, dest, watch } = require('gulp');
 const path = require('path');
 const postcss = require('gulp-postcss');
 const sass = require('gulp-sass');
+const rtlcss = require('gulp-rtlcss');
+const rename = require('gulp-rename');
 sass.compiler = require('sass');
 
 const getLibraryVersion = require('./utils/libversion');
@@ -111,11 +113,36 @@ async function createBundleTaskFactory (locale) {
 }
 
 function compileCSS () {
+  return new Promise(resolve => {
+    return parallel(compileLtrCSS, compileRtlCSS)(resolve);
+  });
+}
+
+/**
+ * Compiles the standard left to right CSS
+ */
+function compileLtrCSS () {
+  return src('./src/ui/sass/**/*.scss')
+    .pipe(sass({
+      outputStyle: 'compressed'
+    }).on('error', sass.logError))
+    .pipe(postcss())
+    .pipe(dest('./dist/'));
+}
+
+/**
+ * Compiles the right to left CSS which is used for languages such as Arabic
+ */
+function compileRtlCSS () {
   return src('./src/ui/sass/**/*.scss')
     .pipe(sass({
       outputStyle: 'compressed'
     }).on('error', sass.logError))
+    .pipe(rtlcss())
     .pipe(postcss())
+    .pipe(rename(function (path) {
+      path.basename += '.rtl';
+    }))
     .pipe(dest('./dist/'));
 }
 

package.json

@@ -76,6 +76,7 @@
     "gulp-rename": "^1.4.0",
     "gulp-replace": "^1.0.0",
     "gulp-rollup-lightweight": "^1.0.10",
+    "gulp-rtlcss": "^1.4.2",
     "gulp-sass": "^4.1.0",
     "gulp-uglify-es": "^2.0.0",
     "gulp-umd": "^2.0.0",