Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
rtlcss - npm Package Compare versions
Comparing version 0.3.0 to 0.4.0
@@ -95,11 +95,11 @@ function main(configuration) { | ||
| "expr": /transform-origin/ig, | ||
| "number": /(\-?(\d?\.\d+|\d+))/, | ||
| "percent": /%/, | ||
| "xKeyword": /(left|right)/i, | ||
| "match": /(center|top|bottom)|(\-?(\d?\.\d+|\d+)%)|(\-?(\d?\.\d+|\d+))(?:ex|ch|r?em|vh|vw|vmin|vmax|px|mm|cm|in|pt|pc)?/g, | ||
| "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, | ||
| "flip": function (value) { | ||
| if (value.match(this.percent)) | ||
| if(value == "0") | ||
| return "100%"; | ||
| else if (value.match(this.percent)) | ||
| return util.complement(value); | ||
| else if (value.match(this.number)) | ||
| return util.negate(value); | ||
| return value; | ||
@@ -106,0 +106,0 @@ }, |
@@ -70,10 +70,4 @@ (function() { | ||
| if (config.autoRename && flipped == 0) { | ||
| if (rule.selector.match(/left|right/)) | ||
| rule.selector = util.swapLeftRight(rule.selector); | ||
| else if (rule.selector.match(/ltr|rtl/)) | ||
| rule.selector = util.swapLtrRtl(rule.selector); | ||
| else if (rule.selector.match(/west|east/)) | ||
| rule.selector = util.swapWestEast(rule.selector); | ||
| } | ||
| if (config.autoRename && flipped == 0) | ||
| rule.selector = util.swapLeftRight(util.swapLtrRtl(util.swapWestEast(rule.selector))); | ||
| return; | ||
@@ -80,0 +74,0 @@ }); |
| { | ||
| "author": "Mohammad Younes", | ||
| "name": "rtlcss", | ||
| "version": "0.3.0", | ||
| "version": "0.4.0", | ||
| "description": "Framework for transforming cascading style sheets (CSS) from left-to-right (LTR) to right-to-left (RTL)", | ||
| "bugs": "https://github.com/MohammadYounes/rtlcss/issues?state=open", | ||
| "license": "MIT", | ||
| "keywords": ["rtl","css","ltr","rtlcss", "framework","style", "mirror", "flip"], | ||
| "keywords": ["rtl","css","ltr","rtlcss", "framework","style", "mirror", "flip", "convert", "transform"], | ||
| "repository": { | ||
@@ -10,0 +10,0 @@ "type": "git", |
@@ -207,2 +207,6 @@ [](https://travis-ci.org/MohammadYounes/rtlcss) | ||
| ## Release Notes | ||
| * **v0.4.0** [5 Apr. 2014] | ||
| * Fix flipping transform-origin. | ||
| * Update autoRename to search for all swappable words. | ||
| * **v0.3.0** [5 Apr. 2014] | ||
@@ -209,0 +213,0 @@ * Support flipping rotateZ. |
329
test/test.js
@@ -225,3 +225,169 @@ var assert = require("assert"); | ||
| ], | ||
| 'Transoforms:': [ | ||
| 'Mirrored Values (N Value Syntax):': [ | ||
| { | ||
| 'should' : 'Should mirror property value: border-radius (4 values)', | ||
| 'expected' : 'div { border-radius: 40px 10px 10px 40px; }', | ||
| 'input' : 'div { border-radius: 10px 40px 40px 10px; }', | ||
| 'reversable': true | ||
| }, | ||
| { | ||
| 'should' : 'Should mirror property value: border-radius (3 values)', | ||
| 'expected' : 'div { border-radius: 40px 10px 40px 40px; }', | ||
| 'input' : 'div { border-radius: 10px 40px 40px; }', | ||
| 'reversable': false | ||
| }, | ||
| { | ||
| 'should' : 'Should mirror property value: border-radius (2 values)', | ||
| 'expected' : 'div { border-radius: 40px 10px; }', | ||
| 'input' : 'div { border-radius: 10px 40px; }', | ||
| 'reversable': true | ||
| }, | ||
| { | ||
| 'should' : 'Should mirror property value: border-radius (4 values - double)', | ||
| 'expected' : 'div { border-radius: 40px 10px 10px 40px / 4em 1em 1em 4em; }', | ||
| 'input' : 'div { border-radius: 10px 40px 40px 10px / 1em 4em 4em 1em; }', | ||
| 'reversable': true | ||
| }, | ||
| { | ||
| 'should' : 'Should mirror property value: border-radius (3 values - double)', | ||
| 'expected' : 'div { border-radius: 40px 10px 40px 40px /4em 1em 4em 3em; }', | ||
| 'input' : 'div { border-radius: 10px 40px 40px / 1em 4em 3em; }', | ||
| 'reversable': false | ||
| }, | ||
| { | ||
| 'should' : 'Should mirror property value: border-radius (2 values- double)', | ||
| 'expected' : 'div { border-radius: 40px 10px / 2em 1em; }', | ||
| 'input' : 'div { border-radius: 10px 40px / 1em 2em; }', | ||
| 'reversable': true | ||
| }, | ||
| { | ||
| 'should' : 'Should mirror property value: border-width', | ||
| 'expected' : 'div { border-width: 1px 4px 3px 2px; }', | ||
| 'input' : 'div { border-width: 1px 2px 3px 4px; }', | ||
| 'reversable': true | ||
| }, | ||
| { | ||
| 'should' : 'Should mirror property value: margin', | ||
| 'expected' : 'div { margin: 1px 4px 3px 2px; }', | ||
| 'input' : 'div { margin: 1px 2px 3px 4px; }', | ||
| 'reversable': true | ||
| }, | ||
| { | ||
| 'should' : 'Should mirror property value: padding', | ||
| 'expected' : 'div { padding: 1px 4px 3px 2px; }', | ||
| 'input' : 'div { padding: 1px 2px 3px 4px; }', | ||
| 'reversable': true | ||
| }, | ||
| { | ||
| 'should' : 'Should mirror property value: box-shadow', | ||
| 'expected' : 'div { box-shadow: -60px -16px teal, -10px 5px 5px red,inset -5em 1em 0 white; }', | ||
| 'input' : 'div { box-shadow: 60px -16px teal, 10px 5px 5px red,inset 5em 1em 0 white; }', | ||
| 'reversable': true | ||
| }, | ||
| { | ||
| 'should' : 'Should mirror property value: text-shadow', | ||
| 'expected' : 'div { text-shadow: -60px -16px teal, -10px 5px 5px red,inset -5em 1em 0 white; }', | ||
| 'input' : 'div { text-shadow: 60px -16px teal, 10px 5px 5px red,inset 5em 1em 0 white; }', | ||
| 'reversable': true | ||
| }, | ||
| ], | ||
| 'Transform Origin:': [ | ||
| { | ||
| 'should' : 'Should mirror (x-offset: 0 means 0%)', | ||
| 'expected' : 'div { transform-origin:100%; }', | ||
| 'input' : 'div { transform-origin:0; }', | ||
| 'reversable': false | ||
| }, | ||
| { | ||
| 'should' : 'Should mirror (x-offset)', | ||
| 'expected' : 'div { transform-origin:90%; }', | ||
| 'input' : 'div { transform-origin:10%; }', | ||
| 'reversable': true | ||
| }, | ||
| { | ||
| 'should' : 'Should not mirror (x-offset: not percent)', | ||
| 'expected' : 'div { transform-origin:10px; }', | ||
| 'input' : 'div { transform-origin:10px; }', | ||
| 'reversable': false | ||
| }, | ||
| { | ||
| 'should' : 'Should mirror (offset-keyword)', | ||
| 'expected' : 'div { transform-origin:right; }', | ||
| 'input' : 'div { transform-origin:left; }', | ||
| 'reversable': true | ||
| }, | ||
| { | ||
| 'should' : 'Should mirror (x-offset y-offset: 0 means 0%)', | ||
| 'expected' : 'div { transform-origin:100% 0; }', | ||
| 'input' : 'div { transform-origin:0 0; }', | ||
| 'reversable': false | ||
| }, | ||
| { | ||
| 'should' : 'Should mirror (x-offset y-offset)', | ||
| 'expected' : 'div { transform-origin:30% 10%; }', | ||
| 'input' : 'div { transform-origin:70% 10%; }', | ||
| 'reversable': true | ||
| }, | ||
| { | ||
| 'should' : 'Should mirror (y-offset x-offset-keyword)', | ||
| 'expected' : 'div { transform-origin:70% right; }', | ||
| 'input' : 'div { transform-origin:70% left; }', | ||
| 'reversable': true | ||
| }, | ||
| { | ||
| 'should' : 'Should mirror (x-offset-keyword y-offset)', | ||
| 'expected' : 'div { transform-origin:right 70%; }', | ||
| 'input' : 'div { transform-origin:left 70%; }', | ||
| 'reversable': true | ||
| }, | ||
| { | ||
| 'should' : 'Should mirror (y-offset-keyword x-offset)', | ||
| 'expected' : 'div { transform-origin:top 30%; }', | ||
| 'input' : 'div { transform-origin:top 70%; }', | ||
| 'reversable': true | ||
| }, | ||
| { | ||
| 'should' : 'Should mirror (x-offset-keyword y-offset-keyword)', | ||
| 'expected' : 'div { transform-origin:right top; }', | ||
| 'input' : 'div { transform-origin:left top; }', | ||
| 'reversable': true | ||
| }, | ||
| { | ||
| 'should' : 'Should mirror (y-offset-keyword x-offset-keyword)', | ||
| 'expected' : 'div { transform-origin:top right; }', | ||
| 'input' : 'div { transform-origin:top left; }', | ||
| 'reversable': true | ||
| }, | ||
| { | ||
| 'should' : 'Should mirror (x-offset y-offset z-offset)', | ||
| 'expected' : 'div { transform-origin:80% 30% 10%; }', | ||
| 'input' : 'div { transform-origin:20% 30% 10%; }', | ||
| 'reversable': true | ||
| }, | ||
| { | ||
| 'should' : 'Should mirror (y-offset x-offset-keyword z-offset)', | ||
| 'expected' : 'div { transform-origin:20% right 10%; }', | ||
| 'input' : 'div { transform-origin:20% left 10%; }', | ||
| 'reversable': true | ||
| }, | ||
| { | ||
| 'should' : 'Should mirror (x-offset-keyword y-offset z-offset)', | ||
| 'expected' : 'div { transform-origin:left 20% 10%; }', | ||
| 'input' : 'div { transform-origin:right 20% 10%; }', | ||
| 'reversable': true | ||
| }, | ||
| { | ||
| 'should' : 'Should mirror (x-offset-keyword y-offset-keyword z-offset)', | ||
| 'expected' : 'div { transform-origin:left bottom 10%; }', | ||
| 'input' : 'div { transform-origin:right bottom 10%; }', | ||
| 'reversable': true | ||
| }, | ||
| { | ||
| 'should' : 'Should mirror (y-offset-keyword x-offset-keyword z-offset)', | ||
| 'expected' : 'div { transform-origin:bottom left 10%; }', | ||
| 'input' : 'div { transform-origin:bottom right 10%; }', | ||
| 'reversable': true | ||
| }, | ||
| ], | ||
| 'Transforms:': [ | ||
| { | ||
@@ -300,4 +466,163 @@ 'should' : 'Should mirror transform : matrix', | ||
| ], | ||
| 'RTLCSS (Options):': [ | ||
| { | ||
| 'should' : 'Should not rename selectors having directional decl. (default)', | ||
| 'expected' : '.right .rtl .east .bright .ultra .least { display:block; right:0; }', | ||
| 'input' : '.right .rtl .east .bright .ultra .least { display:block; left:0; }', | ||
| 'reversable': true | ||
| }, | ||
| { | ||
| 'should' : 'Should auto rename selectors having no directional decl. (default)', | ||
| 'expected' : '.left .ltr .west .bright .ultra .least { display:block; }', | ||
| 'input' : '.right .rtl .east .bright .ultra .least { display:block; }', | ||
| 'reversable': true | ||
| }, | ||
| { | ||
| 'should' : 'Should auto rename selectors having no directional decl. (greedy)', | ||
| 'expected' : '.left .ltr .west .bleft .urtla .lwest { display:block; }', | ||
| 'input' : '.right .rtl .east .bright .ultra .least { display:block; }', | ||
| 'reversable': true, | ||
| 'options' : {'greedy':true} | ||
| }, | ||
| { | ||
| 'should' : 'Should not auto rename selectors having no directional decl. (autoRename:false)', | ||
| 'expected' : '.right .rtl .east .bright .ultra .least { display:block; }', | ||
| 'input' : '.right .rtl .east .bright .ultra .least { display:block; }', | ||
| 'reversable': true, | ||
| 'options' : {'autoRename': false } | ||
| }, | ||
| { | ||
| 'should' : 'Should not auto rename selectors having no directional decl. (autoRename:false,greedy)', | ||
| 'expected' : '.right .rtl .east .bright .ultra .least { display:block; }', | ||
| 'input' : '.right .rtl .east .bright .ultra .least { display:block; }', | ||
| 'reversable': true, | ||
| 'options' : {'autoRename': false, 'greedy': true } | ||
| }, | ||
| { | ||
| 'should' : 'Should not preserve processing directive. (default)', | ||
| 'expected' : 'div { left:0; }', | ||
| 'input' : '/*rtl:ignore*/div { left:0; }', | ||
| 'reversable': false, | ||
| }, | ||
| { | ||
| 'should' : 'Should preserve processing directive. (preserveDirectives:true)', | ||
| 'expected' : '/*rtl:ignore*/div { left:0; }', | ||
| 'input' : '/*rtl:ignore*/div { left:0; }', | ||
| 'reversable': false, | ||
| 'options' : {'preserveDirectives':true} | ||
| }, | ||
| { | ||
| 'should' : 'Should swap left with right in url (defult)', | ||
| 'expected' : 'div { background-image: url(rtl/west/right.png); right:0; }', | ||
| 'input' : 'div { background-image: url(ltr/east/left.png); left:0; }', | ||
| 'reversable': true | ||
| }, | ||
| { | ||
| 'should' : 'Should not swap left with right in url (swapLeftRightInUrl:false)', | ||
| 'expected' : 'div { background-image: url(rtl/west/left.png); right:0; }', | ||
| 'input' : 'div { background-image: url(ltr/east/left.png); left:0; }', | ||
| 'reversable': true, | ||
| 'options' : {'swapLeftRightInUrl':false} | ||
| }, | ||
| { | ||
| 'should' : 'Should swap ltr with rtl in url (defult)', | ||
| 'expected' : 'div { background-image: url(rtl/west/right.png); right:0; }', | ||
| 'input' : 'div { background-image: url(ltr/east/left.png); left:0; }', | ||
| 'reversable': true | ||
| }, | ||
| { | ||
| 'should' : 'Should not swap ltr with rtl in url (swapLtrRtlInUrl:false)', | ||
| 'expected' : 'div { background-image: url(ltr/west/right.png); right:0; }', | ||
| 'input' : 'div { background-image: url(ltr/east/left.png); left:0; }', | ||
| 'reversable': false, | ||
| 'options' : {'swapLtrRtlInUrl':false} | ||
| }, | ||
| { | ||
| 'should' : 'Should swap east with west in url (defult)', | ||
| 'expected' : 'div { background-image: url(rtl/west/right.png); right:0; }', | ||
| 'input' : 'div { background-image: url(ltr/east/left.png); left:0; }', | ||
| 'reversable': true | ||
| }, | ||
| { | ||
| 'should' : 'Should not swap east with west in url (swapWestEastInUrl:false)', | ||
| 'expected' : 'div { background-image: url(rtl/east/right.png); right:0; }', | ||
| 'input' : 'div { background-image: url(ltr/east/left.png); left:0; }', | ||
| 'reversable': false, | ||
| 'options' : {'swapWestEastInUrl':false} | ||
| }, | ||
| { | ||
| 'should' : 'Should minify (minify:true)', | ||
| 'expected' : 'div{font-family:"Droid Arabic Kufi";padding:10px 5px 5px 10px;color:red;}.div2{display:none;}', | ||
| 'input' : 'div\n {\n font-family: "Droid Arabic Kufi"; \npadding:10px 10px 5px 5px; \ncolor:red; \n } /*comment*/ .div2{ /*comment*/ \n display:none; /*comment*/ \n /*comment*/}', | ||
| 'reversable': false, | ||
| 'options' : {'minify':true} | ||
| }, | ||
| ], | ||
| 'RTLCSS (Directives):': [ | ||
| { | ||
| 'should' : 'Should auto rename selectors having no directional decl. unless forced to ignore. (default)', | ||
| 'expected' : ' .right .rtl .east .bright .ultra .least { display:block; }', | ||
| 'input' : '/*rtl:ignore*/ .right .rtl .east .bright .ultra .least { display:block; }', | ||
| 'reversable': false, | ||
| }, | ||
| { | ||
| 'should' : 'Should auto rename selectors having no directional decl. unless forced to ignore. (greedy)', | ||
| 'expected' : ' .right .rtl .east .bright .ultra .least { display:block; }', | ||
| 'input' : '/*rtl:ignore*/ .right .rtl .east .bright .ultra .least { display:block; }', | ||
| 'reversable': false, | ||
| 'options' : {'greedy':true} | ||
| }, | ||
| { | ||
| 'should' : 'Should rename selectors when forced. (autoRename:false)', | ||
| 'expected' : '.left .ltr .west .bright .ultra .least { display:block; }', | ||
| 'input' : '/*rtl:rename*/.right .rtl .east .bright .ultra .least { display:block; }', | ||
| 'reversable': false, | ||
| 'options' : {'autoRename': false } | ||
| }, | ||
| { | ||
| 'should' : 'Should rename selectors when forced. (autoRename:false,greedy)', | ||
| 'expected' : '.left .ltr .west .bleft .urtla .lwest { display:block; }', | ||
| 'input' : '/*rtl:rename*/.right .rtl .east .bright .ultra .least { display:block; }', | ||
| 'reversable': false, | ||
| 'options' : {'autoRename': false, 'greedy': true } | ||
| }, | ||
| { | ||
| 'should' : 'Should prepend value.', | ||
| 'expected' : 'div { font-family: "Droid Arabic Kufi", "Droid Sans", Tahoma; }', | ||
| 'input' : 'div { font-family: "Droid Sans", Tahoma/*rtl:prepend:"Droid Arabic Kufi", */; }', | ||
| 'reversable': false, | ||
| }, | ||
| { | ||
| 'should' : 'Should replace value.', | ||
| 'expected' : 'div { font-family: "Droid Arabic Kufi"; }', | ||
| 'input' : 'div { font-family: "Droid Sans", Tahoma/*rtl:"Droid Arabic Kufi"*/; }', | ||
| 'reversable': false, | ||
| }, | ||
| { | ||
| 'should' : 'Should append value.', | ||
| 'expected' : 'div { font-family: "Droid Sans", Tahoma, "Droid Arabic Kufi"; }', | ||
| 'input' : 'div { font-family: "Droid Sans", Tahoma/*rtl:append:, "Droid Arabic Kufi"*/; }', | ||
| 'reversable': false, | ||
| }, | ||
| { | ||
| 'should' : 'Should insert value.', | ||
| 'expected' : 'div { font-family: "Droid Sans", "Droid Arabic Kufi", Tahoma; }', | ||
| 'input' : 'div { font-family: "Droid Sans"/*rtl:insert:, "Droid Arabic Kufi"*/, Tahoma; }', | ||
| 'reversable': false, | ||
| }, | ||
| { | ||
| 'should' : 'Should ignore flipping (rule level)', | ||
| 'expected' : 'div { left:10px; text-align:right;}', | ||
| 'input' : '/*rtl:ignore*/div { left:10px; text-align:right;}', | ||
| 'reversable': false, | ||
| }, | ||
| { | ||
| 'should' : 'Should ignore flipping (decl. level)', | ||
| 'expected' : 'div { left:10px;text-align:left;}', | ||
| 'input' : 'div { left:10px/*rtl:ignore*/;text-align:right;}', | ||
| 'reversable': false, | ||
| }, | ||
| ] | ||
| }; | ||
| (function Run() { | ||
@@ -304,0 +629,0 @@ for (key in tests) { |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by31.34%
61587
- Lines of code
- increased by34.38%
1247
- Number of lines in readme file
- increased by1.72%
237
No dependency changes