Use rtlcss instead of r2 for RTL support

This ensures that the RTL directives in bootstrap are processed
correctly as it is designed around RTLCSS for RTL support.

Fixes #4347

Gemfile

@@ -26,8 +26,8 @@ gem "jbuilder", "~> 2.7"
 # Reduces boot times through caching; required in config/boot.rb
 gem "bootsnap", ">= 1.4.2", :require => false
 
-# Use R2 for RTL conversion
+# Use rtlcss for RTL conversion
-gem "r2", "~> 0.2.7"
+gem "rtlcss"
 
 # Use autoprefixer to generate CSS prefixes
 gem "autoprefixer-rails"

Gemfile.lock

@@ -305,6 +305,7 @@ GEM
     kramdown (2.4.0)
       rexml
     language_server-protocol (3.17.0.3)
+    libv8-node (18.16.0.0)
     libxml-ruby (4.1.2)
     listen (3.8.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
@@ -326,6 +327,8 @@ GEM
     mini_magick (4.12.0)
     mini_mime (1.1.5)
     mini_portile2 (2.8.5)
+    mini_racer (0.8.0)
+      libv8-node (~> 18.16.0.0)
     minitest (5.20.0)
     msgpack (1.7.2)
     multi_json (1.15.0)
@@ -403,7 +406,6 @@ GEM
     puma (5.6.7)
       nio4r (~> 2.0)
     quad_tile (1.0.1)
-    r2 (0.2.8)
     racc (1.7.3)
     rack (2.2.8)
     rack-cors (2.0.1)
@@ -473,6 +475,8 @@ GEM
     rinku (2.0.6)
     rotp (6.3.0)
     rouge (4.2.0)
+    rtlcss (0.2.1)
+      mini_racer (>= 0.6.3)
     rubocop (1.57.2)
       json (~> 2.3)
       language_server-protocol (>= 3.17.0)
@@ -638,7 +642,6 @@ DEPENDENCIES
   pg
   puma (~> 5.6)
   quad_tile (~> 1.0.1)
-  r2 (~> 0.2.7)
   rack-cors
   rack-uri_sanitizer
   rails (~> 7.1.0)
@@ -646,6 +649,7 @@ DEPENDENCIES
   rails-i18n (~> 7.0.0)
   rinku (>= 2.0.6)
   rotp
+  rtlcss
   rubocop
   rubocop-capybara
   rubocop-factory_bot

app/assets/stylesheets/common.scss

@@ -2,34 +2,6 @@
 @import "bootstrap";
 @import "rails_bootstrap_forms";
 
-/* Bootstrap + r2 fixes */
-
-:root[dir=rtl] {
-  .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow {
-    /* no-r2 */
-    right: unset !important;
-    left: calc(-1 * var(--bs-tooltip-arrow-height)) !important;
-
-    &::before {
-      /* no-r2 */
-      left: unset !important;
-      right: -1px !important;
-    }
-  }
-
-  .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow {
-    /* no-r2 */
-    left: unset !important;
-    right: calc(-1 * var(--bs-tooltip-arrow-height)) !important;
-
-    &::before {
-      /* no-r2 */
-      right: unset !important;
-      left: -1px !important;
-    }
-  }
-}
-
 /* Styles common to large and small screens */
 
 /* Default rules for the body of every page */
@@ -71,23 +43,23 @@ time[title] {
   overflow: hidden;
 }
 
-.icon.search      { /* no-r2 */ background-position: 0 0; }
+.icon.search      { /*rtl:ignore*/ background-position: 0 0; }
-.icon.donate      { /* no-r2 */ background-position: -20px 0; }
+.icon.donate      { /*rtl:ignore*/ background-position: -20px 0; }
-.icon.zoomin      { /* no-r2 */ background-position: -40px 0; }
+.icon.zoomin      { /*rtl:ignore*/ background-position: -40px 0; }
-.icon.zoomout     { /* no-r2 */ background-position: -60px 0; }
+.icon.zoomout     { /*rtl:ignore*/ background-position: -60px 0; }
-.icon.geolocate   { /* no-r2 */ background-position: -80px 0; }
+.icon.geolocate   { /*rtl:ignore*/ background-position: -80px 0; }
-.active .icon.geolocate   { /* no-r2 */ background-position: -80px -20px; }
+.active .icon.geolocate   { /*rtl:ignore*/ background-position: -80px -20px; }
-.icon.layers      { /* no-r2 */ background-position: -100px 0; }
+.icon.layers      { /*rtl:ignore*/ background-position: -100px 0; }
-.icon.key         { /* no-r2 */ background-position: -120px 0; }
+.icon.key         { /*rtl:ignore*/ background-position: -120px 0; }
-.icon.share       { /* no-r2 */ background-position: -140px 0; }
+.icon.share       { /*rtl:ignore*/ background-position: -140px 0; }
-.icon.clipboard   { /* no-r2 */ background-position: -160px 0; }
+.icon.clipboard   { /*rtl:ignore*/ background-position: -160px 0; }
-.icon.link        { /* no-r2 */ background-position: -180px 0; }
+.icon.link        { /*rtl:ignore*/ background-position: -180px 0; }
-.icon.close       { /* no-r2 */ background-position: -200px 0; }
+.icon.close       { /*rtl:ignore*/ background-position: -200px 0; }
-.icon.close:hover { /* no-r2 */ background-position: -200px -20px; }
+.icon.close:hover { /*rtl:ignore*/ background-position: -200px -20px; }
-.icon.check       { /* no-r2 */ background-position: -220px 0; }
+.icon.check       { /*rtl:ignore*/ background-position: -220px 0; }
-.icon.note        { /* no-r2 */ background-position: -240px 0; }
+.icon.note        { /*rtl:ignore*/ background-position: -240px 0; }
-.icon.note.grey   { /* no-r2 */ background-position: -240px -20px; }
+.icon.note.grey   { /*rtl:ignore*/ background-position: -240px -20px; }
-.icon.query       { /* no-r2 */ background-position: -260px 0; }
+.icon.query       { /*rtl:ignore*/ background-position: -260px 0; }
 
 /* Utility for de-emphasizing content */
 
@@ -779,11 +751,11 @@ tr.turn:hover {
     #maxlat { margin-top: -1px; }
     #minlon {
       float: left;
-      /* no-r2 */ margin-left: -1px;
+      /*rtl:ignore*/ margin-left: -1px;
     }
     #maxlon {
       float: right;
-      /* no-r2 */ margin-right: -1px;
+      /*rtl:ignore*/ margin-right: -1px;
     }
     #minlat { margin-bottom: -1px; }
   }
