Fix postcss RTL and fix associated css rules

Author: cedric07

config/loaders.js

@@ -64,6 +64,12 @@ module.exports = {
                     'postcss-preset-env': {
                       browsers: 'last 2 versions, > 2%, not dead',
                       stage: 2,
+                      features: {
+                        // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values
+                        // https://stackoverflow.com/questions/64565180/how-to-prevent-postcss-preset-env-from-removing-css-logical-properties#answer-66966232
+                        // Use stage 2 features + disable logical properties and values rule
+                        'logical-properties-and-values': false,
+                      },
                     },
                     'postcss-pxtorem': { propWhiteList: [] },
                     'postcss-sort-media-queries': {},

src/scss/02-tools/_m-align.scss

@@ -21,18 +21,8 @@
     float: $direction;
 
     @if ($direction == left) {
-        margin-right: var(--spacing--block-1);
-
-        @include rtl {
-            margin-right: 0;
-            margin-left: var(--spacing--block-1);
-        }
+        margin-inline-end: var(--spacing--block-1);
     } @else {
-        margin-left: var(--spacing--block-1);
-
-        @include rtl {
-            margin-right: var(--spacing--block-1);
-            margin-left: 0;
-        }
+        margin-inline-start: var(--spacing--block-1);
     }
 }

src/scss/02-tools/_m-checkbox-custom.scss

@@ -27,14 +27,9 @@
     + label {
         position: relative;
         display: block;
-        padding-left: $size + 20;
+        padding-inline-start: $size + 20;
         cursor: pointer;
 
-        @include rtl {
-            padding-right: $size + 20;
-            padding-left: 0;
-        }
-
         &::before {
             position: absolute;
             top: 1px;

src/scss/05-components/_searchform.scss

@@ -6,12 +6,7 @@
     position: relative;
 
     &__field[type="search"] {
-        padding-right: var(--spacing--block-1);
-
-        @include rtl {
-            padding-right: 0;
-            padding-left: var(--spacing--block-1);
-        }
+        padding-inline-end: var(--spacing--block-1);
     }
 
     &__submit {

src/scss/05-components/_skip-links.scss

@@ -1,27 +1,36 @@
 .skip-links {
-    position: absolute;
+    position: fixed;
     top: var(--wp-admin-bar-height);
     left: 0;
-    z-index: 10;
-    display: flex;
-    padding: .5rem 1rem;
-    color: $color-text;
+    z-index: 11; // Under header
+    width: 100%;
+    padding: 8px 10px 10px;
     background-color: $color-primary;
     opacity: 0;
     transition: transform .3s $ease-out-expo, opacity .3s;
     transform: translate3d(0, -100%, 0);
 
+    ul {
+        display: flex;
+        list-style: none;
+    }
+
+    a {
+        font-size: 13px;
+        color: $color-text;
+        text-decoration: none;
+
+        &:focus {
+            outline-offset: 3px;
+        }
+    }
+
     &:focus-within {
         opacity: 1;
         transform: translate3d(0, 0, 0);
     }
 
     li:not(:last-of-type) {
-        margin-right: 1rem;
-
-        @include rtl {
-            margin-right: 0;
-            margin-left: 1rem;
-        }
+        margin-inline-end: 1rem;
     }
 }

src/scss/06-blocks/core/_quote.scss

@@ -1,17 +1,15 @@
 .wp-block-quote {
+    // Override for WordPress base wp-block-quote style for RTL compatibility
+    padding-left: 0;
+    padding-inline-start: 20px; // stylelint-disable-line order/properties-order
+    border-left: 0;
+    border-inline-start: 5px solid currentColor; // stylelint-disable-line order/properties-order
+
     //     p {
     //          ...
     //     }
     //     &__citation,
     //     cite {
     //          ...
     //     }
-
-    // For WordPress base wp-block-quote style
-    @include rtl {
-        padding-right: 1em;
-        padding-left: 0;
-        border-right: .25em solid currentColor;
-        border-left: 0;
-    }
 }

src/scss/08-template-parts/_header.scss

@@ -284,25 +284,15 @@
                 }
 
                 + li {
-                    margin-left: 28px;
-
-                    @include rtl {
-                        margin-right: 28px;
-                        margin-left: 0;
-                    }
+                    margin-inline-start: 28px;
                 }
 
                 &.menu-item-has-children {
                     padding-bottom: 38px;
 
                     > a {
                         max-width: none;
-                        margin-right: 14px;
-
-                        @include rtl {
-                            margin-right: 0;
-                            margin-left: 14px;
-                        }
+                        margin-inline-end: 14px;
                     }
                 }
             }