RTL: Use a postcss plugin to generate RTL styling

Author: youknowriad

components/panel/style.scss

@@ -73,29 +73,22 @@
 	font-weight: 600;
 	text-align: left;
 
-	body.rtl & {
-		text-align: right;
-	}
-
 	.dashicon {
 		position: absolute;
 		right: $item-spacing;
 		top: 50%;
 		transform: translateY( -50% );
-
-		body.rtl & {
-			right: auto;
-			left: $item-spacing;
-		}
 	}
 
 	// mirror the arrow horizontally in RTL languages
+	/* rtl:begin:ignore */
 	body.rtl & .dashicons-arrow-right {
 		transform: scaleX(-1);
 		-ms-filter: fliph;
 		filter: FlipH;
 		margin-top: -10px;
 	}
+	/* rtl:end:ignore */
 }
 
 .components-panel__body-toggle-icon {

editor/assets/stylesheets/main.scss

@@ -30,12 +30,6 @@ body.gutenberg-editor-page {
 	ul#adminmenu>li.current>a.current:after {
 		border-right-color: $white;
 	}
-
-	&.rtl ul#adminmenu a.wp-has-current-submenu:after,
-	&.rtl ul#adminmenu>li.current>a.current:after {
-		border-right-color: transparent;
-		border-left-color: $white;
-	}
 }
 
 .gutenberg {

editor/edit-post/header/style.scss

@@ -20,11 +20,6 @@
 
 	@include break-large() {
 		left: $admin-sidebar-width;
-
-		body.rtl & {
-			left: 0;
-			right: $admin-sidebar-width;
-		}
 	}
 }
 
@@ -34,60 +29,29 @@
 	}
 }
 
-body.rtl.sticky-menu .editor-header {
-	@include break-medium() {
-		left: 0;
-		right: $admin-sidebar-width;
-	}
-}
-
 .auto-fold .editor-header {		/* Auto fold is when on smaller breakpoints, nav menu auto colllapses */
 	@include break-medium() {
 		left: $admin-sidebar-width-collapsed;
-
-		body.rtl & {
-			left: 0;
-			right: $admin-sidebar-width-collapsed;
-		}
 	}
 
 	@include break-large() {
 		left: $admin-sidebar-width;
-
-		body.rtl & {
-			left: 0;
-			right: $admin-sidebar-width;
-		}
 	}
 }
 
 /* Sidebar manually collapsed */
 .folded .editor-header {
 	left: 0;
 
-	body.rtl & {
-		right: 0;
-	}
-
 	@include break-medium() {
 		left: $admin-sidebar-width-collapsed;
-
-		body.rtl & {
-			left: 0;
-			right: $admin-sidebar-width-collapsed;
-		}
 	}
 }
 
 /* Mobile menu opened */
 .auto-fold .wp-responsive-open .editor-header {
 	left: $admin-sidebar-width-big;
 	right: -$admin-sidebar-width-big;
-
-	body.rtl & {
-		left: -$admin-sidebar-width-big;
-		right: $admin-sidebar-width-big;
-	}
 }
 
 .editor-header__settings {

editor/edit-post/sidebar/style.scss

@@ -11,13 +11,6 @@
 	height: 100vh;
 	overflow: hidden;
 
-	body.rtl & {
-		right: auto;
-		left: 0;
-		border-left: none;
-		border-right: 1px solid $light-gray-500;
-	}
-
 	@include break-small() {
 		top: $admin-bar-height-big + $header-height;
 		z-index: auto;
@@ -93,11 +86,6 @@
 .editor-layout.is-sidebar-opened .editor-layout__content {
 	@include break-medium() {
 		margin-right: $sidebar-width;
-
-		body.rtl & {
-			margin-right: 0;
-			margin-left: $sidebar-width;
-		}
 	}
 }
 
@@ -114,11 +102,6 @@
 /* Text Editor specific */
 .editor-layout.is-sidebar-opened .editor-text-editor__formatting {
 	margin-right: $sidebar-width;
-
-	body.rtl & {
-		margin-right: 0;
-		margin-left: $sidebar-width;
-	}
 }
 
 .components-panel__header.editor-sidebar__panel-tabs {
@@ -127,18 +110,8 @@
 	padding-left: 0;
 	padding-right: $panel-padding / 2;
 
-	body.rtl & {
-		padding-right: 0;
-		padding-left: $panel-padding / 2;
-	}
-
 	.components-icon-button {
 		margin-left: auto;
-
-		body.rtl & {
-			margin-left: 0;
-			margin-right: auto;
-		}
 	}
 }
 

package-lock.json

@@ -83,6 +83,7 @@
     "pegjs-loader": "0.5.4",
     "phpegjs": "1.0.0-beta7",
     "postcss-loader": "2.0.6",
+    "postcss-rtl": "1.1.3",
     "prismjs": "1.6.0",
     "raw-loader": "0.5.1",
     "react-markdown": "2.5.0",

package.json

@@ -28,6 +28,7 @@ const extractConfig = {
 			options: {
 				plugins: [
 					require( 'autoprefixer' ),
+					require( 'postcss-rtl' )(),
 				],
 			},
 		},