From dea3a623987a2e0af37e6ad81f86e046f82423ee Mon Sep 17 00:00:00 2001 From: cea2aj <42848445+cea2aj@users.noreply.github.com> Date: Fri, 30 Jul 2021 16:29:02 -0400 Subject: [PATCH] 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 | 27 ++++++++++ package-lock.json | 80 ++++++++++++++++++++++++----- package.json | 1 + 3 files changed, 96 insertions(+), 12 deletions(-) diff --git a/conf/gulp-tasks/library.gulpfile.js b/conf/gulp-tasks/library.gulpfile.js index ceddd7d99..ed6b10c6a 100644 --- a/conf/gulp-tasks/library.gulpfile.js +++ b/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/')); } diff --git a/package-lock.json b/package-lock.json index 0d4c3909d..198a97e2b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3971,9 +3971,9 @@ }, "dependencies": { "regenerator-runtime": { - "version": "0.13.1", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.1.tgz", - "integrity": "sha512-5KzMIyPLvfdPmvsdlYsHqITrDfK9k7bmvf97HvHSN4810i254ponbxCQ1NukpRWlu6en2MBWzAlhDExEKISwAA==", + "version": "0.13.9", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", + "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==", "dev": true } } @@ -3988,9 +3988,9 @@ }, "dependencies": { "regenerator-runtime": { - "version": "0.13.1", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.1.tgz", - "integrity": "sha512-5KzMIyPLvfdPmvsdlYsHqITrDfK9k7bmvf97HvHSN4810i254ponbxCQ1NukpRWlu6en2MBWzAlhDExEKISwAA==" + "version": "0.13.9", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", + "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==" } } }, @@ -4044,6 +4044,15 @@ "to-fast-properties": "^2.0.0" } }, + "@choojs/findup": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/@choojs/findup/-/findup-0.2.1.tgz", + "integrity": "sha512-YstAqNb0MCN8PjdLCDfRsBcGVRN41f3vgLvaI0IrIcBp4AqILRSS0DeWNGkicC+f/zRIPJLc+9RURVSepwvfBw==", + "dev": true, + "requires": { + "commander": "^2.15.1" + } + }, "@cnakazawa/watch": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz", @@ -4931,9 +4940,9 @@ }, "dependencies": { "regenerator-runtime": { - "version": "0.13.1", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.1.tgz", - "integrity": "sha512-5KzMIyPLvfdPmvsdlYsHqITrDfK9k7bmvf97HvHSN4810i254ponbxCQ1NukpRWlu6en2MBWzAlhDExEKISwAA==", + "version": "0.13.9", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", + "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==", "dev": true } } @@ -12625,6 +12634,32 @@ "rollup": "^1.4.1" } }, + "gulp-rtlcss": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/gulp-rtlcss/-/gulp-rtlcss-1.4.2.tgz", + "integrity": "sha512-wd807z/xq4XKtSwgrEetbx/aPoI5gV0yWV2rNqEBRwe2cJvNKLDsYR9A968c3gZtaKRMGAue5g3pHn40R+GWSA==", + "dev": true, + "requires": { + "plugin-error": "^1.0.1", + "rtlcss": "^2.4.0", + "through2": "^2.0.5", + "vinyl-sourcemaps-apply": "^0.2.1" + }, + "dependencies": { + "plugin-error": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-1.0.1.tgz", + "integrity": "sha512-L1zP0dk7vGweZME2i+EeakvUNqSrdiI3F91TwEoYiGrAfUXmVv6fJIq4g82PAXxNsWOp0J7ZqQy/3Szz0ajTxA==", + "dev": true, + "requires": { + "ansi-colors": "^1.0.1", + "arr-diff": "^4.0.0", + "arr-union": "^3.1.0", + "extend-shallow": "^3.0.2" + } + } + } + }, "gulp-sass": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-4.1.0.tgz", @@ -15128,9 +15163,9 @@ }, "dependencies": { "regenerator-runtime": { - "version": "0.13.1", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.1.tgz", - "integrity": "sha512-5KzMIyPLvfdPmvsdlYsHqITrDfK9k7bmvf97HvHSN4810i254ponbxCQ1NukpRWlu6en2MBWzAlhDExEKISwAA==", + "version": "0.13.9", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", + "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==", "dev": true } } @@ -20504,6 +20539,27 @@ "integrity": "sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==", "dev": true }, + "rtlcss": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-2.6.2.tgz", + "integrity": "sha512-06LFAr+GAPo+BvaynsXRfoYTJvSaWRyOhURCQ7aeI1MKph9meM222F+Zkt3bDamyHHJuGi3VPtiRkpyswmQbGA==", + "dev": true, + "requires": { + "@choojs/findup": "^0.2.1", + "chalk": "^2.4.2", + "mkdirp": "^0.5.1", + "postcss": "^6.0.23", + "strip-json-comments": "^2.0.0" + }, + "dependencies": { + "strip-json-comments": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz", + "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=", + "dev": true + } + } + }, "run-async": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz", diff --git a/package.json b/package.json index 7c475e4e4..b1cda4d0b 100644 --- a/package.json +++ b/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",