diff --git a/CHANGELOG.md b/CHANGELOG.md index 840f930b..ac937927 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,10 @@ # Changelog +## [5.6.0] - 2024-12-13 + +- Add new directives to freeze rules and declarations `/*rtl:freeze*/`, `/*rtl:begin:freeze*/` and `/*rtl:end:freeze*/` +- Remove references to the legacy package + ## [5.5.1] - 2024-11-24 - Small refactor to avoid a circular dependency between two parsers diff --git a/README.md b/README.md index 95392f3f..87414418 100644 --- a/README.md +++ b/README.md @@ -24,31 +24,19 @@ Install #### npm ```bash -## Latest version (postcss@^8.0.0) npm install postcss-rtlcss --save-dev - -## Latest legacy version (postcss@^7.0.0) -npm install postcss-rtlcss@legacy --save-dev ``` #### pnpm ```bash -## Latest version (postcss@^8.0.0) pnpm add -D postcss-rtlcss - -## Latest legacy version (postcss@^7.0.0) -pnpm add -D postcss-rtlcss@legacy ``` #### yarn ```bash -## Latest version (postcss@^8.0.0) yarn add postcss-rtlcss -D - -## Latest legacy version (postcss@^7.0.0) -yarn add postcss-rtlcss@legacy -D ``` Basic usage @@ -69,11 +57,6 @@ const result = postcss([ const rtlCSS = result.css; ``` -##### commonJS with the versions 1.x.x - 2.x.x -```javascript -const { postcssRTLCSS, Mode, Source, Autorename } = require('postcss-rtlcss'); -``` - #### Usage with ES6 modules ```javascript @@ -89,12 +72,6 @@ const result = postcss([ const rtlCSS = result.css; ``` -##### ES6 modules with the versions 1.x.x - 2.x.x - -```javascript -import { postcssRTLCSS, Mode, Source, Autorename } from 'postcss-rtlcss'; -``` - #### Usage in Webpack with postcss-loader ```javascript @@ -144,9 +121,9 @@ Examples } ``` -#### Output using the combined mode (default) +#### Output using the combined mode (default and recommended) -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. +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. ```css .test1, .test2 { @@ -187,6 +164,9 @@ This is the recommended method, it will generate more CSS code but each directio #### Output using the override mode +>[!IMPORTANT] +>This method is not recommended, [check below why](#disadvantages-of-the-two-methods-to-override) + 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. ```css @@ -223,6 +203,9 @@ This is one of the alternative methods to override. It will generate less code b #### Output using the diff mode +>[!IMPORTANT] +>This method is not recommended, [check below why](#disadvantages-of-the-two-methods-to-override) + 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. ```css @@ -239,12 +222,10 @@ This is the second alternative method to override. It generates the minimum amou } ``` -But the two methods to override have a disadvantage: - -
Disadvantage of the override methods -

+#### Disadvantages of the two methods to override -Use these methods carefully. 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: +1. Some directives as `/*rtl:freeze*/`, `/*rtl:begin:freeze*/` and `/*rtl:end:freeze*/` do not work with these methods +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: ```html

