compass 0.11.alpha.1 → 0.11.alpha.3

data/lib/compass/sass_extensions/functions/urls.rb

@@ -18,6 +18,8 @@ module Compass::SassExtensions::Functions::Urls
       clean_url(path)
     end
   end
+  Sass::Script::Functions.declare :stylesheet_url, [:path]
+  Sass::Script::Functions.declare :stylesheet_url, [:path, :only_path]
 
   def font_url(path, only_path = Sass::Script::Bool.new(false))
     path = path.value # get to the string value of the literal.
@@ -43,8 +45,10 @@ module Compass::SassExtensions::Functions::Urls
       clean_url(path)
     end
   end
+  Sass::Script::Functions.declare :font_url, [:path]
+  Sass::Script::Functions.declare :font_url, [:path, :only_path]
 
-  def image_url(path, only_path = Sass::Script::Bool.new(false))
+  def image_url(path, only_path = Sass::Script::Bool.new(false), cache_buster = Sass::Script::Bool.new(true))
     path = path.value # get to the string value of the literal.
 
     if path =~ %r{^#{Regexp.escape(Compass.configuration.http_images_path)}/(.*)}
@@ -83,8 +87,14 @@ module Compass::SassExtensions::Functions::Urls
     end
 
     # Compute and append the cache buster if there is one.
-    if buster = compute_cache_buster(path, real_path)
-      path += "?#{buster}"
+    if cache_buster.to_bool
+      if cache_buster.is_a?(Sass::Script::String)
+        path += "?#{cache_buster.value}"
+      else
+        if buster = compute_cache_buster(path, real_path)
+          path += "?#{buster}"
+        end
+      end
     end
 
     # prepend the asset host if there is one.
@@ -96,6 +106,9 @@ module Compass::SassExtensions::Functions::Urls
       clean_url(path)
     end
   end
+  Sass::Script::Functions.declare :image_url, [:path]
+  Sass::Script::Functions.declare :image_url, [:path, :only_path]
+  Sass::Script::Functions.declare :image_url, [:path, :only_path, :cache_buster]
 
   private
 

data/lib/compass/sass_extensions/monkey_patches/traversal.rb

@@ -6,7 +6,7 @@ module Sass
           visitor.visit(self)
           visitor.down(self) if children.any? and visitor.respond_to?(:down)
           if is_a?(ImportNode) && visitor.import?(self)
-            root = Sass::Files.tree_for(import, @options)
+            root = Sass::Engine.for_file(import, @options).to_tree
             imported_children = root.children
           end
 

data/lib/compass/sprites.rb

@@ -0,0 +1,122 @@
+module Compass
+  class Sprites < Sass::Importers::Base
+    attr_accessor :name
+    attr_accessor :path
+    
+    class << self
+      def path_and_name(uri)
+        if uri =~ %r{((.+/)?(.+))/(.+?)\.png}
+          [$1, $3, $4]
+        end
+      end
+    
+      def discover_sprites(uri)
+        glob = File.join(Compass.configuration.images_path, uri)
+        Dir.glob(glob).sort
+      end
+
+      def sprite_name(file)
+        File.basename(file, '.png')
+      end
+
+    end
+
+    def find_relative(*args)
+      nil
+    end
+
+    def find(uri, options)
+      if uri =~ /\.png$/
+        self.path, self.name = Compass::Sprites.path_and_name(uri)
+        options.merge! :filename => name, :syntax => :scss, :importer => self
+        sprite_files = Compass::Sprites.discover_sprites(uri)
+        image_names = sprite_files.map {|i| Compass::Sprites.sprite_name(i) }
+        Sass::Engine.new(content_for_images(uri, name, image_names), options)
+      end
+    end
+
+    def content_for_images(uri, name, images)
+      <<-SCSS
+@import "compass/utilities/sprites/base";
+
+// General Sprite Defaults
+// You can override them before you import this file.
+$#{name}-sprite-base-class: ".#{name}-sprite" !default;
+$#{name}-sprite-dimensions: false !default;
+$#{name}-position: 0% !default;
+$#{name}-spacing: 0 !default;
+$#{name}-repeat: no-repeat !default;
+
+// These variables control the generated sprite output
+// You can override them selectively before you import this file.
+#{images.map do |sprite_name| 
+<<-SCSS
+$#{name}-#{sprite_name}-position: $#{name}-position !default;
+$#{name}-#{sprite_name}-spacing: $#{name}-spacing !default;
+$#{name}-#{sprite_name}-repeat: $#{name}-repeat !default;
+SCSS
+end.join}
+
+$#{name}-sprites: sprite-map("#{uri}",
+#{images.map do |sprite_name| 
+%Q{  $#{sprite_name}-position: $#{name}-#{sprite_name}-position,
+  $#{sprite_name}-spacing: $#{name}-#{sprite_name}-spacing,
+  $#{sprite_name}-repeat: $#{name}-#{sprite_name}-repeat}
+end.join(",\n")});
+
+// All sprites should extend this class
+// The #{name}-sprite mixin will do so for you.
+\#{$#{name}-sprite-base-class} {
+  background: $#{name}-sprites no-repeat;
+}
+
+// Use this to set the dimensions of an element
+// based on the size of the original image.
+@mixin #{name}-sprite-dimensions($name) {
+  @include sprite-dimensions($#{name}-sprites, $name)
+}
+
+// Move the background position to display the sprite.
+@mixin #{name}-sprite-position($name, $offset-x: 0, $offset-y: 0) {
+  @include sprite-position($#{name}-sprites, $name, $offset-x, $offset-y)
+}
+
+// Extends the sprite base class and set the background position for the desired sprite.
+// It will also apply the image dimensions if $dimensions is true.
+@mixin #{name}-sprite($name, $dimensions: $#{name}-sprite-dimensions, $offset-x: 0, $offset-y: 0) {
+  @extend \#{$#{name}-sprite-base-class};
+  @include sprite($#{name}-sprites, $name, $dimensions, $offset-x, $offset-y)
+}
+
+@mixin #{name}-sprites($sprite-names, $dimensions: $#{name}-sprite-dimensions) {
+  @include sprites($#{name}-sprites, $sprite-names, $#{name}-sprite-base-class, $dimensions)
+}
+
+// Generates a class for each sprited image.
+@mixin all-#{name}-sprites($dimensions: $#{name}-sprite-dimensions) {
+  @include #{name}-sprites(#{images.join(" ")}, $dimensions);
+}
+SCSS
+    end
+
+    def key(uri, options)
+      [self.class.name + ":" + File.dirname(File.expand_path(uri)),
+        File.basename(uri)]
+    end
+
+    def mtime(uri, options)
+      Compass.quick_cache("mtime:#{uri}") do
+        self.path, self.name = Compass::Sprites.path_and_name(uri)
+        glob = File.join(Compass.configuration.images_path, uri)
+        Dir.glob(glob).inject(Time.at(0)) do |max_time, file|
+          (t = File.mtime(file)) > max_time ? t : max_time
+        end
+      end
+    end
+    
+    def to_s
+      ""
+    end
+
+  end
+end

