diff --git a/CHANGELOG.md b/CHANGELOG.md index 43283ebe..022912cb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Changelog +## [3.6.0] - 2022-04-09 + +- Added a new diff mode to output only flipped rules with the intention of using them in a separate stylesheet file to override the main stylesheet + ## [3.5.4] - 2022-03-26 - Build the package bundle using rollup and created an ESM version of the package diff --git a/README.md b/README.md index edb28131..f5dce6ab 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,13 @@ # PostCSS RTLCSS -[PostCSS] plugin to build Cascading Style Sheets (CSS) with Left-To-Right (LTR) and Right-To-Left (RTL) rules using [RTLCSS] +[PostCSS] plugin to build Cascading Style Sheets (CSS) with Left-To-Right (LTR) and Right-To-Left (RTL) rules using [RTLCSS]. RTLCSS allows one to flip an entire CSS file with the intention of using the original CSS for one direction and the new generated one for the other. What PostcCSS RTLCSS does, is to create a single CSS file with both directions or to create a minimal CSS file only with the flipped rules with the intention of overriding the main one. [![Build Status](https://travis-ci.com/elchininet/postcss-rtlcss.svg?branch=master)](https://app.travis-ci.com/elchininet/postcss-rtlcss)   [![Coverage Status](https://coveralls.io/repos/github/elchininet/postcss-rtlcss/badge.svg?branch=master)](https://coveralls.io/github/elchininet/postcss-rtlcss?branch=master)   [![npm version](https://badge.fury.io/js/postcss-rtlcss.svg)](https://badge.fury.io/js/postcss-rtlcss) [PostCSS]: https://github.com/postcss/postcss [RTLCSS]: https://rtlcss.com/ -Demo +Playground Demo --- https://elchininet.github.io/postcss-rtlcss/ @@ -131,7 +131,7 @@ Examples #### Output using the combined mode (default) -This is the recommended method, it will generate more CSS code but each direction will have their specific CSS declarations and there is not need to override properties. +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. ```css .test1, .test2 { @@ -172,7 +172,7 @@ This is the recommended method, it will generate more CSS code but each directio #### Output using the override mode -This is the alternative method, it will generate less code because it lets the main rule intact and generates a shorter specific rule to override the properties that are affected by the direction of the text. +This is one of the alternative methods to override. It will generate less code because it lets the main rule intact and generates a shorter specific rule to override the properties that are affected by the direction of the text. ```css .test1, .test2 { @@ -206,12 +206,30 @@ This is the alternative method, it will generate less code because it lets the m } ``` -But this method has a disadvantage: +#### Output using the diff mode -
Disadvantage of the override method +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 +.test1, .test2 { + border-radius: 2px 0 8px 0; + padding-right: 0; + padding-left: 20px; + text-align: right; + transform: translate(50%, 50%); +} + +.test3 { + direction: rtl; +} +``` + +But the two methods to override have a disadvantage: + +
Disadvantage of the methods to override

-Use this method carefully. It 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: +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: ```html

