Bubble up CSS @imports.

Closes #261
sass · Feb 2, 2012 · f0ca6ba · f0ca6ba
1 parent b66be21
commit f0ca6ba
Show file tree

Hide file tree

Showing 11 changed files with 36 additions and 12 deletions.
diff --git a/doc-src/SASS_CHANGELOG.md b/doc-src/SASS_CHANGELOG.md
@@ -14,6 +14,7 @@
 * Make sure `:after` and `:before` selectors end up on the end of
   selectors resulting from `@extend`.
 * Fix a bug when using imports containing invalid path characters on Windows.
+* Bubble CSS `@import` statements to the top of stylesheets.
 
 ### Deprecations -- Must Read!
 

diff --git a/lib/sass/tree/visitors/cssize.rb b/lib/sass/tree/visitors/cssize.rb
@@ -52,12 +52,26 @@ def with_parent(parent)
   def visit_root(node)
     yield
 
-    # In Ruby 1.9 we can make all @charset nodes invisible
-    # and infer the final @charset from the encoding of the final string.
-    if Sass::Util.ruby1_8? && parent.nil?
-      charset = node.children.find {|c| c.is_a?(Sass::Tree::CharsetNode)}
-      node.children.reject! {|c| c.is_a?(Sass::Tree::CharsetNode)}
-      node.children.unshift charset if charset
+    if parent.nil?
+      # In Ruby 1.9 we can make all @charset nodes invisible
+      # and infer the final @charset from the encoding of the final string.
+      if Sass::Util.ruby1_8?
+        charset = node.children.find {|c| c.is_a?(Sass::Tree::CharsetNode)}
+        node.children.reject! {|c| c.is_a?(Sass::Tree::CharsetNode)}
+        node.children.unshift charset if charset
+      end
+
+      imports = Sass::Util.extract!(node.children) do |c|
+        c.is_a?(Sass::Tree::DirectiveNode) && c.value =~ /^@import /i
+      end
+      charset_and_index = Sass::Util.ruby1_8? &&
+        node.children.each_with_index.find {|c, _| c.is_a?(Sass::Tree::CharsetNode)}
+      if charset_and_index
+        index = charset_and_index.last
+        node.children = node.children[0..index] + imports + node.children[index+1..-1]
+      else
+        node.children = imports + node.children
+      end
     end
 
     return node, @extends

diff --git a/test/sass/more_results/more_import.css b/test/sass/more_results/more_import.css
@@ -1,3 +1,5 @@
+@import url(basic.css);
+@import url(../results/complex.css);
 imported { otherconst: hello; myconst: goodbye; pre-mixin: here; }
 
 body { font: Arial; background: blue; }
@@ -22,8 +24,6 @@ body { font: Arial; background: blue; }
 #content.user.show #container.top #column.right { width: 600px; }
 #content.user.show #container.bottom { background: brown; }
 
-@import url(basic.css);
-@import url(../results/complex.css);
 #foo { background-color: #bbaaff; }
 
 nonimported { myconst: hello; otherconst: goodbye; post-mixin: here; }
diff --git a/test/sass/results/import.css b/test/sass/results/import.css
@@ -1,3 +1,5 @@
+@import url(basic.css);
+@import url(../results/complex.css);
 imported { otherconst: hello; myconst: goodbye; pre-mixin: here; }
 
 body { font: Arial; background: blue; }
@@ -24,8 +26,6 @@ body { font: Arial; background: blue; }
 #content.user.show #container.top #column.right { width: 600px; }
 #content.user.show #container.bottom { background: brown; }
 
-@import url(basic.css);
-@import url(../results/complex.css);
 #foo { background-color: #bbaaff; }
 
 nonimported { myconst: hello; otherconst: goodbye; post-mixin: here; }
diff --git a/test/sass/results/import_charset.css b/test/sass/results/import_charset.css
@@ -1,4 +1,5 @@
 @charset "UTF-8";
+@import url(foo.css);
 .foo { a: b; }
 
 .bar { a: щ; }
diff --git a/test/sass/results/import_charset_1_8.css b/test/sass/results/import_charset_1_8.css
@@ -1,4 +1,5 @@
 @charset "IBM866";
+@import url(foo.css);
 .foo { a: b; }
 
 .bar { a: é; }
diff --git a/test/sass/results/import_charset_ibm866.css b/test/sass/results/import_charset_ibm866.css
@@ -1,4 +1,5 @@
 @charset "IBM866";
+@import url(foo.css);
 .foo { a: b; }
 
 .bar { a: é; }
diff --git a/test/sass/results/scss_import.css b/test/sass/results/scss_import.css
@@ -1,3 +1,5 @@
+@import url(basic.css);
+@import url(../results/complex.css);
 imported { otherconst: hello; myconst: goodbye; pre-mixin: here; }
 
 body { font: Arial; background: blue; }
@@ -24,8 +26,6 @@ body { font: Arial; background: blue; }
 #content.user.show #container.top #column.right { width: 600px; }
 #content.user.show #container.bottom { background: brown; }
 
-@import url(basic.css);
-@import url(../results/complex.css);
 #foo { background-color: #bbaaff; }
 
 nonimported { myconst: hello; otherconst: goodbye; post-mixin: here; }
diff --git a/test/sass/templates/import_charset.sass b/test/sass/templates/import_charset.sass
@@ -1,6 +1,8 @@
 .foo
   a: b
 
+@import "foo.css"
+
 // Even though the imported file is in IBM866,
 // since the root file is in UTF-8/ASCII
 // the output will end up being UTF-8.

diff --git a/test/sass/templates/import_charset_1_8.sass b/test/sass/templates/import_charset_1_8.sass
@@ -1,4 +1,6 @@
 .foo
   a: b
 
+@import "foo.css"
+
 @import "imported_charset_ibm866"
diff --git a/test/sass/templates/import_charset_ibm866.sass b/test/sass/templates/import_charset_ibm866.sass
@@ -3,6 +3,8 @@
 .foo
   a: b
 
+@import "foo.css"
+
 // Even though the imported file is in UTF-8,
 // since the root file is in IBM866
 // the output will end up being IBM866.