You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
#### Output using the combined mode (default and recommended)
148
125
149
-
This is the recommended method, it will generate more CSS code but each direction will have their specific CSS declarations and there is no need of overriding properties.
126
+
This is the recommended method, it will generate more CSS code because each direction will have their specific prefixed rules but it is the safest option.
150
127
151
128
```css
152
129
.test1, .test2 {
@@ -188,7 +165,7 @@ This is the recommended method, it will generate more CSS code but each directio
188
165
#### Output using the override mode
189
166
190
167
>[!IMPORTANT]
191
-
>This method is not recommended, check below why
168
+
>This method is not recommended, [check below why](#disadvantages-of-the-two-methods-to-override)
192
169
193
170
This is one of the alternative methods to override. It will generate less code because it lets the main rule intact most of the time and generates shorter specific rules to override the properties that are affected by the direction of the text.
194
171
@@ -227,7 +204,7 @@ This is one of the alternative methods to override. It will generate less code b
227
204
#### Output using the diff mode
228
205
229
206
>[!IMPORTANT]
230
-
>This method is not recommended, check below why
207
+
>This method is not recommended, [check below why](#disadvantages-of-the-two-methods-to-override)
231
208
232
209
This is the second alternative method to override. It generates the minimum amount of code because it only outputs the rules that have been flipped and without prefixing them. The intention of this method is to generate a separate stylesheet file that will be loaded on top of the original one to override those rules that need to be flipped in certain direction.
233
210
@@ -245,13 +222,7 @@ This is the second alternative method to override. It generates the minimum amou
245
222
}
246
223
```
247
224
248
-
>[!IMPORTANT]
249
-
>But the two methods to override have disadvantages:
250
-
251
-
<details><summary>Disadvantages of the override methods</summary>
252
-
<p>
253
-
254
-
The methods to override are discouraged because:
225
+
#### Disadvantages of the two methods to override
255
226
256
227
1. Some directives as `/*rtl:freeze*/`, `/*rtl:begin:freeze*/` and `/*rtl:end:freeze*/` do not work with these methods
257
228
2. They can override a property that is coming from another class if multiple classes are used at the same time. Take a look at the next `HTML` and `CSS` codes:
@@ -366,10 +337,7 @@ And using the `diff` method the generated code will be:
366
337
}
367
338
```
368
339
369
-
</p>
370
-
</details>
371
-
372
-
Options
340
+
Plugin Options
373
341
---
374
342
375
343
All the options are optional, and a default value will be used if any of them is omitted or the type or format of them is wrong
@@ -380,19 +348,19 @@ All the options are optional, and a default value will be used if any of them is
380
348
|[ltrPrefix](#ltrprefix-and-rtlprefix)|`string` or `string[]`|`[dir="ltr"]`| Prefix to use in the left-to-right CSS rules |
381
349
|[rtlPrefix](#ltrprefix-and-rtlprefix)|`string` or `string[]`|`[dir="rtl"]`| Prefix to use in the right-to-left CSS rules |
382
350
|[bothPrefix](#bothprefix)|`string` or `string[]`|`[dir]`| Prefix to create a new rule that affects both directions when the specificity of the ltr or rtl rules will override its declarations |
383
-
|[prefixSelectorTransformer](#prefixselectortransformer)|`function`|`null`| Transform function to have more control over the selectors prefixing logic |
351
+
|[prefixSelectorTransformer](#prefixselectortransformer)|`function`|`null`| Transform function to have more control over the selectors prefixing logic |
384
352
|[safeBothPrefix](#safebothprefix)|`boolean`|`false`| Add the `bothPrefix` to those declarations that can be affected by the direction to avoid them being overridden by specificity |
385
-
|[ignorePrefixedRules](#ignoreprefixedrules)|`boolean`| true| Ignores rules that have been prefixed with some of the prefixes contained in `ltrPrefix`, `rtlPrefix`, or `bothPrefix`|
353
+
|[ignorePrefixedRules](#ignoreprefixedrules)|`boolean`|`true`| Ignores rules that have been prefixed with some of the prefixes contained in `ltrPrefix`, `rtlPrefix`, or `bothPrefix`|
386
354
|[source](#source)|`Source (string)`|`Source.ltr`| The direction from which the final CSS will be generated |
387
-
|[processUrls](#processurls)|`boolean`|`false`| Change the strings in URLs using the string map |
355
+
|[processUrls](#processurls)|`boolean`|`false`| Change the strings in URLs using the string map |
388
356
|[processRuleNames](#processrulenames)|`boolean`|`false`| Swap two rules containing no directional properties if they match any entry in `stringMap` when the direction changes |
|[processEnv](#processenv)|`boolean`|`true`| When processEnv is false, it prevents flipping agent-defined environment variables (`safe-area-inset-left` and `safe-area-inset-right`) |
391
359
|[useCalc](#usecalc)|`boolean`|`false`| Flips `background-position-x` and `transform-origin` properties if they are expressed in length units using [calc](https://developer.mozilla.org/en-US/docs/Web/CSS/calc)|
392
-
|[stringMap](#stringmap)|`PluginStringMap[]`| Check below| An array of strings maps that will be used to make the replacements of the declarations' URLs and to match the names of the rules if `processRuleNames` is `true`|
360
+
|[stringMap](#stringmap)|`PluginStringMap[]`|[Check below](#stringmap)| An array of strings maps that will be used to make the replacements of the declarations' URLs and to match the names of the rules if `processRuleNames` is `true`|
393
361
|[greedy](#greedy)|`boolean`|`false`| When greedy is `true`, the matches of `stringMap` will not take into account word boundaries |
394
-
|[aliases](#aliases)|`Record<string, string>`|`{}`| A strings map to treat some declarations as others |
395
-
|[processDeclarationPlugins](#processdeclarationplugins)|`DeclarationPlugin[]`|`[]`| Plugins applied when processing CSS declarations |
362
+
|[aliases](#aliases)|`Record<string, string>`|`{}`| A strings map to treat some declarations as others |
363
+
|[processDeclarationPlugins](#processdeclarationplugins)|`DeclarationPlugin[]`|`[]`| Plugins applied when processing CSS declarations|
396
364
397
365
---
398
366
@@ -571,7 +539,7 @@ This function will be used to transform the selectors and prefixing them at our
571
539
572
540
>[!NOTE]
573
541
>* If the function doesn‘t return a string, the default prefixing logic will be used.
574
-
>* If this function is used, be aware that rules using `html`, `:root` or `:::view-transition` will follow the custom prefixing logic. You should cover these cases.
542
+
>* If this function is used, be aware that rules using `html`, `:root` or `::view-transition` will follow the custom prefixing logic. You should cover these cases.
575
543
576
544
##### input
577
545
@@ -1298,9 +1266,6 @@ const options = {
1298
1266
1299
1267
This property consists of a string map to treat some declarations as others, very useful to flip the values of [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).
1300
1268
1301
-
>[!NOTE]
1302
-
>This property is not available in the legacy version of the package
1303
-
1304
1269
##### input
1305
1270
1306
1271
```css
@@ -1412,24 +1377,24 @@ Control directives are placed between rules or declarations. They can target a s
1412
1377
>[!IMPORTANT]
1413
1378
>Block directives (the ones that start with `begin` and end with `end`) should be placed outside rules to apply the directive to multiple rules or inside a rule to apply the directive to multiple declarations. You should not place the begin of a directive outside a rule and the end inside one (or vice versa) or you will get undesired results.
|[/\*rtl:ignore\*/](#rtlignore)| Ignores processing of the following rule or declaration|
1418
-
|[/\*rtl:begin:ignore\*/](#rtlbeginignore-and-rtlendignore)| Starts an ignoring block|
1419
-
|[/\*rtl:end:ignore\*/](#rtlbeginignore-and-rtlendignore)| Ends an ignoring block|
1420
-
|[/\*rtl:freeze\*/](#rtlfreeze)| Freezes the rule or declaration in the current direction but does nothing with the counterpart direction if there are flippable declarations|
1421
-
|[/\*rtl:begin:freeze\*/](#rtlbeginfreeze-and-rtlendfreeze)| Starts a freeze block|
1422
-
|[/\*rtl:end:freeze\*/](#rtlbeginfreeze-and-rtlendfreeze)| Ends a freeze block|
1423
-
|[/\*rtl:urls\*/](#rtlurls)| This directive set the `processUrls` option to `true` in the next declaration or in the declarations of the next rule no mattering the value of the global `processUrls` option|
1424
-
|[/\*rtl:begin:urls\*/](#rtlbeginrules-and-rtlendrules)| Starts a `processUrls` block block|
1425
-
|[/\*rtl:end:urls\*/](#rtlbeginrules-and-rtlendrules)| Ends a `processUrls` block block|
1426
-
|[/\*rtl:rules\*/](#rtlrules)| This directive set the `processRuleNames` option to `true` in the next rule no mattering the value of the global `processRuleNames` option|
1427
-
|[/\*rtl:begin:rules\*/](#rtlbeginrules-and-rtlendrules)| Starts a `processRuleNames` block block |
1428
-
|[/\*rtl:end:rules\*/](#rtlbeginrules-and-rtlendrules)| Ends a `processRuleNames` block block |
1429
-
|[/\*rtl:source:{source}\*/](#rtlsourcesource)| Set the source of a rule or a declaration no mattering the value of the `source` property|
1430
-
|[/\*rtl:begin:source:{source}\*/](#rtlbeginsourcesource-and-rtlendsource)| Starts a source block |
1431
-
|[/\*rtl:end:source\*/](#rtlbeginsourcesource-and-rtlendsource)| Ends a source block|
1432
-
|[/\*rtl:raw:{CSS}\*/](#rtlrawcss)| Parses the `CSS` parameter and inserts it in its place. Depending on the `source` parameter the parsed `CSS` will be treated as `rtl` or `ltr`|
|[/\*rtl:ignore\*/](#rtlignore)| Ignores processing of the following rule or declaration |
1383
+
|[/\*rtl:begin:ignore\*/](#rtlbeginignore-and-rtlendignore)| Starts an ignoring block |
1384
+
|[/\*rtl:end:ignore\*/](#rtlbeginignore-and-rtlendignore)| Ends an ignoring block |
1385
+
|[/\*rtl:freeze\*/](#rtlfreeze)| Freezes the rule or declaration in the current direction but does nothing with the counterpart direction if there are flippable declarations |
1386
+
|[/\*rtl:begin:freeze\*/](#rtlbeginfreeze-and-rtlendfreeze)| Starts a freeze block |
1387
+
|[/\*rtl:end:freeze\*/](#rtlbeginfreeze-and-rtlendfreeze)| Ends a freeze block |
1388
+
|[/\*rtl:urls\*/](#rtlurls)| This directive set the `processUrls` option to `true` in the next declaration or in the declarations of the next rule no mattering the value of the global `processUrls` option |
1389
+
|[/\*rtl:begin:urls\*/](#rtlbeginrules-and-rtlendrules)| Starts a `processUrls` block block |
1390
+
|[/\*rtl:end:urls\*/](#rtlbeginrules-and-rtlendrules)| Ends a `processUrls` block block |
1391
+
|[/\*rtl:rules\*/](#rtlrules)| This directive set the `processRuleNames` option to `true` in the next rule no mattering the value of the global `processRuleNames` option |
1392
+
|[/\*rtl:begin:rules\*/](#rtlbeginrules-and-rtlendrules)| Starts a `processRuleNames` block block|
1393
+
|[/\*rtl:end:rules\*/](#rtlbeginrules-and-rtlendrules)| Ends a `processRuleNames` block block|
1394
+
|[/\*rtl:source:{source}\*/](#rtlsourcesource)| Set the source of a rule or a declaration no mattering the value of the `source` property |
1395
+
|[/\*rtl:begin:source:{source}\*/](#rtlbeginsourcesource-and-rtlendsource)| Starts a source block |
1396
+
|[/\*rtl:end:source\*/](#rtlbeginsourcesource-and-rtlendsource)| Ends a source block |
1397
+
|[/\*rtl:raw:{CSS}\*/](#rtlrawcss)| Parses the `CSS` parameter and inserts it in its place. Depending on the `source` parameter the parsed `CSS` will be treated as `rtl` or `ltr`|
>1. This directive only works in `combined` mode. If you use it in `override` or `diff` mode it will be ignored.
1566
-
>2. If you use this directive with declarations that are not affected by page direction, it is recommended that you set the [safeBothPrefix](#safebothprefix) option in `true`.
1567
-
1568
-
>[!NOTE]
1569
-
>This directive is not available in the legacy version of tha package
1530
+
>This directive only works in `combined` mode. If you use it in `override` or `diff` modes it will be ignored.
1570
1531
1571
-
This directive freezes the rule or declaration in the current direction but does nothing with the counterpart direction if there are flippable declarations. When used with a rule, it will freeze it in the current direction even if it is doesn't contain flippable declarations. When it is used in a declration, it will freeze the declaration in the current direction even if it is not flippable.
1532
+
This directive freezes the rule or declaration in the current direction but does nothing with the counterpart direction. When used with a rule, it will freeze it in the current direction even if it is doesn't contain flippable declarations. When it is used in a declration, it will freeze the declaration in the current direction even if it is not flippable.
1572
1533
1573
1534
##### input
1574
1535
@@ -1614,13 +1575,9 @@ This directive freezes the rule or declaration in the current direction but does
1614
1575
## /\*rtl:begin:freeze\*/ and /\*rtl:end:freeze\*/
1615
1576
1616
1577
>[!IMPORTANT]
1617
-
>1. This directive only works in `combined` mode. If you use it in `override` or `diff` mode it will be ignored.
1618
-
>2. If you use these directives with declarations that are not affected by page direction, it is recommended that you set the [safeBothPrefix](#safebothprefix) option in `true`.
1619
-
1620
-
>[!NOTE]
1621
-
>These directives are not available in the legacy version of tha package
1578
+
>This directive only works in `combined` mode. If you use it in `override` or `diff` modes it will be ignored.
1622
1579
1623
-
These directives should be used together, they will provide the beginning and the end for freezing rules or declarations. The rules or delclarations between these blocks, will be frozen in the current direction even if there are no flippable declarations involved.
1580
+
These directives should be used together, they will provide the beginning and the end for freezing rules or declarations. The rules or declarations between these blocks, will be frozen in the current direction even if there are no flippable declarations involved.
1624
1581
1625
1582
Freezing multiple rules:
1626
1583
@@ -2046,13 +2003,13 @@ Value Directives
2046
2003
2047
2004
Value directives are placed anywhere inside the declaration value. They target the containing declaration node.
0 commit comments