@@ -1048,7 +1020,7 @@ div.secondary-actions {
   }
 
   .sprite.x {
-    /* no-r2 */ background-position: -50px 0;
+    /*rtl:ignore*/ background-position: -50px 0;
   }
 
   .sprite.term {
@@ -1057,27 +1029,27 @@ div.secondary-actions {
   }
 
   .sprite.node {
-    /* no-r2 */ background-position: -100px 0;
+    /*rtl:ignore*/ background-position: -100px 0;
   }
 
   .sprite.way {
-    /* no-r2 */ background-position: -150px 0;
+    /*rtl:ignore*/ background-position: -150px 0;
   }
 
   .sprite.tag {
-    /* no-r2 */ background-position: -200px 0;
+    /*rtl:ignore*/ background-position: -200px 0;
   }
 
   .sprite.editor {
-    /* no-r2 */ background-position: -250px 0;
+    /*rtl:ignore*/ background-position: -250px 0;
   }
 
   .sprite.question {
-    /* no-r2 */ background-position: -300px 0;
+    /*rtl:ignore*/ background-position: -300px 0;
   }
 
   .sprite.rules {
-    /* no-r2 */ background-position: -350px 0;
+    /*rtl:ignore*/ background-position: -350px 0;
   }
 
   .icon.note {
@@ -1128,27 +1100,27 @@ div.secondary-actions {
     background: 40px 40px image-url('about/sprite.png') no-repeat;
 
     &.local {
-      /* no-r2 */
+      /*rtl:ignore*/
       background-position: 0px 0px;
     }
     &.community {
-      /* no-r2 */
+      /*rtl:ignore*/
       background-position: 0px -40px;
     }
     &.open {
-      /* no-r2 */
+      /*rtl:ignore*/
       background-position: 0px -80px;
     }
     &.partners {
-      /* no-r2 */
+      /*rtl:ignore*/
       background-position: 0px -120px;
     }
     &.infringement {
-      /* no-r2 */
+      /*rtl:ignore*/
       background-position: 0px -160px;
     }
     &.legal {
-      /* no-r2 */
+      /*rtl:ignore*/
       background-position: -45px -160px;
     }
   }

config/initializers/r2.rb

@@ -1,16 +0,0 @@
-require "r2"
-
-class R2ScssProcessor < SassC::Rails::ScssTemplate
-  def self.call(input)
-    output = super(input)
-    data = R2.r2(output[:data])
-    output.delete(:map)
-    output.merge(:data => data)
-  end
-end
-
-Rails.application.config.assets.configure do |env|
-  env.register_mime_type "text/r2+scss", :extensions => [".r2.scss"]
-  env.register_transformer "text/r2+scss", "text/css", R2ScssProcessor
-  env.register_preprocessor "text/r2+scss", Sprockets::DirectiveProcessor.new(:comments => ["//", ["/*", "*/"]])
-end

config/initializers/rtlcss.rb

@@ -0,0 +1,16 @@
+require "rtlcss"
+
+class RtlcssSCSSProcessor < SassC::Rails::ScssTemplate
+  def self.call(input)
+    output = super(input)
+    data = Rtlcss.flip_css(output[:data])
+    output.delete(:map)
+    output.merge(:data => data)
+  end
+end
+
+Rails.application.config.assets.configure do |env|
+  env.register_mime_type "text/rtlcss+scss", :extensions => [".rtlcss.scss"]
+  env.register_transformer "text/rtlcss+scss", "text/css", RtlcssSCSSProcessor
+  env.register_preprocessor "text/rtlcss+scss", Sprockets::DirectiveProcessor.new(:comments => ["//", ["/*", "*/"]])
+end