@@ -312,7 +293,7 @@ And using the `diff` method the generated code will be the next one: } ``` -Now the `div` has a padding of `20px 10px 20px 20px` in `LTR` and `20px 0 20px 10px` in `RTL`, because when the class `test2` is overriden, it is not taken into account that it could be used with `test1` having the same properties. The solution, in this case, is to provide the property that has been inherited: +Now the `div` has a padding of `20px 10px 20px 20px` in `LTR` and `20px 0 20px 10px` in `RTL`, because when the class `test2` is overriden, it is not taken into account that it could be used with `test1` having the same properties. The workaround, in this case, is to provide the property that has been inherited: ```css .test1 { @@ -356,40 +337,34 @@ And using the `diff` method the generated code will be: } ``` -

-
- -Options +Plugin Options --- 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 -| Option | Type | Default | Description | -| ------------------ | ------------------------- | --------------- | ------------------------------------------------------------ | -| mode | `Mode (string)` | `Mode.combined` | Mode of generating the final CSS rules | -| ltrPrefix | `string` or `string[]` | `[dir="ltr"]` | Prefix to use in the left-to-right CSS rules | -| rtlPrefix | `string` or `string[]` | `[dir="rtl"]` | Prefix to use in the right-to-left CSS rules | -| 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 | -| prefixSelectorTransformer | `function` | `null` | Transform function to have more control over the selectors prefixing logic | -| safeBothPrefix | `boolean` | `false` | Add the `bothPrefix` to those declarations that can be affected by the direction to avoid them being overridden by specificity | -| ignorePrefixedRules| `boolean` | true | Ignores rules that have been prefixed with some of the prefixes contained in `ltrPrefix`, `rtlPrefix`, or `bothPrefix` | -| source | `Source (string)` | `Source.ltr` | The direction from which the final CSS will be generated | -| processUrls | `boolean` | `false` | Change the strings in URLs using the string map | -| processRuleNames | `boolean` | `false` | Swap two rules containing no directional properties if they match any entry in `stringMap` when the direction changes | -| processKeyFrames | `boolean` | `false` | Flip keyframe animations | -| processEnv | `boolean` | `true` | When processEnv is false, it prevents flipping agent-defined environment variables (`safe-area-inset-left` and `safe-area-inset-right`) | -| 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) | -| 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` | -| greedy | `boolean` | `false` | When greedy is `true`, the matches of `stringMap` will not take into account word boundaries | -| aliases | `Record` | `{}` | A strings map to treat some declarations as others | -| processDeclarationPlugins | `DeclarationPlugin[]` | `[]` | Plugins applied when processing CSS declarations | +| Option | Type | Default | Description | +| ------------------------------------------------------- | ------------------------- | --------------- | ------------------------------------------------------------ | +| [mode](#mode) | `Mode (string)` | `Mode.combined` | Mode of generating the final CSS rules | +| [ltrPrefix](#ltrprefix-and-rtlprefix) | `string` or `string[]` | `[dir="ltr"]` | Prefix to use in the left-to-right CSS rules | +| [rtlPrefix](#ltrprefix-and-rtlprefix) | `string` or `string[]` | `[dir="rtl"]` | Prefix to use in the right-to-left CSS rules | +| [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 | +| [prefixSelectorTransformer](#prefixselectortransformer) | `function` | `null` | Transform function to have more control over the selectors prefixing logic | +| [safeBothPrefix](#safebothprefix) | `boolean` | `false` | Add the `bothPrefix` to those declarations that can be affected by the direction to avoid them being overridden by specificity | +| [ignorePrefixedRules](#ignoreprefixedrules) | `boolean` | `true` | Ignores rules that have been prefixed with some of the prefixes contained in `ltrPrefix`, `rtlPrefix`, or `bothPrefix` | +| [source](#source) | `Source (string)` | `Source.ltr` | The direction from which the final CSS will be generated | +| [processUrls](#processurls) | `boolean` | `false` | Change the strings in URLs using the string map | +| [processRuleNames](#processrulenames) | `boolean` | `false` | Swap two rules containing no directional properties if they match any entry in `stringMap` when the direction changes | +| [processKeyFrames](#processkeyframes) | `boolean` | `false` | Flip keyframe animations | +| [processEnv](#processenv) | `boolean` | `true` | When processEnv is false, it prevents flipping agent-defined environment variables (`safe-area-inset-left` and `safe-area-inset-right`) | +| [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) | +| [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` | +| [greedy](#greedy) | `boolean` | `false` | When greedy is `true`, the matches of `stringMap` will not take into account word boundaries | +| [aliases](#aliases) | `Record` | `{}` | A strings map to treat some declarations as others | +| [processDeclarationPlugins](#processdeclarationplugins) | `DeclarationPlugin[]` | `[]` | Plugins applied when processing CSS declarations | --- -#### mode - -
Expand -

+## mode The mode option has been explained in the [Output using the combined mode](#output-using-the-combined-mode-default), the [Output using the override mode](#output-using-the-override-mode), and the [Output using the diff mode](#output-using-the-diff-mode) sections. To avoid using magic strings, the package exposes an object with these values, but it is possible to use strings values anyway: @@ -416,16 +391,9 @@ const outputDiff = postcss([ ]).process(input); ``` -

- -
- --- -#### ltrPrefix and rtlPrefix - -
Expand -

+## ltrPrefix and rtlPrefix These two options manage the prefix strings for each direction. They can be strings or arrays of strings: @@ -508,16 +476,9 @@ const options = { } ``` -

- -
- --- -#### bothPrefix - -
Expand -

+## bothPrefix This prefix will be used in some specific cases in which a ltr or rtl rule will override declarations located in the main rule due to [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity). Consider the next example using the option `processUrls` as `true`: @@ -570,22 +531,15 @@ To solve this, another rule will be created at the end using the `bothPrefix` pa And no matter the direction, the `background-size` property is respected. -

- -
- --- -#### prefixSelectorTransformer - -
Expand -

+## prefixSelectorTransformer This function will be used to transform the selectors and prefixing them at our will. The first parameter will be the prefix that will be used and the second the current selector: ->Notes: +>[!NOTE] >* If the function doesn‘t return a string, the default prefixing logic will be used. ->* 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. +>* 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. ##### input @@ -648,16 +602,9 @@ const options = { } ``` -

- -
- --- -#### safeBothPrefix - -
Expand -

+## safeBothPrefix This option will add the `boxPrefix` option to those declarations that can be flipped, no matter if they are not overridden in the same rule. This avoids them being overridden by [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) of other flipped declarations contained in other rules. For example, let's consider that we have a `div` element with the next rules: @@ -723,16 +670,9 @@ The result is that the `padding` properties of `test1` have more specificity tha As `test2` has the same level of specificity as `test1`, now the result is that the `padding` is reset if both rules are used at the same time. -

- -
- --- -#### ignorePrefixedRules - -
Expand -

+## ignorePrefixedRules This option is to ignore the rules that have been prefixed with one of the prefixes contained in `ltrPrefix`, `rtlPrefix`, or `bothPrefix`: @@ -792,16 +732,9 @@ const options = { ignorePrefixedRules: false }; } ``` -

- -
- --- -#### source - -
Expand -

+## source This option manages if the conversion will be from `LTR` to `RTL` or vice versa. @@ -860,16 +793,9 @@ const options = { } ``` -

- -
- --- -#### processUrls - -
Expand -

+## processUrls This options manages if the strings of the URLs should be flipped taken into account the string map: @@ -924,20 +850,14 @@ const options = { processUrls: true }; } ``` -

- -
- --- -#### processRuleNames - -
Expand -

+## processRuleNames If it is `true`, it swaps two rules containing no directional properties if they match any entry in `stringMap` when the direction changes ->Note that this option will not prefix those rules that have been processed already because they had directional properties. +>[!IMPORTANT] +>This option will not prefix those rules that have been processed already because they had directional properties. ##### input @@ -988,16 +908,9 @@ const options = { } ``` -

- -
- --- -#### processKeyFrames - -
Expand -

+## processKeyFrames This option manages if the @keyframes animation rules should be flipped: @@ -1083,16 +996,9 @@ const options = { processKeyFrames: true }; } ``` -

- -
- --- -#### processEnv - -
Expand -

+## processEnv This options manages if the agent-defined environment variables should be flipped: @@ -1188,16 +1094,9 @@ const options = { processEnv: false }; } ``` -

- -
- --- -#### useCalc - -
Expand -

+## useCalc When this option is enabled, it 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): @@ -1265,16 +1164,9 @@ const options = { useCalc: true }; } ``` -

- -
- --- -#### stringMap - -
Expand -

+## stringMap An array of strings maps that will be used to make the replacements of the declarations' URLs and to match rules selectors names if the `processRuleNames` option is `true`. The name parameter is optional, but if you want to override any of the default string maps, just add your own using the same name. @@ -1296,16 +1188,9 @@ const options = { }; ``` -

- -
- --- -#### greedy - -
Expand -

+## greedy When `greedy` is `true`, the matches of the `stringMap` will not take into account word boundaries. @@ -1375,21 +1260,12 @@ const options = { } ``` -

- -
- --- -#### aliases - -
Expand -

+## aliases 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). ->Note: This property is not available in the legacy version of the package - ##### input ```css @@ -1442,16 +1318,9 @@ const options = { } ``` -

- -
- --- -#### processDeclarationPlugins - -
Expand -

+## processDeclarationPlugins The intention of the processDeclarationPlugins option is to process the declarations to extend or override RTLCSS functionality. For example, we can avoid automatically flipping of `background-potion`. @@ -1498,10 +1367,6 @@ const options = { } ``` -

- -
- --- Control Directives @@ -1509,30 +1374,31 @@ Control Directives Control directives are placed between rules or declarations. They can target a single node or a set of nodes. ->Note: 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. - -| Directive | Description | -| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- | -| `/*rtl:ignore*/` | Ignores processing of the following rule or declaration | -| `/*rtl:begin:ignore*/` | Starts an ignoring block | -| `/*rtl:end:ignore*/` | Ends an ignoring block | -| `/*rtl:urls*/` | 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 | -| `/*rtl:begin:urls*/` | Starts a `processUrls` block block | -| `/*rtl:end:urls*/` | Ends a `processUrls` block block | -| `/*rtl:rules*/` | This directive set the `processRuleNames` option to `true` in the next rule no mattering the value of the global `processRuleNames` option | -| `/*rtl:begin:rules*/` | Starts a `processRuleNames` block block | -| `/*rtl:end:rules*/` | Ends a `processRuleNames` block block | -| `/*rtl:source:{source}*/`| Set the source of a rule or a declaration no mattering the value of the `source` property | -| `/*rtl:begin:source:{source}*/` | Starts a source block | -| `/*rtl:end:source*/` | Ends a source block | -| `/*rtl:raw:{CSS}*/` | 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` | +>[!IMPORTANT] +>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. + +| Directive | Description | +| -------------------------------------------------------------- | ------------------------------------------------------- | +| [/\*rtl:ignore\*/](#rtlignore) | Ignores processing of the following rule or declaration | +| [/\*rtl:begin:ignore\*/](#rtlbeginignore-and-rtlendignore) | Starts an ignoring block | +| [/\*rtl:end:ignore\*/](#rtlbeginignore-and-rtlendignore) | Ends an ignoring block | +| [/\*rtl:freeze\*/](#rtlfreeze) | Freezes the rule or declaration in the current direction but does nothing with the counterpart direction if there are flippable declarations | +| [/\*rtl:begin:freeze\*/](#rtlbeginfreeze-and-rtlendfreeze) | Starts a freeze block | +| [/\*rtl:end:freeze\*/](#rtlbeginfreeze-and-rtlendfreeze) | Ends a freeze block | +| [/\*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 | +| [/\*rtl:begin:urls\*/](#rtlbeginrules-and-rtlendrules) | Starts a `processUrls` block block | +| [/\*rtl:end:urls\*/](#rtlbeginrules-and-rtlendrules) | Ends a `processUrls` block block | +| [/\*rtl:rules\*/](#rtlrules) | This directive set the `processRuleNames` option to `true` in the next rule no mattering the value of the global `processRuleNames` option | +| [/\*rtl:begin:rules\*/](#rtlbeginrules-and-rtlendrules) | Starts a `processRuleNames` block block | +| [/\*rtl:end:rules\*/](#rtlbeginrules-and-rtlendrules) | Ends a `processRuleNames` block block | +| [/\*rtl:source:{source}\*/](#rtlsourcesource) | Set the source of a rule or a declaration no mattering the value of the `source` property | +| [/\*rtl:begin:source:{source}\*/](#rtlbeginsourcesource-and-rtlendsource) | Starts a source block | +| [/\*rtl:end:source\*/](#rtlbeginsourcesource-and-rtlendsource) | Ends a source block | +| [/\*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*/` - -
Expand -

+## /\*rtl:ignore\*/ This directive ignores processing of the following rule or declaration. In the next block the whole declaration will be ignored. @@ -1583,20 +1449,14 @@ In the next block only the `left` property will be ignored: } ``` -

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

+## /\*rtl:begin:ignore\*/ and /\*rtl:end:ignore\*/ These directives should be used together, they will provide the beginning and the end for ignoring rules or declarations. ->**Note:** The directives inserted between these blocks will be ignored and maintained in the final output. +>[!NOTE] +>The directives inserted between these blocks will be ignored and maintained in the final output. Ignoring multiple rules: @@ -1662,16 +1522,134 @@ Ignoring multiple declarations: } ``` -

+--- + +## /\*rtl:freeze\*/ -
+>[!IMPORTANT] +>This directive only works in `combined` mode. If you use it in `override` or `diff` modes it will be ignored. + +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. + +##### input + +```css +/*rtl:freeze*/ +.test1, .test2 { + color: red; + text-align: left; + left: 10px; +} + +.test3 { + /*rtl:freeze*/ + text-align: center; + /*rtl:freeze*/ + padding: 10px 20px 30px 40px; + margin: 1px 2px 3px 4px; +} +``` + +##### output + +```css +[dir="ltr"] .test1, [dir="ltr"] .test2 { + color: red; + text-align: left; + left: 10px; +} + +[dir="ltr"] .test3 { + text-align: center; + padding: 10px 40px 30px 20px; + margin: 1px 4px 3px 2px; +} + +[dir="rtl"] .test3 { + margin: 1px 4px 3px 2px; +} +``` --- -#### `/*rtl:urls*/` +## /\*rtl:begin:freeze\*/ and /\*rtl:end:freeze\*/ -
Expand -

+>[!IMPORTANT] +>This directive only works in `combined` mode. If you use it in `override` or `diff` modes it will be ignored. + +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. + +Freezing multiple rules: + +##### input + +```css +/*rtl:begin:freeze*/ +.test1, .test2 { + color: #FFF; + left: 10px; + text-align: left; +} + +.test3 { + padding: 1px 2px 3px 4px; +} +/*rtl:end:freeze*/ +``` + +##### output + +```css +[dir="ltr"] .test1, [dir="ltr"] .test2 { + color: #FFF; + left: 10px; + text-align: left; +} + +[dir="ltr"] .test3 { + padding: 1px 2px 3px 4px; +} +``` + +Freezing multiple declarations: + +##### input + +```css +.test1, .test2 { + color: red; + left: 10px; + /*rtl:begin:freeze*/ + margin-left: 4em; + padding: 1px 2px 3px 4px; + /*rtl:end:freeze*/ + text-align: left; +} +``` + +##### output + +```css +.test1, .test2 { + color: red; +} + +[dir="ltr"] .test1, [dir="ltr"] .test2 { + left: 10px; + margin-left: 4em; + padding: 1px 2px 3px 4px; + text-align: left; +} + +[dir="rtl"] .test1, [dir="rtl"] .test2 { + right: 10px; + text-align: right; +} +``` + +--- + +## /\*rtl:urls\*/ 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: @@ -1709,16 +1687,9 @@ This directive set the `processUrls` option to `true` in the next declaration or } ``` -

- -
- --- -#### `/*rtl:begin:urls*/` and `/*rtl:end:urls*/` - -
Expand -

+## /\*rtl:begin:urls\*/ and /\*rtl:end:urls\*/ These directives should be used together, they will provide the beginning and the end for `processUrls` blocks. @@ -1773,16 +1744,9 @@ These directives should be used together, they will provide the beginning and th } ``` -

- -
- --- -#### `/*rtl:rules*/` - -
Expand -

+## /\*rtl:rules\*/ This directive set the `processRuleNames` option to `true` in the next rule no mattering the value of the global `processRuleNames` option: @@ -1838,16 +1802,9 @@ This directive set the `processRuleNames` option to `true` in the next rule no m } ``` -

- -
- --- -#### `/*rtl:begin:rules*/` and `/*rtl:end:rules*/` - -
Expand -

+## /\*rtl:begin:rules\*/ and /\*rtl:end:rules\*/ These directives should be used together, they will provide the beginning and the end for `processRuleNames` blocks. @@ -1901,16 +1858,9 @@ These directives should be used together, they will provide the beginning and th } ``` -

- -
- --- -#### `/*rtl:source:{source}*/` - -
Expand -

+## /\*rtl:source:{source}\*/ This directive sets the source of a rule or a directive ignoring the value of the `source` property: @@ -1948,16 +1898,9 @@ This directive sets the source of a rule or a directive ignoring the value of th } ``` -

- -
- --- -#### `/*rtl:begin:source:{source}*/` and `/*rtl:end:source*/` - -
Expand -

+## /\*rtl:begin:source:{source}\*/ and /\*rtl:end:{source}\*/ These directives should be used together, they will provide the beginning and the end of source blocks for rules or declarations: @@ -1996,16 +1939,9 @@ These directives should be used together, they will provide the beginning and th } ``` -

- -
- --- -#### `/*rtl:raw:{CSS}*/` - -
Expand -

+## /\*rtl:raw:{CSS}\*/ 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`: @@ -2060,10 +1996,6 @@ Parses the `CSS` parameter and inserts it in its place. Depending on the `source } ``` -

- -
- --- Value Directives @@ -2071,20 +2003,17 @@ Value Directives Value directives are placed anywhere inside the declaration value. They target the containing declaration node. -| Directive | Description | -| ------------------------ | -------------------------------------------------------------------------------- | -| `/*rtl:ignore*/` | Ignores processing of the declaration | -| `/*rtl:append{value}*/` | Appends `{value}` to the end of the declaration value | -| `/*rtl:insert:{value}*/` | Inserts `{value}` to where the directive is located inside the declaration value | -| `/*rtl:prepend:{value}*/`| Prepends `{value}` to the begining of the declaration value | -| `/*rtl:{value}*/` | Replaces the declaration value with `{value}` | +| Directive | Description | +| --------------------------------------------- | -------------------------------------------------------------------------------- | +| [/\*rtl:ignore\*/](#rtlignore-1) | Ignores processing of the declaration | +| [/\*rtl:append{value}\*/](#rtlappendvalue) | Appends `{value}` to the end of the declaration value | +| [/\*rtl:insert:{value}\*/](#rtlinsertvalue) | Inserts `{value}` to where the directive is located inside the declaration value | +| [/\*rtl:prepend:{value}\*/](#rtlprependvalue) | Prepends `{value}` to the begining of the declaration value | +| [/\*rtl:{value}\*/](#rtlvalue) | Replaces the declaration value with `{value}` | --- -#### `/*rtl:ignore*/` - -
Expand -

+## /\*rtl:ignore\*/ This directive ignores processing of the current declaration: @@ -2113,16 +2042,9 @@ This directive ignores processing of the current declaration: } ``` -

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

+## /\*rtl:append{value}\*/ This directive appends `{value}` to the end of the declaration value: @@ -2149,16 +2071,9 @@ This directive appends `{value}` to the end of the declaration value: } ``` -

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

+## /\*rtl:insert:{value}\*/ This directive inserts `{value}` to where the directive is located inside the declaration value: @@ -2185,16 +2100,9 @@ This directive inserts `{value}` to where the directive is located inside the de } ``` -

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

+## /\*rtl:prepend:{value}\*/ This directive prepends `{value}` to the begining of the declaration value: @@ -2221,16 +2129,9 @@ This directive prepends `{value}` to the begining of the declaration value: } ``` -

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

+## /\*rtl:{value}\*/ This directive replaces the declaration value with `{value}`: @@ -2257,10 +2158,6 @@ This directive replaces the declaration value with `{value}`: } ``` -

- -
- --- If you do not use PostCSS, add it according to [official docs] diff --git a/src/@types/index.ts b/src/@types/index.ts index c0289b32..8ded1620 100644 --- a/src/@types/index.ts +++ b/src/@types/index.ts @@ -152,6 +152,7 @@ export type RuleParser = ( parsers: Parsers, container: Container, parentSourceDirective?: string, + parentFreezeDirectiveActive?: boolean, hasParentRule?: boolean ) => void; @@ -159,6 +160,7 @@ export type AtRuleParser = ( parsers: Parsers, container: Container, parentSourceDirective?: string, + parentFreezeDirectiveActive?: boolean, hasParentRule?: boolean ) => void; @@ -170,6 +172,7 @@ export type DeclarationParser = ( container: DeclarationContainer, hasParentRule: boolean, ruleSourceDirectiveValue: string, + parentFreezeDirectiveActive: boolean, processRule: boolean, rename: boolean ) => void; diff --git a/src/constants/index.ts b/src/constants/index.ts index d44a1bfc..1f6c3c45 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -27,6 +27,7 @@ export enum TYPEOF { export enum CONTROL_DIRECTIVE { IGNORE = 'ignore', + FREEZE = 'freeze', URLS = 'urls', RULES = 'rules', SOURCE = 'source', diff --git a/src/parsers/atrules.ts b/src/parsers/atrules.ts index 1d4319eb..ebfbc3b5 100644 --- a/src/parsers/atrules.ts +++ b/src/parsers/atrules.ts @@ -22,6 +22,7 @@ export const parseAtRules = ( parsers: Parsers, container: Container, parentSourceDirective: string = undefined, + parentFreezeDirectiveActive: boolean = false, hasParentRule = false ): void => { @@ -54,6 +55,11 @@ export const parseAtRules = ( parentSourceDirective ); + const freezeDirectiveActive = ( + checkDirective(controlDirectives, CONTROL_DIRECTIVE.FREEZE) || + parentFreezeDirectiveActive + ); + if ( hasParentRule && node.nodes @@ -62,6 +68,7 @@ export const parseAtRules = ( node, hasParentRule, sourceDirectiveValue, + freezeDirectiveActive, checkDirective(controlDirectives, CONTROL_DIRECTIVE.RULES), checkDirective(controlDirectives, CONTROL_DIRECTIVE.URLS) ); @@ -70,7 +77,8 @@ export const parseAtRules = ( parsers.parseAtRules( parsers, node, - parentSourceDirective, + sourceDirectiveValue, + freezeDirectiveActive, hasParentRule ); @@ -78,6 +86,7 @@ export const parseAtRules = ( parsers, node, sourceDirectiveValue, + freezeDirectiveActive, hasParentRule ); diff --git a/src/parsers/declarations.ts b/src/parsers/declarations.ts index cf5534d1..8a4ceda3 100644 --- a/src/parsers/declarations.ts +++ b/src/parsers/declarations.ts @@ -47,6 +47,7 @@ export const parseDeclarations = ( container: DeclarationContainer, hasParentRule: boolean, ruleSourceDirectiveValue: string, + ruleFreezeDirectiveActive: boolean, processRule: boolean, rename: boolean ): void => { @@ -151,11 +152,11 @@ export const parseDeclarations = ( return; } - const processUrlDirective = checkDirective(controlDirectives, CONTROL_DIRECTIVE.URLS); + const isProcessUrlDirectiveActive = checkDirective(controlDirectives, CONTROL_DIRECTIVE.URLS); const declString = `${decl.toString()};`; const declFlippedString = rtlcss.process(declString, { - processUrls: processUrls || processUrlDirective || rename, + processUrls: processUrls || isProcessUrlDirectiveActive || rename, processEnv, useCalc, stringMap, @@ -215,6 +216,18 @@ export const parseDeclarations = ( !sourceDirectiveValue || sourceDirectiveValue === source || mode === Mode.diff; + + if ( + checkDirective(controlDirectives, CONTROL_DIRECTIVE.FREEZE) || + ruleFreezeDirectiveActive + ) { + if (mode === Mode.combined) { + appendDeclarationToRule(decl, containerFlipped); + declarationsProps.push(declPropUnprefixed); + deleteDeclarations.push(decl); + } + return; + } if ( declProp === declFlippedProp && diff --git a/src/parsers/rules.ts b/src/parsers/rules.ts index 925fb4ef..0b5b07b9 100644 --- a/src/parsers/rules.ts +++ b/src/parsers/rules.ts @@ -24,6 +24,7 @@ export const parseRules = ( parsers: Parsers, container: Container, parentSourceDirective: string = undefined, + parentFreezeDirectiveActive: boolean = false, hasParentRule = false ): void => { @@ -92,12 +93,39 @@ export const parseRules = ( addToIgnoreRulesInDiffMode(node); return; } - + const sourceDirectiveValue = getSourceDirectiveValue( controlDirectives, parentSourceDirective ); + const freezeDirectiveActive = ( + checkDirective(controlDirectives, CONTROL_DIRECTIVE.FREEZE) || + parentFreezeDirectiveActive + ); + + if (freezeDirectiveActive) { + if (mode === Mode.combined) { + addSelectorPrefixes( + node, + ( + ( + !sourceDirectiveValue && + source === Source.ltr + ) || + ( + sourceDirectiveValue && + sourceDirectiveValue === Source.ltr + ) + ) + ? ltrPrefix + : rtlPrefix + ); + } + addToIgnoreRulesInDiffMode(node); + return; + } + if (hasSelectorsPrefixed(node)) { addToIgnoreRulesInDiffMode(node); } else { @@ -105,6 +133,7 @@ export const parseRules = ( node, hasParentRule, sourceDirectiveValue, + freezeDirectiveActive, checkDirective(controlDirectives, CONTROL_DIRECTIVE.RULES), checkDirective(controlDirectives, CONTROL_DIRECTIVE.URLS) ); @@ -113,14 +142,16 @@ export const parseRules = ( parsers.parseAtRules( parsers, node, - parentSourceDirective, + sourceDirectiveValue, + freezeDirectiveActive, true ); parsers.parseRules( parsers, node, - parentSourceDirective, + sourceDirectiveValue, + freezeDirectiveActive, true ); diff --git a/src/utilities/rules.ts b/src/utilities/rules.ts index c5fac774..52eb58c6 100644 --- a/src/utilities/rules.ts +++ b/src/utilities/rules.ts @@ -231,7 +231,14 @@ export const removeEmptyRules = (rule: Container): void => { export const appendRules = (): void => { const { rules } = store; - rules.forEach(({rule, ruleLTR, ruleRTL, ruleBoth, ruleSafe}): void => { + rules.forEach((ruleObject): void => { + const { + rule, + ruleLTR, + ruleRTL, + ruleBoth, + ruleSafe + } = ruleObject; if (ruleBoth.nodes.length) { rule.after(ruleBoth); } @@ -309,7 +316,7 @@ export const parseRuleNames = (): void => { let ruleFlippedSecond: Rule | undefined = undefined; for (const selector of rule.selectors) { - const flip = selector.replace(replaceRegExp, (match: string, group: string): string => replaceHash[group]); + const flip = selector.replace(replaceRegExp, (__match: string, group: string): string => replaceHash[group]); if (rulesHash[flip]) { ruleFlippedSecond = rulesHash[flip].clone(); break; diff --git a/src/utilities/selectors.ts b/src/utilities/selectors.ts index 4fdaa0c5..c63dbee0 100644 --- a/src/utilities/selectors.ts +++ b/src/utilities/selectors.ts @@ -66,13 +66,32 @@ export const addProperSelectorPrefixes = ( source } = store.options; if (mode === Mode.combined) { - addSelectorPrefixes(ruleFlipped, source === Source.ltr ? ltrPrefix : rtlPrefix); - addSelectorPrefixes(ruleFlippedSecond, source === Source.rtl ? ltrPrefix : rtlPrefix); + addSelectorPrefixes( + ruleFlipped, + source === Source.ltr + ? ltrPrefix + : rtlPrefix + ); + addSelectorPrefixes( + ruleFlippedSecond, + source === Source.ltr + ? rtlPrefix + : ltrPrefix + ); } else { - addSelectorPrefixes(ruleFlipped, source === Source.ltr ? rtlPrefix : ltrPrefix); - addSelectorPrefixes(ruleFlippedSecond, source === Source.rtl ? rtlPrefix : ltrPrefix); + addSelectorPrefixes( + ruleFlipped, + source === Source.ltr + ? rtlPrefix + : ltrPrefix + ); + addSelectorPrefixes( + ruleFlippedSecond, + source === Source.ltr + ? ltrPrefix + : rtlPrefix + ); } - addSelectorPrefixes(ruleBoth, bothPrefix); addSelectorPrefixes(ruleSafe, bothPrefix); }; \ No newline at end of file diff --git a/tests/__snapshots__/basic-options/combined/basic.snapshot b/tests/__snapshots__/basic-options/combined/basic.snapshot index b0c1e2db..f5df5fc1 100644 --- a/tests/__snapshots__/basic-options/combined/basic.snapshot +++ b/tests/__snapshots__/basic-options/combined/basic.snapshot @@ -666,5 +666,59 @@ html[dir="rtl"] .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +[dir="ltr"] .test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + z-index: 100; +} + +[dir="ltr"] .test55, [dir="ltr"] .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + margin: 10px 20px 30px 40px; + text-align: left; +} + +[dir="rtl"] .test55, [dir="rtl"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +[dir] .test55, [dir] .test56 { + background-clip: text; + -webkit-background-clip: text; +} + +@media only screen and (min-width: 630px) { + [dir="rtl"] .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + [dir="rtl"] .test58 { + padding: 20px; + margin: auto; + } +} + +html[dir="ltr"] .test59 { + border-radius: 5px; + text-align: left; +} + +[dir="ltr"]:root .test60, [dir="ltr"] .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/basic-options/combined/process-keyframes-true.snapshot b/tests/__snapshots__/basic-options/combined/process-keyframes-true.snapshot index e9a7db46..278dbfb2 100644 --- a/tests/__snapshots__/basic-options/combined/process-keyframes-true.snapshot +++ b/tests/__snapshots__/basic-options/combined/process-keyframes-true.snapshot @@ -734,5 +734,59 @@ html[dir="rtl"] .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +[dir="ltr"] .test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + z-index: 100; +} + +[dir="ltr"] .test55, [dir="ltr"] .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + margin: 10px 20px 30px 40px; + text-align: left; +} + +[dir="rtl"] .test55, [dir="rtl"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +[dir] .test55, [dir] .test56 { + background-clip: text; + -webkit-background-clip: text; +} + +@media only screen and (min-width: 630px) { + [dir="rtl"] .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + [dir="rtl"] .test58 { + padding: 20px; + margin: auto; + } +} + +html[dir="ltr"] .test59 { + border-radius: 5px; + text-align: left; +} + +[dir="ltr"]:root .test60, [dir="ltr"] .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/basic-options/combined/process-url-true.snapshot b/tests/__snapshots__/basic-options/combined/process-url-true.snapshot index ed7bdde6..9b8c351b 100644 --- a/tests/__snapshots__/basic-options/combined/process-url-true.snapshot +++ b/tests/__snapshots__/basic-options/combined/process-url-true.snapshot @@ -678,5 +678,59 @@ html[dir="rtl"] .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +[dir="ltr"] .test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + z-index: 100; +} + +[dir="ltr"] .test55, [dir="ltr"] .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + margin: 10px 20px 30px 40px; + text-align: left; +} + +[dir="rtl"] .test55, [dir="rtl"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +[dir] .test55, [dir] .test56 { + background-clip: text; + -webkit-background-clip: text; +} + +@media only screen and (min-width: 630px) { + [dir="rtl"] .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + [dir="rtl"] .test58 { + padding: 20px; + margin: auto; + } +} + +html[dir="ltr"] .test59 { + border-radius: 5px; + text-align: left; +} + +[dir="ltr"]:root .test60, [dir="ltr"] .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/basic-options/combined/source-rtl-and-process-keyframes-true.snapshot b/tests/__snapshots__/basic-options/combined/source-rtl-and-process-keyframes-true.snapshot index b4e55672..1a539fd1 100644 --- a/tests/__snapshots__/basic-options/combined/source-rtl-and-process-keyframes-true.snapshot +++ b/tests/__snapshots__/basic-options/combined/source-rtl-and-process-keyframes-true.snapshot @@ -734,5 +734,59 @@ html[dir="ltr"] .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +[dir="rtl"] .test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + z-index: 100; +} + +[dir="rtl"] .test55, [dir="rtl"] .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + margin: 10px 20px 30px 40px; + text-align: left; +} + +[dir="ltr"] .test55, [dir="ltr"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +[dir] .test55, [dir] .test56 { + background-clip: text; + -webkit-background-clip: text; +} + +@media only screen and (min-width: 630px) { + [dir="rtl"] .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + [dir="rtl"] .test58 { + padding: 20px; + margin: auto; + } +} + +html[dir="rtl"] .test59 { + border-radius: 5px; + text-align: left; +} + +[dir="rtl"]:root .test60, [dir="rtl"] .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/basic-options/combined/source-rtl.snapshot b/tests/__snapshots__/basic-options/combined/source-rtl.snapshot index a91febdb..b9da44d6 100644 --- a/tests/__snapshots__/basic-options/combined/source-rtl.snapshot +++ b/tests/__snapshots__/basic-options/combined/source-rtl.snapshot @@ -666,5 +666,59 @@ html[dir="ltr"] .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +[dir="rtl"] .test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + z-index: 100; +} + +[dir="rtl"] .test55, [dir="rtl"] .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + margin: 10px 20px 30px 40px; + text-align: left; +} + +[dir="ltr"] .test55, [dir="ltr"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +[dir] .test55, [dir] .test56 { + background-clip: text; + -webkit-background-clip: text; +} + +@media only screen and (min-width: 630px) { + [dir="rtl"] .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + [dir="rtl"] .test58 { + padding: 20px; + margin: auto; + } +} + +html[dir="rtl"] .test59 { + border-radius: 5px; + text-align: left; +} + +[dir="rtl"]:root .test60, [dir="rtl"] .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/basic-options/combined/use-calc-true.snapshot b/tests/__snapshots__/basic-options/combined/use-calc-true.snapshot index 526b11a6..37624d81 100644 --- a/tests/__snapshots__/basic-options/combined/use-calc-true.snapshot +++ b/tests/__snapshots__/basic-options/combined/use-calc-true.snapshot @@ -667,5 +667,59 @@ html[dir="rtl"] .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +[dir="ltr"] .test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + z-index: 100; +} + +[dir="ltr"] .test55, [dir="ltr"] .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + margin: 10px 20px 30px 40px; + text-align: left; +} + +[dir="rtl"] .test55, [dir="rtl"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +[dir] .test55, [dir] .test56 { + background-clip: text; + -webkit-background-clip: text; +} + +@media only screen and (min-width: 630px) { + [dir="rtl"] .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + [dir="rtl"] .test58 { + padding: 20px; + margin: auto; + } +} + +html[dir="ltr"] .test59 { + border-radius: 5px; + text-align: left; +} + +[dir="ltr"]:root .test60, [dir="ltr"] .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/basic-options/diff/basic.snapshot b/tests/__snapshots__/basic-options/diff/basic.snapshot index 86a13b43..e970449d 100644 --- a/tests/__snapshots__/basic-options/diff/basic.snapshot +++ b/tests/__snapshots__/basic-options/diff/basic.snapshot @@ -205,5 +205,11 @@ html .test50 { border-left: none; border-right: 1px solid #FFF; border: none; +} + +.test55, .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; }" `; diff --git a/tests/__snapshots__/basic-options/diff/process-keyframes-true.snapshot b/tests/__snapshots__/basic-options/diff/process-keyframes-true.snapshot index 7073d1bc..71685fd4 100644 --- a/tests/__snapshots__/basic-options/diff/process-keyframes-true.snapshot +++ b/tests/__snapshots__/basic-options/diff/process-keyframes-true.snapshot @@ -267,5 +267,11 @@ html .test50 { border-left: none; border-right: 1px solid #FFF; border: none; +} + +.test55, .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; }" `; diff --git a/tests/__snapshots__/basic-options/diff/process-url-true.snapshot b/tests/__snapshots__/basic-options/diff/process-url-true.snapshot index 62406462..f4cae85a 100644 --- a/tests/__snapshots__/basic-options/diff/process-url-true.snapshot +++ b/tests/__snapshots__/basic-options/diff/process-url-true.snapshot @@ -215,5 +215,11 @@ html .test50 { border-left: none; border-right: 1px solid #FFF; border: none; +} + +.test55, .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; }" `; diff --git a/tests/__snapshots__/basic-options/diff/source-rtl-and-process-keyframes-true.snapshot b/tests/__snapshots__/basic-options/diff/source-rtl-and-process-keyframes-true.snapshot index 188285d4..217c9952 100644 --- a/tests/__snapshots__/basic-options/diff/source-rtl-and-process-keyframes-true.snapshot +++ b/tests/__snapshots__/basic-options/diff/source-rtl-and-process-keyframes-true.snapshot @@ -267,5 +267,11 @@ html .test50 { border-left: none; border-right: 1px solid #FFF; border: none; +} + +.test55, .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; }" `; diff --git a/tests/__snapshots__/basic-options/diff/source-rtl.snapshot b/tests/__snapshots__/basic-options/diff/source-rtl.snapshot index 6ce5d1b3..1ad92e29 100644 --- a/tests/__snapshots__/basic-options/diff/source-rtl.snapshot +++ b/tests/__snapshots__/basic-options/diff/source-rtl.snapshot @@ -205,5 +205,11 @@ html .test50 { border-left: none; border-right: 1px solid #FFF; border: none; +} + +.test55, .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; }" `; diff --git a/tests/__snapshots__/basic-options/diff/use-calc-true.snapshot b/tests/__snapshots__/basic-options/diff/use-calc-true.snapshot index 90584220..05a6ee50 100644 --- a/tests/__snapshots__/basic-options/diff/use-calc-true.snapshot +++ b/tests/__snapshots__/basic-options/diff/use-calc-true.snapshot @@ -206,5 +206,11 @@ html .test50 { border-left: none; border-right: 1px solid #FFF; border: none; +} + +.test55, .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; }" `; diff --git a/tests/__snapshots__/basic-options/override/basic.snapshot b/tests/__snapshots__/basic-options/override/basic.snapshot index 95f5a5a4..ad66519a 100644 --- a/tests/__snapshots__/basic-options/override/basic.snapshot +++ b/tests/__snapshots__/basic-options/override/basic.snapshot @@ -615,5 +615,53 @@ html[dir="rtl"] .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +.test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + background-clip: text; + -webkit-background-clip: text; + margin: 10px 20px 30px 40px; + text-align: left; + z-index: 100; +} + +[dir="rtl"] .test55, [dir="rtl"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +@media only screen and (min-width: 630px) { + .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + .test58 { + padding: 20px; + margin: auto; + } +} + +html .test59 { + border-radius: 5px; + text-align: left; +} + +:root .test60, .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/basic-options/override/process-keyframes-true.snapshot b/tests/__snapshots__/basic-options/override/process-keyframes-true.snapshot index 7249cfa8..7c9c1a77 100644 --- a/tests/__snapshots__/basic-options/override/process-keyframes-true.snapshot +++ b/tests/__snapshots__/basic-options/override/process-keyframes-true.snapshot @@ -677,5 +677,53 @@ html[dir="rtl"] .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +.test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + background-clip: text; + -webkit-background-clip: text; + margin: 10px 20px 30px 40px; + text-align: left; + z-index: 100; +} + +[dir="rtl"] .test55, [dir="rtl"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +@media only screen and (min-width: 630px) { + .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + .test58 { + padding: 20px; + margin: auto; + } +} + +html .test59 { + border-radius: 5px; + text-align: left; +} + +:root .test60, .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/basic-options/override/process-url-true.snapshot b/tests/__snapshots__/basic-options/override/process-url-true.snapshot index 21b2d025..f23c165a 100644 --- a/tests/__snapshots__/basic-options/override/process-url-true.snapshot +++ b/tests/__snapshots__/basic-options/override/process-url-true.snapshot @@ -627,5 +627,53 @@ html[dir="rtl"] .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +.test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + background-clip: text; + -webkit-background-clip: text; + margin: 10px 20px 30px 40px; + text-align: left; + z-index: 100; +} + +[dir="rtl"] .test55, [dir="rtl"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +@media only screen and (min-width: 630px) { + .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + .test58 { + padding: 20px; + margin: auto; + } +} + +html .test59 { + border-radius: 5px; + text-align: left; +} + +:root .test60, .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/basic-options/override/source-rtl-and-process-keyframes-true.snapshot b/tests/__snapshots__/basic-options/override/source-rtl-and-process-keyframes-true.snapshot index 83071267..27e45324 100644 --- a/tests/__snapshots__/basic-options/override/source-rtl-and-process-keyframes-true.snapshot +++ b/tests/__snapshots__/basic-options/override/source-rtl-and-process-keyframes-true.snapshot @@ -671,5 +671,53 @@ html[dir="ltr"] .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +.test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + background-clip: text; + -webkit-background-clip: text; + margin: 10px 20px 30px 40px; + text-align: left; + z-index: 100; +} + +[dir="ltr"] .test55, [dir="ltr"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +@media only screen and (min-width: 630px) { + .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + .test58 { + padding: 20px; + margin: auto; + } +} + +html .test59 { + border-radius: 5px; + text-align: left; +} + +:root .test60, .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/basic-options/override/source-rtl.snapshot b/tests/__snapshots__/basic-options/override/source-rtl.snapshot index 4c431b97..fba24ca8 100644 --- a/tests/__snapshots__/basic-options/override/source-rtl.snapshot +++ b/tests/__snapshots__/basic-options/override/source-rtl.snapshot @@ -609,5 +609,53 @@ html[dir="ltr"] .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +.test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + background-clip: text; + -webkit-background-clip: text; + margin: 10px 20px 30px 40px; + text-align: left; + z-index: 100; +} + +[dir="ltr"] .test55, [dir="ltr"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +@media only screen and (min-width: 630px) { + .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + .test58 { + padding: 20px; + margin: auto; + } +} + +html .test59 { + border-radius: 5px; + text-align: left; +} + +:root .test60, .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/basic-options/override/use-calc-true.snapshot b/tests/__snapshots__/basic-options/override/use-calc-true.snapshot index 983cf514..1dc3aba4 100644 --- a/tests/__snapshots__/basic-options/override/use-calc-true.snapshot +++ b/tests/__snapshots__/basic-options/override/use-calc-true.snapshot @@ -616,5 +616,53 @@ html[dir="rtl"] .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +.test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + background-clip: text; + -webkit-background-clip: text; + margin: 10px 20px 30px 40px; + text-align: left; + z-index: 100; +} + +[dir="rtl"] .test55, [dir="rtl"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +@media only screen and (min-width: 630px) { + .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + .test58 { + padding: 20px; + margin: auto; + } +} + +html .test59 { + border-radius: 5px; + text-align: left; +} + +:root .test60, .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/prefixes/combined/custom-ltr-and-rtl-prefix-as-arrays.snapshot b/tests/__snapshots__/prefixes/combined/custom-ltr-and-rtl-prefix-as-arrays.snapshot index f2f3c16f..a548a60f 100644 --- a/tests/__snapshots__/prefixes/combined/custom-ltr-and-rtl-prefix-as-arrays.snapshot +++ b/tests/__snapshots__/prefixes/combined/custom-ltr-and-rtl-prefix-as-arrays.snapshot @@ -680,5 +680,59 @@ html.rtl .test50, html.right-to-left .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +.ltr .test54, .left-to-right .test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + z-index: 100; +} + +.ltr .test55, .left-to-right .test55, .ltr .test56, .left-to-right .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + margin: 10px 20px 30px 40px; + text-align: left; +} + +.rtl .test55, .right-to-left .test55, .rtl .test56, .right-to-left .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +.ltr .test55, .left-to-right .test55, .rtl .test55, .right-to-left .test55, .ltr .test56, .left-to-right .test56, .rtl .test56, .right-to-left .test56 { + background-clip: text; + -webkit-background-clip: text; +} + +@media only screen and (min-width: 630px) { + .rtl .test57, .right-to-left .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + .rtl .test58, .right-to-left .test58 { + padding: 20px; + margin: auto; + } +} + +html.ltr .test59, html.left-to-right .test59 { + border-radius: 5px; + text-align: left; +} + +.ltr:root .test60, .left-to-right:root .test60, .ltr .test61, .left-to-right .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/prefixes/combined/custom-ltr-and-rtl-prefix.snapshot b/tests/__snapshots__/prefixes/combined/custom-ltr-and-rtl-prefix.snapshot index 7f1bd17e..4b570ab2 100644 --- a/tests/__snapshots__/prefixes/combined/custom-ltr-and-rtl-prefix.snapshot +++ b/tests/__snapshots__/prefixes/combined/custom-ltr-and-rtl-prefix.snapshot @@ -666,5 +666,59 @@ html.rtl .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +.ltr .test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + z-index: 100; +} + +.ltr .test55, .ltr .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + margin: 10px 20px 30px 40px; + text-align: left; +} + +.rtl .test55, .rtl .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +.ltr .test55, .rtl .test55, .ltr .test56, .rtl .test56 { + background-clip: text; + -webkit-background-clip: text; +} + +@media only screen and (min-width: 630px) { + .rtl .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + .rtl .test58 { + padding: 20px; + margin: auto; + } +} + +html.ltr .test59 { + border-radius: 5px; + text-align: left; +} + +.ltr:root .test60, .ltr .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/prefixes/combined/custom-ltr-rtl-and-both-prefix-as-arrays-and-process-urls-true.snapshot b/tests/__snapshots__/prefixes/combined/custom-ltr-rtl-and-both-prefix-as-arrays-and-process-urls-true.snapshot index 4a4564af..e88b5022 100644 --- a/tests/__snapshots__/prefixes/combined/custom-ltr-rtl-and-both-prefix-as-arrays-and-process-urls-true.snapshot +++ b/tests/__snapshots__/prefixes/combined/custom-ltr-rtl-and-both-prefix-as-arrays-and-process-urls-true.snapshot @@ -692,5 +692,59 @@ html.rtl .test50, html.right-to-left .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +.ltr .test54, .left-to-right .test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + z-index: 100; +} + +.ltr .test55, .left-to-right .test55, .ltr .test56, .left-to-right .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + margin: 10px 20px 30px 40px; + text-align: left; +} + +.rtl .test55, .right-to-left .test55, .rtl .test56, .right-to-left .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +.ltr .test55, .left-to-right .test55, .rtl .test55, .right-to-left .test55, .ltr .test56, .left-to-right .test56, .rtl .test56, .right-to-left .test56 { + background-clip: text; + -webkit-background-clip: text; +} + +@media only screen and (min-width: 630px) { + .rtl .test57, .right-to-left .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + .rtl .test58, .right-to-left .test58 { + padding: 20px; + margin: auto; + } +} + +html.ltr .test59, html.left-to-right .test59 { + border-radius: 5px; + text-align: left; +} + +.ltr:root .test60, .left-to-right:root .test60, .ltr .test61, .left-to-right .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/prefixes/combined/prefix-selector-transformer-with-custom-ltr-and-rtl-prefixes.snapshot b/tests/__snapshots__/prefixes/combined/prefix-selector-transformer-with-custom-ltr-and-rtl-prefixes.snapshot index f1264860..8cc461a8 100644 --- a/tests/__snapshots__/prefixes/combined/prefix-selector-transformer-with-custom-ltr-and-rtl-prefixes.snapshot +++ b/tests/__snapshots__/prefixes/combined/prefix-selector-transformer-with-custom-ltr-and-rtl-prefixes.snapshot @@ -666,5 +666,59 @@ html.rtl .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +.ltr.test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + z-index: 100; +} + +.ltr.test55, .ltr.test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + margin: 10px 20px 30px 40px; + text-align: left; +} + +.rtl.test55, .rtl.test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +.ltr.test55, .rtl.test55, .ltr.test56, .rtl.test56 { + background-clip: text; + -webkit-background-clip: text; +} + +@media only screen and (min-width: 630px) { + .rtl.test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + .rtl.test58 { + padding: 20px; + margin: auto; + } +} + +html.ltr .test59 { + border-radius: 5px; + text-align: left; +} + +.ltr:root .test60, .ltr.test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/prefixes/combined/prefix-selector-transformer-with-default-prefixes.snapshot b/tests/__snapshots__/prefixes/combined/prefix-selector-transformer-with-default-prefixes.snapshot index 7d43873e..632b884c 100644 --- a/tests/__snapshots__/prefixes/combined/prefix-selector-transformer-with-default-prefixes.snapshot +++ b/tests/__snapshots__/prefixes/combined/prefix-selector-transformer-with-default-prefixes.snapshot @@ -666,5 +666,59 @@ html[dir="rtl"] .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +[dir="ltr"] > .test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + z-index: 100; +} + +[dir="ltr"] > .test55, [dir="ltr"] > .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + margin: 10px 20px 30px 40px; + text-align: left; +} + +[dir="rtl"] > .test55, [dir="rtl"] > .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +[dir] > .test55, [dir] > .test56 { + background-clip: text; + -webkit-background-clip: text; +} + +@media only screen and (min-width: 630px) { + [dir="rtl"] > .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + [dir="rtl"] > .test58 { + padding: 20px; + margin: auto; + } +} + +html[dir="ltr"] .test59 { + border-radius: 5px; + text-align: left; +} + +[dir="ltr"]:root .test60, [dir="ltr"] > .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/prefixes/diff/custom-ltr-and-rtl-prefix-as-arrays.snapshot b/tests/__snapshots__/prefixes/diff/custom-ltr-and-rtl-prefix-as-arrays.snapshot index cfe73d4e..569f58fb 100644 --- a/tests/__snapshots__/prefixes/diff/custom-ltr-and-rtl-prefix-as-arrays.snapshot +++ b/tests/__snapshots__/prefixes/diff/custom-ltr-and-rtl-prefix-as-arrays.snapshot @@ -205,5 +205,11 @@ html .test50 { border-left: none; border-right: 1px solid #FFF; border: none; +} + +.test55, .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; }" `; diff --git a/tests/__snapshots__/prefixes/diff/custom-ltr-and-rtl-prefix.snapshot b/tests/__snapshots__/prefixes/diff/custom-ltr-and-rtl-prefix.snapshot index 820a66d9..804c4294 100644 --- a/tests/__snapshots__/prefixes/diff/custom-ltr-and-rtl-prefix.snapshot +++ b/tests/__snapshots__/prefixes/diff/custom-ltr-and-rtl-prefix.snapshot @@ -205,5 +205,11 @@ html .test50 { border-left: none; border-right: 1px solid #FFF; border: none; +} + +.test55, .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; }" `; diff --git a/tests/__snapshots__/prefixes/diff/custom-ltr-rtl-and-both-prefix-as-arrays-and-process-urls-true.snapshot b/tests/__snapshots__/prefixes/diff/custom-ltr-rtl-and-both-prefix-as-arrays-and-process-urls-true.snapshot index a9eda6cc..d7be43a5 100644 --- a/tests/__snapshots__/prefixes/diff/custom-ltr-rtl-and-both-prefix-as-arrays-and-process-urls-true.snapshot +++ b/tests/__snapshots__/prefixes/diff/custom-ltr-rtl-and-both-prefix-as-arrays-and-process-urls-true.snapshot @@ -215,5 +215,11 @@ html .test50 { border-left: none; border-right: 1px solid #FFF; border: none; +} + +.test55, .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; }" `; diff --git a/tests/__snapshots__/prefixes/diff/prefix-selector-transformer-with-custom-ltr-and-rtl-prefixes.snapshot b/tests/__snapshots__/prefixes/diff/prefix-selector-transformer-with-custom-ltr-and-rtl-prefixes.snapshot index 67ef8844..c1ac97ad 100644 --- a/tests/__snapshots__/prefixes/diff/prefix-selector-transformer-with-custom-ltr-and-rtl-prefixes.snapshot +++ b/tests/__snapshots__/prefixes/diff/prefix-selector-transformer-with-custom-ltr-and-rtl-prefixes.snapshot @@ -205,5 +205,11 @@ html .test50 { border-left: none; border-right: 1px solid #FFF; border: none; +} + +.test55, .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; }" `; diff --git a/tests/__snapshots__/prefixes/diff/prefix-selector-transformer-with-default-prefixes.snapshot b/tests/__snapshots__/prefixes/diff/prefix-selector-transformer-with-default-prefixes.snapshot index b9051561..a44bcc16 100644 --- a/tests/__snapshots__/prefixes/diff/prefix-selector-transformer-with-default-prefixes.snapshot +++ b/tests/__snapshots__/prefixes/diff/prefix-selector-transformer-with-default-prefixes.snapshot @@ -205,5 +205,11 @@ html .test50 { border-left: none; border-right: 1px solid #FFF; border: none; +} + +.test55, .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; }" `; diff --git a/tests/__snapshots__/prefixes/override/custom-ltr-and-rtl-prefix-as-arrays.snapshot b/tests/__snapshots__/prefixes/override/custom-ltr-and-rtl-prefix-as-arrays.snapshot index c0ab887c..254fddc8 100644 --- a/tests/__snapshots__/prefixes/override/custom-ltr-and-rtl-prefix-as-arrays.snapshot +++ b/tests/__snapshots__/prefixes/override/custom-ltr-and-rtl-prefix-as-arrays.snapshot @@ -622,5 +622,53 @@ html.rtl .test50, html.right-to-left .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +.test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + background-clip: text; + -webkit-background-clip: text; + margin: 10px 20px 30px 40px; + text-align: left; + z-index: 100; +} + +.rtl .test55, .right-to-left .test55, .rtl .test56, .right-to-left .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +@media only screen and (min-width: 630px) { + .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + .test58 { + padding: 20px; + margin: auto; + } +} + +html .test59 { + border-radius: 5px; + text-align: left; +} + +:root .test60, .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/prefixes/override/custom-ltr-and-rtl-prefix.snapshot b/tests/__snapshots__/prefixes/override/custom-ltr-and-rtl-prefix.snapshot index 88882814..940c4862 100644 --- a/tests/__snapshots__/prefixes/override/custom-ltr-and-rtl-prefix.snapshot +++ b/tests/__snapshots__/prefixes/override/custom-ltr-and-rtl-prefix.snapshot @@ -615,5 +615,53 @@ html.rtl .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +.test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + background-clip: text; + -webkit-background-clip: text; + margin: 10px 20px 30px 40px; + text-align: left; + z-index: 100; +} + +.rtl .test55, .rtl .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +@media only screen and (min-width: 630px) { + .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + .test58 { + padding: 20px; + margin: auto; + } +} + +html .test59 { + border-radius: 5px; + text-align: left; +} + +:root .test60, .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/prefixes/override/custom-ltr-rtl-and-both-prefix-as-arrays-and-process-urls-true.snapshot b/tests/__snapshots__/prefixes/override/custom-ltr-rtl-and-both-prefix-as-arrays-and-process-urls-true.snapshot index 540f8eb6..99da0b4c 100644 --- a/tests/__snapshots__/prefixes/override/custom-ltr-rtl-and-both-prefix-as-arrays-and-process-urls-true.snapshot +++ b/tests/__snapshots__/prefixes/override/custom-ltr-rtl-and-both-prefix-as-arrays-and-process-urls-true.snapshot @@ -634,5 +634,53 @@ html.rtl .test50, html.right-to-left .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +.test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + background-clip: text; + -webkit-background-clip: text; + margin: 10px 20px 30px 40px; + text-align: left; + z-index: 100; +} + +.rtl .test55, .right-to-left .test55, .rtl .test56, .right-to-left .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +@media only screen and (min-width: 630px) { + .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + .test58 { + padding: 20px; + margin: auto; + } +} + +html .test59 { + border-radius: 5px; + text-align: left; +} + +:root .test60, .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/prefixes/override/prefix-selector-transformer-with-custom-ltr-and-rtl-prefixes.snapshot b/tests/__snapshots__/prefixes/override/prefix-selector-transformer-with-custom-ltr-and-rtl-prefixes.snapshot index b294487d..08bab2e1 100644 --- a/tests/__snapshots__/prefixes/override/prefix-selector-transformer-with-custom-ltr-and-rtl-prefixes.snapshot +++ b/tests/__snapshots__/prefixes/override/prefix-selector-transformer-with-custom-ltr-and-rtl-prefixes.snapshot @@ -615,5 +615,53 @@ html.rtl .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +.test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + background-clip: text; + -webkit-background-clip: text; + margin: 10px 20px 30px 40px; + text-align: left; + z-index: 100; +} + +.rtl.test55, .rtl.test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +@media only screen and (min-width: 630px) { + .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + .test58 { + padding: 20px; + margin: auto; + } +} + +html .test59 { + border-radius: 5px; + text-align: left; +} + +:root .test60, .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/prefixes/override/prefix-selector-transformer-with-default-prefixes.snapshot b/tests/__snapshots__/prefixes/override/prefix-selector-transformer-with-default-prefixes.snapshot index 27d97bff..4d18b1ae 100644 --- a/tests/__snapshots__/prefixes/override/prefix-selector-transformer-with-default-prefixes.snapshot +++ b/tests/__snapshots__/prefixes/override/prefix-selector-transformer-with-default-prefixes.snapshot @@ -615,5 +615,53 @@ html[dir="rtl"] .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +.test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + background-clip: text; + -webkit-background-clip: text; + margin: 10px 20px 30px 40px; + text-align: left; + z-index: 100; +} + +[dir="rtl"] > .test55, [dir="rtl"] > .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +@media only screen and (min-width: 630px) { + .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + .test58 { + padding: 20px; + margin: auto; + } +} + +html .test59 { + border-radius: 5px; + text-align: left; +} + +:root .test60, .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/rule-names/combined/process-rules-names-true-greedy-true.snapshot b/tests/__snapshots__/rule-names/combined/process-rules-names-true-greedy-true.snapshot index 4477d3f1..e1f04de6 100644 --- a/tests/__snapshots__/rule-names/combined/process-rules-names-true-greedy-true.snapshot +++ b/tests/__snapshots__/rule-names/combined/process-rules-names-true-greedy-true.snapshot @@ -674,5 +674,59 @@ html[dir="rtl"] .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +[dir="ltr"] .test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + z-index: 100; +} + +[dir="ltr"] .test55, [dir="ltr"] .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + margin: 10px 20px 30px 40px; + text-align: left; +} + +[dir="rtl"] .test55, [dir="rtl"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +[dir] .test55, [dir] .test56 { + background-clip: text; + -webkit-background-clip: text; +} + +@media only screen and (min-width: 630px) { + [dir="rtl"] .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + [dir="rtl"] .test58 { + padding: 20px; + margin: auto; + } +} + +html[dir="ltr"] .test59 { + border-radius: 5px; + text-align: left; +} + +[dir="ltr"]:root .test60, [dir="ltr"] .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/rule-names/combined/process-rules-names-true-source-rtl-greedy-true.snapshot b/tests/__snapshots__/rule-names/combined/process-rules-names-true-source-rtl-greedy-true.snapshot index 33961658..ed9e232a 100644 --- a/tests/__snapshots__/rule-names/combined/process-rules-names-true-source-rtl-greedy-true.snapshot +++ b/tests/__snapshots__/rule-names/combined/process-rules-names-true-source-rtl-greedy-true.snapshot @@ -674,5 +674,59 @@ html[dir="ltr"] .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +[dir="rtl"] .test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + z-index: 100; +} + +[dir="rtl"] .test55, [dir="rtl"] .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + margin: 10px 20px 30px 40px; + text-align: left; +} + +[dir="ltr"] .test55, [dir="ltr"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +[dir] .test55, [dir] .test56 { + background-clip: text; + -webkit-background-clip: text; +} + +@media only screen and (min-width: 630px) { + [dir="rtl"] .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + [dir="rtl"] .test58 { + padding: 20px; + margin: auto; + } +} + +html[dir="rtl"] .test59 { + border-radius: 5px; + text-align: left; +} + +[dir="rtl"]:root .test60, [dir="rtl"] .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/rule-names/combined/process-rules-names-true-with-custom-string-map-and-greedy-true.snapshot b/tests/__snapshots__/rule-names/combined/process-rules-names-true-with-custom-string-map-and-greedy-true.snapshot index ff113f74..aadea657 100644 --- a/tests/__snapshots__/rule-names/combined/process-rules-names-true-with-custom-string-map-and-greedy-true.snapshot +++ b/tests/__snapshots__/rule-names/combined/process-rules-names-true-with-custom-string-map-and-greedy-true.snapshot @@ -682,5 +682,59 @@ html[dir="rtl"] .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +[dir="ltr"] .test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + z-index: 100; +} + +[dir="ltr"] .test55, [dir="ltr"] .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + margin: 10px 20px 30px 40px; + text-align: left; +} + +[dir="rtl"] .test55, [dir="rtl"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +[dir] .test55, [dir] .test56 { + background-clip: text; + -webkit-background-clip: text; +} + +@media only screen and (min-width: 630px) { + [dir="rtl"] .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + [dir="rtl"] .test58 { + padding: 20px; + margin: auto; + } +} + +html[dir="ltr"] .test59 { + border-radius: 5px; + text-align: left; +} + +[dir="ltr"]:root .test60, [dir="ltr"] .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/rule-names/combined/process-rules-names-true-with-custom-string-map-rtl-and-greedy-true.snapshot b/tests/__snapshots__/rule-names/combined/process-rules-names-true-with-custom-string-map-rtl-and-greedy-true.snapshot index d9c8dff1..5c925a83 100644 --- a/tests/__snapshots__/rule-names/combined/process-rules-names-true-with-custom-string-map-rtl-and-greedy-true.snapshot +++ b/tests/__snapshots__/rule-names/combined/process-rules-names-true-with-custom-string-map-rtl-and-greedy-true.snapshot @@ -682,5 +682,59 @@ html[dir="ltr"] .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +[dir="rtl"] .test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + z-index: 100; +} + +[dir="rtl"] .test55, [dir="rtl"] .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + margin: 10px 20px 30px 40px; + text-align: left; +} + +[dir="ltr"] .test55, [dir="ltr"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +[dir] .test55, [dir] .test56 { + background-clip: text; + -webkit-background-clip: text; +} + +@media only screen and (min-width: 630px) { + [dir="rtl"] .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + [dir="rtl"] .test58 { + padding: 20px; + margin: auto; + } +} + +html[dir="rtl"] .test59 { + border-radius: 5px; + text-align: left; +} + +[dir="rtl"]:root .test60, [dir="rtl"] .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/rule-names/combined/process-rules-names-true-with-custom-string-map.snapshot b/tests/__snapshots__/rule-names/combined/process-rules-names-true-with-custom-string-map.snapshot index 6970b81b..40e236ba 100644 --- a/tests/__snapshots__/rule-names/combined/process-rules-names-true-with-custom-string-map.snapshot +++ b/tests/__snapshots__/rule-names/combined/process-rules-names-true-with-custom-string-map.snapshot @@ -674,5 +674,59 @@ html[dir="rtl"] .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +[dir="ltr"] .test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + z-index: 100; +} + +[dir="ltr"] .test55, [dir="ltr"] .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + margin: 10px 20px 30px 40px; + text-align: left; +} + +[dir="rtl"] .test55, [dir="rtl"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +[dir] .test55, [dir] .test56 { + background-clip: text; + -webkit-background-clip: text; +} + +@media only screen and (min-width: 630px) { + [dir="rtl"] .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + [dir="rtl"] .test58 { + padding: 20px; + margin: auto; + } +} + +html[dir="ltr"] .test59 { + border-radius: 5px; + text-align: left; +} + +[dir="ltr"]:root .test60, [dir="ltr"] .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/rule-names/combined/process-rules-names-true.snapshot b/tests/__snapshots__/rule-names/combined/process-rules-names-true.snapshot index d6fd50de..bfe833bc 100644 --- a/tests/__snapshots__/rule-names/combined/process-rules-names-true.snapshot +++ b/tests/__snapshots__/rule-names/combined/process-rules-names-true.snapshot @@ -666,5 +666,59 @@ html[dir="rtl"] .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +[dir="ltr"] .test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + z-index: 100; +} + +[dir="ltr"] .test55, [dir="ltr"] .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + margin: 10px 20px 30px 40px; + text-align: left; +} + +[dir="rtl"] .test55, [dir="rtl"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +[dir] .test55, [dir] .test56 { + background-clip: text; + -webkit-background-clip: text; +} + +@media only screen and (min-width: 630px) { + [dir="rtl"] .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + [dir="rtl"] .test58 { + padding: 20px; + margin: auto; + } +} + +html[dir="ltr"] .test59 { + border-radius: 5px; + text-align: left; +} + +[dir="ltr"]:root .test60, [dir="ltr"] .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/rule-names/diff/process-rules-names-true-greedy-true.snapshot b/tests/__snapshots__/rule-names/diff/process-rules-names-true-greedy-true.snapshot index 6cb28a15..d7b9933f 100644 --- a/tests/__snapshots__/rule-names/diff/process-rules-names-true-greedy-true.snapshot +++ b/tests/__snapshots__/rule-names/diff/process-rules-names-true-greedy-true.snapshot @@ -213,5 +213,11 @@ html .test50 { border-left: none; border-right: 1px solid #FFF; border: none; +} + +.test55, .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; }" `; diff --git a/tests/__snapshots__/rule-names/diff/process-rules-names-true-source-rtl-greedy-true.snapshot b/tests/__snapshots__/rule-names/diff/process-rules-names-true-source-rtl-greedy-true.snapshot index 3a031ee6..2b97d806 100644 --- a/tests/__snapshots__/rule-names/diff/process-rules-names-true-source-rtl-greedy-true.snapshot +++ b/tests/__snapshots__/rule-names/diff/process-rules-names-true-source-rtl-greedy-true.snapshot @@ -213,5 +213,11 @@ html .test50 { border-left: none; border-right: 1px solid #FFF; border: none; +} + +.test55, .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; }" `; diff --git a/tests/__snapshots__/rule-names/diff/process-rules-names-true-with-custom-string-map-and-greedy-true.snapshot b/tests/__snapshots__/rule-names/diff/process-rules-names-true-with-custom-string-map-and-greedy-true.snapshot index d613c740..48c9ca6d 100644 --- a/tests/__snapshots__/rule-names/diff/process-rules-names-true-with-custom-string-map-and-greedy-true.snapshot +++ b/tests/__snapshots__/rule-names/diff/process-rules-names-true-with-custom-string-map-and-greedy-true.snapshot @@ -221,5 +221,11 @@ html .test50 { border-left: none; border-right: 1px solid #FFF; border: none; +} + +.test55, .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; }" `; diff --git a/tests/__snapshots__/rule-names/diff/process-rules-names-true-with-custom-string-map-rtl-and-greedy-true.snapshot b/tests/__snapshots__/rule-names/diff/process-rules-names-true-with-custom-string-map-rtl-and-greedy-true.snapshot index c2939c36..cb0a7556 100644 --- a/tests/__snapshots__/rule-names/diff/process-rules-names-true-with-custom-string-map-rtl-and-greedy-true.snapshot +++ b/tests/__snapshots__/rule-names/diff/process-rules-names-true-with-custom-string-map-rtl-and-greedy-true.snapshot @@ -221,5 +221,11 @@ html .test50 { border-left: none; border-right: 1px solid #FFF; border: none; +} + +.test55, .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; }" `; diff --git a/tests/__snapshots__/rule-names/diff/process-rules-names-true-with-custom-string-map.snapshot b/tests/__snapshots__/rule-names/diff/process-rules-names-true-with-custom-string-map.snapshot index 52aa9b08..85903806 100644 --- a/tests/__snapshots__/rule-names/diff/process-rules-names-true-with-custom-string-map.snapshot +++ b/tests/__snapshots__/rule-names/diff/process-rules-names-true-with-custom-string-map.snapshot @@ -213,5 +213,11 @@ html .test50 { border-left: none; border-right: 1px solid #FFF; border: none; +} + +.test55, .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; }" `; diff --git a/tests/__snapshots__/rule-names/diff/process-rules-names-true.snapshot b/tests/__snapshots__/rule-names/diff/process-rules-names-true.snapshot index bfac0d8a..2093c5b9 100644 --- a/tests/__snapshots__/rule-names/diff/process-rules-names-true.snapshot +++ b/tests/__snapshots__/rule-names/diff/process-rules-names-true.snapshot @@ -205,5 +205,11 @@ html .test50 { border-left: none; border-right: 1px solid #FFF; border: none; +} + +.test55, .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; }" `; diff --git a/tests/__snapshots__/rule-names/override/process-rules-names-true-greedy-true.snapshot b/tests/__snapshots__/rule-names/override/process-rules-names-true-greedy-true.snapshot index 03d80fcb..c93456b3 100644 --- a/tests/__snapshots__/rule-names/override/process-rules-names-true-greedy-true.snapshot +++ b/tests/__snapshots__/rule-names/override/process-rules-names-true-greedy-true.snapshot @@ -623,5 +623,53 @@ html[dir="rtl"] .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +.test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + background-clip: text; + -webkit-background-clip: text; + margin: 10px 20px 30px 40px; + text-align: left; + z-index: 100; +} + +[dir="rtl"] .test55, [dir="rtl"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +@media only screen and (min-width: 630px) { + .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + .test58 { + padding: 20px; + margin: auto; + } +} + +html .test59 { + border-radius: 5px; + text-align: left; +} + +:root .test60, .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/rule-names/override/process-rules-names-true-source-rtl-greedy-true.snapshot b/tests/__snapshots__/rule-names/override/process-rules-names-true-source-rtl-greedy-true.snapshot index d37dc87d..75816760 100644 --- a/tests/__snapshots__/rule-names/override/process-rules-names-true-source-rtl-greedy-true.snapshot +++ b/tests/__snapshots__/rule-names/override/process-rules-names-true-source-rtl-greedy-true.snapshot @@ -617,5 +617,53 @@ html[dir="ltr"] .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +.test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + background-clip: text; + -webkit-background-clip: text; + margin: 10px 20px 30px 40px; + text-align: left; + z-index: 100; +} + +[dir="ltr"] .test55, [dir="ltr"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +@media only screen and (min-width: 630px) { + .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + .test58 { + padding: 20px; + margin: auto; + } +} + +html .test59 { + border-radius: 5px; + text-align: left; +} + +:root .test60, .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/rule-names/override/process-rules-names-true-with-custom-string-map-and-greedy-true.snapshot b/tests/__snapshots__/rule-names/override/process-rules-names-true-with-custom-string-map-and-greedy-true.snapshot index 1f7e5221..016b3652 100644 --- a/tests/__snapshots__/rule-names/override/process-rules-names-true-with-custom-string-map-and-greedy-true.snapshot +++ b/tests/__snapshots__/rule-names/override/process-rules-names-true-with-custom-string-map-and-greedy-true.snapshot @@ -631,5 +631,53 @@ html[dir="rtl"] .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +.test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + background-clip: text; + -webkit-background-clip: text; + margin: 10px 20px 30px 40px; + text-align: left; + z-index: 100; +} + +[dir="rtl"] .test55, [dir="rtl"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +@media only screen and (min-width: 630px) { + .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + .test58 { + padding: 20px; + margin: auto; + } +} + +html .test59 { + border-radius: 5px; + text-align: left; +} + +:root .test60, .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/rule-names/override/process-rules-names-true-with-custom-string-map-rtl-and-greedy-true.snapshot b/tests/__snapshots__/rule-names/override/process-rules-names-true-with-custom-string-map-rtl-and-greedy-true.snapshot index 9bfaa87c..5f1d45c0 100644 --- a/tests/__snapshots__/rule-names/override/process-rules-names-true-with-custom-string-map-rtl-and-greedy-true.snapshot +++ b/tests/__snapshots__/rule-names/override/process-rules-names-true-with-custom-string-map-rtl-and-greedy-true.snapshot @@ -625,5 +625,53 @@ html[dir="ltr"] .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +.test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + background-clip: text; + -webkit-background-clip: text; + margin: 10px 20px 30px 40px; + text-align: left; + z-index: 100; +} + +[dir="ltr"] .test55, [dir="ltr"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +@media only screen and (min-width: 630px) { + .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + .test58 { + padding: 20px; + margin: auto; + } +} + +html .test59 { + border-radius: 5px; + text-align: left; +} + +:root .test60, .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/rule-names/override/process-rules-names-true-with-custom-string-map.snapshot b/tests/__snapshots__/rule-names/override/process-rules-names-true-with-custom-string-map.snapshot index 398fa570..62998537 100644 --- a/tests/__snapshots__/rule-names/override/process-rules-names-true-with-custom-string-map.snapshot +++ b/tests/__snapshots__/rule-names/override/process-rules-names-true-with-custom-string-map.snapshot @@ -623,5 +623,53 @@ html[dir="rtl"] .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +.test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + background-clip: text; + -webkit-background-clip: text; + margin: 10px 20px 30px 40px; + text-align: left; + z-index: 100; +} + +[dir="rtl"] .test55, [dir="rtl"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +@media only screen and (min-width: 630px) { + .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + .test58 { + padding: 20px; + margin: auto; + } +} + +html .test59 { + border-radius: 5px; + text-align: left; +} + +:root .test60, .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/rule-names/override/process-rules-names-true.snapshot b/tests/__snapshots__/rule-names/override/process-rules-names-true.snapshot index 0feda63e..cb2ae8a6 100644 --- a/tests/__snapshots__/rule-names/override/process-rules-names-true.snapshot +++ b/tests/__snapshots__/rule-names/override/process-rules-names-true.snapshot @@ -615,5 +615,53 @@ html[dir="rtl"] .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +.test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + background-clip: text; + -webkit-background-clip: text; + margin: 10px 20px 30px 40px; + text-align: left; + z-index: 100; +} + +[dir="rtl"] .test55, [dir="rtl"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +@media only screen and (min-width: 630px) { + .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + .test58 { + padding: 20px; + margin: auto; + } +} + +html .test59 { + border-radius: 5px; + text-align: left; +} + +:root .test60, .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true-process-keyframes-true.snapshot b/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true-process-keyframes-true.snapshot index f04e89e8..777c32d5 100644 --- a/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true-process-keyframes-true.snapshot +++ b/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true-process-keyframes-true.snapshot @@ -756,5 +756,59 @@ html[dir="rtl"] .test50 { [dir] .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +[dir="ltr"] .test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + z-index: 100; +} + +[dir="ltr"] .test55, [dir="ltr"] .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + margin: 10px 20px 30px 40px; + text-align: left; +} + +[dir="rtl"] .test55, [dir="rtl"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +[dir] .test55, [dir] .test56 { + background-clip: text; + -webkit-background-clip: text; +} + +@media only screen and (min-width: 630px) { + [dir="rtl"] .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + [dir="rtl"] .test58 { + padding: 20px; + margin: auto; + } +} + +html[dir="ltr"] .test59 { + border-radius: 5px; + text-align: left; +} + +[dir="ltr"]:root .test60, [dir="ltr"] .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true-process-urls-true.snapshot b/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true-process-urls-true.snapshot index e9ad3f29..239c29ca 100644 --- a/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true-process-urls-true.snapshot +++ b/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true-process-urls-true.snapshot @@ -700,5 +700,59 @@ html[dir="rtl"] .test50 { [dir] .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +[dir="ltr"] .test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + z-index: 100; +} + +[dir="ltr"] .test55, [dir="ltr"] .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + margin: 10px 20px 30px 40px; + text-align: left; +} + +[dir="rtl"] .test55, [dir="rtl"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +[dir] .test55, [dir] .test56 { + background-clip: text; + -webkit-background-clip: text; +} + +@media only screen and (min-width: 630px) { + [dir="rtl"] .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + [dir="rtl"] .test58 { + padding: 20px; + margin: auto; + } +} + +html[dir="ltr"] .test59 { + border-radius: 5px; + text-align: left; +} + +[dir="ltr"]:root .test60, [dir="ltr"] .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true-rtl.snapshot b/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true-rtl.snapshot index e51b7127..a55fd6e4 100644 --- a/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true-rtl.snapshot +++ b/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true-rtl.snapshot @@ -691,5 +691,59 @@ html[dir="ltr"] .test50 { [dir] .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +[dir="rtl"] .test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + z-index: 100; +} + +[dir="rtl"] .test55, [dir="rtl"] .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + margin: 10px 20px 30px 40px; + text-align: left; +} + +[dir="ltr"] .test55, [dir="ltr"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +[dir] .test55, [dir] .test56 { + background-clip: text; + -webkit-background-clip: text; +} + +@media only screen and (min-width: 630px) { + [dir="rtl"] .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + [dir="rtl"] .test58 { + padding: 20px; + margin: auto; + } +} + +html[dir="rtl"] .test59 { + border-radius: 5px; + text-align: left; +} + +[dir="rtl"]:root .test60, [dir="rtl"] .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true.snapshot b/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true.snapshot index 06f9dbd7..24f8b3fc 100644 --- a/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true.snapshot +++ b/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true.snapshot @@ -691,5 +691,59 @@ html[dir="rtl"] .test50 { [dir] .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +[dir="ltr"] .test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + z-index: 100; +} + +[dir="ltr"] .test55, [dir="ltr"] .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + margin: 10px 20px 30px 40px; + text-align: left; +} + +[dir="rtl"] .test55, [dir="rtl"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +[dir] .test55, [dir] .test56 { + background-clip: text; + -webkit-background-clip: text; +} + +@media only screen and (min-width: 630px) { + [dir="rtl"] .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + [dir="rtl"] .test58 { + padding: 20px; + margin: auto; + } +} + +html[dir="ltr"] .test59 { + border-radius: 5px; + text-align: left; +} + +[dir="ltr"]:root .test60, [dir="ltr"] .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true-process-keyframes-true.snapshot b/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true-process-keyframes-true.snapshot index 0a778430..b3a26f39 100644 --- a/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true-process-keyframes-true.snapshot +++ b/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true-process-keyframes-true.snapshot @@ -337,5 +337,13 @@ html .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +.test55, .test56 { + float: right; + background-clip: text; + -webkit-background-clip: text; + margin: 10px 40px 30px 20px; + text-align: right; }" `; diff --git a/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true-process-urls-true.snapshot b/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true-process-urls-true.snapshot index 3f07c537..d488fef5 100644 --- a/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true-process-urls-true.snapshot +++ b/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true-process-urls-true.snapshot @@ -293,5 +293,13 @@ html .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +.test55, .test56 { + float: right; + background-clip: text; + -webkit-background-clip: text; + margin: 10px 40px 30px 20px; + text-align: right; }" `; diff --git a/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true-rtl.snapshot b/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true-rtl.snapshot index c181ae58..a627c776 100644 --- a/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true-rtl.snapshot +++ b/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true-rtl.snapshot @@ -293,5 +293,13 @@ html .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +.test55, .test56 { + float: right; + background-clip: text; + -webkit-background-clip: text; + margin: 10px 40px 30px 20px; + text-align: right; }" `; diff --git a/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true.snapshot b/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true.snapshot index f67c6f14..e0cfd47f 100644 --- a/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true.snapshot +++ b/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true.snapshot @@ -293,5 +293,13 @@ html .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +.test55, .test56 { + float: right; + background-clip: text; + -webkit-background-clip: text; + margin: 10px 40px 30px 20px; + text-align: right; }" `; diff --git a/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true-process-keyframes-true.snapshot b/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true-process-keyframes-true.snapshot index 4313e087..12bf842b 100644 --- a/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true-process-keyframes-true.snapshot +++ b/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true-process-keyframes-true.snapshot @@ -739,5 +739,56 @@ html[dir="rtl"] .test50 { [dir] .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +.test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + z-index: 100; +} + +[dir] .test55, [dir] .test56 { + float: left; + background-clip: text; + -webkit-background-clip: text; + margin: 10px 20px 30px 40px; + text-align: left; +} + +[dir="rtl"] .test55, [dir="rtl"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +@media only screen and (min-width: 630px) { + .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + .test58 { + padding: 20px; + margin: auto; + } +} + +html .test59 { + border-radius: 5px; + text-align: left; +} + +:root .test60, .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true-process-urls-true.snapshot b/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true-process-urls-true.snapshot index 695a590e..6969a531 100644 --- a/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true-process-urls-true.snapshot +++ b/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true-process-urls-true.snapshot @@ -689,5 +689,56 @@ html[dir="rtl"] .test50 { [dir] .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +.test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + z-index: 100; +} + +[dir] .test55, [dir] .test56 { + float: left; + background-clip: text; + -webkit-background-clip: text; + margin: 10px 20px 30px 40px; + text-align: left; +} + +[dir="rtl"] .test55, [dir="rtl"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +@media only screen and (min-width: 630px) { + .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + .test58 { + padding: 20px; + margin: auto; + } +} + +html .test59 { + border-radius: 5px; + text-align: left; +} + +:root .test60, .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true-rtl.snapshot b/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true-rtl.snapshot index 986d5c24..55229a10 100644 --- a/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true-rtl.snapshot +++ b/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true-rtl.snapshot @@ -671,5 +671,56 @@ html[dir="ltr"] .test50 { [dir] .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +.test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + z-index: 100; +} + +[dir] .test55, [dir] .test56 { + float: left; + background-clip: text; + -webkit-background-clip: text; + margin: 10px 20px 30px 40px; + text-align: left; +} + +[dir="ltr"] .test55, [dir="ltr"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +@media only screen and (min-width: 630px) { + .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + .test58 { + padding: 20px; + margin: auto; + } +} + +html .test59 { + border-radius: 5px; + text-align: left; +} + +:root .test60, .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true.snapshot b/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true.snapshot index bb0b2233..129226ad 100644 --- a/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true.snapshot +++ b/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true.snapshot @@ -677,5 +677,56 @@ html[dir="rtl"] .test50 { [dir] .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +.test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + z-index: 100; +} + +[dir] .test55, [dir] .test56 { + float: left; + background-clip: text; + -webkit-background-clip: text; + margin: 10px 20px 30px 40px; + text-align: left; +} + +[dir="rtl"] .test55, [dir="rtl"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +@media only screen and (min-width: 630px) { + .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + .test58 { + padding: 20px; + margin: auto; + } +} + +html .test59 { + border-radius: 5px; + text-align: left; +} + +:root .test60, .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/string-map/combined/custom-non-valid-string-different-lengths-map-process-urls-true.snapshot b/tests/__snapshots__/string-map/combined/custom-non-valid-string-different-lengths-map-process-urls-true.snapshot index 640e58ae..0a49aa5c 100644 --- a/tests/__snapshots__/string-map/combined/custom-non-valid-string-different-lengths-map-process-urls-true.snapshot +++ b/tests/__snapshots__/string-map/combined/custom-non-valid-string-different-lengths-map-process-urls-true.snapshot @@ -678,5 +678,59 @@ html[dir="rtl"] .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +[dir="ltr"] .test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + z-index: 100; +} + +[dir="ltr"] .test55, [dir="ltr"] .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + margin: 10px 20px 30px 40px; + text-align: left; +} + +[dir="rtl"] .test55, [dir="rtl"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +[dir] .test55, [dir] .test56 { + background-clip: text; + -webkit-background-clip: text; +} + +@media only screen and (min-width: 630px) { + [dir="rtl"] .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + [dir="rtl"] .test58 { + padding: 20px; + margin: auto; + } +} + +html[dir="ltr"] .test59 { + border-radius: 5px; + text-align: left; +} + +[dir="ltr"]:root .test60, [dir="ltr"] .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/string-map/combined/custom-non-valid-string-different-types-map-process-urls-true.snapshot b/tests/__snapshots__/string-map/combined/custom-non-valid-string-different-types-map-process-urls-true.snapshot index fc0456fe..d57133c0 100644 --- a/tests/__snapshots__/string-map/combined/custom-non-valid-string-different-types-map-process-urls-true.snapshot +++ b/tests/__snapshots__/string-map/combined/custom-non-valid-string-different-types-map-process-urls-true.snapshot @@ -678,5 +678,59 @@ html[dir="rtl"] .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +[dir="ltr"] .test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + z-index: 100; +} + +[dir="ltr"] .test55, [dir="ltr"] .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + margin: 10px 20px 30px 40px; + text-align: left; +} + +[dir="rtl"] .test55, [dir="rtl"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +[dir] .test55, [dir] .test56 { + background-clip: text; + -webkit-background-clip: text; +} + +@media only screen and (min-width: 630px) { + [dir="rtl"] .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + [dir="rtl"] .test58 { + padding: 20px; + margin: auto; + } +} + +html[dir="ltr"] .test59 { + border-radius: 5px; + text-align: left; +} + +[dir="ltr"]:root .test60, [dir="ltr"] .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/string-map/combined/custom-string-map-process-urls-true.snapshot b/tests/__snapshots__/string-map/combined/custom-string-map-process-urls-true.snapshot index 3923be2d..81c42dfb 100644 --- a/tests/__snapshots__/string-map/combined/custom-string-map-process-urls-true.snapshot +++ b/tests/__snapshots__/string-map/combined/custom-string-map-process-urls-true.snapshot @@ -678,5 +678,59 @@ html[dir="rtl"] .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +[dir="ltr"] .test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + z-index: 100; +} + +[dir="ltr"] .test55, [dir="ltr"] .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + margin: 10px 20px 30px 40px; + text-align: left; +} + +[dir="rtl"] .test55, [dir="rtl"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +[dir] .test55, [dir] .test56 { + background-clip: text; + -webkit-background-clip: text; +} + +@media only screen and (min-width: 630px) { + [dir="rtl"] .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + [dir="rtl"] .test58 { + padding: 20px; + margin: auto; + } +} + +html[dir="ltr"] .test59 { + border-radius: 5px; + text-align: left; +} + +[dir="ltr"]:root .test60, [dir="ltr"] .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/string-map/combined/custom-string-map-without-names-process-urls-true.snapshot b/tests/__snapshots__/string-map/combined/custom-string-map-without-names-process-urls-true.snapshot index 7205027e..2c0c540f 100644 --- a/tests/__snapshots__/string-map/combined/custom-string-map-without-names-process-urls-true.snapshot +++ b/tests/__snapshots__/string-map/combined/custom-string-map-without-names-process-urls-true.snapshot @@ -678,5 +678,59 @@ html[dir="rtl"] .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +[dir="ltr"] .test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + z-index: 100; +} + +[dir="ltr"] .test55, [dir="ltr"] .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + margin: 10px 20px 30px 40px; + text-align: left; +} + +[dir="rtl"] .test55, [dir="rtl"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +[dir] .test55, [dir] .test56 { + background-clip: text; + -webkit-background-clip: text; +} + +@media only screen and (min-width: 630px) { + [dir="rtl"] .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + [dir="rtl"] .test58 { + padding: 20px; + margin: auto; + } +} + +html[dir="ltr"] .test59 { + border-radius: 5px; + text-align: left; +} + +[dir="ltr"]:root .test60, [dir="ltr"] .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/string-map/diff/custom-non-valid-string-different-lengths-map-process-urls-true.snapshot b/tests/__snapshots__/string-map/diff/custom-non-valid-string-different-lengths-map-process-urls-true.snapshot index fd8e2efe..4bd03e74 100644 --- a/tests/__snapshots__/string-map/diff/custom-non-valid-string-different-lengths-map-process-urls-true.snapshot +++ b/tests/__snapshots__/string-map/diff/custom-non-valid-string-different-lengths-map-process-urls-true.snapshot @@ -215,5 +215,11 @@ html .test50 { border-left: none; border-right: 1px solid #FFF; border: none; +} + +.test55, .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; }" `; diff --git a/tests/__snapshots__/string-map/diff/custom-non-valid-string-different-types-map-process-urls-true.snapshot b/tests/__snapshots__/string-map/diff/custom-non-valid-string-different-types-map-process-urls-true.snapshot index 6a8137d1..d9c1ad19 100644 --- a/tests/__snapshots__/string-map/diff/custom-non-valid-string-different-types-map-process-urls-true.snapshot +++ b/tests/__snapshots__/string-map/diff/custom-non-valid-string-different-types-map-process-urls-true.snapshot @@ -215,5 +215,11 @@ html .test50 { border-left: none; border-right: 1px solid #FFF; border: none; +} + +.test55, .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; }" `; diff --git a/tests/__snapshots__/string-map/diff/custom-string-map-process-urls-true.snapshot b/tests/__snapshots__/string-map/diff/custom-string-map-process-urls-true.snapshot index 69f68750..0e07e70b 100644 --- a/tests/__snapshots__/string-map/diff/custom-string-map-process-urls-true.snapshot +++ b/tests/__snapshots__/string-map/diff/custom-string-map-process-urls-true.snapshot @@ -215,5 +215,11 @@ html .test50 { border-left: none; border-right: 1px solid #FFF; border: none; +} + +.test55, .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; }" `; diff --git a/tests/__snapshots__/string-map/diff/custom-string-map-without-names-process-urls-true.snapshot b/tests/__snapshots__/string-map/diff/custom-string-map-without-names-process-urls-true.snapshot index dcfeba90..f0759204 100644 --- a/tests/__snapshots__/string-map/diff/custom-string-map-without-names-process-urls-true.snapshot +++ b/tests/__snapshots__/string-map/diff/custom-string-map-without-names-process-urls-true.snapshot @@ -215,5 +215,11 @@ html .test50 { border-left: none; border-right: 1px solid #FFF; border: none; +} + +.test55, .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; }" `; diff --git a/tests/__snapshots__/string-map/override/custom-non-valid-string-different-lengths-map-process-urls-true.snapshot b/tests/__snapshots__/string-map/override/custom-non-valid-string-different-lengths-map-process-urls-true.snapshot index 9b2f4ca2..9bfaf7ed 100644 --- a/tests/__snapshots__/string-map/override/custom-non-valid-string-different-lengths-map-process-urls-true.snapshot +++ b/tests/__snapshots__/string-map/override/custom-non-valid-string-different-lengths-map-process-urls-true.snapshot @@ -627,5 +627,53 @@ html[dir="rtl"] .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +.test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + background-clip: text; + -webkit-background-clip: text; + margin: 10px 20px 30px 40px; + text-align: left; + z-index: 100; +} + +[dir="rtl"] .test55, [dir="rtl"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +@media only screen and (min-width: 630px) { + .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + .test58 { + padding: 20px; + margin: auto; + } +} + +html .test59 { + border-radius: 5px; + text-align: left; +} + +:root .test60, .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/string-map/override/custom-non-valid-string-different-types-map-process-urls-true.snapshot b/tests/__snapshots__/string-map/override/custom-non-valid-string-different-types-map-process-urls-true.snapshot index a7fd9d35..f29ca0da 100644 --- a/tests/__snapshots__/string-map/override/custom-non-valid-string-different-types-map-process-urls-true.snapshot +++ b/tests/__snapshots__/string-map/override/custom-non-valid-string-different-types-map-process-urls-true.snapshot @@ -627,5 +627,53 @@ html[dir="rtl"] .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +.test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + background-clip: text; + -webkit-background-clip: text; + margin: 10px 20px 30px 40px; + text-align: left; + z-index: 100; +} + +[dir="rtl"] .test55, [dir="rtl"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +@media only screen and (min-width: 630px) { + .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + .test58 { + padding: 20px; + margin: auto; + } +} + +html .test59 { + border-radius: 5px; + text-align: left; +} + +:root .test60, .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/string-map/override/custom-string-map-process-urls-true.snapshot b/tests/__snapshots__/string-map/override/custom-string-map-process-urls-true.snapshot index 98f43220..e9d9b5a3 100644 --- a/tests/__snapshots__/string-map/override/custom-string-map-process-urls-true.snapshot +++ b/tests/__snapshots__/string-map/override/custom-string-map-process-urls-true.snapshot @@ -627,5 +627,53 @@ html[dir="rtl"] .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +.test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + background-clip: text; + -webkit-background-clip: text; + margin: 10px 20px 30px 40px; + text-align: left; + z-index: 100; +} + +[dir="rtl"] .test55, [dir="rtl"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +@media only screen and (min-width: 630px) { + .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + .test58 { + padding: 20px; + margin: auto; + } +} + +html .test59 { + border-radius: 5px; + text-align: left; +} + +:root .test60, .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/__snapshots__/string-map/override/custom-string-map-without-names-process-urls-true.snapshot b/tests/__snapshots__/string-map/override/custom-string-map-without-names-process-urls-true.snapshot index 685d8c1a..9b89b9fb 100644 --- a/tests/__snapshots__/string-map/override/custom-string-map-without-names-process-urls-true.snapshot +++ b/tests/__snapshots__/string-map/override/custom-string-map-without-names-process-urls-true.snapshot @@ -627,5 +627,53 @@ html[dir="rtl"] .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; +} + +.test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + float: left; + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + background-clip: text; + -webkit-background-clip: text; + margin: 10px 20px 30px 40px; + text-align: left; + z-index: 100; +} + +[dir="rtl"] .test55, [dir="rtl"] .test56 { + float: right; + margin: 10px 40px 30px 20px; + text-align: right; +} + +@media only screen and (min-width: 630px) { + .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + + .test58 { + padding: 20px; + margin: auto; + } +} + +html .test59 { + border-radius: 5px; + text-align: left; +} + +:root .test60, .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; }" `; diff --git a/tests/css/input.css b/tests/css/input.css index 80876301..09ae3f22 100644 --- a/tests/css/input.css +++ b/tests/css/input.css @@ -457,4 +457,52 @@ html .test50 { .test53 { margin-block-start: 10px; margin-block-end: 5px; -} \ No newline at end of file +} + +/*rtl:freeze*/ +.test54 { + background: gray; + color: red; + margin: 0px 2px 10px 5px; + padding-left: 10px; + text-align: right; +} + +.test55, .test56 { + float: left; + /*rtl:begin:freeze*/ + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + padding: 10px 5px 2px 20px; + /*rtl:end:freeze*/ + background-clip: text; + -webkit-background-clip: text; + margin: 10px 20px 30px 40px; + text-align: left; + z-index: 100; +} + +/*rtl:begin:source:rtl*/ +/*rtl:begin:freeze*/ +@media only screen and (min-width: 630px) { + .test57 { + text-align: right; + color: rgba(255, 242, 126, 1); + } + .test58 { + padding: 20px; + margin: auto; + } +} +/*rtl:end:source:rtl*/ + +html .test59 { + border-radius: 5px; + text-align: left; +} + +:root .test60, .test61 { + bottom: 20x; + margin: 10px 20px 30px; + z-index: 10; +} +/*rtl:end:freeze*/ \ No newline at end of file