From 922fc8c1a2dc21686b5a76a0dac96ce2d3913dc6 Mon Sep 17 00:00:00 2001
From: Chris Eppstein <chris@eppsteins.net>
Date: Sun, 25 Jul 2010 11:39:11 -0700
Subject: [PATCH] [Compass Core] The has-layout mixin has been updated to emit
 less css. It now uses a hacked zoom property to target ie6 and 7 only so that
 they gain layout. If you prefer an approach that validates, set:

    $default-has-layout-approach: block;

and the has-layout mixin behavior will remain unchanged.
---
 .../compass/utilities/general/_hacks.scss     | 26 ++++++++++++++++---
 .../stylesheets/compass/css/images.css        |  2 +-
 .../compass/css/legacy_clearfix.css           | 17 ++++++++++++
 .../stylesheets/compass/css/lists.css         | 12 +++------
 .../stylesheets/compass/css/utilities.css     |  8 ++----
 .../compass/sass/legacy_clearfix.scss         | 11 ++++++++
 6 files changed, 57 insertions(+), 19 deletions(-)
 create mode 100644 test/fixtures/stylesheets/compass/css/legacy_clearfix.css
 create mode 100644 test/fixtures/stylesheets/compass/sass/legacy_clearfix.scss

diff --git a/frameworks/compass/stylesheets/compass/utilities/general/_hacks.scss b/frameworks/compass/stylesheets/compass/utilities/general/_hacks.scss
index d30dd722..4f6ec87d 100644
--- a/frameworks/compass/stylesheets/compass/utilities/general/_hacks.scss
+++ b/frameworks/compass/stylesheets/compass/utilities/general/_hacks.scss
@@ -1,12 +1,32 @@
+// The `zoom` approach generates less CSS but does not validate.
+// Set this to `block` to use the display-property to hack the
+// element to gain layout.
+$default-has-layout-approach: zoom !default;
+
 // This mixin causes an element matching the selector
 // to gain the "hasLayout" property in internet explorer.
 // More information on [hasLayout](http://reference.sitepoint.com/css/haslayout).
-@mixin has-layout {
+@mixin has-layout($using: $default-has-layout-approach) {
+  @if $using == zoom {
+    @include has-layout-zoom;
+  } @else if $using == block {
+    @include has-layout-block;
+  } @else {
+    @warn "Unknown has-layout approach: #{$using}";
+    @include has-layout-zoom;
+  }
+}
+
+@mixin has-layout-zoom {
+  *zoom: 1;
+}
+
+@mixin has-layout-block {
   // This makes ie6 get layout
   display: inline-block;
   // and this puts it back to block
-  & {
-    display: block; } }
+  & { display: block; }
+}
 
 // A hack to supply IE6 (and below) with a different property value.
 // [Read more](http://www.cssportal.com/css-hacks/#in_css-important).
diff --git a/test/fixtures/stylesheets/compass/css/images.css b/test/fixtures/stylesheets/compass/css/images.css
index c4e97ca5..e0c4fdae 100644
--- a/test/fixtures/stylesheets/compass/css/images.css
+++ b/test/fixtures/stylesheets/compass/css/images.css
@@ -5,4 +5,4 @@
   background-image: url('/images/4x6.png?busted=true'); }
 
 .absolute {
-  background-image: url(http://example.com/images/4x6.png); }
\ No newline at end of file
+  background-image: url(http://example.com/images/4x6.png); }
diff --git a/test/fixtures/stylesheets/compass/css/legacy_clearfix.css b/test/fixtures/stylesheets/compass/css/legacy_clearfix.css
new file mode 100644
index 00000000..2a287628
--- /dev/null
+++ b/test/fixtures/stylesheets/compass/css/legacy_clearfix.css
@@ -0,0 +1,17 @@
+.clearfix {
+  overflow: hidden;
+  display: inline-block; }
+  .clearfix {
+    display: block; }
+
+.pie-clearfix {
+  display: inline-block; }
+  .pie-clearfix:after {
+    content: "\0020";
+    display: block;
+    height: 0;
+    clear: both;
+    overflow: hidden;
+    visibility: hidden; }
+  .pie-clearfix {
+    display: block; }
diff --git a/test/fixtures/stylesheets/compass/css/lists.css b/test/fixtures/stylesheets/compass/css/lists.css
index 7909e445..96195f04 100644
--- a/test/fixtures/stylesheets/compass/css/lists.css
+++ b/test/fixtures/stylesheets/compass/css/lists.css
@@ -4,9 +4,7 @@ ul.horizontal {
   border: 0;
   outline: 0;
   overflow: hidden;
-  display: inline-block; }
-  ul.horizontal {
-    display: block; }
+  *zoom: 1; }
   ul.horizontal li {
     list-style-image: none;
     list-style-type: none;
@@ -27,9 +25,7 @@ ul.wide-horizontal {
   border: 0;
   outline: 0;
   overflow: hidden;
-  display: inline-block; }
-  ul.wide-horizontal {
-    display: block; }
+  *zoom: 1; }
   ul.wide-horizontal li {
     list-style-image: none;
     list-style-type: none;
@@ -50,9 +46,7 @@ ul.right-horizontal {
   border: 0;
   outline: 0;
   overflow: hidden;
-  display: inline-block; }
-  ul.right-horizontal {
-    display: block; }
+  *zoom: 1; }
   ul.right-horizontal li {
     list-style-image: none;
     list-style-type: none;
diff --git a/test/fixtures/stylesheets/compass/css/utilities.css b/test/fixtures/stylesheets/compass/css/utilities.css
index 2a287628..38544f92 100644
--- a/test/fixtures/stylesheets/compass/css/utilities.css
+++ b/test/fixtures/stylesheets/compass/css/utilities.css
@@ -1,11 +1,9 @@
 .clearfix {
   overflow: hidden;
-  display: inline-block; }
-  .clearfix {
-    display: block; }
+  *zoom: 1; }
 
 .pie-clearfix {
-  display: inline-block; }
+  *zoom: 1; }
   .pie-clearfix:after {
     content: "\0020";
     display: block;
@@ -13,5 +11,3 @@
     clear: both;
     overflow: hidden;
     visibility: hidden; }
-  .pie-clearfix {
-    display: block; }
diff --git a/test/fixtures/stylesheets/compass/sass/legacy_clearfix.scss b/test/fixtures/stylesheets/compass/sass/legacy_clearfix.scss
new file mode 100644
index 00000000..5a9f6396
--- /dev/null
+++ b/test/fixtures/stylesheets/compass/sass/legacy_clearfix.scss
@@ -0,0 +1,11 @@
+$default-has-layout-approach: block;
+
+@import "compass/utilities";
+
+.clearfix {
+    @include clearfix;
+}
+
+.pie-clearfix {
+    @include pie-clearfix;
+}