RTL major refactor (#5055)

* Issue #4261 - part 1 - inject "dir=rtl" to <html> tag in case of RTL languages * Use CSS Logical Properties and Values * Fixed order of arrows for pagination * Generating .rtl.css and .ltr.css files for non-Firefox and Chrome browsers
mozilla-services · Oct 30, 2018 · ec6aeae · ec6aeae
1 parent 3639661
commit ec6aeae
Show file tree

Hide file tree

Showing 25 changed files with 5,015 additions and 3,888 deletions.
diff --git a/.postcss/ltr/postcss.config.js b/.postcss/ltr/postcss.config.js
@@ -0,0 +1,7 @@
+const postcssLogical = require('postcss-logical');
+
+module.exports = {
+  plugins: [
+    postcssLogical({"dir": "ltr"})
+  ]
+}
diff --git a/.postcss/rtl/postcss.config.js b/.postcss/rtl/postcss.config.js
@@ -0,0 +1,7 @@
+const postcssLogical = require('postcss-logical');
+
+module.exports = {
+  plugins: [
+    postcssLogical({"dir": "rtl"})
+  ]
+}
diff --git a/Makefile b/Makefile
@@ -24,7 +24,7 @@ server_dest := $(server_source:server/src/%.js=build/server/%.js)
 
 # Also scss gets put into two locations:
 sass_source := $(wildcard static/css/*.scss)
-sass_server_dest := $(sass_source:%.scss=build/server/%.css)
+sass_server_dest := $(sass_source:%.scss=build/server/%.css) $(sass_source:%.scss=build/server/%.ltr.css) $(sass_source:%.scss=build/server/%.rtl.css)
 partials_source := $(wildcard static/css/partials/*.scss)
 
 # And static images get placed somewhat eclectically:
@@ -61,6 +61,12 @@ build/%.css: %.scss $(partials_source)
 	@mkdir -p $(@D)
 	node-sass $< $@
 
+%.ltr.css: %.css
+	postcss $< -o $@ --config .postcss/ltr
+
+%.rtl.css: %.css
+	postcss $< -o $@ --config .postcss/rtl
+
 ## Static files to be copied:
 
 build/%.png: %.png