diff --git a/README.md b/README.md index 0bede038..1af17a6a 100644 --- a/README.md +++ b/README.md @@ -666,6 +666,145 @@ Control directives are placed between rules or declaration. They can target a si | `/*rtl:begin:ignore*/` | Starts an ignoring block that will ignore any rule or declaration | | `/*rtl:end:ignore*/` | Ends an ignoring block | +--- + +#### `/*rtl:ignore*/` + +
Expand +

+ +This directive ignores processing of the following rule or declaration. In the next block the whole declaration will be ignored: + +##### input + +```css +/*rtl:ignore*/ +.test1, .test2 { + text-align: left; + left: 10px; +} +``` + +##### output + +```css +.test1, .test2 { + text-align: left; + left: 10px; +} +``` + +In the next block only the `left` property will be ignored: + +##### input + +```css +.test3, .test4 { + text-align: left; + /*rtl:ignore*/ + left: 10px; +} +``` + +##### output + +```css +.test3, .test4 { + left: 10px; +} + +[dir="ltr"] .test3, [dir="ltr"] .test4 { + text-align: left; +} + +[dir="rtl"] .test3, [dir="rtl"] .test4 { + text-align: right; +} +``` + +

+ +
+ +--- + +#### `/*rtl:begin:ignore*/` and `/*rtl:end:ignore*/` + +
Expand +

+ +These directives should be used together, they will provide the beginning and the end for ignoring rules or declarations: + +Ignoring multiple rules: + +##### input + +```css +/*rtl:begin:ignore*/ +.test1, .test2 { + left: 10px; + text-align: left; +} + +.test3 { + padding: 1px 2px 3px 4px; +} +/*rtl:end:ignore*/ +``` + +##### output + +```css +.test1, .test2 { + left: 10px; + text-align: left; +} + +.test3 { + padding: 1px 2px 3px 4px; +} +``` + +Ignoring multiple declarations: + +##### input + +```css +.test1, .test2 { + left: 10px; + /*rtl:begin:ignore*/ + margin-left: 4em; + padding: 1px 2px 3px 4px; + /*rtl:end:ignore*/ + text-align: left; +} +``` + +##### output + +```css +.test1, .test2 { + margin-left: 4em; + padding: 1px 2px 3px 4px; +} + +[dir="ltr"] .test1, [dir="ltr"] .test2 { + left: 10px; + text-align: left; +} + +[dir="rtl"] .test1, [dir="rtl"] .test2 { + right: 10px; + text-align: right; +} +``` + +

+ +
+ +--- + Value Directives --- @@ -679,6 +818,190 @@ Value directives are placed any where inside the declaration value. They target | `/*rtl:prepend:{value}*/`| Prepends `{value}` to the begining of the declaration value | | `/*rtl:{value}*/` | Replaces the declaration value with `{value}` | +--- + +#### `/*rtl:ignore*/` + +
Expand +

+ +This directive ignores processing of the current declaration: + +##### input + +```css +.test1, .test2 { + text-align: left /*rtl:ignore*/; + left: 10px; +} +``` + +##### output + +```css +.test1, .test2 { + text-align: left; +} + +[dir="ltr"] .test1, [dir="ltr"] .test2 { + left: 10px; +} + +[dir="rtl"] .test1, [dir="rtl"] .test2 { + right: 10px; +} +``` + +

+ +
+ +--- + +#### `/*rtl:append{value}*/` + +
Expand +

+ +This directive appends `{value}` to the end of the declaration value: + +##### input + +```css +.test1, .test2 { + padding: 10px /*rtl:append20px*/; + left: 10px; +} +``` + +##### output + +```css +[dir="ltr"] .test1, [dir="ltr"] .test2 { + padding: 10px; + left: 10px; +} + +[dir="rtl"] .test1, [dir="rtl"] .test2 { + padding: 10px 20px; + right: 10px; +} +``` + +

+ +
+ +--- + +#### `/*rtl:insert:{value}*/` + +
Expand +

