update examples in readme

Author: romainmenke

plugins/postcss-logical/README.md

@@ -23,14 +23,19 @@ physical, direction and dimension mappings in CSS, following the
 /* becomes */
 
 .banner:dir(ltr) {
-  padding-left: 20px; padding-right: 40px;
+  padding-left: 20px;
+  padding-right: 40px;
 }
-
 .banner:dir(rtl) {
-  padding-right: 20px; padding-left: 40px;
+  padding-right: 20px;
+  padding-left: 40px;
 }
-
 .banner {
+  color: #222222;
+  top: 0;
+  left: 5px;
+  bottom: 10px;
+  right: 5px;
   resize: vertical;
   transition: color 200ms;
 }
@@ -39,29 +44,36 @@ physical, direction and dimension mappings in CSS, following the
 
 .banner {
   color: #222222;
-  top: 0; left: 5px; bottom: 10px; right: 5px;
-  padding-left: 20px; padding-right: 40px;
+  top: 0;
+  left: 5px;
+  bottom: 10px;
+  right: 5px;
+  padding-left: 20px;
+  padding-right: 40px;
   resize: vertical;
   transition: color 200ms;
 }
 
 /* or, when used with { preserve: true } */
 
 .banner:dir(ltr) {
-  padding-left: 20px; padding-right: 40px;
+  padding-left: 20px;
+  padding-right: 40px;
 }
-
 .banner:dir(rtl) {
-  padding-right: 20px; padding-left: 40px;
+  padding-right: 20px;
+  padding-left: 40px;
 }
-
 .banner {
   color: #222222;
-  top: 0; left: 5px; bottom: 10px; right: 5px;
+  top: 0;
+  left: 5px;
+  bottom: 10px;
+  right: 5px;
   inset: logical 0 5px 10px;
   padding-inline: 20px 40px;
-  resize: block;
   resize: vertical;
+  resize: block;
   transition: color 200ms;
 }
 ```
@@ -122,7 +134,7 @@ any `[dir]` attributes, consider using the following JavaScript:
 
 ```js
 // force at least one dir attribute (this can run at any time)
-document.documentElement.dir=document.documentElement.dir||'ltr';
+document.documentElement.dir = document.documentElement.dir || 'ltr';
 ```
 
 Otherwise, consider using the `dir` option to transform all logical properties