Add intelligent gradient-syntax handling

Compass · Feb 15, 2013 · 5d6aeeb · 5d6aeeb
1 parent 09bcc29
commit 5d6aeeb
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 17 deletions.
diff --git a/frameworks/compass/stylesheets/compass/css3/_images.scss b/frameworks/compass/stylesheets/compass/css3/_images.scss
@@ -125,13 +125,20 @@
                                                                              content:         $value ;
 }
 
-$use-legacy-gradient-syntax: true !default;
+$use-legacy-gradient-syntax: false !default;
 
-@function linear-gradient( $angle, $details...) {
-  @if $use-legacy-gradient-syntax {
+@function linear-gradient($angle, $details...) {
+  $legacy-syntax: $use-legacy-gradient-syntax;
+
+  @if type-of($angle) != 'number' {
+    $angle: compact($angle);
+    $legacy-syntax: if(index($angle, 'to'), false, true);
+  }
+
+  @if $legacy-syntax {
     @return _linear-gradient_legacy($angle, $details...);
-  }@else{
-    @return _linear-gradient($angle, $details...)
+  } @else {
+    @return _linear-gradient($angle, $details...);
   }
 }
 
diff --git a/test/fixtures/stylesheets/compass/css/gradients.css b/test/fixtures/stylesheets/compass/css/gradients.css
@@ -16,10 +16,10 @@
   background: white radial-gradient(center center, #dddddd, #aaaaaa 100px); }
 
 .bg-linear-gradient-angle-svg {
-  background-image: -webkit-linear-gradient(-45deg, #0000ff, #000000);
-  background-image: -moz-linear-gradient(-45deg, #0000ff, #000000);
-  background-image: -o-linear-gradient(-45deg, #0000ff, #000000);
-  background-image: linear-gradient(135deg, #0000ff, #000000); }
+  background-image: -webkit-linear-gradient(135deg, #0000ff, #000000);
+  background-image: -moz-linear-gradient(135deg, #0000ff, #000000);
+  background-image: -o-linear-gradient(135deg, #0000ff, #000000);
+  background-image: linear-gradient(-45deg, #0000ff, #000000); }
 
 .bg-linear-gradient-angle2-svg {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDBmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
@@ -105,10 +105,10 @@
   background-image: radial-gradient(center center, currentColor, transparent 100px); }
 
 .bg-linear-gradient-with-angle {
-  background-image: -webkit-linear-gradient(-45deg, #dddddd, #aaaaaa);
-  background-image: -moz-linear-gradient(-45deg, #dddddd, #aaaaaa);
-  background-image: -o-linear-gradient(-45deg, #dddddd, #aaaaaa);
-  background-image: linear-gradient(135deg, #dddddd, #aaaaaa); }
+  background-image: -webkit-linear-gradient(135deg, #dddddd, #aaaaaa);
+  background-image: -moz-linear-gradient(135deg, #dddddd, #aaaaaa);
+  background-image: -o-linear-gradient(135deg, #dddddd, #aaaaaa);
+  background-image: linear-gradient(-45deg, #dddddd, #aaaaaa); }
 
 .bg-radial-gradient-with-angle-and-shape {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9ImVsbGlwc2UiIGN5PSJjb3ZlciIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
@@ -206,10 +206,10 @@
   filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#00FFFFFF'); }
 
 .linear-gradient-new {
-  background: -webkit-linear-gradient(to bottom, #ff0000 0%, #88aa44 100%);
-  background: -moz-linear-gradient(to bottom, #ff0000 0%, #88aa44 100%);
-  background: -o-linear-gradient(to bottom, #ff0000 0%, #88aa44 100%);
-  background: linear-gradient(top, #ff0000 0%, #88aa44 100%); }
+  background: -webkit-linear-gradient(top, #ff0000 0%, #88aa44 100%);
+  background: -moz-linear-gradient(top, #ff0000 0%, #88aa44 100%);
+  background: -o-linear-gradient(top, #ff0000 0%, #88aa44 100%);
+  background: linear-gradient(to bottom, #ff0000 0%, #88aa44 100%); }
 
 .linear-gradient-old {
   background: -webkit-linear-gradient(top, #ff0000 0%, #88aa44 100%);