+ +This directive inserts `{value}` to where the directive is located inside the declaration value: + +##### input + +```css +.test1, .test2 { + padding: 10px/*rtl:insert 20px*/ 5px; + left: 10px; +} +``` + +##### output + +```css +[dir="ltr"] .test1, [dir="ltr"] .test2 { + padding: 10px5px; + left: 10px; +} + +[dir="rtl"] .test1, [dir="rtl"] .test2 { + padding: 10px 20px 5px; + right: 10px; +} +``` + +

+ +
+ +--- + +#### `/*rtl:prepend:{value}*/` + +
Expand +

+ +This directive prepends `{value}` to the begining of the declaration value: + +##### input + +```css +.test1, .test2 { + font-family: Arial, Helvetica/*rtl:prepend:"Droid Arabic Kufi", */; + left: 10px; +} +``` + +##### output + +```css +[dir="ltr"] .test1, [dir="ltr"] .test2 { + font-family: Arial, Helvetica; + left: 10px; +} + +[dir="rtl"] .test1, [dir="rtl"] .test2 { + font-family: "Droid Arabic Kufi", Arial, Helvetica; + right: 10px; +} +``` + +

+ +
+ +--- + +#### `/*rtl:{value}*/` + +
Expand +

+ +This directive replaces the declaration value with `{value}`: + +##### input + +```css +.test1, .test2 { + font-family: Arial, Helvetica/*rtl:"Droid Arabic Kufi"*/; + left: 10px; +} +``` + +##### output + +```css +[dir="ltr"] .test1, [dir="ltr"] .test2 { + font-family: Arial, Helvetica; + left: 10px; +} + +[dir="rtl"] .test1, [dir="rtl"] .test2 { + font-family: "Droid Arabic Kufi"; + right: 10px; +} +``` + +