data/test/fixtures/stylesheets/compass/css/gradients.css

@@ -1,3 +1,20 @@
+.bg-shortcut-simple-image {
+  background: white url("foo.png"); }
+
+.bg-shortcut-linear-gradient {
+  background: white ;
+  background: white url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
+  background: white -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
+  background: white -moz-linear-gradient(top left, #dddddd, #aaaaaa);
+  background: white linear-gradient(top left, #dddddd, #aaaaaa); }
+
+.bg-shortcut-radial-gradient {
+  background: white ;
+  background: white url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
+  background: white -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
+  background: white -moz-radial-gradient(center center, #dddddd, #aaaaaa 100px);
+  background: white radial-gradient(center center, #dddddd, #aaaaaa 100px); }
+
 .bg-simple-image {
   background-image: url("foo.png"); }
 
@@ -46,7 +63,7 @@
   list-style-image: url('/images/4x6.png?busted=true'); }
 
 .shorthand-list-image-plain {
-  list-style-image: outside url("/images/4x6.png?busted=true"); }
+  list-style-image: outside url('/images/4x6.png?busted=true'); }
 
 .direct-list-image-with-gradient {
   list-style-image: -moz-radial-gradient(#00ff00, #ff0000 10px);

data/test/fixtures/stylesheets/compass/css/pie.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 .pie-element, .bordered, .gradient {
   behavior: url('/tmp/PIE.htc');
   position: relative; }

data/test/fixtures/stylesheets/compass/css/transform.css

@@ -2,6 +2,7 @@
   -moz-transform-origin: 2px 5%;
   -webkit-transform-origin: 2px 5%;
   -o-transform-origin: 2px 5%;
+  -ms-transform-origin: 2px 5%;
   transform-origin: 2px 5%; }
 
 .apply-origin-3d {
@@ -12,6 +13,7 @@
   -moz-transform-origin: 100px 100px;
   -webkit-transform-origin: 100px 100px;
   -o-transform-origin: 100px 100px;
+  -ms-transform-origin: 100px 100px;
   transform-origin: 100px 100px; }
 
 .transform-origin-3d {
@@ -22,6 +24,7 @@
   -moz-transform: rotateY(20deg);
   -webkit-transform: rotateY(20deg);
   -o-transform: rotateY(20deg);
+  -ms-transform: rotateY(20deg);
   transform: rotateY(20deg); }
 
 .transform-3d {
@@ -48,6 +51,7 @@
   -moz-transform: scale(30px, 50px);
   -webkit-transform: scale(30px, 50px);
   -o-transform: scale(30px, 50px);
+  -ms-transform: scale(30px, 50px);
   transform: scale(30px, 50px); }
 
 .scale-3d {
@@ -58,6 +62,7 @@
   -moz-transform: perspective(500) scale(30px, 50px);
   -webkit-transform: perspective(500) scale(30px, 50px);
   -o-transform: perspective(500) scale(30px, 50px);
+  -ms-transform: perspective(500) scale(30px, 50px);
   transform: perspective(500) scale(30px, 50px); }
 
 .scale-3d-with-perspective {
@@ -68,6 +73,7 @@
   -moz-transform: scaleX(30px);
   -webkit-transform: scaleX(30px);
   -o-transform: scaleX(30px);
+  -ms-transform: scaleX(30px);
   transform: scaleX(30px); }
 
 .scale-x-3d {
@@ -78,6 +84,7 @@
   -moz-transform: perspective(500) scaleX(30px);
   -webkit-transform: perspective(500) scaleX(30px);
   -o-transform: perspective(500) scaleX(30px);
+  -ms-transform: perspective(500) scaleX(30px);
   transform: perspective(500) scaleX(30px); }
 
 .scale-x-3d-with-perspective {
@@ -88,6 +95,7 @@
   -moz-transform: scaleY(50px);
   -webkit-transform: scaleY(50px);
   -o-transform: scaleY(50px);
+  -ms-transform: scaleY(50px);
   transform: scaleY(50px); }
 
 .scale-y-3d {
@@ -98,6 +106,7 @@
   -moz-transform: perspective(500) scaleY(50px);
   -webkit-transform: perspective(500) scaleY(50px);
   -o-transform: perspective(500) scaleY(50px);
+  -ms-transform: perspective(500) scaleY(50px);
   transform: perspective(500) scaleY(50px); }
 
 .scale-y-3d-with-perspective {
@@ -124,24 +133,28 @@
   -moz-transform: perspective(500) rotate(25deg);
   -webkit-transform: perspective(500) rotate(25deg);
   -o-transform: perspective(500) rotate(25deg);
+  -ms-transform: perspective(500) rotate(25deg);
   transform: perspective(500) rotate(25deg); }
 
 .rotate-with-perspective {
   -moz-transform: perspective(500) rotate(25deg);
   -webkit-transform: perspective(500) rotate(25deg);
   -o-transform: perspective(500) rotate(25deg);
+  -ms-transform: perspective(500) rotate(25deg);
   transform: perspective(500) rotate(25deg); }
 
 .rotate-z {
   -moz-transform: rotate(25deg);
   -webkit-transform: rotate(25deg);
   -o-transform: rotate(25deg);
+  -ms-transform: rotate(25deg);
   transform: rotate(25deg); }
 
 .rotate-z-with-perspective {
   -moz-transform: perspective(500) rotate(25deg);
   -webkit-transform: perspective(500) rotate(25deg);
   -o-transform: perspective(500) rotate(25deg);
+  -ms-transform: perspective(500) rotate(25deg);
   transform: perspective(500) rotate(25deg); }
 
 .rotate-x {
@@ -172,12 +185,14 @@
   -moz-transform: translate(20px, 30%);
   -webkit-transform: translate(20px, 30%);
   -o-transform: translate(20px, 30%);
+  -ms-transform: translate(20px, 30%);
   transform: translate(20px, 30%); }
 
 .translate-with-perspective {
   -moz-transform: perspective(500) translate(20px, 30%);
   -webkit-transform: perspective(500) translate(20px, 30%);
   -o-transform: perspective(500) translate(20px, 30%);
+  -ms-transform: perspective(500) translate(20px, 30%);
   transform: perspective(500) translate(20px, 30%); }
 
 .translate-3d {
@@ -192,6 +207,7 @@
   -moz-transform: translateX(30px);
   -webkit-transform: translateX(30px);
   -o-transform: translateX(30px);
+  -ms-transform: translateX(30px);
   transform: translateX(30px); }
 
 .translate-x-3d {
@@ -202,6 +218,7 @@
   -moz-transform: perspective(500) translateX(30px);
   -webkit-transform: perspective(500) translateX(30px);
   -o-transform: perspective(500) translateX(30px);
+  -ms-transform: perspective(500) translateX(30px);
   transform: perspective(500) translateX(30px); }
 
 .translate-x-3d-with-perspective {
@@ -212,6 +229,7 @@
   -moz-transform: translateY(30px);
   -webkit-transform: translateY(30px);
   -o-transform: translateY(30px);
+  -ms-transform: translateY(30px);
   transform: translateY(30px); }
 
 .translate-y-3d {
@@ -222,6 +240,7 @@
   -moz-transform: perspective(500) translateY(30px);
   -webkit-transform: perspective(500) translateY(30px);
   -o-transform: perspective(500) translateY(30px);
+  -ms-transform: perspective(500) translateY(30px);
   transform: perspective(500) translateY(30px); }
 
 .translate-y-3d-with-perspective {
@@ -248,6 +267,7 @@
   -moz-transform: skew(20deg, 50deg);
   -webkit-transform: skew(20deg, 50deg);
   -o-transform: skew(20deg, 50deg);
+  -ms-transform: skew(20deg, 50deg);
   transform: skew(20deg, 50deg); }
 
 .skew-3d {
@@ -258,6 +278,7 @@
   -moz-transform: skewX(20deg);
   -webkit-transform: skewX(20deg);
   -o-transform: skewX(20deg);
+  -ms-transform: skewX(20deg);
   transform: skewX(20deg); }
 
 .skew-x-3d {
@@ -268,6 +289,7 @@
   -moz-transform: skewY(20deg);
   -webkit-transform: skewY(20deg);
   -o-transform: skewY(20deg);
+  -ms-transform: skewY(20deg);
   transform: skewY(20deg); }
 
 .skew-y-3d {
@@ -278,28 +300,34 @@
   -moz-transform: perspective(500) scale(20px, 20px) rotateX(25deg) rotateY(25deg) rotate3d(false 50px) translateX(50px) translateZ(50deg) skew(50deg, 50%);
   -webkit-transform: perspective(500) scale(20px, 20px) rotateX(25deg) rotateY(25deg) rotate3d(false 50px) translateX(50px) translateZ(50deg) skew(50deg, 50%);
   -o-transform: perspective(500) scale(20px, 20px) rotateX(25deg) rotateY(25deg) rotate3d(false 50px) translateX(50px) translateZ(50deg) skew(50deg, 50%);
+  -ms-transform: perspective(500) scale(20px, 20px) rotateX(25deg) rotateY(25deg) rotate3d(false 50px) translateX(50px) translateZ(50deg) skew(50deg, 50%);
   transform: perspective(500) scale(20px, 20px) rotateX(25deg) rotateY(25deg) rotate3d(false 50px) translateX(50px) translateZ(50deg) skew(50deg, 50%);
   -moz-transform-origin: 50%;
   -webkit-transform-origin: 50%;
   -o-transform-origin: 50%;
+  -ms-transform-origin: 50%;
   transform-origin: 50%; }
 
 .create-transform-3d {
   -moz-transform: perspective(500) scale3d(20px, 20px, 20px) rotateX(25deg) rotateY(25deg) rotateZ(25deg) rotate3d(false 50px) translate3d(50px, 50px, 50deg) skew(50deg, 50%);
   -webkit-transform: perspective(500) scale3d(20px, 20px, 20px) rotateX(25deg) rotateY(25deg) rotateZ(25deg) rotate3d(false 50px) translate3d(50px, 50px, 50deg) skew(50deg, 50%);
   -o-transform: perspective(500) scale3d(20px, 20px, 20px) rotateX(25deg) rotateY(25deg) rotateZ(25deg) rotate3d(false 50px) translate3d(50px, 50px, 50deg) skew(50deg, 50%);
+  -ms-transform: perspective(500) scale3d(20px, 20px, 20px) rotateX(25deg) rotateY(25deg) rotateZ(25deg) rotate3d(false 50px) translate3d(50px, 50px, 50deg) skew(50deg, 50%);
   transform: perspective(500) scale3d(20px, 20px, 20px) rotateX(25deg) rotateY(25deg) rotateZ(25deg) rotate3d(false 50px) translate3d(50px, 50px, 50deg) skew(50deg, 50%);
   -moz-transform-origin: 50% 50%;
   -webkit-transform-origin: 50% 50%;
   -o-transform-origin: 50% 50%;
+  -ms-transform-origin: 50% 50%;
   transform-origin: 50% 50%; }
 
 .simple-transform {
   -moz-transform:  scale(25px, 25px) rotateZ(25deg) translate(10px, 10px) skew(30deg, 30deg);
   -webkit-transform:  scale(25px, 25px) rotateZ(25deg) translate(10px, 10px) skew(30deg, 30deg);
   -o-transform:  scale(25px, 25px) rotateZ(25deg) translate(10px, 10px) skew(30deg, 30deg);
+  -ms-transform:  scale(25px, 25px) rotateZ(25deg) translate(10px, 10px) skew(30deg, 30deg);
   transform:  scale(25px, 25px) rotateZ(25deg) translate(10px, 10px) skew(30deg, 30deg);
   -moz-transform-origin: 10% 10%;
   -webkit-transform-origin: 10% 10%;
   -o-transform-origin: 10% 10%;
+  -ms-transform-origin: 10% 10%;
   transform-origin: 10% 10%; }

data/test/fixtures/stylesheets/compass/sass/gradients.sass

@@ -1,6 +1,15 @@
 @import compass/css3/images, compass/css3/gradient
 
 $experimental-support-for-svg: true
+.bg-shortcut-simple-image
+  +background(#fff url('foo.png'))
+
+.bg-shortcut-linear-gradient
+  +background(#fff linear-gradient(top left, #ddd, #aaa))
+
+.bg-shortcut-radial-gradient
+  +background(#fff radial-gradient(center center, #ddd, #aaa 100px))
+
 .bg-simple-image
   +background-image(url('foo.png'))
 

data/test/fixtures/stylesheets/image_urls/css/screen.css

@@ -1,3 +1,5 @@
 .showgrid { background-image: url('http://assets0.example.com/images/grid.png?busted=true'); }
 
 .inlinegrid { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUEAYAAACv1qP4AAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAAZ0lEQVRYw+3QwQ2AIBAFUTEUwI3+uzN7gDscsIgxEuO8An52J11X73OudfxMraXkzHfO3Y98nQEhA0IGhAwIGRAyIGRAyICQASEDQgaEDAgZEDIgZEDIgJABoZzSGK3tPuN9ERFP7Nw4fg+c5g8V1wAAAABJRU5ErkJggg=='); }
+
+.no-buster { background-image: url('http://assets0.example.com/images/grid.png'); }

data/test/fixtures/stylesheets/image_urls/sass/screen.sass

@@ -3,3 +3,6 @@
 
 .inlinegrid
   background-image: inline-image(unquote("grid.png"))
+
+.no-buster
+  background-image: image-url("grid.png", $only-path: false, $cache-buster: false)

data/test/fixtures/stylesheets/valid/config.rb

@@ -0,0 +1,9 @@
+# Require any additional compass plugins here.
+css_dir = "tmp"
+sass_dir = "sass"
+images_dir = "assets/images"
+javascripts_dir = "assets/javascripts"
+# Set this to the root of your project when deployed:
+http_path = "/"
+# To enable relative paths to assets via compass helper functions. Uncomment:
+relative_assets = true