From e808d3394f1a55482e4b36957c187617bc549b83 Mon Sep 17 00:00:00 2001
From: petrukhin <petrukhin@yandex-team.ru>
Date: Mon, 11 Dec 2023 14:05:14 +0100
Subject: [PATCH] Update README

---
 packages/postcss-logical-fallback/README.md | 112 ++++++++++----------
 1 file changed, 57 insertions(+), 55 deletions(-)

diff --git a/packages/postcss-logical-fallback/README.md b/packages/postcss-logical-fallback/README.md
index b8bd75b..61b71f6 100644
--- a/packages/postcss-logical-fallback/README.md
+++ b/packages/postcss-logical-fallback/README.md
@@ -1,29 +1,60 @@
 # postcss-logical-fallback
 
-[PostCSS] плагин для поддержки логических свойств в старых браузерах
+This is [postcss](https://github.com/postcss/postcss) plugin for logical css props support in legacy browsers. Main idea of the plugin is
+an opportunity to write logical styles like in modern browsers in legacy browsers. When all of your
+supported browsers will support all modern logical spec you can just delete this plugin and don't rewrite
+your styles. Second idea of the plugin is to use logical props where they supported and do fallback only in
+non-supported browsers.
 
-[PostCSS]: https://github.com/postcss/postcss
+Main purpose of this plugin is creating fallbacks for bad supported logical props in legacy browsers.
+We have distinguished:
+- Absolute positioning props like
+  `inset-inline-start`, `inset-inline-end`,`inset-block-start`
+  and `inset-block-end` due to bad support in safari (14.1+ on desktop, 14.5+ on mobile),
+  chrome (87+) and firefox (66+) and due to high prevalence of these props.
 
-Цель данного плагина в том, чтобы создавать фолбеки для плохо поддерживаемых логических
-свойств.
-Мы выделили:
-- Cвойства для абсолютного позиционирования
-`inset-inline-start`, `inset-inline-end`,`inset-block-start`
-и `inset-block-end` из-за плохой поддержки в safari (14.1+ на десктопе, 14.5+ на мобилке),
-chrome (87+) и firefox (66+) и большой распространенности данных свойств
+- Shorthand props like `inset-inline`, `inset-block`, `margin-inline`, `margin-block`,
+  `padding-inline`, `padding-block` due to same bad support in browsers
 
-- Свойства сокращения `inset-inline`, `inset-block`, `margin-inline`, `margin-block`,
-`padding-inline`, `padding-block` из-за той же плохой поддержки в старых браузерах
+Full logical props support you can see [here](https://caniuse.com/css-logical-props)
 
-Подробнее про логические свойства, rtl и зачем нужен этот плагин
-можно почитать на [вики](https://wiki.yandex-team.ru/i18n/guide/rtl/)
+We recommend to use this plugin with [autoprefixer](https://github.com/postcss/autoprefixer)
+and setup our plugin before autoprefixer
 
-Данный плагин стоит использовать с [autoprefixer](https://github.com/postcss/autoprefixer)
-и ставить по порядку до него
+**WARNING**
+Plugin is based on @supports at rule, so it has to be supported, see on [can i use](https://caniuse.com/css-featurequeries)
 
-## Примеры
-### Фолбек для свойств абсолютного позиционирования
-До
+## Usage
+
+**Step 1:** install plugin and postcss
+
+```sh
+npm install --save-dev postcss postcss-logical-fallback
+```
+
+**Step 2:** Find config at the root of your project: `postcss.config.js`,
+`"postcss"` section in `package.json`
+or `postcss` section in your build config.
+
+If you haven't already use postcss you should setup it according to
+[official documentation](https://github.com/postcss/postcss#usage) and add postcss-logical-fallback
+after it.
+
+**Step 3:** Add plugin to the plugin list
+
+```diff
+module.exports = {
+  plugins: [
++   require('postcss-logical-fallback'),
+    require('autoprefixer')
+  ]
+}
+```
+
+## Examples
+### Fallback for absolute positioning props
+
+Before
 
 ```css
 .class {
@@ -32,7 +63,7 @@ chrome (87+) и firefox (66+) и большой распространеннос
 }
 ```
 
-После
+After
 
 ```css
 @supports (inset-block-start: 12px) {
@@ -55,8 +86,9 @@ chrome (87+) и firefox (66+) и большой распространеннос
 }
 ```
 
-### Фолбек для сокращений
-До
+### Fallback for shorthands
+
+Before
 
 ```css
 .class {
@@ -65,7 +97,7 @@ chrome (87+) и firefox (66+) и большой распространеннос
 }
 ```
 
-После
+After
 
 ```css
 .class {
@@ -77,9 +109,9 @@ chrome (87+) и firefox (66+) и большой распространеннос
 }
 ```
 
-### Фолбек для сокращений inset
+### Fallback for inset shorthands
 
-До
+Before
 
 ```css
 .class {
@@ -91,7 +123,7 @@ chrome (87+) и firefox (66+) и большой распространеннос
 }
 ```
 
-После
+After
 
 ```css
 @supports (inset-inline: 12px) {
@@ -122,33 +154,3 @@ chrome (87+) и firefox (66+) и большой распространеннос
 }
 
 ```
-
-Больше примеров можно найти [здесь](https://wiki.yandex-team.ru/i18n/guide/rtl/#primerytransformacijjplagina)
-
-## Использование
-
-**Шаг1:** Установите плагин:
-
-```sh
-npm install --save-dev postcss postcss-logical-fallback
-```
-
-**Шаг 2:** Найдите конфиг postcss в корне проекта: `postcss.config.js`,
-`"postcss"` секцию в `package.json`
-иди `postcss` в конфиге вашего сборщика.
-
-Если вы еще не используете postcss, то установите его в соответствии с
-[официальной документацией] и добавьте данный плагин после установки
-
-**Шаг 3:** Добавьте плагин в список плагинов
-
-```diff
-module.exports = {
-  plugins: [
-+   require('postcss-logical-fallback'),
-    require('autoprefixer')
-  ]
-}
-```
-
-[официальной документацией]: https://github.com/postcss/postcss#usage