Version 2.0.9

madebysource · Nov 22, 2013 · c0203dd · c0203dd
1 parent 9b83ab0
commit c0203dd
Show file tree

Hide file tree

Showing 10 changed files with 83 additions and 35 deletions.
diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@ README.md file is automatically generated.
 **[Documentation](#documentation) |**
 
 ---
-### Current version: v2.0.8 (2013-11-21)
+### Current version: v2.0.9 (2013-11-22)
 ## Intro
 Why LESS Hat? In August 2012, while we were developing and extending [CSS Hat](www.csshat.com) for LESS we needed universal mixins. Unfortunately, none of available were good enough that would satisfy our needs and that’s  why we created new custom ones on our own, which have become the most popular mixin library for the whole LESS CSS. 
 
@@ -2637,7 +2637,19 @@ Resources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/trans
           time += 's';
         }
 
-  And also properties inside `transition` definition are automatically prefixed, if it is needed.
+  And also properties inside `transition` definition are automatically prefixed, if it is needed.  
+  **W3C property value is appending all prefixed values.**  
+  Why? Some browsers support W3C unprefixed property, but value must be sometimes prefixed.
+  Let's consider this example:
+
+    div {
+    -webkit-transition: -webkit-filter .3s ease;
+    -moz-transition: -moz-filter .3s ease;
+    -o-transition: filter .3s ease;
+
+    // There is a problem! Webkit needs -webkit-filter property
+    transition: filter .3s ease;
+    }
 
 **Example:**
 
@@ -2748,7 +2760,19 @@ Resources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/trans
 
 **Tips and tricks:**
 
-  And also properties inside `transition-property` definition are automatically prefixed, if it is needed.
+  And also properties inside `transition-property` definition are automatically prefixed, if it is needed.  
+  **W3C property value is appending all prefixed values.**  
+  Why? Some browsers support W3C unprefixed property, but value must be sometimes prefixed.
+  Let's consider this example:
+
+    div {
+    -webkit-transition: -webkit-filter .3s ease;
+    -moz-transition: -moz-filter .3s ease;
+    -o-transition: filter .3s ease;
+
+    // There is a problem! Webkit needs -webkit-filter property
+    transition: filter .3s ease;
+    }
 
 **Example:**
 
@@ -2758,10 +2782,10 @@ Resources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/trans
 
     // Result
     div {
-     -webkit-transition-property: -webkit-box-shadow;
-     -moz-transition-property: -moz-box-shadow;
-     -o-transition-property: box-shadow;
-     transition-property: box-shadow;
+     -webkit-transition-property: -webkit-transform;
+     -moz-transition-property: -moz-transform;
+     -o-transition-property: -o-transform;
+     transition-property: -webkit-transform,-moz-transform,-o-transform,transform;
     }
 
 

diff --git a/bower.json b/bower.json
@@ -1,5 +1,5 @@
 {
   "name": "lesshat",
-  "version": "2.0.8",
+  "version": "2.0.9",
   "main": "./build/lesshat.less"
 }
diff --git a/build/lesshat-prefixed.less b/build/lesshat-prefixed.less
@@ -6,7 +6,7 @@
 // Handcrafted by Petr Brzek, lesshat.com
 // Works great with CSS Hat csshat.com
 
-// version: v2.0.8 (2013-11-21)
+// version: v2.0.9 (2013-11-22)
 
 // TABLE OF MIXINS:
 	// align-content
@@ -2562,9 +2562,9 @@
   @opera_local: true;
   @w3c_local: true;
 
