rtlcss - npm Package Compare versions

Comparing version 1.6.3 to 1.7.0

lib/prop.js

@@ -31,20 +31,10 @@ function main(configuration) {
       "match": /[^\s]+/g,
-      "other": /hsl(a?)\(.*?\)|rgb(a?)\(.*?\)/ig,
-      "others": [],
-      "saveOthers": function (value) {
-        var self = this;
-        return value.replace(this.other, function (m) { self.others.push(m); return "temp" + self.others.length });
-      },
-      "restoreOthers": function (value) {
-        var self = this;
-        return value.replace(/temp(\d+)/ig, function (m, i) { return self.others[i - 1]; });
-      },
       "action": function (prop, value) {
-        var newValue = this.saveOthers(value);
-        var result = newValue.split(' ');
-        if (result && result.length == 4 && (this.others.length > 0 || result[1] != result[3])) {
+        var tokens = util.saveFunctions(value);
+        var result = tokens.value.match(this.match);
+        if (result && result.length == 4 && (tokens.store.length > 0 || result[1] != result[3])) {
           var i = 0;
-          newValue = newValue.replace(this.match, function () { return result[(4 - i++) % 4]; });
+          tokens.value = tokens.value.replace(this.match, function () { return result[(4 - i++) % 4]; });
         }
-        return { 'prop': prop, 'value': this.restoreOthers(newValue) };
+        return { 'prop': prop, 'value': util.restoreFunctions(tokens) };
       }
@@ -55,3 +45,4 @@ },
       "expr": /border-radius/ig,
-      "match": /(\-?(\d*?\.\d+|\d+))(:?ex|ch|r?em|vh|vw|vmin|vmax|px|mm|cm|in|pt|pc|%)?/ig,
+      "match": /[^\s]+/g,
+      "slash": /[^\/]+/g,
       "flip": function (value) {
@@ -68,3 +59,4 @@ var parts = value.match(this.match);
             case 3:
-              return parts[1] + ' ' + value;
+              //preserve leading whitespace.
+              return value.replace(/(^\s*)/, function(m){ return m + parts[1] + ' ';});
             case 4:
@@ -78,6 +70,8 @@ i = 0;
       "action": function (prop, value) {
-        var parts = value.split("/");
-        for (var x = 0; x < parts.length; x++)
-          parts[x] = this.flip(parts[x]);
-        return { 'prop': prop, 'value': parts.join("/") };
+        var self = this;
+        var tokens = util.saveFunctions(value);
+        tokens.value = tokens.value.replace(this.slash, function(m){
+          return self.flip(m);
+        });
+        return { 'prop': prop, 'value': util.restoreFunctions(tokens)};
       }
@@ -89,3 +83,3 @@ },
       "replace": /(\-?(\d*?\.\d+|\d+))/i,
-      "other": /hsl(a?)\(.*?\)|rgb(a?)\(.*?\)/ig,
+      "other": /#[a-f0-9]{3,6}/ig,
       "others": [],
@@ -101,6 +95,7 @@ "saveOthers": function (value) {
       "action": function (prop, value) {
-        var parts = this.saveOthers(value).split(",");
-        for (var x = 0; x < parts.length; x++)
-          parts[x] = util.negate(parts[x]);
-        return { 'prop': prop, 'value': this.restoreOthers(parts.join(",")) };
+        var tokens = util.saveFunctions(this.saveOthers(value));
+        tokens.value = tokens.value.replace(/[^,]+/g, function(m){
+          return util.negate(m);
+        });
+        return { 'prop': prop, 'value': this.restoreOthers(util.restoreFunctions(tokens)) };
       }
@@ -111,6 +106,6 @@ },
       "expr": /transform-origin/ig,
-      "percent": /%/,
+      "percent": /calc|%/,
       "xKeyword": /(left|right)/i,
       "yKeyword": /(center|top|bottom)/i,
-      "match": /(\-?(\d*?\.\d+|\d+)%)|(\-?(\d*?\.\d+|\d+))(?:ex|ch|r?em|vh|vw|vmin|vmax|px|mm|cm|in|pt|pc)?/g,
+      "match": util.regex(['calc','percent','length'],'g'),
       "flip": function (value) {
@@ -128,6 +123,8 @@ if (value == "0")
         else {
-          var parts = value.match(this.match);
+          var tokens = util.saveFunctions(value);
+          var parts = tokens.value.match(this.match);
           if (parts && parts.length > 0) {
             parts[0] = this.flip(parts[0]);
-            newValue = value.replace(this.match, function () { return parts.shift(); })
+            tokens.value = tokens.value.replace(this.match, function () { return parts.shift(); })
+            newValue = util.restoreFunctions(tokens);
           }
@@ -141,27 +138,31 @@ }
       "expr": /^(?!text\-).*?transform$/ig,
-      "match": /((translate)(x|3d)?|skew(x|y)?|rotate(z|3d)?|matrix(3d)?)\((.|\s)*?\)/ig,
-      "matrix": /matrix\(/i,
+      "match": /((translate)(x|3d)?|skew(x|y)?|rotate(z|3d)?|matrix(3d)?)\((.|\s)*\)/ig,
+      "matrix": /matrix/i,
+      "flip": function(value, process){
+        var replace = util.regex(['calc', 'number'], 'ig');
+        var i = 0;
+        return value.replace(replace, function (num) {
+            return process(++i, num);
+        });
+      },
       "flipMatrix": function (value) {
-        var i = 0;
-        return value.replace(/(\-?(\d*?\.\d+|\d+))/ig, function (num) {
-          if (++i == 2 || i == 3 || i == 5)
-            return parseFloat(num, 10) * -1;
+        return this.flip(value, function(i, num){
+          if (i == 2 || i == 3 || i == 5)
+            return util.negate(num);
           return num
         });
       },
-      "matrix3D": /matrix3d\(/i,
+      "matrix3D": /matrix3d/i,
       "flipMatrix3D": function(value){
-        var i = 0;
-        return value.replace(/(\-?(\d*?\.\d+|\d+))(?!d\()/ig, function (num) {
-          if (++i == 2 || i == 4 || i == 5 || i == 13)
-            return parseFloat(num, 10) * -1;
+        return this.flip(value, function(i, num){
+          if (i == 2 || i == 4 || i == 5 || i == 13)
+            return util.negate(num);
           return num
         });
       },
-      "rotate3D": /rotate3d\(/i,
+      "rotate3D": /rotate3d/i,
       "flipRotate3D": function (value) {
-        var i = 0;
-        return value.replace(/(\-?(\d*?\.\d+|\d+))(?!d\()/ig, function (num) {
-          if (++i == 2 || i == 4)
-            return parseFloat(num, 10) * -1;
+        return this.flip(value, function(i, num){
+          if (i == 2 || i == 4)
+            return util.negate(num);
           return num
@@ -172,14 +173,20 @@ });
       "action": function (prop, value) {
+        var self = this;
         var parts = value.match(this.match);
         for (var x = 0; parts && x < parts.length; x++) {
-          if (parts[x].match(this.matrix3D))
-            parts[x] = this.flipMatrix3D(parts[x]);
-          else if (parts[x].match(this.matrix))
-            parts[x] = this.flipMatrix(parts[x]);
-          else if (parts[x].match(this.rotate3D))
-            parts[x] = this.flipRotate3D(parts[x]);
-          else if (parts[x].match(this.skewXY))
-            parts[x] = util.negateAll(parts[x]);
-          else
-            parts[x] = util.negate(parts[x]);
+          parts[x] = parts[x].replace(/([^\(]*)(?:\()(.*)(?:\))/i, function(m, $1, $2){
+            var tokens = util.saveFunctions($2);
+            
+            if ($1.match(self.matrix3D))
+              tokens.value = self.flipMatrix3D(tokens.value);
+            else if ($1.match(self.matrix))
+              tokens.value = self.flipMatrix(tokens.value);
+            else if ($1.match(self.rotate3D))
+              tokens.value = self.flipRotate3D(tokens.value);
+            else if ($1.match(self.skewXY))
+              tokens.value = util.negateAll(tokens.value);
+            else
+              tokens.value = util.negate(tokens.value);            
+            return $1 + "(" + util.restoreFunctions(tokens) + ")";
+          });
         }
@@ -193,6 +200,3 @@ return { 'prop': prop, 'value': value.replace(this.match, function () { return parts.shift(); }) };
       "action": function (prop, value) {
-        var parts = value.split(/,(?![^\)]*?\))/ig);
-        for (var x = 0; x < parts.length; x++)
-          parts[x] = util.swapLeftRight(parts[x]);
-        return { 'prop': prop, 'value': parts.join(',') };
+        return { 'prop': prop, 'value':  util.swapLeftRight(value)};
       }
@@ -203,4 +207,4 @@ },
       "expr": /background(-position(-x)?|-image)?$/i,
-      "match": /left|center|right|top|bottom|(?:\-?(?:\d*?\.\d+|\d+)%)|(?:\-?(?:\d*?\.\d+|\d+))(?:ex|ch|r?em|vh|vw|vmin|vmax|px|mm|cm|in|pt|pc)?/i,
-      "percent": /%/,
+      "match": util.regex(['position','percent','length', 'calc'],'i'),
+      "percent": /calc|%/,
       "other": /url\([^]*?\)|#[0-9a-f]{3,6}|hsl(a?)\([^]*?\)|rgb(a?)\([^]*?\)|color-stop\([^]*?\)|\b.*?gradient\([^]*\)/ig,
@@ -238,8 +242,9 @@ "others": [],
         var newValue = this.saveOthers(value);
-        var parts = newValue.split(",");
+        var tokens = util.saveFunctions(newValue);
+        var parts = tokens.value.split(",");
         if (prop.toLowerCase() != "background-image")
           for (var x = 0; x < parts.length; x++)
             parts[x] = this.flip(parts[x]);
-        newValue = this.restoreOthers(parts.join(","));
-        return { 'prop': prop, 'value': newValue };
+        tokens.value = this.restoreOthers(parts.join(","));
+        return { 'prop': prop, 'value': util.restoreFunctions(tokens) };
       }
@@ -257,3 +262,2 @@ },
       "expr": /cursor/i,
-      "match": /(?:\-?(?:\d*?\.\d+|\d+))|(?:\-?(?:\d*?\.\d+|\d+))(?:ex|ch|r?em|vh|vw|vmin|vmax|px|mm|cm|in|pt|pc)?/i,
       "replace": /\b([news]{1,4})-resize/ig,
@@ -260,0 +264,0 @@ "other": /url\(.*?\)/ig,

lib/rtlcss.js

@@ -16,6 +16,9 @@ (function () {
       css.walkRules(function (rule, idx) {
-        var previousComment = { 'text': '', removeSelf: function () { } };
+        //read previous comment
+        var previousComment = { 'text': '', remove: function () { } };
         if (idx > 0 && rule.parent.nodes[idx - 1].type == 'comment')
           previousComment = rule.parent.nodes[idx - 1];
-
+        if (!config.preserveDirectives)
+              previousComment.remove();
+        
         //processing instruction at rule level
@@ -26,4 +29,2 @@ for (var x = 0; x < config.instructions.rules.length; x++) {
             util.logRuleAction(rule, pi);
-            if (!config.preserveDirectives)
-              previousComment.remove();
             return;
@@ -41,4 +42,4 @@ }
             var pi = config.instructions.declarations[x];
-            //console.log('raws', decl.raws, '_value', decl._value);
             if (decl.raws.value && decl.raws.value.raw && decl.raws.value.raw.match(pi.expr) && pi.action(decl)) {
+              flipped++;
               util.logDeclAction(decl, pi);
@@ -45,0 +46,0 @@ return;

lib/rules.js

@@ -18,6 +18,4 @@ function main(configuration) {
         var renamed = util.applyStringMap(rule.selector, true, false);
-        if (renamed != rule.selector) {
+        if (renamed != rule.selector)
           rule.selector = renamed;
-          return true;
-        }
         return false;
@@ -24,0 +22,0 @@ }

lib/util.js

@@ -7,3 +7,9 @@ function main(configuration) {
       REPLACEMENT_CHARACTER = '\uFFFD',
+      TOKEN_CHARACTER = '\u00A7',
       REGEX_COMMENT = /\/\*(.|\s)*?\*\//gm,
+      REGEX_FUNCTION = /\([^\(\)]+\)/i,
+      REGEX_TOKEN = new RegExp(TOKEN_CHARACTER + '(\\d+)', 'i'),
+      REGEX_COMPLEMENT = new RegExp('(calc' + TOKEN_CHARACTER + '\\d+)|(\\-?(\\d*?\\.\\d+|\\d+))(?!d\\()' ,'i'),
+      REGEX_NEGATE_ONE = new RegExp('(calc' + TOKEN_CHARACTER + '\\d+)|(\\-?(\\d*?\\.\\d+|\\d+))(?!d\\()' ,'i'),
+      REGEX_NEGATE_ALL = new RegExp('(calc' + TOKEN_CHARACTER + '\\d+)|(\\-?(\\d*?\\.\\d+|\\d+))(?!d\\()' ,'ig'),
       DEFAULT_STRING_MAP_OPTIONS = { scope: '*', ignoreCase: true },
@@ -108,16 +114,52 @@ compare = function (what, to, ignoreCase) {
     negate: function (value) {
-      return value.replace(/(\-?(\d*?\.\d+|\d+))(?!d\()/i, function (num) {
-        return parseFloat(num, 10) * -1;
+      return value.replace(REGEX_NEGATE_ONE, function (num) {
+        return REGEX_TOKEN.test(num) ? num.replace(REGEX_TOKEN, function(m){ return '(-1*'+ m + ')';}) : parseFloat(num, 10) * -1;
       });
     },
     negateAll: function (value) {
-      return value.replace(/(\-?(\d*?\.\d+|\d+))(?!d\()/ig, function (num) {
-        return parseFloat(num, 10) * -1;
+      return value.replace(REGEX_NEGATE_ALL, function (num) {
+        return REGEX_TOKEN.test(num) ? num.replace(REGEX_TOKEN, function(m){ return '(-1*'+ m + ')';}) : parseFloat(num, 10) * -1;
       });
     },
     complement: function (value) {
-      return value.replace(/(\-?(\d*?\.\d+|\d+))(?!d\()/i, function (num) {
-        return 100 - parseFloat(num, 10);
+      return value.replace(REGEX_COMPLEMENT, function (num) {
+        return REGEX_TOKEN.test(num) ? num.replace(REGEX_TOKEN, function(m){ return '(100%-'+ m + ')';}) : 100 - parseFloat(num, 10);
       });
-    }
+    },
+    saveFunctions: function (value) {
+      var store = [];
+      while(REGEX_FUNCTION.test(value))
+        value = value.replace(REGEX_FUNCTION, function (m) { store.push(m); return TOKEN_CHARACTER + store.length; });
+      return { store: store, value: value };
+    },
+    restoreFunctions:function (result) {
+      while (REGEX_TOKEN.test(result.value))
+        result.value = result.value.replace(REGEX_TOKEN, function (m, i) { return result.store[i - 1]; });
+      return result.value
+    },
+    regex:function(what, options){
+      what = what || [];
+      var expressions = [];
+      for(var x=0;x<what.length;x++){
+        var match = '';
+        switch(what[x]){
+          case 'percent':
+            expressions.push('(\\-?(\\d*?\\.\\d+|\\d+)%)');
+            break;
+          case 'length':
+            expressions.push('(\\-?(\\d*?\\.\\d+|\\d+))(?:ex|ch|r?em|vh|vw|vmin|vmax|px|mm|cm|in|pt|pc)?');
+            break;
+          case 'number':
+            expressions.push('(\\-?(\\d*?\\.\\d+|\\d+))');
+            break;
+          case 'position':
+            expressions.push('(left|center|right|top|bottom)');
+            break;
+          case 'calc':
+            expressions.push('(calc' + TOKEN_CHARACTER + '\\d+)');
+            break;
+        }
+      }
+      return new RegExp(expressions.join('|'), options);
+    },
   };
@@ -124,0 +166,0 @@ return util;

package.json

 {
   "author": "Mohammad Younes",
   "name": "rtlcss",
-  "version": "1.6.3",
+  "version": "1.7.0",
   "description": "Framework for transforming cascading style sheets (CSS) from left-to-right (LTR) to right-to-left (RTL)",
@@ -6,0 +6,0 @@ "bugs": "https://github.com/MohammadYounes/rtlcss/issues?state=open",

README.md

@@ -412,2 +412,7 @@ # RTLCSS [![GitHub version](https://badge.fury.io/gh/MohammadYounes%2Frtlcss.svg)](http://badge.fury.io/gh/MohammadYounes%2Frtlcss) [![NPM version](https://badge.fury.io/js/rtlcss.svg)](http://badge.fury.io/js/rtlcss) [![Build Status](https://travis-ci.org/MohammadYounes/rtlcss.svg?branch=master)](https://travis-ci.org/MohammadYounes/rtlcss) [![DEPENDENCIES](https://david-dm.org/MohammadYounes/rtlcss.svg)](https://david-dm.org/MohammadYounes/rtlcss) [![Twitter](https://img.shields.io/badge/follow-%40rtlcss-blue.svg)](https://twitter.com/rtlcss)
 ## Release Notes
+* **v1.7.0** [19 Sep. 2015]
+  * Add `calc` support.
+  * Mark rule as flipped when values are updated by decl. directives.
+  * Allow further processing for rules that uses `rename` directive.
+  
 * **v1.6.3** [28 Aug. 2015]
@@ -414,0 +419,0 @@ * CLI: fix source map option (issue #40).

test/test.js

@@ -18,2 +18,8 @@ var assert = require("assert");
       {
+        'should': 'Should complement calc horizontal position',
+        'expected': '.banner { background: calc(100%-(19% + 2px)) top url(topbanner.png) #00D repeat-y fixed; }',
+        'input': '.banner { background: calc(19% + 2px) top url(topbanner.png) #00D repeat-y fixed; }',
+        'reversable': false
+      },
+      {
         'should': 'Should mirror keyword horizontal position',
@@ -77,7 +83,13 @@ 'expected': '.banner { background: right top url(topbanner.png) #00D repeat-y fixed; }',
         'should': 'Should not negate color value for linear gradient',
-        'expected': 'div { background-image: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);}',
-        'input': 'div { background-image: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);}',
+        'expected': 'div { background-image: linear-gradient(rgba(255, 255, 255, 0.3) 0%, #ff8 100%);}',
+        'input': 'div { background-image: linear-gradient(rgba(255, 255, 255, 0.3) 0%, #ff8 100%);}',
         'reversable': true
       },
       {
+        'should': 'Should not negate color value for linear gradient with calc',
+        'expected': 'div { background-image: linear-gradient(rgba(255, 255, calc((125 * 2) + 5), 0.3) 0%, #ff8 100%);}',
+        'input': 'div { background-image: linear-gradient(rgba(255, 255, calc((125 * 2) + 5), 0.3) 0%, #ff8 100%);}',
+        'reversable': true
+      },
+      {
         'should': 'Should negate angle value for linear gradient',
@@ -97,2 +109,8 @@ 'expected': 'div { background-image: linear-gradient(13.25deg, rgba(255, 255, 255, .15) 25%, transparent 25%);}',
       {
+        'should': 'Should complement percentage horizontal position with calc',
+        'expected': 'div {background-position:calc(100%-(30% + 50px)) 75%;}',
+        'input': 'div {background-position:calc(30% + 50px) 75%;}',
+        'reversable': false
+      },
+      {
         'should': 'Should complement percentage horizontal position ',
@@ -104,2 +122,8 @@ 'expected': 'div {background-position:81.25% 75%, 10.75% top;}',
       {
+        'should': 'Should complement percentage horizontal position with calc',
+        'expected': 'div {background-position:calc(100%-(30% + 50px)) calc(30% + 50px), 10.75% top;}',
+        'input': 'div {background-position:calc(30% + 50px) calc(30% + 50px), 89.25% top;}',
+        'reversable': false
+      },
+      {
         'should': 'Should swap left with right',
@@ -111,2 +135,8 @@ 'expected': 'div {background-position:right 75%, left top;}',
       {
+        'should': 'Should swap left with right wit calc',
+        'expected': 'div {background-position:right -ms-calc(30% + 50px), left top;}',
+        'input': 'div {background-position:left -ms-calc(30% + 50px), right top;}',
+        'reversable': true
+      },
+      {
         'should': 'Should complement percentage: position-x (treat 0 as 0%)',
@@ -124,2 +154,8 @@ 'expected': 'div {background-position-x:100%, 0%;}',
       {
+        'should': 'Should complement percentage with calc: position-x',
+        'expected': 'div {background-position-x:calc(100%-(30% + 50px)), -webkit-calc(100%-(30% + 50px));}',
+        'input': 'div {background-position-x:calc(30% + 50px), -webkit-calc(30% + 50px);}',
+        'reversable': false
+      },
+      {
         'should': 'Should swap left with right: position-x',
@@ -294,3 +330,3 @@ 'expected': 'div {background-position-x:right, left;}',
          'should': 'Should mirror property value: border-radius (3 values - double)',
-         'expected': 'div { border-radius: .40px 10.5px .40px 40px /4em  1em 4em 3em; }',
+         'expected': 'div { border-radius: .40px 10.5px .40px 40px / 4em 1em 4em 3em; }',
          'input': 'div { border-radius: 10.5px .40px 40px / 1em 4em 3em; }',
@@ -386,3 +422,9 @@ 'reversable': false
        {
-         'should': 'Should not mirror (x-offset: not percent)',
+         'should': 'Should mirror calc (x-offset)',
+         'expected': 'div { transform-origin: -moz-calc(100%-(((25%/2) * 10px))) ; }',
+         'input': 'div { transform-origin: -moz-calc(((25%/2) * 10px)) ; }',
+         'reversable': false
+       },
+       {
+         'should': 'Should not mirror (x-offset: not percent, not calc)',
          'expected': 'div { transform-origin:10.75px; }',
@@ -405,3 +447,9 @@ 'input': 'div { transform-origin:10.75px; }',
        {
-         'should': 'Should mirror (x-offset y-offset)',
+         'should': 'Should mirror with y being calc (x-offset y-offset: 0 means 0%)',
+         'expected': 'div { transform-origin:100% -webkit-calc(15% * (3/2)); }',
+         'input': 'div { transform-origin:0 -webkit-calc(15% * (3/2)); }',
+         'reversable': false
+       },
+       {
+         'should': 'Should mirror percent (x-offset y-offset)',
          'expected': 'div { transform-origin:30.25% 10%; }',
@@ -412,2 +460,14 @@ 'input': 'div { transform-origin:69.75% 10%; }',
        {
+         'should': 'Should mirror with x being calc (x-offset y-offset)',
+         'expected': 'div { transform-origin: -webkit-calc(100%-(15% * (3/2))) 30.25% ; }',
+         'input': 'div { transform-origin: -webkit-calc(15% * (3/2)) 30.25% ; }',
+         'reversable': false
+       },
+       {
+         'should': 'Should mirror with y being calc (x-offset y-offset)',
+         'expected': 'div { transform-origin:30.25% calc(15% * (3/2)); }',
+         'input': 'div { transform-origin:69.75% calc(15% * (3/2)); }',
+         'reversable': true
+       },
+       {
          'should': 'Should mirror (y-offset x-offset-keyword)',
@@ -419,2 +479,8 @@ 'expected': 'div { transform-origin:70% right; }',
        {
+         'should': 'Should mirror with calc (y-offset x-offset-keyword)',
+         'expected': 'div { transform-origin:-ms-calc(140%/2) right; }',
+         'input': 'div { transform-origin:-ms-calc(140%/2) left; }',
+         'reversable': true
+       },
+       {
          'should': 'Should mirror (x-offset-keyword y-offset)',
@@ -426,2 +492,8 @@ 'expected': 'div { transform-origin:right 70%; }',
        {
+         'should': 'Should mirror with calc (x-offset-keyword y-offset)',
+         'expected': 'div { transform-origin:right -moz-calc(((140%/2))); }',
+         'input': 'div { transform-origin:left -moz-calc(((140%/2))); }',
+         'reversable': true
+       },
+       {
          'should': 'Should mirror (y-offset-keyword x-offset)',
@@ -433,2 +505,8 @@ 'expected': 'div { transform-origin:top 30.25%; }',
        {
+         'should': 'Should not mirror with x being calc (y-offset-keyword x-offset)',
+         'expected': 'div { transform-origin:top calc(100%-(((140%/2)))); }',
+         'input': 'div { transform-origin:top calc(((140%/2))); }',
+         'reversable': false
+       },
+       {
          'should': 'Should mirror (x-offset-keyword y-offset-keyword)',
@@ -452,2 +530,8 @@ 'expected': 'div { transform-origin:right top; }',
        {
+         'should': 'Should mirror with x being calc (x-offset y-offset z-offset)',
+         'expected': 'div { transform-origin: calc(100%-(25% * 3 + 20px)) 30% 10%; }',
+         'input': 'div { transform-origin: calc(25% * 3 + 20px) 30% 10%; }',
+         'reversable': false
+       },
+       {
          'should': 'Should mirror (y-offset x-offset-keyword z-offset)',
@@ -491,2 +575,8 @@ 'expected': 'div { transform-origin:20% right 10%; }',
        {
+         'should': 'Should mirror transform with calc: matrix',
+         'expected': 'div { transform: matrix( -moz-calc(((25%/2) * 10px)), calc(-1*(((25%/2) * 10px))), 20.75, 2, 2, 2 ); }',
+         'input': 'div { transform: matrix( -moz-calc(((25%/2) * 10px)), calc(((25%/2) * 10px)), -20.75, 2, -2, 2 ); }',
+         'reversable': false
+       },
+       {
          'should': 'Should mirror transform : matrix3d',
@@ -504,2 +594,8 @@ 'expected': 'div { transform:matrix3d(0.227114470162179, 0.127248412323519, 0, 0.000811630714323203, 0.113139853456515, 1.53997196559414, 0, 0.000596368270149729, 0, 0, 1, 0, -165, 67, 0, 1); }',
        {
+         'should': 'Should mirror transform with calc : matrix3d',
+         'expected': 'div { transform:matrix3d(0.227114470162179, 0.127248412323519, 0, 0.000811630714323203, 0.113139853456515, 1.53997196559414, 0, 0.000596368270149729, 0, 0, 1, 0, calc(-1*(((25%/2) * 10px))), 67, 0, 1); }',
+         'input': 'div { transform:matrix3d(0.227114470162179, -0.127248412323519, 0, -0.000811630714323203, -0.113139853456515, 1.53997196559414, 0, 0.000596368270149729, 0, 0, 1, 0, calc(((25%/2) * 10px)), 67, 0, 1); }',
+         'reversable': false
+       },
+       {
          'should': 'Should mirror transform : translate',
@@ -517,2 +613,8 @@ 'expected': 'div { transform: translate(-10.75px); }',
        {
+         'should': 'Should mirror transform with calc: translate',
+         'expected': 'div { transform: translate(-moz-calc(-1*(((25%/2) * 10px)))); }',
+         'input': 'div { transform: translate(-moz-calc(((25%/2) * 10px))); }',
+         'reversable': false
+       },
+       {
          'should': 'Should mirror transform : translateX',
@@ -530,2 +632,8 @@ 'expected': 'div { transform: translateX(-50.25px); }',
        {
+         'should': 'Should mirror transform with calc : translateX',
+         'expected': 'div { transform: translateX(-ms-calc(-1*(((25%/2) * 10px))))); }',
+         'input': 'div { transform: translateX(-ms-calc(((25%/2) * 10px)))); }',
+         'reversable': false
+       },
+       {
          'should': 'Should mirror transform : translate3d',
@@ -543,2 +651,8 @@ 'expected': 'div { transform: translate3d(-12.75px, 50%, 3em); }',
        {
+         'should': 'Should mirror transform with calc: translate3d',
+         'expected': 'div { transform: translate3d(-webkit-calc(-1*(((25%/2) * 10px))))), 50%, calc(((25%/2) * 10px))))); }',
+         'input': 'div { transform: translate3d(-webkit-calc(((25%/2) * 10px)))), 50%, calc(((25%/2) * 10px))))); }',
+         'reversable': false
+       },
+       {
          'should': 'Should mirror transform : rotate',
@@ -556,2 +670,8 @@ 'expected': 'div { transform: rotate(-20.75deg); }',
        {
+         'should': 'Should mirror transform with calc: rotate',
+         'expected': 'div { transform: rotate(calc(-1*(((25%/2) * 10deg)))); }',
+         'input': 'div { transform: rotate(calc(((25%/2) * 10deg))); }',
+         'reversable': false
+       },
+       {
          'should': 'Should mirror transform : rotate3d',
@@ -569,2 +689,8 @@ 'expected': 'div { transform: rotate3d(10, -20.15, 10, -45.14deg); }',
        {
+         'should': 'Should mirror transform with calc: rotate3d',
+         'expected': 'div { transform: rotate3d(10, -20.15, 10, calc(-1*(((25%/2) * 10deg)))); }',
+         'input': 'div { transform: rotate3d(10, 20.15, 10, calc(((25%/2) * 10deg))); }',
+         'reversable': false
+       },
+       {
          'should': 'Should not mirror transform : rotateX',
@@ -576,2 +702,8 @@ 'expected': 'div { transform: rotateX(45deg); }',
        {
+         'should': 'Should not mirror transform with calc: rotateX',
+         'expected': 'div { transform: rotateX(calc(((25%/2) * 10deg))); }',
+         'input': 'div { transform: rotateX(calc(((25%/2) * 10deg))); }',
+         'reversable': false
+       },
+       {
          'should': 'Should not mirror transform : rotateY',
@@ -583,2 +715,8 @@ 'expected': 'div { transform: rotateY(45deg); }',
        {
+         'should': 'Should not mirror transform with calc: rotateY',
+         'expected': 'div { transform: rotateY(calc(((25%/2) * 10deg))); }',
+         'input': 'div { transform: rotateY(calc(((25%/2) * 10deg))); }',
+         'reversable': false
+       },
+       {
          'should': 'Should mirror transform : rotateZ',
@@ -596,2 +734,8 @@ 'expected': 'div { transform: rotateZ(-45.75deg); }',
        {
+         'should': 'Should mirror transform with calc: rotateZ',
+         'expected': 'div { transform: rotateZ(-ms-calc(-1*(((25%/2) * 10deg)))); }',
+         'input': 'div { transform: rotateZ(-ms-calc(((25%/2) * 10deg))); }',
+         'reversable': false
+       },
+       {
          'should': 'Should mirror transform : skew',
@@ -609,2 +753,8 @@ 'expected': 'div { transform: skew(-20.25rad,-30deg); }',
        {
+         'should': 'Should mirror transform with calc: skew',
+         'expected': 'div { transform: skew(calc(-1*(((25%/2) * 10rad))),calc(-1*(((25%/2) * 10deg)))); }',
+         'input': 'div { transform: skew(calc(((25%/2) * 10rad)),calc(((25%/2) * 10deg))); }',
+         'reversable': false
+       },
+       {
          'should': 'Should mirror transform : skewX',
@@ -622,2 +772,8 @@ 'expected': 'div { transform: skewX(-20.75rad); }',
        {
+         'should': 'Should mirror transform with calc: skewX',
+         'expected': 'div { transform: skewX(-moz-calc(-1*(((25%/2) * 10rad)))); }',
+         'input': 'div { transform: skewX(-moz-calc(((25%/2) * 10rad))); }',
+         'reversable': false
+       },
+       {
          'should': 'Should mirror transform : skewY',
@@ -633,3 +789,9 @@ 'expected': 'div { transform: skewY(-10.75grad); }',
          'reversable': false
-       }
+       },
+       {
+         'should': 'Should mirror transform with calc: skewY',
+         'expected': 'div { transform: skewY(calc(-1*(((25%/2) * 10grad)))); }',
+         'input': 'div { transform: skewY(calc(((25%/2) * 10grad))); }',
+         'reversable': false
+       },
   ],
@@ -671,2 +833,9 @@ 'RTLCSS (Options):': [
       {
+        'should': 'Should not auto rename when rules are flipped via decl directives',
+        'expected': 'div.right { display:block; font-family: "Droid Sans", Tahoma, "Droid Arabic Kufi"; }',
+        'input': 'div.right { display:block; font-family: "Droid Sans", Tahoma/*!rtl:append:, "Droid Arabic Kufi"*/; }',
+        'reversable': false,
+        'options': { 'autoRename': true }
+      },
+      {
         'should': 'Should not preserve processing directive. (default)',
@@ -788,3 +957,3 @@ 'expected': 'div { left:0; }',
         'should': 'Should minify (minify:true)',
-        'expected': '\ndiv{font-family:"Droid Arabic Kufi";padding:10px 5px 5px 10px;color:red;}.div2{display:none;}',
+        'expected': 'div{font-family:"Droid Arabic Kufi";padding:10px 5px 5px 10px;color:red;}.div2{display:none;}',
         'input': '\n/*comment*/\ndiv\n/*comment*/\n {\n/*comment*/\n font-family:\n/*comment*/\n "Droid Arabic Kufi";\n/*comment*/\n padding:10px 10px 5px 5px;\n/*comment*/\n color:red; \n/*comment*/\n } \n/*comment*/\n .div2{ /*comment*/ \n display:none; /*comment*/ \n /*comment*/}',
@@ -791,0 +960,0 @@ 'reversable': false,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

123261

increased by9.71%

Lines of code

2378

increased by9.84%

Number of lines in readme file

521

increased by0.97%

No dependency changes