+ +
+ +--- + If you do not use PostCSS, add it according to [official docs] and set this plugin in settings. diff --git a/tests/__snapshots__/combined.test.ts.snap b/tests/__snapshots__/combined.test.ts.snap index 870bca16..be156e48 100644 --- a/tests/__snapshots__/combined.test.ts.snap +++ b/tests/__snapshots__/combined.test.ts.snap @@ -131,7 +131,7 @@ exports[`Combined Tests Combined {processUrls: true} 1`] = ` [dir=\\"rtl\\"] .test11:hover, [dir=\\"rtl\\"] .test11:active { - font-family: \\"Droid Arabic Kufi\\" Arial, Helvetica; + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; font-size: 30px; color: #000; transform: translateY(10px) scaleX(-1); @@ -300,7 +300,7 @@ exports[`Combined Tests Combined {source: rtl} 1`] = ` [dir=\\"ltr\\"] .test11:hover, [dir=\\"ltr\\"] .test11:active { - font-family: \\"Droid Arabic Kufi\\" Arial, Helvetica; + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; font-size: 30px; color: #000; transform: translateY(10px) scaleX(-1); @@ -471,7 +471,7 @@ exports[`Combined Tests Combined {useCalc: true} 1`] = ` [dir=\\"rtl\\"] .test11:hover, [dir=\\"rtl\\"] .test11:active { - font-family: \\"Droid Arabic Kufi\\" Arial, Helvetica; + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; font-size: 30px; color: #000; transform: translateY(10px) scaleX(-1); @@ -640,7 +640,7 @@ exports[`Combined Tests Combined Basic 1`] = ` [dir=\\"rtl\\"] .test11:hover, [dir=\\"rtl\\"] .test11:active { - font-family: \\"Droid Arabic Kufi\\" Arial, Helvetica; + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; font-size: 30px; color: #000; transform: translateY(10px) scaleX(-1); @@ -809,7 +809,7 @@ exports[`Combined Tests Combined custom ltrPrefix and rtlPrefix properties 1`] = .rtl .test11:hover, .rtl .test11:active { - font-family: \\"Droid Arabic Kufi\\" Arial, Helvetica; + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; font-size: 30px; color: #000; transform: translateY(10px) scaleX(-1); @@ -988,7 +988,7 @@ exports[`Combined Tests Combined custom ltrPrefix and rtlPrefix properties as ar .right-to-left .test11:hover, .rtl .test11:active, .right-to-left .test11:active { - font-family: \\"Droid Arabic Kufi\\" Arial, Helvetica; + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; font-size: 30px; color: #000; transform: translateY(10px) scaleX(-1); @@ -1157,7 +1157,7 @@ exports[`Combined Tests Combined custom string map 1`] = ` [dir=\\"rtl\\"] .test11:hover, [dir=\\"rtl\\"] .test11:active { - font-family: \\"Droid Arabic Kufi\\" Arial, Helvetica; + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; font-size: 30px; color: #000; transform: translateY(10px) scaleX(-1); diff --git a/tests/__snapshots__/override.test.ts.snap b/tests/__snapshots__/override.test.ts.snap index 39f72fd7..d2392b19 100644 --- a/tests/__snapshots__/override.test.ts.snap +++ b/tests/__snapshots__/override.test.ts.snap @@ -114,7 +114,7 @@ exports[`Override Tests Override {processUrls: true} 1`] = ` [dir=\\"rtl\\"] .test11:hover, [dir=\\"rtl\\"] .test11:active { - font-family: \\"Droid Arabic Kufi\\" Arial, Helvetica; + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; font-size: 30px; color: #000; transform: translateY(10px) scaleX(-1); @@ -266,7 +266,7 @@ exports[`Override Tests Override {source: rtl} 1`] = ` [dir=\\"ltr\\"] .test11:hover, [dir=\\"ltr\\"] .test11:active { - font-family: \\"Droid Arabic Kufi\\" Arial, Helvetica; + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; font-size: 30px; color: #000; transform: translateY(10px) scaleX(-1); @@ -420,7 +420,7 @@ exports[`Override Tests Override {useCalc: true} 1`] = ` [dir=\\"rtl\\"] .test11:hover, [dir=\\"rtl\\"] .test11:active { - font-family: \\"Droid Arabic Kufi\\" Arial, Helvetica; + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; font-size: 30px; color: #000; transform: translateY(10px) scaleX(-1); @@ -572,7 +572,7 @@ exports[`Override Tests Override Basic 1`] = ` [dir=\\"rtl\\"] .test11:hover, [dir=\\"rtl\\"] .test11:active { - font-family: \\"Droid Arabic Kufi\\" Arial, Helvetica; + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; font-size: 30px; color: #000; transform: translateY(10px) scaleX(-1); @@ -724,7 +724,7 @@ exports[`Override Tests Override custom ltrPrefix and rtlPrefix properties 1`] = .rtl .test11:hover, .rtl .test11:active { - font-family: \\"Droid Arabic Kufi\\" Arial, Helvetica; + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; font-size: 30px; color: #000; transform: translateY(10px) scaleX(-1); @@ -881,7 +881,7 @@ exports[`Override Tests Override custom ltrPrefix and rtlPrefix properties as ar .right-to-left .test11:hover, .rtl .test11:active, .right-to-left .test11:active { - font-family: \\"Droid Arabic Kufi\\" Arial, Helvetica; + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; font-size: 30px; color: #000; transform: translateY(10px) scaleX(-1); @@ -1033,7 +1033,7 @@ exports[`Override Tests Override custom string map 1`] = ` [dir=\\"rtl\\"] .test11:hover, [dir=\\"rtl\\"] .test11:active { - font-family: \\"Droid Arabic Kufi\\" Arial, Helvetica; + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; font-size: 30px; color: #000; transform: translateY(10px) scaleX(-1); diff --git a/tests/css/input.css b/tests/css/input.css index ce1f16e2..76a02149 100644 --- a/tests/css/input.css +++ b/tests/css/input.css @@ -59,7 +59,7 @@ .test11:hover, .test11:active { - font-family: Arial, Helvetica /* rtl:prepend:"Droid Arabic Kufi" */; + font-family: Arial, Helvetica /* rtl:prepend:"Droid Arabic Kufi", */; font-size: 20px /* rtl:30px */; color: '#FFF' /* rtl:#000 */; transform: translateY(10px) /* rtl:append:scaleX(-1) */;