-  @process_webkit: ~`(function(value){value=value||"all";var prefixedProperties=["background-size","border-radius","border-bottom-left-radius","border-bottom-right-radius","border-top-left-radius","border-top-right-radius","box-shadow","column","transform","filter"],prefix="-webkit-";return/^[-a-zA-Z0-9().\/]*,/.test(value)&&(value=value.replace(/(?:,)(?![^(]*\))/g,"")),prefixedProperties.forEach(function(property){-1!==value.indexOf(property)&&(value=value.replace(new RegExp(property,"g"),function(match){return prefix+match}))}),value})((function(){var args="@{arguments}";return args=args.replace(/^\[|\]$/g,"")})())`;
-  @process_moz: ~`(function(value){value=value||"all";var prefixedProperties=["background-size","box-shadow","column","transform","filter"],prefix="-moz-";return/^[-a-zA-Z0-9().\/]*,/.test(value)&&(value=value.replace(/(?:,)(?![^(]*\))/g,"")),prefixedProperties.forEach(function(property){-1!==value.indexOf(property)&&(value=value.replace(new RegExp(property,"g"),function(match){return prefix+match}))}),value})((function(){var args="@{arguments}";return args=args.replace(/^\[|\]$/g,"")})())`;
-  @process_opera: ~`(function(value){value=value||"all";var prefixedProperties=["transform"],prefix="-o-";return/^[-a-zA-Z0-9().\/]*,/.test(value)&&(value=value.replace(/(?:,)(?![^(]*\))/g,"")),prefixedProperties.forEach(function(property){-1!==value.indexOf(property)&&(value=value.replace(new RegExp(property,"g"),function(match){return prefix+match}))}),value})((function(){var args="@{arguments}";return args=args.replace(/^\[|\]$/g,"")})())`;
+  @process_webkit: ~`(function(value){value=value||"all";var prefixedProperties=["background-size","border-radius","border-bottom-left-radius","border-bottom-right-radius","border-top-left-radius","border-top-right-radius","box-shadow","column","transform","filter"],prefix="-webkit-";return prefixedProperties.forEach(function(property){-1!==value.indexOf(property)&&(value=value.replace(new RegExp(property,"g"),function(match){return prefix+match}))}),value})((function(){var args="@{arguments}";return args=args.replace(/^\[|\]$/g,"")})())`;
+  @process_moz: ~`(function(value){value=value||"all";var prefixedProperties=["background-size","box-shadow","column","transform","filter"],prefix="-moz-";return prefixedProperties.forEach(function(property){-1!==value.indexOf(property)&&(value=value.replace(new RegExp(property,"g"),function(match){return prefix+match}))}),value})((function(){var args="@{arguments}";return args=args.replace(/^\[|\]$/g,"")})())`;
+  @process_opera: ~`(function(value){value=value||"all";var prefixedProperties=["transform"],prefix="-o-";return prefixedProperties.forEach(function(property){-1!==value.indexOf(property)&&(value=value.replace(new RegExp(property,"g"),function(match){return prefix+match}))}),value})((function(){var args="@{arguments}";return args=args.replace(/^\[|\]$/g,"")})())`;
   @process: ~`(function(value){value=value||"all";var prefixes=["-webkit-","-moz-","-o-",""],prefixedProperties=["column","transform","filter"],subSplit=value.split(/(?:,)(?![^(]*\))/g);return subSplit.forEach(function(css,index){prefixedProperties.forEach(function(property){-1!==css.indexOf(property)&&(subSplit[index]="",prefixes.forEach(function(vendor,i){subSplit[index]+=css.trim().replace(new RegExp(property,"g"),function(match){return vendor+match}),i<prefixes.length-1&&(subSplit[index]+=",")}))})}),value=subSplit.join(",")})((function(){var args="@{arguments}";return args=args.replace(/^\[|\]$/g,"")})())`;
 
   .result (@arguments, @signal, @boolean, @local_boolean) when (@boolean = true) and (@local_boolean = true) {

diff --git a/build/lesshat.less b/build/lesshat.less
@@ -6,7 +6,7 @@
 // Handcrafted by Petr Brzek, lesshat.com
 // Works great with CSS Hat csshat.com
 
-// version: v2.0.8 (2013-11-21)
+// version: v2.0.9 (2013-11-22)
 
 // TABLE OF MIXINS:
 	// align-content
@@ -2562,9 +2562,9 @@
   @opera_local: true;
   @w3c_local: true;
 
-  @process_webkit: ~`(function(value){value=value||"all";var prefixedProperties=["background-size","border-radius","border-bottom-left-radius","border-bottom-right-radius","border-top-left-radius","border-top-right-radius","box-shadow","column","transform","filter"],prefix="-webkit-";return/^[-a-zA-Z0-9().\/]*,/.test(value)&&(value=value.replace(/(?:,)(?![^(]*\))/g,"")),prefixedProperties.forEach(function(property){-1!==value.indexOf(property)&&(value=value.replace(new RegExp(property,"g"),function(match){return prefix+match}))}),value})((function(){var args="@{arguments}";return args=args.replace(/^\[|\]$/g,"")})())`;
-  @process_moz: ~`(function(value){value=value||"all";var prefixedProperties=["background-size","box-shadow","column","transform","filter"],prefix="-moz-";return/^[-a-zA-Z0-9().\/]*,/.test(value)&&(value=value.replace(/(?:,)(?![^(]*\))/g,"")),prefixedProperties.forEach(function(property){-1!==value.indexOf(property)&&(value=value.replace(new RegExp(property,"g"),function(match){return prefix+match}))}),value})((function(){var args="@{arguments}";return args=args.replace(/^\[|\]$/g,"")})())`;
-  @process_opera: ~`(function(value){value=value||"all";var prefixedProperties=["transform"],prefix="-o-";return/^[-a-zA-Z0-9().\/]*,/.test(value)&&(value=value.replace(/(?:,)(?![^(]*\))/g,"")),prefixedProperties.forEach(function(property){-1!==value.indexOf(property)&&(value=value.replace(new RegExp(property,"g"),function(match){return prefix+match}))}),value})((function(){var args="@{arguments}";return args=args.replace(/^\[|\]$/g,"")})())`;
+  @process_webkit: ~`(function(value){value=value||"all";var prefixedProperties=["background-size","border-radius","border-bottom-left-radius","border-bottom-right-radius","border-top-left-radius","border-top-right-radius","box-shadow","column","transform","filter"],prefix="-webkit-";return prefixedProperties.forEach(function(property){-1!==value.indexOf(property)&&(value=value.replace(new RegExp(property,"g"),function(match){return prefix+match}))}),value})((function(){var args="@{arguments}";return args=args.replace(/^\[|\]$/g,"")})())`;
+  @process_moz: ~`(function(value){value=value||"all";var prefixedProperties=["background-size","box-shadow","column","transform","filter"],prefix="-moz-";return prefixedProperties.forEach(function(property){-1!==value.indexOf(property)&&(value=value.replace(new RegExp(property,"g"),function(match){return prefix+match}))}),value})((function(){var args="@{arguments}";return args=args.replace(/^\[|\]$/g,"")})())`;
+  @process_opera: ~`(function(value){value=value||"all";var prefixedProperties=["transform"],prefix="-o-";return prefixedProperties.forEach(function(property){-1!==value.indexOf(property)&&(value=value.replace(new RegExp(property,"g"),function(match){return prefix+match}))}),value})((function(){var args="@{arguments}";return args=args.replace(/^\[|\]$/g,"")})())`;
   @process: ~`(function(value){value=value||"all";var prefixes=["-webkit-","-moz-","-o-",""],prefixedProperties=["column","transform","filter"],subSplit=value.split(/(?:,)(?![^(]*\))/g);return subSplit.forEach(function(css,index){prefixedProperties.forEach(function(property){-1!==css.indexOf(property)&&(subSplit[index]="",prefixes.forEach(function(vendor,i){subSplit[index]+=css.trim().replace(new RegExp(property,"g"),function(match){return vendor+match}),i<prefixes.length-1&&(subSplit[index]+=",")}))})}),value=subSplit.join(",")})((function(){var args="@{arguments}";return args=args.replace(/^\[|\]$/g,"")})())`;
 
   .result (@arguments, @signal, @boolean, @local_boolean) when (@boolean = true) and (@local_boolean = true) {

diff --git a/mixins/box-shadow/test.js b/mixins/box-shadow/test.js
@@ -10,6 +10,10 @@ describe('box-shadow', function() {
     test.boxShadow('5 4 100 rgba(20,20,20,0.5)', '5px 4px 100px rgba(20, 20, 20, 0.5)', done);
   });
 
+  it('should add px for numbers', function(done) {
+    test.boxShadow('5 4 100 rgba(20,20,20,0.5), inset 5 4 100 rgba(20,20,20,0.5)', '5px 4px 100px rgba(20, 20, 20, 0.5), inset 5px 4px 100px rgba(20, 20, 20, 0.5)', done);
+  });
+
   it('should return the same value', function(done) {
     test.boxShadow('0em 0.125em 0.3125em 0em rgba(0, 0, 0, 0.5)', '0em 0.125em 0.3125em 0em rgba(0, 0, 0, 0.5)', done);
   });

diff --git a/mixins/transition-property/test.js b/mixins/transition-property/test.js
@@ -10,4 +10,12 @@ describe('transition-property', function() {
     test.transitionProperty.webkit('box-shadow', '-webkit-box-shadow', done);
   });
 
+  it('should prefix property and return value', function(done) {
+    test.transitionProperty.webkit('box-shadow, transform', '-webkit-box-shadow, -webkit-transform', done);
+  });
+
+  it('should prefix property and return value', function(done) {
+    test.transitionProperty.moz('box-shadow, transform', '-moz-box-shadow, -moz-transform', done);
+  });
+
 });