@@ -231,7 +249,7 @@ Use this method carefully. It can override a property that is coming from anothe } ``` -Using the combined method, the generated code will be the next one: +Using the `combined` method, the generated code will be the next one: ```css .test1 { @@ -249,9 +267,9 @@ Using the combined method, the generated code will be the next one: } ``` -So, the `div` will have a padding of `20px 10px 20px 20px` in `LTR` and `20px 20px 20px 10px` in `RTL`. +So, the `div` will have a padding of `20px 10px 20px 20px` in `LTR` and `20px 20px 20px 10px` in `RTL`. Everything will work as expected here. -However, using the override method the generated code will be the next one: +However, using the `override` method the generated code will be the next one: ```css .test1 { @@ -270,7 +288,16 @@ However, using the override 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 the override of the class `test2` doesn't take into account that this class could be used with `test1` having the same properties. The solution, in this case, is to provide the property that has been inherited: +And using the `diff` method the generated code will be the next one: + +```css +.test2 { + padding-right: 0; + padding-left: 10px; +} +``` + +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: ```css .test1 { @@ -285,7 +312,7 @@ Now the `div` has a padding of `20px 10px 20px 20px` in `LTR` and `20px 0 20px 1 } ``` -So, the generated code will be: +So, using the `override` method the generated code will be: ```css .test1 { @@ -305,6 +332,15 @@ So, the generated code will be: } ``` +And using the `diff` method the generated code will be: + +```css +.test2 { + padding-right: 20px; + padding-left: 10px; +} +``` +

diff --git a/src/@types/index.ts b/src/@types/index.ts index 2362de90..773ca590 100644 --- a/src/@types/index.ts +++ b/src/@types/index.ts @@ -2,7 +2,8 @@ import { Rule, AtRule } from 'postcss'; export enum Mode { combined = 'combined', - override = 'override' + override = 'override', + diff = 'diff' } export enum Source { diff --git a/src/data/store.ts b/src/data/store.ts index 942228bf..73f4093e 100644 --- a/src/data/store.ts +++ b/src/data/store.ts @@ -1,4 +1,4 @@ -import { Rule } from 'postcss'; +import { Rule, AtRule } from 'postcss'; import { PluginOptions, PluginOptionsNormalized, @@ -24,10 +24,12 @@ import { interface Store { options: PluginOptionsNormalized; keyframes: AtRulesObject[]; + keyframesToRemove: AtRule[]; keyframesStringMap: AtRulesStringMap; keyframesRegExp: RegExp; rules: RulesObject[]; rulesAutoRename: Rule[]; + rulesToRemove: Rule[]; rulesPrefixRegExp: RegExp; } @@ -146,10 +148,12 @@ const defaultOptions = (): PluginOptionsNormalized => ({ const store: Store = { options: {...defaultOptions()}, keyframes: [], + keyframesToRemove: [], keyframesStringMap: {}, keyframesRegExp: defaultRegExp, rules: [], rulesAutoRename: [], + rulesToRemove: [], rulesPrefixRegExp: defaultRegExp }; @@ -215,10 +219,12 @@ const normalizeOptions = (options: PluginOptions): PluginOptionsNormalized => { const initStore = (options: PluginOptions): void => { store.options = normalizeOptions(options); store.keyframes = []; + store.keyframesToRemove = []; store.keyframesStringMap = {}; store.keyframesRegExp = defaultRegExp; store.rules = []; store.rulesAutoRename = []; + store.rulesToRemove = []; store.rulesPrefixRegExp = createRulesPrefixesRegExp(store.options); }; diff --git a/src/index.ts b/src/index.ts index c472e27a..7d399112 100644 --- a/src/index.ts +++ b/src/index.ts @@ -3,7 +3,12 @@ import { PluginOptions } from '@types'; import { initStore } from '@data/store'; import { parseKeyFrames, parseAtRules } from '@parsers/atrules'; import { parseRules } from '@parsers/rules'; -import { appendRules, appendKeyFrames, appendAutorenameRules } from '@utilities/rules'; +import { + appendRules, + appendKeyFrames, + appendAutorenameRules +} from '@utilities/rules'; +import { clean } from '@utilities/clean'; function postcssRTLCSS (options: PluginOptions = {}): Plugin { return ({ @@ -16,6 +21,7 @@ function postcssRTLCSS (options: PluginOptions = {}): Plugin { appendRules(); appendKeyFrames(); appendAutorenameRules(); + clean(css); } }); }; diff --git a/src/parsers/atrules.ts b/src/parsers/atrules.ts index fca64936..3fb7710a 100644 --- a/src/parsers/atrules.ts +++ b/src/parsers/atrules.ts @@ -1,8 +1,15 @@ -import postcss, { Root, Container, Node, AtRule, Comment } from 'postcss'; +import postcss, { + Root, + Container, + Node, + AtRule, + Comment +} from 'postcss'; import rtlcss from 'rtlcss'; import { Source, - ControlDirective + ControlDirective, + Mode } from '@types'; import { AT_RULE_TYPE, @@ -62,6 +69,12 @@ export const parseAtRules = (container: Container): void => { }; +const addToIgnoreKeyframesInDiffMode = (node: Node): void => { + if (store.options.mode === Mode.diff) { + store.keyframesToRemove.push(node as AtRule); + } +}; + export const parseKeyFrames = (css: Root): void => { const { source, processUrls, useCalc, stringMap, processKeyFrames } = store.options; @@ -87,19 +100,27 @@ export const parseKeyFrames = (css: Root): void => { (node: Node): void => { if ( checkDirective(controlDirectives, CONTROL_DIRECTIVE.IGNORE) ) { + addToIgnoreKeyframesInDiffMode(node); return; } - if (node.type !== AT_RULE_TYPE) return; + if (node.type !== AT_RULE_TYPE) { + return; + } const atRule = node as AtRule; - if (vendor.unprefixed(atRule.name) !== KEYFRAMES_NAME) return; + if (vendor.unprefixed(atRule.name) !== KEYFRAMES_NAME) { + return; + } const atRuleString = atRule.toString(); const atRuleFlippedString = rtlcss.process(atRuleString, { processUrls, useCalc, stringMap }); - if (atRuleString === atRuleFlippedString) return; + if (atRuleString === atRuleFlippedString) { + addToIgnoreKeyframesInDiffMode(atRule); + return; + } const rootFlipped = postcss.parse(atRuleFlippedString); const atRuleFlipped = rootFlipped.first as AtRule; diff --git a/src/parsers/declarations.ts b/src/parsers/declarations.ts index a5a7ad39..0fbce273 100644 --- a/src/parsers/declarations.ts +++ b/src/parsers/declarations.ts @@ -1,6 +1,15 @@ -import postcss, { Rule, Node, Declaration, Comment } from 'postcss'; +import postcss, { + Rule, + Node, + Declaration, + Comment +} from 'postcss'; import rtlcss from 'rtlcss'; -import { Mode, Autorename, ControlDirective } from '@types'; +import { + Mode, + Autorename, + ControlDirective +} from '@types'; import { DECLARATION_TYPE, FLIP_PROPERTY_REGEXP, @@ -54,7 +63,7 @@ export const parseDeclarations = ( const ruleFlipped = rule.clone().removeAll(); const ruleFlippedSecond = ruleFlipped.clone(); const ruleBoth = ruleFlipped.clone(); - const ruleSafe = ruleFlipped.clone(); + const ruleSafe = ruleFlipped.clone(); const declarationHashMap = Array.prototype.reduce.call(rule.nodes, (obj: Record, node: Node): Record => { if (node.type === DECLARATION_TYPE) { @@ -99,7 +108,7 @@ export const parseDeclarations = ( sourceDirectiveValue === source ) || ( - mode !== Mode.combined && + mode === Mode.override && sourceDirectiveValue !== source ) ) @@ -165,7 +174,10 @@ export const parseDeclarations = ( controlDirectives, ruleSourceDirectiveValue ); - const normalFlip = !sourceDirectiveValue || sourceDirectiveValue === source; + const normalFlip = + !sourceDirectiveValue || + sourceDirectiveValue === source || + mode === Mode.diff; if ( declProp === declFlippedProp && @@ -189,7 +201,11 @@ export const parseDeclarations = ( ) ) { if (safeBothPrefix && !hasIgnoreDirectiveInRaws(decl)) { - appendDeclarationToRule(decl, ruleSafe); + if (mode === Mode.diff) { + appendDeclarationToRule(decl, ruleFlipped); + } else { + appendDeclarationToRule(decl, ruleSafe); + } deleteDeclarations.push(decl); } } else { @@ -228,7 +244,11 @@ export const parseDeclarations = ( ruleFlippedSecond.append(declCloneFlipped); } if (safeBothPrefix) { - appendDeclarationToRule(decl, ruleSafe); + if (mode === Mode.diff) { + appendDeclarationToRule(decl, ruleFlipped); + } else { + appendDeclarationToRule(decl, ruleSafe); + } deleteDeclarations.push(decl); } } @@ -248,14 +268,27 @@ export const parseDeclarations = ( ) && !hasIgnoreDirectiveInRaws(decl) ) { - appendDeclarationToRule(decl, hasBeenOverriden || overridesPrevious ? ruleBoth : ruleSafe); + if (mode === Mode.diff) { + appendDeclarationToRule(decl, ruleFlipped); + } else { + appendDeclarationToRule( + decl, + hasBeenOverriden || overridesPrevious + ? ruleBoth + : ruleSafe + ); + } deleteDeclarations.push(decl); } return; } else if (declarationHashMap[declFlipped.prop] === declFlippedValue) { simetricRules = true; if (isConflictedDeclaration && !hasIgnoreDirectiveInRaws(decl)) { - appendDeclarationToRule(decl, ruleSafe); + if (mode === Mode.diff) { + appendDeclarationToRule(decl, ruleFlipped); + } else { + appendDeclarationToRule(decl, ruleSafe); + } deleteDeclarations.push(decl); } return; @@ -281,15 +314,20 @@ export const parseDeclarations = ( ruleFlippedSecond.append(declClone); } } - if (isConflictedDeclaration && !hasIgnoreDirectiveInRaws(decl)) { - appendDeclarationToRule(decl, ruleSafe); + if ( + isConflictedDeclaration && + !hasIgnoreDirectiveInRaws(decl) && + mode !== Mode.diff + ) { + appendDeclarationToRule(decl, ruleSafe); deleteDeclarations.push(decl); } if (normalFlip) { ruleFlipped.append(declFlipped); } else { ruleFlippedSecond.append(declFlipped); - } + } + } declarationsProps.push(declPropUnprefixed); @@ -334,6 +372,11 @@ export const parseDeclarations = ( !autorenamed ) { store.rulesAutoRename.push(rule); + } else if ( + mode === Mode.diff && + !autorenamed + ) { + store.rulesToRemove.push(rule); } }; \ No newline at end of file diff --git a/src/parsers/rules.ts b/src/parsers/rules.ts index d9ebae3c..a20636cf 100644 --- a/src/parsers/rules.ts +++ b/src/parsers/rules.ts @@ -1,5 +1,14 @@ -import postcss, { Container, Node, Rule, Comment } from 'postcss'; -import { ControlDirective, Source } from '@types'; +import postcss, { + Container, + Node, + Rule, + Comment +} from 'postcss'; +import { + ControlDirective, + Source, + Mode +} from '@types'; import { RULE_TYPE, CONTROL_DIRECTIVE } from '@constants'; import { store } from '@data/store'; import { @@ -12,6 +21,12 @@ import { cleanRuleRawsBefore } from '@utilities/rules'; import { addSelectorPrefixes, hasSelectorsPrefixed } from '@utilities/selectors'; import { parseDeclarations } from './declarations'; +const addToIgnoreRulesInDiffMode = (node: Node): void => { + if (store.options.mode === Mode.diff) { + store.rulesToRemove.push(node as Rule); + } +}; + export const parseRules = ( container: Container, parentSourceDirective: string = undefined, @@ -19,7 +34,12 @@ export const parseRules = ( ): void => { const controlDirectives: Record = {}; - const { source, ltrPrefix, rtlPrefix } = store.options; + const { + mode, + source, + ltrPrefix, + rtlPrefix, + } = store.options; walkContainer( container, @@ -32,23 +52,25 @@ export const parseRules = ( ) { const sourceDirectiveValue = getSourceDirectiveValue(controlDirectives); const root = postcss.parse(controlDirective.option); - root.walkRules((rule: Rule): void => { - addSelectorPrefixes( - rule, - ( + if (mode !== Mode.diff) { + root.walkRules((rule: Rule): void => { + addSelectorPrefixes( + rule, ( - !sourceDirectiveValue && - source === Source.ltr - ) || - ( - sourceDirectiveValue && - sourceDirectiveValue === Source.ltr + ( + !sourceDirectiveValue && + source === Source.ltr + ) || + ( + sourceDirectiveValue && + sourceDirectiveValue === Source.ltr + ) ) - ) - ? rtlPrefix - : ltrPrefix - ); - }); + ? rtlPrefix + : ltrPrefix + ); + }); + } comment.replaceWith(root.nodes); return; } @@ -66,6 +88,7 @@ export const parseRules = ( (node: Node): void => { if ( checkDirective(controlDirectives, CONTROL_DIRECTIVE.IGNORE) ) { + addToIgnoreRulesInDiffMode(node); return; } @@ -85,7 +108,9 @@ export const parseRules = ( sourceDirectiveValue, true ); - } + } else { + addToIgnoreRulesInDiffMode(rule); + } } else { if (!hasSelectorsPrefixed(rule)) { parseDeclarations( @@ -93,7 +118,9 @@ export const parseRules = ( hasParentRule, sourceDirectiveValue ); - } + } else { + addToIgnoreRulesInDiffMode(rule); + } } parseRules( diff --git a/src/utilities/clean.ts b/src/utilities/clean.ts new file mode 100644 index 00000000..c997fafb --- /dev/null +++ b/src/utilities/clean.ts @@ -0,0 +1,60 @@ +import { + Container, + Node, + Rule, + AtRule +} from 'postcss'; +import { store } from '@data/store'; +import { + COMMENT_TYPE, + RULE_TYPE, + AT_RULE_TYPE, + KEYFRAMES_NAME +} from '@constants'; +import { Mode, RulesObject } from '@types'; +import { vendor } from '@utilities/vendor'; +import { ruleHasChildren, cleanRuleRawsBefore } from '@utilities/rules'; + +export const clean = (css: Container): void => { + const { + options, + rules, + rulesToRemove, + keyframes, + keyframesToRemove + } = store; + const { mode, processKeyFrames } = options; + if (mode !== Mode.diff) return; + rules.forEach((rulesObject: RulesObject): void => { + rulesObject.rule.remove(); + }); + rulesToRemove.forEach((rule: Rule) => { + rule.remove(); + }); + keyframes.forEach(({atRule}): void => { + atRule.remove(); + }); + keyframesToRemove.forEach((keyframe: AtRule): void => { + keyframe.remove(); + }); + css.walk((node: Node): void => { + if (node.type === COMMENT_TYPE) { + node.remove(); + } else if ( + node.type === AT_RULE_TYPE && + !processKeyFrames && + vendor.unprefixed((node as AtRule).name) === KEYFRAMES_NAME + ) { + node.remove(); + } else if ( + node.type === RULE_TYPE || + node.type === AT_RULE_TYPE + ) { + if (!ruleHasChildren(node as Container)) { + node.remove(); + } else if (node.parent === css) { + cleanRuleRawsBefore(node); + } + } + }); +}; \ No newline at end of file diff --git a/src/utilities/rules.ts b/src/utilities/rules.ts index 421edd1a..6c2dab50 100644 --- a/src/utilities/rules.ts +++ b/src/utilities/rules.ts @@ -1,5 +1,16 @@ -import { Rule, AtRule, Node, Declaration } from 'postcss'; -import { StringMap, Autorename, RulesObject } from '@types'; +import { + Container, + Rule, + AtRule, + Node, + Declaration +} from 'postcss'; +import { + StringMap, + Autorename, + RulesObject, + Mode +} from '@types'; import { COMMENT_TYPE, RTL_COMMENT_REGEXP, @@ -16,7 +27,7 @@ export const ruleHasDeclarations = (rule: Rule): boolean => { ); }; -export const ruleHasChildren = (rule: Rule | AtRule): boolean => { +export const ruleHasChildren = (rule: Container): boolean => { return rule.some( (node: Node) => ( node.type === DECLARATION_TYPE || @@ -116,12 +127,14 @@ export const insertRuleIntoStore = ( ruleBoth, ruleSafe }; - addProperSelectorPrefixes( - ruleFlipped, - ruleFlippedSecond, - ruleBoth, - ruleSafe - ); + if (store.options.mode !== Mode.diff) { + addProperSelectorPrefixes( + ruleFlipped, + ruleFlippedSecond, + ruleBoth, + ruleSafe + ); + } store.rules.push(rulesObject); return rulesObject; }; @@ -193,7 +206,7 @@ export const cleanRules = (...rules: (Rule | AtRule)[]): void => { }); }; -export const removeEmptyRules = (rule: Rule): void => { +export const removeEmptyRules = (rule: Container): void => { if (ruleHasChildren(rule)) { rule.walkRules((r: Rule): void => { removeEmptyRules(r); @@ -261,11 +274,15 @@ export const appendAutorenameRules = (): void => { }); if (process) { rulesToProcess.push(rule); + } else if (store.options.mode === Mode.diff) { + store.rulesToRemove.push(rule); } }); rulesToProcess.forEach((rule: Rule): void => { + const selectorsBackup = rule.selectors.join('|'); + rule.selectors = rule.selectors.map((selector: string): string => { const flip = selector.replace(replaceRegExp, (match: string, group: string): string => replaceHash[group]); @@ -281,6 +298,13 @@ export const appendAutorenameRules = (): void => { }); + if ( + rule.selectors.join('|') === selectorsBackup && + store.options.mode === Mode.diff + ) { + store.rulesToRemove.push(rule); + } + }); }; \ No newline at end of file diff --git a/tests/__snapshots__/autorename.test.ts.snap b/tests/__snapshots__/autorename.test.ts.snap index 3a21248c..f8d3c6c7 100644 --- a/tests/__snapshots__/autorename.test.ts.snap +++ b/tests/__snapshots__/autorename.test.ts.snap @@ -4277,6 +4277,1474 @@ html[dir=\\"rtl\\"] .test50 { }" `; +exports[`[[Mode: diff]] Autorename Tests: flexible 1`] = ` +" + +.test1, .test2 { + border-radius: 2px 0 8px 0; + padding-right: 0; + padding-left: 20px; + text-align: right; + transform: translate(50%, 50%); +} + +.test2 { + text-align: right; + text-align: center; +} + +.test3 { + direction: rtl; +} + +.test4 { + border-radius: 4px 2px 16px 8px; + text-shadow: red -99px -1px 1px, blue -99px 2px 1px; +} + +.test5, +.test6, +.test7 { + background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C); + border-color: #666 #999 #888 #777; + border-width: 1px 4px 3px 2px; + left: auto; + right: 100px; + transform: translateX(-5px); +} + +.test8 { + background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%); +} + +.test9, .test10 { + background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), + linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), + linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); + left: auto; + right: 5px; +} + +.test11:hover, +.test11:active { + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; + font-size: 30px; + color: #000; + transform: translateY(10px) scaleX(-1); + padding: 10px 20px; +} + +.test16:hover { + padding-right: 0; + padding-left: 20px; +} + +.test18 { + padding: 10px 10px 40px 20px; +} + +.test18::after { + left: auto; + right: 10px; +} + +@media only screen and (min-device-width: 320px) { + + .test18 { + padding: 1px 4px 3px 2px; + } +} + +.test22 { + right: 5px; + left: 10px; +} + +.test24 { + border: 1px solid #000; + border-bottom-color: #666; +} + +.test25-rtl { + box-sizing: border-box; + color: #FFF; + font-size: 10px; + width: 100%; +} + +.test25, .test26-rtl, .test27 { + background-image: url(\\"/icons/icon-l.png\\") +} + +.test26-ltr { + background-image: url(\\"/icons/icon-r.png\\") +} + +.test28-right::before { + content: \\"keyboard_arrow_left\\"; +} + +.test28-left::before { + content: \\"keyboard_arrow_right\\"; +} + +.test31 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test32 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test33 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.example34 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.example35 { + transform: translate(10px, 20px); +} + +.test36 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test37 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test38 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test39 { + margin-left: 0; + margin-right: 10px; +} + +.test40 { + left: auto; + right: 5px; +} + +.test41 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.test42 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.test43 { + transform: translate(10px, 20px); +} +@media only screen and (min-device-width: 320px) { + + .test46 { + text-align: right; + } +} +@media only screen and (min-device-width: 320px) { + + .test48 { + text-align: right; + } +} + +:root { + text-align: right; +} + +html .test50 { + left: auto; + right: 10px; +} + +.test51 { + border-left: none; + border-right: 1px solid #FFF; + border: none; +}" +`; + +exports[`[[Mode: diff]] Autorename Tests: flexible with custom string map 1`] = ` +" + +.test1, .test2 { + border-radius: 2px 0 8px 0; + padding-right: 0; + padding-left: 20px; + text-align: right; + transform: translate(50%, 50%); +} + +.test2 { + text-align: right; + text-align: center; +} + +.test3 { + direction: rtl; +} + +.test4 { + border-radius: 4px 2px 16px 8px; + text-shadow: red -99px -1px 1px, blue -99px 2px 1px; +} + +.test5, +.test6, +.test7 { + background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C); + border-color: #666 #999 #888 #777; + border-width: 1px 4px 3px 2px; + left: auto; + right: 100px; + transform: translateX(-5px); +} + +.test8 { + background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%); +} + +.test9, .test10 { + background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), + linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), + linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); + left: auto; + right: 5px; +} + +.test11:hover, +.test11:active { + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; + font-size: 30px; + color: #000; + transform: translateY(10px) scaleX(-1); + padding: 10px 20px; +} + +.test16:hover { + padding-right: 0; + padding-left: 20px; +} + +.test18 { + padding: 10px 10px 40px 20px; +} + +.test18::after { + left: auto; + right: 10px; +} + +@media only screen and (min-device-width: 320px) { + + .test18 { + padding: 1px 4px 3px 2px; + } +} + +.test22 { + right: 5px; + left: 10px; +} + +.test24 { + border: 1px solid #000; + border-bottom-color: #666; +} + +.test25-rtl { + box-sizing: border-box; + color: #FFF; + font-size: 10px; + width: 100%; +} + +.test25, .test26-rtl, .test27 { + background-image: url(\\"/icons/icon-l.png\\") +} + +.test26-ltr { + background-image: url(\\"/icons/icon-r.png\\") +} + +.test27-next { + background-image: url(\\"/icons/icon-p.png\\") +} + +.test27-prev { + background-image: url(\\"/icons/icon-n.png\\") +} + +.test28-right::before { + content: \\"keyboard_arrow_left\\"; +} + +.test28-left::before { + content: \\"keyboard_arrow_right\\"; +} + +.test31 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test32 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test33 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.example34 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.example35 { + transform: translate(10px, 20px); +} + +.test36 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test37 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test38 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test39 { + margin-left: 0; + margin-right: 10px; +} + +.test40 { + left: auto; + right: 5px; +} + +.test41 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.test42 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.test43 { + transform: translate(10px, 20px); +} +@media only screen and (min-device-width: 320px) { + + .test46 { + text-align: right; + } +} +@media only screen and (min-device-width: 320px) { + + .test48 { + text-align: right; + } +} + +:root { + text-align: right; +} + +html .test50 { + left: auto; + right: 10px; +} + +.test51 { + border-left: none; + border-right: 1px solid #FFF; + border: none; +}" +`; + +exports[`[[Mode: diff]] Autorename Tests: flexible, greedy: true 1`] = ` +" + +.test1, .test2 { + border-radius: 2px 0 8px 0; + padding-right: 0; + padding-left: 20px; + text-align: right; + transform: translate(50%, 50%); +} + +.test2 { + text-align: right; + text-align: center; +} + +.test3 { + direction: rtl; +} + +.test4 { + border-radius: 4px 2px 16px 8px; + text-shadow: red -99px -1px 1px, blue -99px 2px 1px; +} + +.test5, +.test6, +.test7 { + background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C); + border-color: #666 #999 #888 #777; + border-width: 1px 4px 3px 2px; + left: auto; + right: 100px; + transform: translateX(-5px); +} + +.test8 { + background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%); +} + +.test9, .test10 { + background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), + linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), + linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); + left: auto; + right: 5px; +} + +.test11:hover, +.test11:active { + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; + font-size: 30px; + color: #000; + transform: translateY(10px) scaleX(-1); + padding: 10px 20px; +} + +.test16:hover { + padding-right: 0; + padding-left: 20px; +} + +.test18 { + padding: 10px 10px 40px 20px; +} + +.test18::after { + left: auto; + right: 10px; +} + +@media only screen and (min-device-width: 320px) { + + .test18 { + padding: 1px 4px 3px 2px; + } +} + +.test22 { + right: 5px; + left: 10px; +} + +.test24 { + border: 1px solid #000; + border-bottom-color: #666; +} + +.test25-rtl { + box-sizing: border-box; + color: #FFF; + font-size: 10px; + width: 100%; +} + +.test25, .test26-rtl, .test27 { + background-image: url(\\"/icons/icon-l.png\\") +} + +.test26-ltr { + background-image: url(\\"/icons/icon-r.png\\") +} + +.test28-right::before { + content: \\"keyboard_arrow_left\\"; +} + +.test28-left::before { + content: \\"keyboard_arrow_right\\"; +} + +.testright30 { + content: \\"keyboard_arrow_left\\"; +} + +.testleft30 { + content: \\"keyboard_arrow_right\\"; +} + +.test31 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test32 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test33 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.example34 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.example35 { + transform: translate(10px, 20px); +} + +.test36 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test37 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test38 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test39 { + margin-left: 0; + margin-right: 10px; +} + +.test40 { + left: auto; + right: 5px; +} + +.test41 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.test42 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.test43 { + transform: translate(10px, 20px); +} +@media only screen and (min-device-width: 320px) { + + .test46 { + text-align: right; + } +} +@media only screen and (min-device-width: 320px) { + + .test48 { + text-align: right; + } +} + +:root { + text-align: right; +} + +html .test50 { + left: auto; + right: 10px; +} + +.test51 { + border-left: none; + border-right: 1px solid #FFF; + border: none; +}" +`; + +exports[`[[Mode: diff]] Autorename Tests: only control directives 1`] = ` +" + +.test1, .test2 { + border-radius: 2px 0 8px 0; + padding-right: 0; + padding-left: 20px; + text-align: right; + transform: translate(50%, 50%); +} + +.test2 { + text-align: right; + text-align: center; +} + +.test3 { + direction: rtl; +} + +.test4 { + border-radius: 4px 2px 16px 8px; + text-shadow: red -99px -1px 1px, blue -99px 2px 1px; +} + +.test5, +.test6, +.test7 { + background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C); + border-color: #666 #999 #888 #777; + border-width: 1px 4px 3px 2px; + left: auto; + right: 100px; + transform: translateX(-5px); +} + +.test8 { + background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%); +} + +.test9, .test10 { + background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), + linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), + linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); + left: auto; + right: 5px; +} + +.test11:hover, +.test11:active { + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; + font-size: 30px; + color: #000; + transform: translateY(10px) scaleX(-1); + padding: 10px 20px; +} + +.test16:hover { + padding-right: 0; + padding-left: 20px; +} + +.test18 { + padding: 10px 10px 40px 20px; +} + +.test18::after { + left: auto; + right: 10px; +} + +@media only screen and (min-device-width: 320px) { + + .test18 { + padding: 1px 4px 3px 2px; + } +} + +.test22 { + right: 5px; + left: 10px; +} + +.test24 { + border: 1px solid #000; + border-bottom-color: #666; +} + +.test26-ltr { + background-image: url(\\"/icons/icon-r.png\\") +} + +.test28-left::before { + content: \\"keyboard_arrow_right\\"; +} + +.test31 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test32 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test33 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.example34 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.example35 { + transform: translate(10px, 20px); +} + +.test36 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test37 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test38 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test39 { + margin-left: 0; + margin-right: 10px; +} + +.test40 { + left: auto; + right: 5px; +} + +.test41 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.test42 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.test43 { + transform: translate(10px, 20px); +} +@media only screen and (min-device-width: 320px) { + + .test46 { + text-align: right; + } +} +@media only screen and (min-device-width: 320px) { + + .test48 { + text-align: right; + } +} + +:root { + text-align: right; +} + +html .test50 { + left: auto; + right: 10px; +} + +.test51 { + border-left: none; + border-right: 1px solid #FFF; + border: none; +}" +`; + +exports[`[[Mode: diff]] Autorename Tests: only control directives, greedy: true 1`] = ` +" + +.test1, .test2 { + border-radius: 2px 0 8px 0; + padding-right: 0; + padding-left: 20px; + text-align: right; + transform: translate(50%, 50%); +} + +.test2 { + text-align: right; + text-align: center; +} + +.test3 { + direction: rtl; +} + +.test4 { + border-radius: 4px 2px 16px 8px; + text-shadow: red -99px -1px 1px, blue -99px 2px 1px; +} + +.test5, +.test6, +.test7 { + background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C); + border-color: #666 #999 #888 #777; + border-width: 1px 4px 3px 2px; + left: auto; + right: 100px; + transform: translateX(-5px); +} + +.test8 { + background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%); +} + +.test9, .test10 { + background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), + linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), + linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); + left: auto; + right: 5px; +} + +.test11:hover, +.test11:active { + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; + font-size: 30px; + color: #000; + transform: translateY(10px) scaleX(-1); + padding: 10px 20px; +} + +.test16:hover { + padding-right: 0; + padding-left: 20px; +} + +.test18 { + padding: 10px 10px 40px 20px; +} + +.test18::after { + left: auto; + right: 10px; +} + +@media only screen and (min-device-width: 320px) { + + .test18 { + padding: 1px 4px 3px 2px; + } +} + +.test22 { + right: 5px; + left: 10px; +} + +.test24 { + border: 1px solid #000; + border-bottom-color: #666; +} + +.test26-ltr { + background-image: url(\\"/icons/icon-r.png\\") +} + +.test28-left::before { + content: \\"keyboard_arrow_right\\"; +} + +.testright30 { + content: \\"keyboard_arrow_left\\"; +} + +.test31 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test32 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test33 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.example34 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.example35 { + transform: translate(10px, 20px); +} + +.test36 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test37 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test38 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test39 { + margin-left: 0; + margin-right: 10px; +} + +.test40 { + left: auto; + right: 5px; +} + +.test41 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.test42 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.test43 { + transform: translate(10px, 20px); +} +@media only screen and (min-device-width: 320px) { + + .test46 { + text-align: right; + } +} +@media only screen and (min-device-width: 320px) { + + .test48 { + text-align: right; + } +} + +:root { + text-align: right; +} + +html .test50 { + left: auto; + right: 10px; +} + +.test51 { + border-left: none; + border-right: 1px solid #FFF; + border: none; +}" +`; + +exports[`[[Mode: diff]] Autorename Tests: strict 1`] = ` +" + +.test1, .test2 { + border-radius: 2px 0 8px 0; + padding-right: 0; + padding-left: 20px; + text-align: right; + transform: translate(50%, 50%); +} + +.test2 { + text-align: right; + text-align: center; +} + +.test3 { + direction: rtl; +} + +.test4 { + border-radius: 4px 2px 16px 8px; + text-shadow: red -99px -1px 1px, blue -99px 2px 1px; +} + +.test5, +.test6, +.test7 { + background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C); + border-color: #666 #999 #888 #777; + border-width: 1px 4px 3px 2px; + left: auto; + right: 100px; + transform: translateX(-5px); +} + +.test8 { + background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%); +} + +.test9, .test10 { + background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), + linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), + linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); + left: auto; + right: 5px; +} + +.test11:hover, +.test11:active { + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; + font-size: 30px; + color: #000; + transform: translateY(10px) scaleX(-1); + padding: 10px 20px; +} + +.test16:hover { + padding-right: 0; + padding-left: 20px; +} + +.test18 { + padding: 10px 10px 40px 20px; +} + +.test18::after { + left: auto; + right: 10px; +} + +@media only screen and (min-device-width: 320px) { + + .test18 { + padding: 1px 4px 3px 2px; + } +} + +.test22 { + right: 5px; + left: 10px; +} + +.test24 { + border: 1px solid #000; + border-bottom-color: #666; +} + +.test25, .test26-rtl, .test27 { + background-image: url(\\"/icons/icon-l.png\\") +} + +.test26-ltr { + background-image: url(\\"/icons/icon-r.png\\") +} + +.test28-right::before { + content: \\"keyboard_arrow_left\\"; +} + +.test28-left::before { + content: \\"keyboard_arrow_right\\"; +} + +.test31 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test32 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test33 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.example34 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.example35 { + transform: translate(10px, 20px); +} + +.test36 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test37 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test38 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test39 { + margin-left: 0; + margin-right: 10px; +} + +.test40 { + left: auto; + right: 5px; +} + +.test41 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.test42 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.test43 { + transform: translate(10px, 20px); +} +@media only screen and (min-device-width: 320px) { + + .test46 { + text-align: right; + } +} +@media only screen and (min-device-width: 320px) { + + .test48 { + text-align: right; + } +} + +:root { + text-align: right; +} + +html .test50 { + left: auto; + right: 10px; +} + +.test51 { + border-left: none; + border-right: 1px solid #FFF; + border: none; +}" +`; + +exports[`[[Mode: diff]] Autorename Tests: strict, greedy: true 1`] = ` +" + +.test1, .test2 { + border-radius: 2px 0 8px 0; + padding-right: 0; + padding-left: 20px; + text-align: right; + transform: translate(50%, 50%); +} + +.test2 { + text-align: right; + text-align: center; +} + +.test3 { + direction: rtl; +} + +.test4 { + border-radius: 4px 2px 16px 8px; + text-shadow: red -99px -1px 1px, blue -99px 2px 1px; +} + +.test5, +.test6, +.test7 { + background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C); + border-color: #666 #999 #888 #777; + border-width: 1px 4px 3px 2px; + left: auto; + right: 100px; + transform: translateX(-5px); +} + +.test8 { + background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%); +} + +.test9, .test10 { + background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), + linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), + linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); + left: auto; + right: 5px; +} + +.test11:hover, +.test11:active { + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; + font-size: 30px; + color: #000; + transform: translateY(10px) scaleX(-1); + padding: 10px 20px; +} + +.test16:hover { + padding-right: 0; + padding-left: 20px; +} + +.test18 { + padding: 10px 10px 40px 20px; +} + +.test18::after { + left: auto; + right: 10px; +} + +@media only screen and (min-device-width: 320px) { + + .test18 { + padding: 1px 4px 3px 2px; + } +} + +.test22 { + right: 5px; + left: 10px; +} + +.test24 { + border: 1px solid #000; + border-bottom-color: #666; +} + +.test25, .test26-rtl, .test27 { + background-image: url(\\"/icons/icon-l.png\\") +} + +.test26-ltr { + background-image: url(\\"/icons/icon-r.png\\") +} + +.test28-right::before { + content: \\"keyboard_arrow_left\\"; +} + +.test28-left::before { + content: \\"keyboard_arrow_right\\"; +} + +.testright30 { + content: \\"keyboard_arrow_left\\"; +} + +.testleft30 { + content: \\"keyboard_arrow_right\\"; +} + +.test31 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test32 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test33 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.example34 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.example35 { + transform: translate(10px, 20px); +} + +.test36 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test37 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test38 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test39 { + margin-left: 0; + margin-right: 10px; +} + +.test40 { + left: auto; + right: 5px; +} + +.test41 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.test42 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.test43 { + transform: translate(10px, 20px); +} +@media only screen and (min-device-width: 320px) { + + .test46 { + text-align: right; + } +} +@media only screen and (min-device-width: 320px) { + + .test48 { + text-align: right; + } +} + +:root { + text-align: right; +} + +html .test50 { + left: auto; + right: 10px; +} + +.test51 { + border-left: none; + border-right: 1px solid #FFF; + border: none; +}" +`; + exports[`[[Mode: override]] Autorename Tests: flexible 1`] = ` ".test1, .test2 { background: url(\\"/folder/subfolder/icons/ltr/chevron-left.png\\"); diff --git a/tests/__snapshots__/basic-options.test.ts.snap b/tests/__snapshots__/basic-options.test.ts.snap index 5f849662..174ec985 100644 --- a/tests/__snapshots__/basic-options.test.ts.snap +++ b/tests/__snapshots__/basic-options.test.ts.snap @@ -3796,6 +3796,1305 @@ html[dir=\\"rtl\\"] .test50 { }" `; +exports[`[[Mode: diff]] Basic Options Tests: {processKeyFrames: true} 1`] = ` +" + +.test1, .test2 { + border-radius: 2px 0 8px 0; + padding-right: 0; + padding-left: 20px; + text-align: right; + transform: translate(50%, 50%); +} + +.test2 { + text-align: right; + text-align: center; +} + +.test3 { + direction: rtl; +} + +.test4 { + border-radius: 4px 2px 16px 8px; + text-shadow: red -99px -1px 1px, blue -99px 2px 1px; +} + +.test5, +.test6, +.test7 { + background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C); + border-color: #666 #999 #888 #777; + border-width: 1px 4px 3px 2px; + left: auto; + right: 100px; + transform: translateX(-5px); +} + +.test8 { + background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%); +} + +.test9, .test10 { + background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), + linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), + linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); + left: auto; + right: 5px; +} + +.test11:hover, +.test11:active { + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; + font-size: 30px; + color: #000; + transform: translateY(10px) scaleX(-1); + padding: 10px 20px; +} + +.test16:hover { + padding-right: 0; + padding-left: 20px; +} + +.test18 { + animation: 5s flip-rtl 1s ease-in-out, + 3s my-animation-rtl 6s ease-in-out; + padding: 10px 10px 40px 20px; +} + +.test18::after { + left: auto; + right: 10px; +} + +@keyframes flip-rtl { + from { + transform: translateX(-100px); + } + to { + transform: translateX(0); + } +} + +@media only screen and (min-device-width: 320px) { + + .test18 { + padding: 1px 4px 3px 2px; + } +} + +.test19 { + animation-name: my-animation-rtl; +} + +.test20 { + animation-name: my-animation-rtl, no-flip; +} + +@keyframes my-animation-rtl { + from { + right: 0%; + } + to { + right: 100%; + } +} + +.test22 { + right: 5px; + left: 10px; +} + +.test24 { + border: 1px solid #000; + border-bottom-color: #666; +} + +.test26-ltr { + background-image: url(\\"/icons/icon-r.png\\") +} + +.test28-left::before { + content: \\"keyboard_arrow_right\\"; +} + +.test31 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test32 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test33 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.example34 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.example35 { + transform: translate(10px, 20px); +} + +.test36 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test37 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test38 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test39 { + margin-left: 0; + margin-right: 10px; +} + +.test40 { + left: auto; + right: 5px; +} + +.test41 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.test42 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.test43 { + transform: translate(10px, 20px); +} +@keyframes normalFlip-rtl { + from { + right: 0px; + top: 0px; + } + to { + right: 100px; + top: -100px; + } +} + +.test44 { + animation: 5s normalFlip-rtl 1s ease-in-out; +} +@keyframes inversedFlip-ltr { + from { + right: 0px; + top: 0px; + } + to { + right: 100px; + top: -100px; + } +} + +.test45 { + animation: 5s inversedFlip-ltr 1s ease-in-out; +} +@media only screen and (min-device-width: 320px) { + + .test46 { + text-align: right; + } +} +@media only screen and (min-device-width: 320px) { + + .test48 { + text-align: right; + } +} + +:root { + text-align: right; +} + +html .test50 { + left: auto; + right: 10px; +} + +.test51 { + border-left: none; + border-right: 1px solid #FFF; + border: none; +}" +`; + +exports[`[[Mode: diff]] Basic Options Tests: {processUrls: true} 1`] = ` +" + +.test1, .test2 { + background: url(\\"/folder/subfolder/icons/rtl/chevron-right.png\\"); + background-color: #FFF; + background-position: 10px 20px; + border-radius: 2px 0 8px 0; + padding-right: 0; + padding-left: 20px; + text-align: right; + transform: translate(50%, 50%); +} + +.test2 { + text-align: right; + text-align: center; +} + +.test3 { + direction: rtl; +} + +.test4 { + border-radius: 4px 2px 16px 8px; + text-shadow: red -99px -1px 1px, blue -99px 2px 1px; +} + +.test5, +.test6, +.test7 { + background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C); + border-color: #666 #999 #888 #777; + border-width: 1px 4px 3px 2px; + left: auto; + right: 100px; + transform: translateX(-5px); +} + +.test8 { + background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%); +} + +.test9, .test10 { + background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), + linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), + linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); + left: auto; + right: 5px; +} + +.test11:hover, +.test11:active { + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; + font-size: 30px; + color: #000; + transform: translateY(10px) scaleX(-1); + padding: 10px 20px; +} + +.test16:hover { + padding-right: 0; + padding-left: 20px; +} + +.test18 { + padding: 10px 10px 40px 20px; +} + +.test18::after { + left: auto; + right: 10px; +} + +@media only screen and (min-device-width: 320px) { + + .test18 { + padding: 1px 4px 3px 2px; + } +} + +.test22 { + right: 5px; + left: 10px; +} + +.test24 { + border: 1px solid #000; + border-bottom-color: #666; +} + +.test26-ltr { + background-image: url(\\"/icons/icon-r.png\\") +} + +.test28-left::before { + content: \\"keyboard_arrow_right\\"; +} + +.test31 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test32 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test33 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.example34 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.example35 { + transform: translate(10px, 20px); +} + +.test36 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test37 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test38 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test39 { + margin-left: 0; + margin-right: 10px; +} + +.test40 { + left: auto; + right: 5px; +} + +.test41 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.test42 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.test43 { + transform: translate(10px, 20px); +} +@media only screen and (min-device-width: 320px) { + + .test46 { + text-align: right; + } +} +@media only screen and (min-device-width: 320px) { + + .test48 { + text-align: right; + } +} + +:root { + text-align: right; +} + +html .test50 { + left: auto; + right: 10px; +} + +.test51 { + border-left: none; + border-right: 1px solid #FFF; + border: none; +}" +`; + +exports[`[[Mode: diff]] Basic Options Tests: {source: rtl, processKeyFrames: true} 1`] = ` +" + +.test1, .test2 { + border-radius: 2px 0 8px 0; + padding-right: 0; + padding-left: 20px; + text-align: right; + transform: translate(50%, 50%); +} + +.test2 { + text-align: right; + text-align: center; +} + +.test3 { + direction: rtl; +} + +.test4 { + border-radius: 4px 2px 16px 8px; + text-shadow: red -99px -1px 1px, blue -99px 2px 1px; +} + +.test5, +.test6, +.test7 { + background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C); + border-color: #666 #999 #888 #777; + border-width: 1px 4px 3px 2px; + left: auto; + right: 100px; + transform: translateX(-5px); +} + +.test8 { + background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%); +} + +.test9, .test10 { + background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), + linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), + linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); + left: auto; + right: 5px; +} + +.test11:hover, +.test11:active { + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; + font-size: 30px; + color: #000; + transform: translateY(10px) scaleX(-1); + padding: 10px 20px; +} + +.test16:hover { + padding-right: 0; + padding-left: 20px; +} + +.test18 { + animation: 5s flip-ltr 1s ease-in-out, + 3s my-animation-ltr 6s ease-in-out; + padding: 10px 10px 40px 20px; +} + +.test18::after { + left: auto; + right: 10px; +} + +@keyframes flip-ltr { + from { + transform: translateX(-100px); + } + to { + transform: translateX(0); + } +} + +@media only screen and (min-device-width: 320px) { + + .test18 { + padding: 1px 4px 3px 2px; + } +} + +.test19 { + animation-name: my-animation-ltr; +} + +.test20 { + animation-name: my-animation-ltr, no-flip; +} + +@keyframes my-animation-ltr { + from { + right: 0%; + } + to { + right: 100%; + } +} + +.test22 { + right: 5px; + left: 10px; +} + +.test24 { + border: 1px solid #000; + border-bottom-color: #666; +} + +.test26-ltr { + background-image: url(\\"/icons/icon-r.png\\") +} + +.test28-left::before { + content: \\"keyboard_arrow_right\\"; +} + +.test31 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test32 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test33 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.example34 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.example35 { + transform: translate(10px, 20px); +} + +.test36 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test37 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test38 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test39 { + margin-left: 0; + margin-right: 10px; +} + +.test40 { + left: auto; + right: 5px; +} + +.test41 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.test42 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.test43 { + transform: translate(10px, 20px); +} +@keyframes normalFlip-rtl { + from { + right: 0px; + top: 0px; + } + to { + right: 100px; + top: -100px; + } +} + +.test44 { + animation: 5s normalFlip-rtl 1s ease-in-out; +} +@keyframes inversedFlip-ltr { + from { + right: 0px; + top: 0px; + } + to { + right: 100px; + top: -100px; + } +} + +.test45 { + animation: 5s inversedFlip-ltr 1s ease-in-out; +} +@media only screen and (min-device-width: 320px) { + + .test46 { + text-align: right; + } +} +@media only screen and (min-device-width: 320px) { + + .test48 { + text-align: right; + } +} + +:root { + text-align: right; +} + +html .test50 { + left: auto; + right: 10px; +} + +.test51 { + border-left: none; + border-right: 1px solid #FFF; + border: none; +}" +`; + +exports[`[[Mode: diff]] Basic Options Tests: {source: rtl} 1`] = ` +" + +.test1, .test2 { + border-radius: 2px 0 8px 0; + padding-right: 0; + padding-left: 20px; + text-align: right; + transform: translate(50%, 50%); +} + +.test2 { + text-align: right; + text-align: center; +} + +.test3 { + direction: rtl; +} + +.test4 { + border-radius: 4px 2px 16px 8px; + text-shadow: red -99px -1px 1px, blue -99px 2px 1px; +} + +.test5, +.test6, +.test7 { + background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C); + border-color: #666 #999 #888 #777; + border-width: 1px 4px 3px 2px; + left: auto; + right: 100px; + transform: translateX(-5px); +} + +.test8 { + background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%); +} + +.test9, .test10 { + background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), + linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), + linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); + left: auto; + right: 5px; +} + +.test11:hover, +.test11:active { + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; + font-size: 30px; + color: #000; + transform: translateY(10px) scaleX(-1); + padding: 10px 20px; +} + +.test16:hover { + padding-right: 0; + padding-left: 20px; +} + +.test18 { + padding: 10px 10px 40px 20px; +} + +.test18::after { + left: auto; + right: 10px; +} + +@media only screen and (min-device-width: 320px) { + + .test18 { + padding: 1px 4px 3px 2px; + } +} + +.test22 { + right: 5px; + left: 10px; +} + +.test24 { + border: 1px solid #000; + border-bottom-color: #666; +} + +.test26-ltr { + background-image: url(\\"/icons/icon-r.png\\") +} + +.test28-left::before { + content: \\"keyboard_arrow_right\\"; +} + +.test31 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test32 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test33 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.example34 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.example35 { + transform: translate(10px, 20px); +} + +.test36 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test37 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test38 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test39 { + margin-left: 0; + margin-right: 10px; +} + +.test40 { + left: auto; + right: 5px; +} + +.test41 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.test42 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.test43 { + transform: translate(10px, 20px); +} +@media only screen and (min-device-width: 320px) { + + .test46 { + text-align: right; + } +} +@media only screen and (min-device-width: 320px) { + + .test48 { + text-align: right; + } +} + +:root { + text-align: right; +} + +html .test50 { + left: auto; + right: 10px; +} + +.test51 { + border-left: none; + border-right: 1px solid #FFF; + border: none; +}" +`; + +exports[`[[Mode: diff]] Basic Options Tests: {useCalc: true} 1`] = ` +" + +.test1, .test2 { + background-position: calc(100% - 10px) 20px; + border-radius: 2px 0 8px 0; + padding-right: 0; + padding-left: 20px; + text-align: right; + transform: translate(50%, 50%); +} + +.test2 { + text-align: right; + text-align: center; +} + +.test3 { + direction: rtl; +} + +.test4 { + border-radius: 4px 2px 16px 8px; + text-shadow: red -99px -1px 1px, blue -99px 2px 1px; + transform-origin: calc(100% - 10px) 20px; +} + +.test5, +.test6, +.test7 { + background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C); + border-color: #666 #999 #888 #777; + border-width: 1px 4px 3px 2px; + left: auto; + right: 100px; + transform: translateX(-5px); +} + +.test8 { + background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%); +} + +.test9, .test10 { + background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), + linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), + linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); + left: auto; + right: 5px; +} + +.test11:hover, +.test11:active { + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; + font-size: 30px; + color: #000; + transform: translateY(10px) scaleX(-1); + padding: 10px 20px; +} + +.test16:hover { + padding-right: 0; + padding-left: 20px; +} + +.test18 { + padding: 10px 10px 40px 20px; +} + +.test18::after { + left: auto; + right: 10px; +} + +@media only screen and (min-device-width: 320px) { + + .test18 { + padding: 1px 4px 3px 2px; + } +} + +.test22 { + right: 5px; + left: 10px; +} + +.test24 { + border: 1px solid #000; + border-bottom-color: #666; +} + +.test26-ltr { + background-image: url(\\"/icons/icon-r.png\\") +} + +.test28-left::before { + content: \\"keyboard_arrow_right\\"; +} + +.test31 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test32 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test33 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.example34 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.example35 { + transform: translate(10px, 20px); +} + +.test36 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test37 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test38 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test39 { + margin-left: 0; + margin-right: 10px; +} + +.test40 { + left: auto; + right: 5px; +} + +.test41 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.test42 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.test43 { + transform: translate(10px, 20px); +} +@media only screen and (min-device-width: 320px) { + + .test46 { + text-align: right; + } +} +@media only screen and (min-device-width: 320px) { + + .test48 { + text-align: right; + } +} + +:root { + text-align: right; +} + +html .test50 { + left: auto; + right: 10px; +} + +.test51 { + border-left: none; + border-right: 1px solid #FFF; + border: none; +}" +`; + +exports[`[[Mode: diff]] Basic Options Tests: Basic 1`] = ` +" + +.test1, .test2 { + border-radius: 2px 0 8px 0; + padding-right: 0; + padding-left: 20px; + text-align: right; + transform: translate(50%, 50%); +} + +.test2 { + text-align: right; + text-align: center; +} + +.test3 { + direction: rtl; +} + +.test4 { + border-radius: 4px 2px 16px 8px; + text-shadow: red -99px -1px 1px, blue -99px 2px 1px; +} + +.test5, +.test6, +.test7 { + background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C); + border-color: #666 #999 #888 #777; + border-width: 1px 4px 3px 2px; + left: auto; + right: 100px; + transform: translateX(-5px); +} + +.test8 { + background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%); +} + +.test9, .test10 { + background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), + linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), + linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); + left: auto; + right: 5px; +} + +.test11:hover, +.test11:active { + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; + font-size: 30px; + color: #000; + transform: translateY(10px) scaleX(-1); + padding: 10px 20px; +} + +.test16:hover { + padding-right: 0; + padding-left: 20px; +} + +.test18 { + padding: 10px 10px 40px 20px; +} + +.test18::after { + left: auto; + right: 10px; +} + +@media only screen and (min-device-width: 320px) { + + .test18 { + padding: 1px 4px 3px 2px; + } +} + +.test22 { + right: 5px; + left: 10px; +} + +.test24 { + border: 1px solid #000; + border-bottom-color: #666; +} + +.test26-ltr { + background-image: url(\\"/icons/icon-r.png\\") +} + +.test28-left::before { + content: \\"keyboard_arrow_right\\"; +} + +.test31 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test32 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test33 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.example34 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.example35 { + transform: translate(10px, 20px); +} + +.test36 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test37 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test38 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test39 { + margin-left: 0; + margin-right: 10px; +} + +.test40 { + left: auto; + right: 5px; +} + +.test41 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.test42 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.test43 { + transform: translate(10px, 20px); +} +@media only screen and (min-device-width: 320px) { + + .test46 { + text-align: right; + } +} +@media only screen and (min-device-width: 320px) { + + .test48 { + text-align: right; + } +} + +:root { + text-align: right; +} + +html .test50 { + left: auto; + right: 10px; +} + +.test51 { + border-left: none; + border-right: 1px solid #FFF; + border: none; +}" +`; + exports[`[[Mode: override]] Basic Options Tests: {processKeyFrames: true} 1`] = ` ".test1, .test2 { background: url(\\"/folder/subfolder/icons/ltr/chevron-left.png\\"); diff --git a/tests/__snapshots__/nested-rules.test.ts.snap b/tests/__snapshots__/nested-rules.test.ts.snap index 9515174f..a220f4a1 100644 --- a/tests/__snapshots__/nested-rules.test.ts.snap +++ b/tests/__snapshots__/nested-rules.test.ts.snap @@ -334,6 +334,156 @@ exports[`[[Mode: combined]] Nested rules tests: {source: rtl} 1`] = ` }" `; +exports[`[[Mode: diff]] Nested rules tests: {source: ltr} 1`] = ` +" + +.test1 { + left: auto; + right: 10px; + .test2 { + text-align: right; + } +} + +.test3 { + left: auto; + right: 10px; + &.test4 { + margin-left: 0; + margin-right: 20px; + } + &.test5 { + span { + text-align: right; + } + } +} + +.test6 { + .global & { + padding: 5px 5px 5px 10px; + border-left-color: currentcolor; + border-right-color: #666; + div { + padding-left: 0; + padding-right: 20px; + } + } + .test7 { + .global & { + ::after { + text-align: right; + } + } + } +} + +@supports (display: contents) and (display: grid) { + + .test8 { + left: auto; + right: 10px; + text-align: right; + } + @media screen and (max-width: 800px) { + + .test9 { + padding: 0 1.7em 0 0.6em; + } + } +} + +@media screen and (max-width: 800px) { + @supports (display: contents) and (display: grid) { + + .test10 { + padding: 0 1.7em 0 0.6em; + } + } +} + +.test11 { + .test13 { + text-align: left; + } +}" +`; + +exports[`[[Mode: diff]] Nested rules tests: {source: rtl} 1`] = ` +" + +.test1 { + left: auto; + right: 10px; + .test2 { + text-align: right; + } +} + +.test3 { + left: auto; + right: 10px; + &.test4 { + margin-left: 0; + margin-right: 20px; + } + &.test5 { + span { + text-align: right; + } + } +} + +.test6 { + .global & { + padding: 5px 5px 5px 10px; + border-left-color: currentcolor; + border-right-color: #666; + div { + padding-left: 0; + padding-right: 20px; + } + } + .test7 { + .global & { + ::after { + text-align: right; + } + } + } +} + +@supports (display: contents) and (display: grid) { + + .test8 { + left: auto; + right: 10px; + text-align: right; + } + @media screen and (max-width: 800px) { + + .test9 { + padding: 0 1.7em 0 0.6em; + } + } +} + +@media screen and (max-width: 800px) { + @supports (display: contents) and (display: grid) { + + .test10 { + padding: 0 1.7em 0 0.6em; + } + } +} + +.test11 { + .test13 { + text-align: left; + } +}" +`; + exports[`[[Mode: override]] Nested rules tests: {source: ltr} 1`] = ` ".test1 { color: red; diff --git a/tests/__snapshots__/noflip.test.ts.snap b/tests/__snapshots__/noflip.test.ts.snap index 92f0cb20..307ee4ae 100644 --- a/tests/__snapshots__/noflip.test.ts.snap +++ b/tests/__snapshots__/noflip.test.ts.snap @@ -21,6 +21,8 @@ exports[`[[Mode: combined]] Combined Tests: No Flip 1`] = ` }" `; +exports[`[[Mode: diff]] Combined Tests: No Flip 1`] = `""`; + exports[`[[Mode: override]] Combined Tests: No Flip 1`] = ` ".test1 { color: #000; diff --git a/tests/__snapshots__/prefixed.test.ts.snap b/tests/__snapshots__/prefixed.test.ts.snap index d77f1330..50c82915 100644 --- a/tests/__snapshots__/prefixed.test.ts.snap +++ b/tests/__snapshots__/prefixed.test.ts.snap @@ -336,6 +336,178 @@ exports[`[[Mode: combined]] Prefixed Tests: ignorePrefixedRules false 1`] = ` }" `; +exports[`[[Mode: diff]] Prefixed Tests: Custom prefixes 1`] = ` +" + +.rtlignore .test2 { + padding: 2px 16px 8px 4px; +} + +.ltrignore .test2 { + margin: 2px 16px 8px 4px; +} + +[dir=\\"ltr\\"] .test3 { + text-align: right; +} + +[dir=\\"rtl\\"] .test3 { + text-align: left; +} + +.ltr .test4 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +[dir=\\"rtl\\"] .test5 { + transform: translate(10px, 20px); +} + +.test6 { + left: 5px; +} + +[dir=\\"ltr\\"] .test8-ltr { + background-image: url(\\"/icons/icon-rtl.png\\"); +} + +[dir=\\"rtl\\"] .test8-rtl { + background-image: url(\\"/icons/icon-ltr.png\\"); +}" +`; + +exports[`[[Mode: diff]] Prefixed Tests: Prefixed default 1`] = ` +" + +.rtl .test { + left: auto; + right: 10px; +} + +.ltr .test { + right: auto; + left: 10px; +} + +.rtlignore .test2 { + padding: 2px 16px 8px 4px; +} + +.ltrignore .test2 { + margin: 2px 16px 8px 4px; +} + +.ltr .test4 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +[dir=\\"rtl\\"] .test5 { + transform: translate(10px, 20px); +} + +.test6 { + left: 5px; +} + +.ltr .test7-ltr { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.rtl .test7-rtl { + background-image: url(\\"/icons/icon-left.png\\"); +}" +`; + +exports[`[[Mode: diff]] Prefixed Tests: Prefixed with array 1`] = ` +" + +.rtlignore .test2 { + padding: 2px 16px 8px 4px; +} + +.ltrignore .test2 { + margin: 2px 16px 8px 4px; +} + +.ltr .test4 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +[dir=\\"rtl\\"] .test5 { + transform: translate(10px, 20px); +} + +.test6 { + left: 5px; +}" +`; + +exports[`[[Mode: diff]] Prefixed Tests: ignorePrefixedRules false 1`] = ` +" + +.rtl .test { + left: auto; + right: 10px; +} + +.ltr .test { + right: auto; + left: 10px; +} + +.rtlignore .test2 { + padding: 2px 16px 8px 4px; +} + +.ltrignore .test2 { + margin: 2px 16px 8px 4px; +} + +[dir=\\"ltr\\"] .test3 { + text-align: right; +} + +[dir=\\"rtl\\"] .test3 { + text-align: left; +} + +.ltr .test4 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +[dir=\\"rtl\\"] .test5 { + transform: translate(10px, 20px); +} + +.test6 { + left: 5px; +} + +.ltr .test7-ltr { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.rtl .test7-rtl { + background-image: url(\\"/icons/icon-left.png\\"); +} + +[dir=\\"ltr\\"] .test8-ltr { + background-image: url(\\"/icons/icon-rtl.png\\"); +} + +[dir=\\"rtl\\"] .test8-rtl { + background-image: url(\\"/icons/icon-ltr.png\\"); +}" +`; + exports[`[[Mode: override]] Prefixed Tests: Custom prefixes 1`] = ` ".test { color: red; diff --git a/tests/__snapshots__/prefixes.test.ts.snap b/tests/__snapshots__/prefixes.test.ts.snap index e32978c2..5d30c12e 100644 --- a/tests/__snapshots__/prefixes.test.ts.snap +++ b/tests/__snapshots__/prefixes.test.ts.snap @@ -1857,6 +1857,600 @@ html.rtl .test50, html.right-to-left .test50 { }" `; +exports[`[[Mode: diff]] Prefixes Tests: custom ltrPrefix and rtlPrefix 1`] = ` +" + +.test1, .test2 { + border-radius: 2px 0 8px 0; + padding-right: 0; + padding-left: 20px; + text-align: right; + transform: translate(50%, 50%); +} + +.test2 { + text-align: right; + text-align: center; +} + +.test3 { + direction: rtl; +} + +.test4 { + border-radius: 4px 2px 16px 8px; + text-shadow: red -99px -1px 1px, blue -99px 2px 1px; +} + +.test5, +.test6, +.test7 { + background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C); + border-color: #666 #999 #888 #777; + border-width: 1px 4px 3px 2px; + left: auto; + right: 100px; + transform: translateX(-5px); +} + +.test8 { + background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%); +} + +.test9, .test10 { + background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), + linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), + linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); + left: auto; + right: 5px; +} + +.test11:hover, +.test11:active { + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; + font-size: 30px; + color: #000; + transform: translateY(10px) scaleX(-1); + padding: 10px 20px; +} + +.test16:hover { + padding-right: 0; + padding-left: 20px; +} + +.test18 { + padding: 10px 10px 40px 20px; +} + +.test18::after { + left: auto; + right: 10px; +} + +@media only screen and (min-device-width: 320px) { + + .test18 { + padding: 1px 4px 3px 2px; + } +} + +.test22 { + right: 5px; + left: 10px; +} + +.test24 { + border: 1px solid #000; + border-bottom-color: #666; +} + +.test26-ltr { + background-image: url(\\"/icons/icon-r.png\\") +} + +.test28-left::before { + content: \\"keyboard_arrow_right\\"; +} + +.test31 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test32 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test33 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.example34 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.example35 { + transform: translate(10px, 20px); +} + +.test36 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test37 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test38 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test39 { + margin-left: 0; + margin-right: 10px; +} + +.test40 { + left: auto; + right: 5px; +} + +.test41 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.test42 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.test43 { + transform: translate(10px, 20px); +} +@media only screen and (min-device-width: 320px) { + + .test46 { + text-align: right; + } +} +@media only screen and (min-device-width: 320px) { + + .test48 { + text-align: right; + } +} + +:root { + text-align: right; +} + +html .test50 { + left: auto; + right: 10px; +} + +.test51 { + border-left: none; + border-right: 1px solid #FFF; + border: none; +}" +`; + +exports[`[[Mode: diff]] Prefixes Tests: custom ltrPrefix and rtlPrefix properties as arrays 1`] = ` +" + +.test1, .test2 { + border-radius: 2px 0 8px 0; + padding-right: 0; + padding-left: 20px; + text-align: right; + transform: translate(50%, 50%); +} + +.test2 { + text-align: right; + text-align: center; +} + +.test3 { + direction: rtl; +} + +.test4 { + border-radius: 4px 2px 16px 8px; + text-shadow: red -99px -1px 1px, blue -99px 2px 1px; +} + +.test5, +.test6, +.test7 { + background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C); + border-color: #666 #999 #888 #777; + border-width: 1px 4px 3px 2px; + left: auto; + right: 100px; + transform: translateX(-5px); +} + +.test8 { + background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%); +} + +.test9, .test10 { + background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), + linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), + linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); + left: auto; + right: 5px; +} + +.test11:hover, +.test11:active { + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; + font-size: 30px; + color: #000; + transform: translateY(10px) scaleX(-1); + padding: 10px 20px; +} + +.test16:hover { + padding-right: 0; + padding-left: 20px; +} + +.test18 { + padding: 10px 10px 40px 20px; +} + +.test18::after { + left: auto; + right: 10px; +} + +@media only screen and (min-device-width: 320px) { + + .test18 { + padding: 1px 4px 3px 2px; + } +} + +.test22 { + right: 5px; + left: 10px; +} + +.test24 { + border: 1px solid #000; + border-bottom-color: #666; +} + +.test26-ltr { + background-image: url(\\"/icons/icon-r.png\\") +} + +.test28-left::before { + content: \\"keyboard_arrow_right\\"; +} + +.test31 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test32 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test33 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.example34 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.example35 { + transform: translate(10px, 20px); +} + +.test36 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test37 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test38 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test39 { + margin-left: 0; + margin-right: 10px; +} + +.test40 { + left: auto; + right: 5px; +} + +.test41 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.test42 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.test43 { + transform: translate(10px, 20px); +} +@media only screen and (min-device-width: 320px) { + + .test46 { + text-align: right; + } +} +@media only screen and (min-device-width: 320px) { + + .test48 { + text-align: right; + } +} + +:root { + text-align: right; +} + +html .test50 { + left: auto; + right: 10px; +} + +.test51 { + border-left: none; + border-right: 1px solid #FFF; + border: none; +}" +`; + +exports[`[[Mode: diff]] Prefixes Tests: custom ltrPrefix, rtlPrefix, and bothPrefix properties as arrays and processUrls: true 1`] = ` +" + +.test1, .test2 { + background: url(\\"/folder/subfolder/icons/rtl/chevron-right.png\\"); + background-color: #FFF; + background-position: 10px 20px; + border-radius: 2px 0 8px 0; + padding-right: 0; + padding-left: 20px; + text-align: right; + transform: translate(50%, 50%); +} + +.test2 { + text-align: right; + text-align: center; +} + +.test3 { + direction: rtl; +} + +.test4 { + border-radius: 4px 2px 16px 8px; + text-shadow: red -99px -1px 1px, blue -99px 2px 1px; +} + +.test5, +.test6, +.test7 { + background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C); + border-color: #666 #999 #888 #777; + border-width: 1px 4px 3px 2px; + left: auto; + right: 100px; + transform: translateX(-5px); +} + +.test8 { + background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%); +} + +.test9, .test10 { + background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), + linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), + linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); + left: auto; + right: 5px; +} + +.test11:hover, +.test11:active { + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; + font-size: 30px; + color: #000; + transform: translateY(10px) scaleX(-1); + padding: 10px 20px; +} + +.test16:hover { + padding-right: 0; + padding-left: 20px; +} + +.test18 { + padding: 10px 10px 40px 20px; +} + +.test18::after { + left: auto; + right: 10px; +} + +@media only screen and (min-device-width: 320px) { + + .test18 { + padding: 1px 4px 3px 2px; + } +} + +.test22 { + right: 5px; + left: 10px; +} + +.test24 { + border: 1px solid #000; + border-bottom-color: #666; +} + +.test26-ltr { + background-image: url(\\"/icons/icon-r.png\\") +} + +.test28-left::before { + content: \\"keyboard_arrow_right\\"; +} + +.test31 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test32 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test33 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.example34 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.example35 { + transform: translate(10px, 20px); +} + +.test36 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test37 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test38 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test39 { + margin-left: 0; + margin-right: 10px; +} + +.test40 { + left: auto; + right: 5px; +} + +.test41 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.test42 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.test43 { + transform: translate(10px, 20px); +} +@media only screen and (min-device-width: 320px) { + + .test46 { + text-align: right; + } +} +@media only screen and (min-device-width: 320px) { + + .test48 { + text-align: right; + } +} + +:root { + text-align: right; +} + +html .test50 { + left: auto; + right: 10px; +} + +.test51 { + border-left: none; + border-right: 1px solid #FFF; + border: none; +}" +`; + exports[`[[Mode: override]] Prefixes Tests: custom ltrPrefix and rtlPrefix 1`] = ` ".test1, .test2 { background: url(\\"/folder/subfolder/icons/ltr/chevron-left.png\\"); diff --git a/tests/__snapshots__/safe-prefix.test.ts.snap b/tests/__snapshots__/safe-prefix.test.ts.snap index 234ddc90..5c4ae7f9 100644 --- a/tests/__snapshots__/safe-prefix.test.ts.snap +++ b/tests/__snapshots__/safe-prefix.test.ts.snap @@ -2596,6 +2596,1122 @@ html[dir=\\"ltr\\"] .test50 { }" `; +exports[`[[Mode: diff]] safeBothPrefix Option Tests: {safeBothPrefix: true} 1`] = ` +" + +.test1, .test2 { + background: url(\\"/folder/subfolder/icons/ltr/chevron-left.png\\"); + background-color: #FFF; + background-position: 10px 20px; + border-radius: 2px 0 8px 0; + padding-right: 0; + padding-left: 20px; + text-align: right; + transform: translate(50%, 50%); +} + +.test2 { + text-align: right; + text-align: center; +} + +.test3 { + direction: rtl; + margin: 1px 2px 3px; + padding: 10px 20px; + text-align: center; +} + +.test4 { + border-color: red; + border-radius: 4px 2px 16px 8px; + text-shadow: red -99px -1px 1px, blue -99px 2px 1px; + transform-origin: 10px 20px; + transform: scale(0.5, 0.5); +} + +.test5, +.test6, +.test7 { + background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C); + border: 1px solid 2px; + border-color: #666 #999 #888 #777; + border-width: 1px 4px 3px 2px; + left: auto; + right: 100px; + transform: translateX(-5px); +} + +.test8 { + background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%); +} + +.test9, .test10 { + background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), + linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), + linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); + left: auto; + right: 5px; +} + +.test11:hover, +.test11:active { + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; + font-size: 30px; + color: #000; + transform: translateY(10px) scaleX(-1); + padding: 10px 20px; +} + +.test16:hover { + padding-right: 0; + padding-left: 20px; +} + +@media only screen and (min-device-width: 320px) { + .test17 { + cursor: wait; + } +} + +.test18 { + animation: 5s flip 1s ease-in-out, + 3s my-animation 6s ease-in-out; + padding: 10px 10px 40px 20px; +} + +.test18::after { + left: auto; + right: 10px; +} + +@media only screen and (min-device-width: 320px) { + + .test18 { + padding: 1px 4px 3px 2px; + } +} + +.test19 { + animation-delay: 1s; + animation-duration: 3s; + animation-name: my-animation; + animation-timing-function: ease-in-out; +} + +.test20 { + animation-delay: 2s; + animation-duration: 4s; + animation-name: my-animation, no-flip; + animation-timing-function: ease; +} + +.test21 { + animation-delay: 1s; + animation-duration: 3s; + animation-name: no-flip; + animation-timing-function: ease-in-out; +} + +.test22 { + right: 5px; + left: 10px; +} + +.test23 { + left: 10px; + right: 10px; +} + +.test24 { + border: 1px solid #000; + border-bottom-color: #666; + padding: 10px; +} + +.test25, .test26-ltr, .test27 { + background-image: url(\\"/icons/icon-l.png\\") +} + +.test26-rtl { + background-image: url(\\"/icons/icon-r.png\\") +} + +.test27-prev { + background-image: url(\\"/icons/icon-p.png\\") +} + +.test27-next { + background-image: url(\\"/icons/icon-n.png\\") +} + +.test28-left::before { + content: \\"keyboard_arrow_right\\"; +} + +.test31 { + background-image: url(\\"/icons/icon-right.png\\"); + border: 1px solid gray; +} + +.test32 { + background-image: url(\\"/icons/icon-right.png\\"); + background-repeat: no-repeat; + border: 1px solid gray; +} + +.test33 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.example34 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.example35 { + transform: translate(10px, 20px); +} + +.test36 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test37 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test38 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test39 { + margin-left: 0; + margin-right: 10px; +} + +.test40 { + padding: 10px; + left: auto; + right: 5px; +} + +.test41 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.test42 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.test43 { + transform: translate(10px, 20px); +} + +.test44 { + animation: 5s normalFlip 1s ease-in-out; +} + +.test45 { + animation: 5s inversedFlip 1s ease-in-out; +} +@media only screen and (min-device-width: 320px) { + + .test46 { + cursor: wait; + text-align: right; + } +} +@media only screen and (min-device-width: 320px) { + + .test48 { + cursor: wait; + text-align: right; + } +} + +:root { + text-align: right; +} + +html .test50 { + left: auto; + right: 10px; +} + +.test51 { + border-left: none; + border-right: 1px solid #FFF; + border: none; +}" +`; + +exports[`[[Mode: diff]] safeBothPrefix Option Tests: {safeBothPrefix: true} and {processKeyFrames: true} 1`] = ` +" + +.test1, .test2 { + background: url(\\"/folder/subfolder/icons/ltr/chevron-left.png\\"); + background-color: #FFF; + background-position: 10px 20px; + border-radius: 2px 0 8px 0; + padding-right: 0; + padding-left: 20px; + text-align: right; + transform: translate(50%, 50%); +} + +.test2 { + text-align: right; + text-align: center; +} + +.test3 { + direction: rtl; + margin: 1px 2px 3px; + padding: 10px 20px; + text-align: center; +} + +.test4 { + border-color: red; + border-radius: 4px 2px 16px 8px; + text-shadow: red -99px -1px 1px, blue -99px 2px 1px; + transform-origin: 10px 20px; + transform: scale(0.5, 0.5); +} + +.test5, +.test6, +.test7 { + background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C); + border: 1px solid 2px; + border-color: #666 #999 #888 #777; + border-width: 1px 4px 3px 2px; + left: auto; + right: 100px; + transform: translateX(-5px); +} + +.test8 { + background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%); +} + +.test9, .test10 { + background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), + linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), + linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); + left: auto; + right: 5px; +} + +.test11:hover, +.test11:active { + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; + font-size: 30px; + color: #000; + transform: translateY(10px) scaleX(-1); + padding: 10px 20px; +} + +.test16:hover { + padding-right: 0; + padding-left: 20px; +} + +@media only screen and (min-device-width: 320px) { + .test17 { + cursor: wait; + } +} + +.test18 { + animation: 5s flip-rtl 1s ease-in-out, + 3s my-animation-rtl 6s ease-in-out; + animation: 5s flip-ltr 1s ease-in-out, + 3s my-animation-ltr 6s ease-in-out; + padding: 10px 10px 40px 20px; +} + +.test18::after { + left: auto; + right: 10px; +} + +@keyframes flip-rtl { + from { + transform: translateX(-100px); + } + to { + transform: translateX(0); + } +} + +@media only screen and (min-device-width: 320px) { + + .test18 { + padding: 1px 4px 3px 2px; + } +} + +.test19 { + animation-delay: 1s; + animation-duration: 3s; + animation-name: my-animation-rtl; + animation-name: my-animation-ltr; + animation-timing-function: ease-in-out; +} + +.test20 { + animation-delay: 2s; + animation-duration: 4s; + animation-name: my-animation-rtl, no-flip; + animation-name: my-animation-ltr, no-flip; + animation-timing-function: ease; +} + +@keyframes my-animation-rtl { + from { + right: 0%; + } + to { + right: 100%; + } +} + +.test21 { + animation-delay: 1s; + animation-duration: 3s; + animation-name: no-flip; + animation-timing-function: ease-in-out; +} + +.test22 { + right: 5px; + left: 10px; +} + +.test23 { + left: 10px; + right: 10px; +} + +.test24 { + border: 1px solid #000; + border-bottom-color: #666; + padding: 10px; +} + +.test25, .test26-ltr, .test27 { + background-image: url(\\"/icons/icon-l.png\\") +} + +.test26-rtl { + background-image: url(\\"/icons/icon-r.png\\") +} + +.test27-prev { + background-image: url(\\"/icons/icon-p.png\\") +} + +.test27-next { + background-image: url(\\"/icons/icon-n.png\\") +} + +.test28-left::before { + content: \\"keyboard_arrow_right\\"; +} + +.test31 { + background-image: url(\\"/icons/icon-right.png\\"); + border: 1px solid gray; +} + +.test32 { + background-image: url(\\"/icons/icon-right.png\\"); + background-repeat: no-repeat; + border: 1px solid gray; +} + +.test33 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.example34 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.example35 { + transform: translate(10px, 20px); +} + +.test36 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test37 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test38 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test39 { + margin-left: 0; + margin-right: 10px; +} + +.test40 { + padding: 10px; + left: auto; + right: 5px; +} + +.test41 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.test42 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.test43 { + transform: translate(10px, 20px); +} +@keyframes normalFlip-rtl { + from { + right: 0px; + top: 0px; + } + to { + right: 100px; + top: -100px; + } +} + +.test44 { + animation: 5s normalFlip-rtl 1s ease-in-out; + animation: 5s normalFlip-ltr 1s ease-in-out; +} +@keyframes inversedFlip-ltr { + from { + right: 0px; + top: 0px; + } + to { + right: 100px; + top: -100px; + } +} + +.test45 { + animation: 5s inversedFlip-ltr 1s ease-in-out; + animation: 5s inversedFlip-rtl 1s ease-in-out; +} +@media only screen and (min-device-width: 320px) { + + .test46 { + cursor: wait; + text-align: right; + } +} +@media only screen and (min-device-width: 320px) { + + .test48 { + cursor: wait; + text-align: right; + } +} + +:root { + text-align: right; +} + +html .test50 { + left: auto; + right: 10px; +} + +.test51 { + border-left: none; + border-right: 1px solid #FFF; + border: none; +}" +`; + +exports[`[[Mode: diff]] safeBothPrefix Option Tests: {safeBothPrefix: true} and {processUrls: true} 1`] = ` +" + +.test1, .test2 { + background: url(\\"/folder/subfolder/icons/rtl/chevron-right.png\\"); + background-color: #FFF; + background-position: 10px 20px; + border-radius: 2px 0 8px 0; + padding-right: 0; + padding-left: 20px; + text-align: right; + transform: translate(50%, 50%); +} + +.test2 { + text-align: right; + text-align: center; +} + +.test3 { + direction: rtl; + margin: 1px 2px 3px; + padding: 10px 20px; + text-align: center; +} + +.test4 { + border-color: red; + border-radius: 4px 2px 16px 8px; + text-shadow: red -99px -1px 1px, blue -99px 2px 1px; + transform-origin: 10px 20px; + transform: scale(0.5, 0.5); +} + +.test5, +.test6, +.test7 { + background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C); + border: 1px solid 2px; + border-color: #666 #999 #888 #777; + border-width: 1px 4px 3px 2px; + left: auto; + right: 100px; + transform: translateX(-5px); +} + +.test8 { + background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%); +} + +.test9, .test10 { + background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), + linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), + linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); + left: auto; + right: 5px; +} + +.test11:hover, +.test11:active { + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; + font-size: 30px; + color: #000; + transform: translateY(10px) scaleX(-1); + padding: 10px 20px; +} + +.test16:hover { + padding-right: 0; + padding-left: 20px; +} + +@media only screen and (min-device-width: 320px) { + .test17 { + cursor: wait; + } +} + +.test18 { + animation: 5s flip 1s ease-in-out, + 3s my-animation 6s ease-in-out; + padding: 10px 10px 40px 20px; +} + +.test18::after { + left: auto; + right: 10px; +} + +@media only screen and (min-device-width: 320px) { + + .test18 { + padding: 1px 4px 3px 2px; + } +} + +.test19 { + animation-delay: 1s; + animation-duration: 3s; + animation-name: my-animation; + animation-timing-function: ease-in-out; +} + +.test20 { + animation-delay: 2s; + animation-duration: 4s; + animation-name: my-animation, no-flip; + animation-timing-function: ease; +} + +.test21 { + animation-delay: 1s; + animation-duration: 3s; + animation-name: no-flip; + animation-timing-function: ease-in-out; +} + +.test22 { + right: 5px; + left: 10px; +} + +.test23 { + left: 10px; + right: 10px; +} + +.test24 { + border: 1px solid #000; + border-bottom-color: #666; + padding: 10px; +} + +.test25, .test26-ltr, .test27 { + background-image: url(\\"/icons/icon-l.png\\") +} + +.test26-rtl { + background-image: url(\\"/icons/icon-r.png\\") +} + +.test27-prev { + background-image: url(\\"/icons/icon-p.png\\") +} + +.test27-next { + background-image: url(\\"/icons/icon-n.png\\") +} + +.test28-left::before { + content: \\"keyboard_arrow_right\\"; +} + +.test31 { + background-image: url(\\"/icons/icon-right.png\\"); + border: 1px solid gray; +} + +.test32 { + background-image: url(\\"/icons/icon-right.png\\"); + background-repeat: no-repeat; + border: 1px solid gray; +} + +.test33 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.example34 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.example35 { + transform: translate(10px, 20px); +} + +.test36 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test37 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test38 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test39 { + margin-left: 0; + margin-right: 10px; +} + +.test40 { + padding: 10px; + left: auto; + right: 5px; +} + +.test41 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.test42 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.test43 { + transform: translate(10px, 20px); +} + +.test44 { + animation: 5s normalFlip 1s ease-in-out; +} + +.test45 { + animation: 5s inversedFlip 1s ease-in-out; +} +@media only screen and (min-device-width: 320px) { + + .test46 { + cursor: wait; + text-align: right; + } +} +@media only screen and (min-device-width: 320px) { + + .test48 { + cursor: wait; + text-align: right; + } +} + +:root { + text-align: right; +} + +html .test50 { + left: auto; + right: 10px; +} + +.test51 { + border-left: none; + border-right: 1px solid #FFF; + border: none; +}" +`; + +exports[`[[Mode: diff]] safeBothPrefix Option Tests: {safeBothPrefix: true} and {source: rtl} 1`] = ` +" + +.test1, .test2 { + background: url(\\"/folder/subfolder/icons/ltr/chevron-left.png\\"); + background-color: #FFF; + background-position: 10px 20px; + border-radius: 2px 0 8px 0; + padding-right: 0; + padding-left: 20px; + text-align: right; + transform: translate(50%, 50%); +} + +.test2 { + text-align: right; + text-align: center; +} + +.test3 { + direction: rtl; + margin: 1px 2px 3px; + padding: 10px 20px; + text-align: center; +} + +.test4 { + border-color: red; + border-radius: 4px 2px 16px 8px; + text-shadow: red -99px -1px 1px, blue -99px 2px 1px; + transform-origin: 10px 20px; + transform: scale(0.5, 0.5); +} + +.test5, +.test6, +.test7 { + background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C); + border: 1px solid 2px; + border-color: #666 #999 #888 #777; + border-width: 1px 4px 3px 2px; + left: auto; + right: 100px; + transform: translateX(-5px); +} + +.test8 { + background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%); +} + +.test9, .test10 { + background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), + linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), + linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); + left: auto; + right: 5px; +} + +.test11:hover, +.test11:active { + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; + font-size: 30px; + color: #000; + transform: translateY(10px) scaleX(-1); + padding: 10px 20px; +} + +.test16:hover { + padding-right: 0; + padding-left: 20px; +} + +@media only screen and (min-device-width: 320px) { + .test17 { + cursor: wait; + } +} + +.test18 { + animation: 5s flip 1s ease-in-out, + 3s my-animation 6s ease-in-out; + padding: 10px 10px 40px 20px; +} + +.test18::after { + left: auto; + right: 10px; +} + +@media only screen and (min-device-width: 320px) { + + .test18 { + padding: 1px 4px 3px 2px; + } +} + +.test19 { + animation-delay: 1s; + animation-duration: 3s; + animation-name: my-animation; + animation-timing-function: ease-in-out; +} + +.test20 { + animation-delay: 2s; + animation-duration: 4s; + animation-name: my-animation, no-flip; + animation-timing-function: ease; +} + +.test21 { + animation-delay: 1s; + animation-duration: 3s; + animation-name: no-flip; + animation-timing-function: ease-in-out; +} + +.test22 { + right: 5px; + left: 10px; +} + +.test23 { + left: 10px; + right: 10px; +} + +.test24 { + border: 1px solid #000; + border-bottom-color: #666; + padding: 10px; +} + +.test25, .test26-ltr, .test27 { + background-image: url(\\"/icons/icon-l.png\\") +} + +.test26-rtl { + background-image: url(\\"/icons/icon-r.png\\") +} + +.test27-prev { + background-image: url(\\"/icons/icon-p.png\\") +} + +.test27-next { + background-image: url(\\"/icons/icon-n.png\\") +} + +.test28-left::before { + content: \\"keyboard_arrow_right\\"; +} + +.test31 { + background-image: url(\\"/icons/icon-right.png\\"); + border: 1px solid gray; +} + +.test32 { + background-image: url(\\"/icons/icon-right.png\\"); + background-repeat: no-repeat; + border: 1px solid gray; +} + +.test33 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.example34 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.example35 { + transform: translate(10px, 20px); +} + +.test36 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test37 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test38 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test39 { + margin-left: 0; + margin-right: 10px; +} + +.test40 { + padding: 10px; + left: auto; + right: 5px; +} + +.test41 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.test42 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.test43 { + transform: translate(10px, 20px); +} + +.test44 { + animation: 5s normalFlip 1s ease-in-out; +} + +.test45 { + animation: 5s inversedFlip 1s ease-in-out; +} +@media only screen and (min-device-width: 320px) { + + .test46 { + cursor: wait; + text-align: right; + } +} +@media only screen and (min-device-width: 320px) { + + .test48 { + cursor: wait; + text-align: right; + } +} + +:root { + text-align: right; +} + +html .test50 { + left: auto; + right: 10px; +} + +.test51 { + border-left: none; + border-right: 1px solid #FFF; + border: none; +}" +`; + exports[`[[Mode: override]] safeBothPrefix Option Tests: {safeBothPrefix: true} 1`] = ` ".test1, .test2 { color: #666; diff --git a/tests/__snapshots__/string-map.test.ts.snap b/tests/__snapshots__/string-map.test.ts.snap index a76f0211..e71ce2c0 100644 --- a/tests/__snapshots__/string-map.test.ts.snap +++ b/tests/__snapshots__/string-map.test.ts.snap @@ -2460,6 +2460,814 @@ html[dir=\\"rtl\\"] .test50 { }" `; +exports[`[[Mode: diff]] String Map Tests: custom no-valid string map and processUrls: true (different lenghts) 1`] = ` +" + +.test1, .test2 { + background: url(\\"/folder/subfolder/icons/rtl/chevron-right.png\\"); + background-color: #FFF; + background-position: 10px 20px; + border-radius: 2px 0 8px 0; + padding-right: 0; + padding-left: 20px; + text-align: right; + transform: translate(50%, 50%); +} + +.test2 { + text-align: right; + text-align: center; +} + +.test3 { + direction: rtl; +} + +.test4 { + border-radius: 4px 2px 16px 8px; + text-shadow: red -99px -1px 1px, blue -99px 2px 1px; +} + +.test5, +.test6, +.test7 { + background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C); + border-color: #666 #999 #888 #777; + border-width: 1px 4px 3px 2px; + left: auto; + right: 100px; + transform: translateX(-5px); +} + +.test8 { + background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%); +} + +.test9, .test10 { + background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), + linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), + linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); + left: auto; + right: 5px; +} + +.test11:hover, +.test11:active { + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; + font-size: 30px; + color: #000; + transform: translateY(10px) scaleX(-1); + padding: 10px 20px; +} + +.test16:hover { + padding-right: 0; + padding-left: 20px; +} + +.test18 { + padding: 10px 10px 40px 20px; +} + +.test18::after { + left: auto; + right: 10px; +} + +@media only screen and (min-device-width: 320px) { + + .test18 { + padding: 1px 4px 3px 2px; + } +} + +.test22 { + right: 5px; + left: 10px; +} + +.test24 { + border: 1px solid #000; + border-bottom-color: #666; +} + +.test26-ltr { + background-image: url(\\"/icons/icon-r.png\\") +} + +.test28-left::before { + content: \\"keyboard_arrow_right\\"; +} + +.test31 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test32 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test33 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.example34 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.example35 { + transform: translate(10px, 20px); +} + +.test36 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test37 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test38 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test39 { + margin-left: 0; + margin-right: 10px; +} + +.test40 { + left: auto; + right: 5px; +} + +.test41 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.test42 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.test43 { + transform: translate(10px, 20px); +} +@media only screen and (min-device-width: 320px) { + + .test46 { + text-align: right; + } +} +@media only screen and (min-device-width: 320px) { + + .test48 { + text-align: right; + } +} + +:root { + text-align: right; +} + +html .test50 { + left: auto; + right: 10px; +} + +.test51 { + border-left: none; + border-right: 1px solid #FFF; + border: none; +}" +`; + +exports[`[[Mode: diff]] String Map Tests: custom no-valid string map and processUrls: true (different types) 1`] = ` +" + +.test1, .test2 { + background: url(\\"/folder/subfolder/icons/rtl/chevron-right.png\\"); + background-color: #FFF; + background-position: 10px 20px; + border-radius: 2px 0 8px 0; + padding-right: 0; + padding-left: 20px; + text-align: right; + transform: translate(50%, 50%); +} + +.test2 { + text-align: right; + text-align: center; +} + +.test3 { + direction: rtl; +} + +.test4 { + border-radius: 4px 2px 16px 8px; + text-shadow: red -99px -1px 1px, blue -99px 2px 1px; +} + +.test5, +.test6, +.test7 { + background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C); + border-color: #666 #999 #888 #777; + border-width: 1px 4px 3px 2px; + left: auto; + right: 100px; + transform: translateX(-5px); +} + +.test8 { + background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%); +} + +.test9, .test10 { + background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), + linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), + linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); + left: auto; + right: 5px; +} + +.test11:hover, +.test11:active { + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; + font-size: 30px; + color: #000; + transform: translateY(10px) scaleX(-1); + padding: 10px 20px; +} + +.test16:hover { + padding-right: 0; + padding-left: 20px; +} + +.test18 { + padding: 10px 10px 40px 20px; +} + +.test18::after { + left: auto; + right: 10px; +} + +@media only screen and (min-device-width: 320px) { + + .test18 { + padding: 1px 4px 3px 2px; + } +} + +.test22 { + right: 5px; + left: 10px; +} + +.test24 { + border: 1px solid #000; + border-bottom-color: #666; +} + +.test26-ltr { + background-image: url(\\"/icons/icon-r.png\\") +} + +.test28-left::before { + content: \\"keyboard_arrow_right\\"; +} + +.test31 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test32 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test33 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.example34 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.example35 { + transform: translate(10px, 20px); +} + +.test36 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test37 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test38 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test39 { + margin-left: 0; + margin-right: 10px; +} + +.test40 { + left: auto; + right: 5px; +} + +.test41 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.test42 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.test43 { + transform: translate(10px, 20px); +} +@media only screen and (min-device-width: 320px) { + + .test46 { + text-align: right; + } +} +@media only screen and (min-device-width: 320px) { + + .test48 { + text-align: right; + } +} + +:root { + text-align: right; +} + +html .test50 { + left: auto; + right: 10px; +} + +.test51 { + border-left: none; + border-right: 1px solid #FFF; + border: none; +}" +`; + +exports[`[[Mode: diff]] String Map Tests: custom string map and processUrls: true 1`] = ` +" + +.test1, .test2 { + background: url(\\"/folder/subfolder/icons/rtl/chevron-right.png\\"); + background-color: #FFF; + background-position: 10px 20px; + border-radius: 2px 0 8px 0; + padding-right: 0; + padding-left: 20px; + text-align: right; + transform: translate(50%, 50%); +} + +.test2 { + text-align: right; + text-align: center; +} + +.test3 { + direction: rtl; +} + +.test4 { + border-radius: 4px 2px 16px 8px; + text-shadow: red -99px -1px 1px, blue -99px 2px 1px; +} + +.test5, +.test6, +.test7 { + background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C); + border-color: #666 #999 #888 #777; + border-width: 1px 4px 3px 2px; + left: auto; + right: 100px; + transform: translateX(-5px); +} + +.test8 { + background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%); +} + +.test9, .test10 { + background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), + linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), + linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); + left: auto; + right: 5px; +} + +.test11:hover, +.test11:active { + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; + font-size: 30px; + color: #000; + transform: translateY(10px) scaleX(-1); + padding: 10px 20px; +} + +.test16:hover { + padding-right: 0; + padding-left: 20px; +} + +.test18 { + padding: 10px 10px 40px 20px; +} + +.test18::after { + left: auto; + right: 10px; +} + +@media only screen and (min-device-width: 320px) { + + .test18 { + padding: 1px 4px 3px 2px; + } +} + +.test22 { + right: 5px; + left: 10px; +} + +.test24 { + border: 1px solid #000; + border-bottom-color: #666; +} + +.test26-ltr { + background-image: url(\\"/icons/icon-r.png\\") +} + +.test27-prev { + background-image: url(\\"/icons/icon-n.png\\") +} + +.test28-left::before { + content: \\"keyboard_arrow_right\\"; +} + +.test31 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test32 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test33 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.example34 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.example35 { + transform: translate(10px, 20px); +} + +.test36 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test37 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test38 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test39 { + margin-left: 0; + margin-right: 10px; +} + +.test40 { + left: auto; + right: 5px; +} + +.test41 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.test42 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.test43 { + transform: translate(10px, 20px); +} +@media only screen and (min-device-width: 320px) { + + .test46 { + text-align: right; + } +} +@media only screen and (min-device-width: 320px) { + + .test48 { + text-align: right; + } +} + +:root { + text-align: right; +} + +html .test50 { + left: auto; + right: 10px; +} + +.test51 { + border-left: none; + border-right: 1px solid #FFF; + border: none; +}" +`; + +exports[`[[Mode: diff]] String Map Tests: custom string map without names and processUrls: true 1`] = ` +" + +.test1, .test2 { + background: url(\\"/folder/subfolder/icons/rtl/chevron-right.png\\"); + background-color: #FFF; + background-position: 10px 20px; + border-radius: 2px 0 8px 0; + padding-right: 0; + padding-left: 20px; + text-align: right; + transform: translate(50%, 50%); +} + +.test2 { + text-align: right; + text-align: center; +} + +.test3 { + direction: rtl; +} + +.test4 { + border-radius: 4px 2px 16px 8px; + text-shadow: red -99px -1px 1px, blue -99px 2px 1px; +} + +.test5, +.test6, +.test7 { + background: linear-gradient(-0.25turn, #3F87A6, #EBF8E1, #F69D3C); + border-color: #666 #999 #888 #777; + border-width: 1px 4px 3px 2px; + left: auto; + right: 100px; + transform: translateX(-5px); +} + +.test8 { + background: linear-gradient(to right, #333, #333 50%, #EEE 75%, #333 75%); +} + +.test9, .test10 { + background: linear-gradient(-217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), + linear-gradient(-127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), + linear-gradient(-336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); + left: auto; + right: 5px; +} + +.test11:hover, +.test11:active { + font-family: \\"Droid Arabic Kufi\\", Arial, Helvetica; + font-size: 30px; + color: #000; + transform: translateY(10px) scaleX(-1); + padding: 10px 20px; +} + +.test16:hover { + padding-right: 0; + padding-left: 20px; +} + +.test18 { + padding: 10px 10px 40px 20px; +} + +.test18::after { + left: auto; + right: 10px; +} + +@media only screen and (min-device-width: 320px) { + + .test18 { + padding: 1px 4px 3px 2px; + } +} + +.test22 { + right: 5px; + left: 10px; +} + +.test24 { + border: 1px solid #000; + border-bottom-color: #666; +} + +.test26-ltr { + background-image: url(\\"/icons/icon-r.png\\") +} + +.test27-prev { + background-image: url(\\"/icons/icon-n.png\\") +} + +.test28-left::before { + content: \\"keyboard_arrow_right\\"; +} + +.test31 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test32 { + background-image: url(\\"/icons/icon-right.png\\"); +} + +.test33 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.example34 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.example35 { + transform: translate(10px, 20px); +} + +.test36 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test37 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test38 { + border-left: none; + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +.test39 { + margin-left: 0; + margin-right: 10px; +} + +.test40 { + left: auto; + right: 5px; +} + +.test41 { + left: auto; + right: 10px; + height: 50px; + width: 100px; +} + +.test42 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +.test43 { + transform: translate(10px, 20px); +} +@media only screen and (min-device-width: 320px) { + + .test46 { + text-align: right; + } +} +@media only screen and (min-device-width: 320px) { + + .test48 { + text-align: right; + } +} + +:root { + text-align: right; +} + +html .test50 { + left: auto; + right: 10px; +} + +.test51 { + border-left: none; + border-right: 1px solid #FFF; + border: none; +}" +`; + exports[`[[Mode: override]] String Map Tests: custom no-valid string map and processUrls: true (different lenghts) 1`] = ` ".test1, .test2 { background: url(\\"/folder/subfolder/icons/ltr/chevron-left.png\\"); diff --git a/tests/__snapshots__/variables.test.ts.snap b/tests/__snapshots__/variables.test.ts.snap index 5f3c1df5..fc1b43bb 100644 --- a/tests/__snapshots__/variables.test.ts.snap +++ b/tests/__snapshots__/variables.test.ts.snap @@ -325,6 +325,137 @@ exports[`[[Mode: combined]] Variables Tests: wrong aliases 1`] = ` }" `; +exports[`[[Mode: diff]] Variables Tests: aliases default 1`] = ` +" + +.test1.large { + left: auto; + right: 10px; +} + +.test3 { + padding: + env(safe-area-inset-top, 10px) + env(safe-area-inset-right, 40px) + env(safe-area-inset-bottom, 30px) + env(safe-area-inset-left, 20px); +} + +.test4 { + margin-left: env(safe-area-inset-left, 10px); + margin-right: env(safe-area-inset-right, 20px); +}" +`; + +exports[`[[Mode: diff]] Variables Tests: aliases map 1`] = ` +" + +:root { + --small-padding: 2px 16px 8px 4px; + --large-padding: 4px 32px 16px 8px; + --small-margin: 2px 16px 8px 4px; + --large-margin: 4px 32px 16px 8px; +} + +.test1.large { + left: auto; + right: 10px; +} + +.test3 { + padding: + env(safe-area-inset-top, 10px) + env(safe-area-inset-right, 40px) + env(safe-area-inset-bottom, 30px) + env(safe-area-inset-left, 20px); +} + +.test4 { + margin-left: env(safe-area-inset-left, 10px); + margin-right: env(safe-area-inset-right, 20px); +}" +`; + +exports[`[[Mode: diff]] Variables Tests: processEnv = false 1`] = ` +" + +:root { + --small-padding: 2px 16px 8px 4px; + --large-padding: 4px 32px 16px 8px; + --small-margin: 2px 16px 8px 4px; + --large-margin: 4px 32px 16px 8px; +} + +.test1.large { + left: auto; + right: 10px; +} + +.test3 { + padding: + env(safe-area-inset-top, 10px) + env(safe-area-inset-left, 40px) + env(safe-area-inset-bottom, 30px) + env(safe-area-inset-right, 20px); +} + +.test4 { + margin-left: env(safe-area-inset-right, 10px); + margin-right: env(safe-area-inset-left, 20px); +}" +`; + +exports[`[[Mode: diff]] Variables Tests: processEnv = true 1`] = ` +" + +:root { + --small-padding: 2px 16px 8px 4px; + --large-padding: 4px 32px 16px 8px; + --small-margin: 2px 16px 8px 4px; + --large-margin: 4px 32px 16px 8px; +} + +.test1.large { + left: auto; + right: 10px; +} + +.test3 { + padding: + env(safe-area-inset-top, 10px) + env(safe-area-inset-right, 40px) + env(safe-area-inset-bottom, 30px) + env(safe-area-inset-left, 20px); +} + +.test4 { + margin-left: env(safe-area-inset-left, 10px); + margin-right: env(safe-area-inset-right, 20px); +}" +`; + +exports[`[[Mode: diff]] Variables Tests: wrong aliases 1`] = ` +" + +.test1.large { + left: auto; + right: 10px; +} + +.test3 { + padding: + env(safe-area-inset-top, 10px) + env(safe-area-inset-right, 40px) + env(safe-area-inset-bottom, 30px) + env(safe-area-inset-left, 20px); +} + +.test4 { + margin-left: env(safe-area-inset-left, 10px); + margin-right: env(safe-area-inset-right, 20px); +}" +`; + exports[`[[Mode: override]] Variables Tests: aliases default 1`] = ` ":root { --small-padding: 2px 4px 8px 16px; diff --git a/tests/utils/index.ts b/tests/utils/index.ts index 1e82f004..c865deb7 100644 --- a/tests/utils/index.ts +++ b/tests/utils/index.ts @@ -14,4 +14,5 @@ export const readCSSFile = (name: string): Promise => new Promise((resol export const runTests = (options: PluginOptions, callback: (options: PluginOptions) => void): void => { callback({...options, mode: Mode.combined}); callback({...options, mode: Mode.override}); + callback({...options, mode: Mode.diff}); }; \ No newline at end of file