From ad727507c5c9f8ddc96e78d9893fab2612f1c890 Mon Sep 17 00:00:00 2001 From: Ursula Sarracini Date: Tue, 26 Jan 2016 16:27:15 -0500 Subject: [PATCH] [#189] implement cssjanus for rtl conversion --- bin/generate-html.js | 5 ++++- bin/generate-rtl.js | 19 +++++++++++++++++++ package.json | 2 ++ src/components/Search/Search.scss | 11 ----------- src/components/Settings/Settings.scss | 19 +------------------ 5 files changed, 26 insertions(+), 30 deletions(-) create mode 100755 bin/generate-rtl.js diff --git a/bin/generate-html.js b/bin/generate-html.js index 7c2b82e..c144fdd 100644 --- a/bin/generate-html.js +++ b/bin/generate-html.js @@ -10,7 +10,10 @@ const defaults = { }; function template(rawOptions) { - const options = Object.assign({}, defaults, rawOptions || {}); + if (defaults.localeDir === "rtl") { + defaults.cssPath = "./main-rtl.css"; + } + const options = Object.assign({}, defaults, rawOptions || {}); return ` diff --git a/bin/generate-rtl.js b/bin/generate-rtl.js new file mode 100755 index 0000000..658d54c --- /dev/null +++ b/bin/generate-rtl.js @@ -0,0 +1,19 @@ +#! /usr/bin/env node +"use strict"; +const path = require("path"); +const fs = require("fs"); +const cssjanus = require("cssjanus"); + +const FILE_NAME = path.join(__dirname, "../www/main-rtl.css"); +const FILE_PATH = path.join(__dirname, "../www/main.css"); + +function convertCSS(filePath) { + try { + var data = fs.readFileSync(filePath, "utf8"); + fs.writeFileSync(FILE_NAME, cssjanus.transform(data), "utf8"); + } catch (e) { + throw e; + } +} + +convertCSS(FILE_PATH); diff --git a/package.json b/package.json index e638537..86b5379 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "build:js": "NODE_ENV=production webpack -p --optimize-dedupe", "build:css": "node-sass src/main.scss -o www", "postbuild": "node ./bin/generate-directories --static www -o build", + "postbuild:css": "bin/generate-rtl.js", "start": "npm run setup && npm-run-all --parallel watch:*", "watch:css": "npm run build:css && npm run build:css -- --source-map www/main.css.map -w -r", "watch:js": "webpack-dev-server --hot --port=1944 --content-base www", @@ -43,6 +44,7 @@ "chai-as-promised": "^5.1.0", "cli-color": "^1.1.0", "codeclimate-test-reporter": "^0.1.0", + "cssjanus": "1.1.2", "eslint": "^1.10.2", "eslint-config-airbnb": "^1.0.2", "eslint-loader": "^1.1.1", diff --git a/src/components/Search/Search.scss b/src/components/Search/Search.scss index b6dc6b5..17dc801 100644 --- a/src/components/Search/Search.scss +++ b/src/components/Search/Search.scss @@ -25,11 +25,6 @@ outline: none; border-color: $focus-blue; } - &:-moz-dir(rtl) { - border: 1px solid; - border-color: rgba(23, 51, 78, 0.15) rgba(23, 51, 78, 0.17) rgba(23, 51, 78, 0.2); - border-left: none; - } } .search-submit { @@ -44,9 +39,6 @@ &:hover { background: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go-inverted") center center no-repeat, linear-gradient(#4cb1ff, #1793e5); } - &:-moz-dir(rtl) { - border-radius: 2px 0 0 2px; - } } .search-input:focus + .search-submit { @@ -63,8 +55,5 @@ background-repeat: no-repeat; background-position: 5px center; @include bgimage("magnifier.svg"); - &:-moz-dir(rtl) { - right: 0; - } } } diff --git a/src/components/Settings/Settings.scss b/src/components/Settings/Settings.scss index b19563a..be825d4 100644 --- a/src/components/Settings/Settings.scss +++ b/src/components/Settings/Settings.scss @@ -3,13 +3,9 @@ position: fixed; top: 20px; right: 20px; + left: 0; z-index: 1; text-align: right; - &:-moz-dir(rtl) { - right: auto; - text-align: left; - left: 20px; - } } .settings-toggle { background: none; @@ -83,19 +79,6 @@ } } } - &:-moz-dir(rtl) { - &::before { - right: auto; - left: 10px; - } - &::after { - right: auto; - left: 10px; - } - &.active { - text-align: right; - } - } } .settings-overlay { display: none;