diff --git a/mixins/transition-property/transition-property.js b/mixins/transition-property/transition-property.js
@@ -35,10 +35,6 @@ transitionProperty.webkit = function transitionProperty(value) {
   var prefixedProperties = ['background-size', 'border-radius', 'border-bottom-left-radius', 'border-bottom-right-radius', 'border-top-left-radius', 'border-top-right-radius', 'box-shadow', 'column', 'transform', 'filter'];
   var prefix = '-webkit-';
 
-  if (/^[-a-zA-Z0-9().\/]*,/.test(value)) {
-    value = value.replace(/(?:,)(?![^(]*\))/g, '');
-  }
-
   prefixedProperties.forEach(function(property, index) {
     if (value.indexOf(property) !== -1) {
       value = value.replace(new RegExp(property, 'g'), function(match) {
@@ -55,10 +51,6 @@ transitionProperty.moz = function transitionProperty(value) {
   var prefixedProperties = ['background-size', 'box-shadow', 'column', 'transform', 'filter'];
   var prefix = '-moz-';
 
-  if (/^[-a-zA-Z0-9().\/]*,/.test(value)) {
-    value = value.replace(/(?:,)(?![^(]*\))/g, '');
-  }
-
   prefixedProperties.forEach(function(property, index) {
     if (value.indexOf(property) !== -1) {
       value = value.replace(new RegExp(property, 'g'), function(match) {
@@ -75,10 +67,6 @@ transitionProperty.opera = function transitionProperty(value) {
   var prefixedProperties = ['transform'];
   var prefix = '-o-';
 
-  if (/^[-a-zA-Z0-9().\/]*,/.test(value)) {
-    value = value.replace(/(?:,)(?![^(]*\))/g, '');
-  }
-
   prefixedProperties.forEach(function(property, index) {
     if (value.indexOf(property) !== -1) {
       value = value.replace(new RegExp(property, 'g'), function(match) {

diff --git a/mixins/transition-property/transition-property.md b/mixins/transition-property/transition-property.md
@@ -13,7 +13,19 @@ Resources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/trans
 
 **Tips and tricks:**
 
-  And also properties inside `transition-property` definition are automatically prefixed, if it is needed.
+  And also properties inside `transition-property` definition are automatically prefixed, if it is needed.  
+  **W3C property value is appending all prefixed values.**  
+  Why? Some browsers support W3C unprefixed property, but value must be sometimes prefixed.
+  Let's consider this example:
+
+    div {
+    -webkit-transition: -webkit-filter .3s ease;
+    -moz-transition: -moz-filter .3s ease;
+    -o-transition: filter .3s ease;
+
+    // There is a problem! Webkit needs -webkit-filter property
+    transition: filter .3s ease;
+    }
 
 **Example:**
 
@@ -23,10 +35,10 @@ Resources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/trans
 
     // Result
     div {
-     -webkit-transition-property: -webkit-box-shadow;
-     -moz-transition-property: -moz-box-shadow;
-     -o-transition-property: box-shadow;
-     transition-property: box-shadow;
+     -webkit-transition-property: -webkit-transform;
+     -moz-transition-property: -moz-transform;
+     -o-transition-property: -o-transform;
+     transition-property: -webkit-transform,-moz-transform,-o-transform,transform;
     }
 
 
diff --git a/mixins/transition/transition.md b/mixins/transition/transition.md
@@ -21,7 +21,19 @@ Resources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/trans
           time += 's';
         }
 
-  And also properties inside `transition` definition are automatically prefixed, if it is needed.
+  And also properties inside `transition` definition are automatically prefixed, if it is needed.  
+  **W3C property value is appending all prefixed values.**  
+  Why? Some browsers support W3C unprefixed property, but value must be sometimes prefixed.
+  Let's consider this example:
+
+    div {
+    -webkit-transition: -webkit-filter .3s ease;
+    -moz-transition: -moz-filter .3s ease;
+    -o-transition: filter .3s ease;
+
+    // There is a problem! Webkit needs -webkit-filter property
+    transition: filter .3s ease;
+    }
 
 **Example:**
 

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "lesshat",
   "description": "Most advanced LESS CSS mixins library",
-  "version": "2.0.8",
+  "version": "2.0.9",
   "homepage": "http://lesshat.com/",
   "author": {
     "name": "Petr Brzek",