compass 0.12.2 → 0.13.alpha.4

data/README.markdown

@@ -1,8 +1,8 @@
 # Compass Stylesheet Authoring Framework
 
-Build Status: ![Build Status](https://secure.travis-ci.org/chriseppstein/compass.png)
+Build Status: [![Build Status](https://travis-ci.org/chriseppstein/compass.png)](https://travis-ci.org/chriseppstein/compass)
 
-Code Quality: [![Code Climate](https://codeclimate.com/badge.png)](https://codeclimate.com/github/chriseppstein/compass)
+Code Quality: [![Code Climate](https://codeclimate.com/github/chriseppstein/compass.png)](https://codeclimate.com/github/chriseppstein/compass)
 
 ## Resources
 
@@ -11,8 +11,8 @@ Code Quality: [![Code Climate](https://codeclimate.com/badge.png)](https://codec
 * [Compass Reference](http://compass-style.org/install/reference/)
 
 ## Author
-Compass is written by [Chris Eppstein][chris_eppstein].<br>
-Chris is the Software Architect of [Caring.com][caring.com] and a member of the [Sass][sass] core team.
+Compass is written by [Chris Eppstein](http://chriseppstein.github.com/).<br>
+Chris is the Software Architect of [Caring.com](http://caring.com) and a member of the [Sass](https://github.com/nex3/sass) core team.
 
 ## Core Team Members
 
@@ -28,4 +28,4 @@ Chris is the Software Architect of [Caring.com][caring.com] and a member of the
 ## License
 Copyright (c) 2008-2009 Christopher M. Eppstein<br>
 All Rights Reserved.<br>
-Released under a [slightly modified MIT License][license].
+Released under a [slightly modified MIT License](compass/blob/stable/LICENSE.markdown).

data/Rakefile

@@ -21,12 +21,12 @@ require 'rake/testtask'
 require 'fileutils'
 
 begin
-require 'cucumber'
-require 'cucumber/rake/task'
+  require 'cucumber'
+  require 'cucumber/rake/task'
 
-Cucumber::Rake::Task.new(:features) do |t|
-  t.cucumber_opts = "features --format progress"
-end
+  Cucumber::Rake::Task.new(:features) do |t|
+    #t.cucumber_opts = %w{--format progress}
+  end
 rescue LoadError
   $stderr.puts "cannot load cucumber"
 end
@@ -39,10 +39,6 @@ Rake::TestTask.new :test do |t|
   t.test_files = test_files
   t.verbose = true
 end
-Rake::Task[:test].send(:add_comment, <<END)
-To run with an alternate version of Rails, make test/rails a symlink to that version.
-To run with an alternate version of Haml & Sass, make test/haml a symlink to that version.
-END
 
 Rake::TestTask.new :units do |t|
   t.libs << 'lib'
@@ -53,6 +49,15 @@ Rake::TestTask.new :units do |t|
   t.verbose = true
 end
 
+Rake::TestTask.new :integrations do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  test_files = FileList['test/integrations/**/*_test.rb']
+  test_files.exclude('test/rails/*', 'test/haml/*')
+  t.test_files = test_files
+  t.verbose = true
+end
+
 
 desc "Compile Examples into HTML and CSS"
 task :examples do

data/VERSION.yml

@@ -1,5 +1,6 @@
---- 
+---
 :major: 0
-:minor: 12
-:build: 2
-:name: Alnilam
+:minor: 13
+:state: alpha
+:iteration: 4
+:name: Markab

data/features/command_line.feature

@@ -17,30 +17,13 @@ Feature: Command Line
     And I am told how to link to /stylesheets/print.css for media "print"
     And I am told how to conditionally link "IE" to /stylesheets/ie.css for media "screen, projection"
 
-  Scenario: Install a project with blueprint
-    When I create a project using: compass create bp_project --using blueprint
-    Then a directory bp_project/ is created
-    And a configuration file bp_project/config.rb is created
-    And a sass file bp_project/sass/screen.scss is created
-    And a sass file bp_project/sass/print.scss is created
-    And a sass file bp_project/sass/ie.scss is created
-    And a css file bp_project/stylesheets/screen.css is created
-    And a css file bp_project/stylesheets/print.css is created
-    And a css file bp_project/stylesheets/ie.css is created
-    And an image file bp_project/images/grid.png is created
-    And I am told how to link to /stylesheets/screen.css for media "screen, projection"
-    And I am told how to link to /stylesheets/print.css for media "print"
-    And I am told how to conditionally link "lt IE 8" to /stylesheets/ie.css for media "screen, projection"
-
   Scenario: Install a project with specific directories
-    When I create a project using: compass create custom_project --using blueprint --sass-dir sass --css-dir css --images-dir assets/imgs
+    When I create a project using: compass create custom_project --using compass --sass-dir sass --css-dir css --images-dir assets/imgs
     Then a directory custom_project/ is created
     And a directory custom_project/sass/ is created
     And a directory custom_project/css/ is created
-    And a directory custom_project/assets/imgs/ is created
     And a sass file custom_project/sass/screen.scss is created
     And a css file custom_project/css/screen.css is created
-    And an image file custom_project/assets/imgs/grid.png is created
 
   Scenario: Perform a dry run of creating a project
     When I create a project using: compass create my_project --dry-run
@@ -126,7 +109,7 @@ Feature: Command Line
   Scenario: Re-compiling a specific file in a project with no changes
     Given I am using the existing project in test/fixtures/stylesheets/compass
     When I run: compass compile
-    And I run: compass compile sass/utilities.scss
+    And I run: compass compile sass/utilities.scss --force
     Then a sass file sass/layout.sass is not mentioned
     And a sass file sass/print.sass is not mentioned
     And a sass file sass/reset.sass is not mentioned
@@ -134,12 +117,8 @@ Feature: Command Line
 
   Scenario: Installing a pattern into a project
     Given I am using the existing project in test/fixtures/stylesheets/compass
-    When I run: compass install blueprint/buttons
-    Then a sass file sass/buttons.scss is created
-    And an image file images/buttons/cross.png is created
-    And an image file images/buttons/key.png is created
-    And an image file images/buttons/tick.png is created
-    And a css file tmp/buttons.css is created
+    When I run: compass install compass/pie
+    Then a sass file sass/pie.scss is created
 
   Scenario: Basic help
     When I run: compass help
@@ -153,7 +132,6 @@ Feature: Command Line
       | config      |
       | extension   |
       | frameworks  |
-      | grid-img    |
       | help        |
       | imports     |
       | install     |
@@ -191,7 +169,7 @@ Feature: Command Line
       | tmp/box_shadow.css          |
       | tmp/columns.css             |
       | tmp/fonts.css               |
-      | images/flag-s4798b5a210.png |
+      | images/flag-s5b4f509715.png |
     And the following files are removed:
       | .sass-cache/                |
       | tmp/border_radius.css       |
@@ -199,7 +177,7 @@ Feature: Command Line
       | tmp/box_shadow.css          |
       | tmp/columns.css             |
       | tmp/fonts.css               |
-      | images/flag-s4798b5a210.png |
+      | images/flag-s5b4f509715.png |
 
   Scenario: Watching a project for changes
     Given ruby supports fork
@@ -210,26 +188,7 @@ Feature: Command Line
     And I touch sass/layout.sass
     And I wait 2 seconds
     And I shutdown the other process
-    Then a css file tmp/layout.css is reported identical
-
-  Scenario: Generating a grid image so that I can debug my grid alignments
-    Given I am using the existing project in test/fixtures/stylesheets/compass
-    When I run: compass grid-img 30+10x24
-    Then a png file images/grid.png is created
-    And the image images/grid.png has a size of 40x24
-
-  Scenario: Generating a grid image to a specified path with custom dimensions
-    Given I am using the existing project in test/fixtures/stylesheets/compass
-    When I run: compass grid-img 50+10x24 assets/wide_grid.png
-    Then a directory assets is created
-    Then a png file assets/wide_grid.png is created
-    And the image assets/wide_grid.png has a size of 60x24
-
-  Scenario: Generating a grid image with invalid dimensions
-    Given I am using the existing project in test/fixtures/stylesheets/compass
-    When I run: compass grid-img 50x24 assets/wide_grid.png
-    Then a directory assets is not created
-    And a png file assets/wide_grid.png is not created
+    Then a css file tmp/layout.css is reported identical\
 
   Scenario: Generate a compass configuration file
     Given I should clean up the directory: config
@@ -266,7 +225,7 @@ Feature: Command Line
   @stats
   Scenario: Get stats for my project
     Given I am using the existing project in test/fixtures/stylesheets/compass
-    When I run: compass stats
+    When I run: bundle exec compass stats
     Then I am told statistics for each file:
       | Filename                  | Rules | Properties |    Mixins Defs | Mixins Used | Filesize | CSS Selectors | CSS Properties | CSS Filesize |
       | sass/border_radius.scss   |   \d+ |        \d+ |            \d+ |         \d+ |  \d+ K?B |           \d+ |            \d+ |      \d+ K?B |
@@ -287,6 +246,5 @@ Feature: Command Line
   Scenario: List frameworks registered with compass
     When I run: compass frameworks
     Then I should see the following lines of output:
-      | blueprint  |
       | compass    |
 

data/features/step_definitions/command_line_steps.rb

@@ -256,11 +256,12 @@ end
 
 Then /^the image ([^ ]+) has a size of (\d+)x(\d+)$/ do |file, width, height| 
   # see http://snippets.dzone.com/posts/show/805
-  IO.read(file)[0x10..0x18].unpack('NN').should == [width.to_i, height.to_i]
+  size = File.open(file, "rb") {|io| io.read}[0x10..0x18].unpack('NN')
+  size.should == [width.to_i, height.to_i]
 end
 
 Then /^I should see the following lines of output:$/ do |table|
-  table.diff!([['blueprint'],['compass']])
+  table.diff!([['compass']])
 end
 
 Then /^I should see the following output: (.+)$/ do |expected|

data/frameworks/compass/stylesheets/compass/_css3.scss

@@ -6,6 +6,7 @@
 @import "css3/columns";
 @import "css3/box-sizing";
 @import "css3/box";
+@import "css3/flexbox";
 @import "css3/images";
 @import "css3/background-clip";
 @import "css3/background-origin";
@@ -14,6 +15,8 @@
 @import "css3/transform";
 @import "css3/transition";
 @import "css3/appearance";
+@import "css3/animation";
 @import "css3/regions";
 @import "css3/hyphenation";
 @import "css3/filter";
+@import "css3/user-interface";

data/frameworks/compass/stylesheets/compass/_support.scss

@@ -17,15 +17,15 @@ $legacy-support-for-ie8: $legacy-support-for-ie !default;
 $legacy-support-for-ie: $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8;
 
 // Whether to output legacy support for mozilla.
-// Usually this means hacks to support Firefox 3.6 or earlier.
-$legacy-support-for-mozilla: true;
+$legacy-support-for-mozilla: true !default;
+
+// Whether to output legacy support for webkit.
+$legacy-support-for-webkit: true !default;
 
 // Support for mozilla in experimental css3 properties (-moz).
 $experimental-support-for-mozilla      : true !default;
 // Support for webkit in experimental css3 properties (-webkit).
 $experimental-support-for-webkit       : true !default;
-// Support for webkit's original (non-standard) gradient syntax.
-$support-for-original-webkit-gradients : true !default;
 // Support for opera in experimental css3 properties (-o).
 $experimental-support-for-opera        : true !default;
 // Support for microsoft in experimental css3 properties (-ms).

data/frameworks/compass/stylesheets/compass/css3/_animation.scss

@@ -0,0 +1,121 @@
+@import "shared";
+
+// @private css3-feature-support variables must always include a list of five boolean values
+// representing in order: -moz, -webkit, -ms, -o, -khtml.
+$animation-support: -moz, -webkit, not -ms, -o, -khtml;
+
+
+// Name of any animation as a string.
+$default-animation-name             : null !default;
+
+// Duration of the entire animation in seconds.
+$default-animation-duration         : null !default;
+
+// Delay for start of animation in seconds.
+$default-animation-delay            : null !default;
+
+// The timing function(s) to be used between keyframes. [ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier($number, $number, $number, $number)]
+$default-animation-timing-function  : null !default;
+
+// The number of times an animation cycle is played. [infinite | $number]
+$default-animation-iteration-count  : null !default;
+
+// Whether or not the animation should play in reverse on alternate cycles. [normal | alternate]
+$default-animation-direction        : null !default;
+
+// What values are applied by the animation outside the time it is executing. [none | forwards | backwards | both]
+$default-animation-fill-mode        : null !default;
+
+// Whether the animation is running or paused. [running | paused]
+$default-animation-play-state       : null !default;
+
+
+// Create a named animation sequence that can be applied to elements later.
+//
+//     $name    - The name of your animation.
+//     @content - The keyframes of the animation.
+@mixin keyframes(
+  $name,
+  $moz      : $experimental-support-for-mozilla,
+  $webkit   : $experimental-support-for-webkit,
+  $o        : $experimental-support-for-opera,
+  $khtml    : $experimental-support-for-khtml,
+  $official : true
+) {
+  @if $moz and nth($animation-support,1) {
+    @include with-only-support-for($moz: true) {
+      @-moz-keyframes #{$name} { @content; }
+    }
+  }
+  @if $webkit and nth($animation-support,2) {
+    @include with-only-support-for($webkit: true) {
+      @-webkit-keyframes #{$name} { @content; }
+    }
+  }
+  @if $o and nth($animation-support,4) {
+    @include with-only-support-for($o: true) {
+      @-o-keyframes #{$name} { @content; }
+    }
+  }
+  @if $khtml and nth($animation-support,5) {
+    @include with-only-support-for($khtml: true) {
+      @-khtml-keyframes #{$name} { @content; }
+    }
+  }
+  @if $official {
+    @include with-only-support-for {
+      @keyframes #{$name} { @content; }
+    }
+  }
+}
+
+
+// Apply any number of animation names.
+@mixin animation-name($name...) {
+  $name: set-arglist-default($name, $default-animation-name);
+  @include experimental(animation-name, $name, $animation-support...); }
+
+// Apply any number of animation durations.
+@mixin animation-duration($duration...) {
+  $duration: set-arglist-default($duration, $default-animation-duration);
+  @include experimental(animation-duration, $duration, $animation-support...); }
+
+// Apply any number of animation delays.
+@mixin animation-delay($delay...) {
+  $delay: set-arglist-default($delay, $default-animation-delay);
+  @include experimental(animation-delay, $delay, $animation-support...); }
+
+// Apply any number of animation timing functions.
+@mixin animation-timing-function($function...) {
+  $function: set-arglist-default($function, $default-animation-timing-function);
+  @include experimental(animation-timing-function, $function, $animation-support...); }
+
+// Apply any number of animation iteration counts.
+@mixin animation-iteration-count($count...) {
+  $count: set-arglist-default($count, $default-animation-iteration-count);
+  @include experimental(animation-iteration-count, $count, $animation-support...); }
+
+// Apply any number of animation directions.
+@mixin animation-direction($direction...) {
+  $direction: set-arglist-default($direction, $default-animation-direction);
+  @include experimental(animation-direction, $direction, $animation-support...); }
+
+// Apply any number of animation fill modes.
+@mixin animation-fill-mode($mode...) {
+  $mode: set-arglist-default($mode, $default-animation-fill-mode);
+  @include experimental(animation-fill-mode, $mode, $animation-support...); }
+
+// Apply any number of animation play states.
+@mixin animation-play-state($state...) {
+  $state: set-arglist-default($state, $default-animation-play-state);
+  @include experimental(animation-play-state, $state, $animation-support...); }
+
+// Shortcut to apply any number of animations to an element, with all the settings.
+//
+//     $animation... : Name and settings. [<values> | default]
+@mixin animation($animation...) {
+  $default: -compass-space-list(compact($default-animation-name $default-animation-duration $default-animation-timing-function $default-animation-delay $default-animation-iteration-count $default-animation-direction $default-animation-fill-mode $default-animation-play-state));
+  $animation: set-arglist-default($animation, $default);
+  @include experimental(animation, $animation, $animation-support...);
+}
+

data/frameworks/compass/stylesheets/compass/css3/_appearance.scss

@@ -1,16 +1,21 @@
+// Appearance
+
 @import "shared";
 
+// @private css3-feature-support variables must always include a list of five boolean values
+// representing in order: -moz, -webkit, -ms, -o, -khtml.
+$appearance-support: -moz, -webkit, not -ms, not -o, not -khtml;
+
+
 // Change the appearance for Mozilla, Webkit and possibly the future.
 // The appearance property is currently not present in any newer CSS specification.
 //
 // There is no official list of accepted values, but you might check these source:
-//   Mozilla : https://developer.mozilla.org/en/CSS/-moz-appearance
-//   Webkit  : http://code.google.com/p/webkit-mirror/source/browse/Source/WebCore/css/CSSValueKeywords.in?spec=svnf1aea559dcd025a8946aa7da6e4e8306f5c1b604&r=63c7d1af44430b314233fea342c3ddb2a052e365
-//   (search for 'appearance' within the page)
-
-@mixin appearance($ap) {
-  $ap: unquote($ap);
-  @include experimental(appearance, $ap,
-    -moz, -webkit, not -o, not -ms, not -khtml, official
-  );
+//
+//   * [Mozilla](https://developer.mozilla.org/en/CSS/-moz-appearance)
+//   * [Webkit](http://code.google.com/p/webkit-mirror/source/browse/Source/WebCore/css/CSSValueKeywords.in?spec=svnf1aea559dcd025a8946aa7da6e4e8306f5c1b604&r=63c7d1af44430b314233fea342c3ddb2a052e365)
+//     (search for 'appearance' within the page)
+@mixin appearance($appearance) {
+  $appearance: unquote($appearance);
+  @include experimental(appearance, $appearance, $appearance-support...);
 }

data/frameworks/compass/stylesheets/compass/css3/_background-clip.scss

@@ -1,43 +1,39 @@
+// Background Clip
+
 @import "shared";
 
-// The default value is `padding-box` -- the box model used by modern browsers.
-//
-// If you wish to do so, you can override the default constant with `border-box`
-//
-// To override to the default border-box model, use this code:
-//     $default-background-clip: border-box
+// @private css3-feature-support variables must always include a list of five boolean values
+// representing in order: -moz, -webkit, -ms, -o, -khtml
+//   - mozilla/webkit legacy support handled seperately below
+$background-clip-support: not -moz, not -webkit, not -ms, not -o, -khtml;
+
 
+// The default border-box model: [border-box | padding-box | content-box]
 $default-background-clip: padding-box !default;
 
-// Clip the background (image and color) at the edge of the padding or border.
-//
-// Legal Values:
-//
-//   * padding-box
-//   * border-box
-//   * text
-
-@mixin background-clip($clip: $default-background-clip) {
-  // webkit and mozilla use the deprecated short [border | padding]
-  $clip: unquote($clip);
-  $deprecated: $clip;
-  @if $clip == padding-box { $deprecated: padding; }
-  @if $clip == border-box { $deprecated: border; }
-  // Support for webkit and mozilla's use of the deprecated short form
-  @include experimental(background-clip, $deprecated,
-    -moz,
-    -webkit,
-    not -o,
-    not -ms,
-    not -khtml,
-    not official
-  );
-  @include experimental(background-clip, $clip,
-    not -moz,
-    not -webkit,
-    not -o,
-    not -ms,
-    -khtml,
-    official
+
+// Clip the background (image and color) at the edge of the padding, border, or content.
+//   $clip... : [padding-box | border-box | content-box]
+@mixin background-clip($clip...) {
+  $output: compact();
+  $deprecated: compact();
+
+  @if (length($clip) > 0) {
+    @each $layer in $clip {
+      $output: append($output, unquote($layer));
+      $deprecated: append($deprecated, legacy-box($layer));
+    }
+  } @else {
+    $output: $default-background-clip;
+    $deprecated: legacy-box($default-background-clip);
+  }
+
+  // Legacy versions of Mozilla support a different syntax, prefixed.
+  @include experimental-only-for(background-clip, $deprecated,
+    $moz: $legacy-support-for-mozilla,
+    $webkit: $legacy-support-for-webkit
   );
+
+  // Official syntax for the rest
+  @include experimental(background-clip, $output, $background-clip-support...);
 }

data/frameworks/compass/stylesheets/compass/css3/_background-origin.scss

@@ -1,42 +1,39 @@
-// Override `$default-background-origin` to change the default.
+// Background Origin
 
 @import "shared";
 
+// @private css3-feature-support variables must always include a list of five boolean values
+// representing in order: -moz, -webkit, -ms, -o, -khtml
+//   - mozilla/webkit legacy support handled seperately below
+$background-origin-support: not -moz, not -webkit, not -ms, not -o, -khtml;
+
+
+// The default background-origin: [border-box | padding-box | content-box]
 $default-background-origin: content-box !default;
 
-// Position the background off the edge of the padding, border or content
-//
-// * Possible values:
-//   * `padding-box`
-//   * `border-box`
-//   * `content-box`
-// * browser defaults to `padding-box`
-// * mixin defaults to `content-box`
-
-
-@mixin background-origin($origin: $default-background-origin) {
-  $origin: unquote($origin);
-  // webkit and mozilla use the deprecated short [border | padding | content]
-  $deprecated: $origin;
-  @if $origin == padding-box { $deprecated: padding; }
-  @if $origin == border-box  { $deprecated: border;  }
-  @if $origin == content-box { $deprecated: content; }
-
-  // Support for webkit and mozilla's use of the deprecated short form
-  @include experimental(background-origin, $deprecated,
-    -moz,
-    -webkit,
-    not -o,
-    not -ms,
-    not -khtml,
-    not official
-  );
-  @include experimental(background-origin, $origin,
-    not -moz,
-    not -webkit,
-    -o,
-    -ms,
-    -khtml,
-    official
+
+// Set the origin of the background (image and color) at the edge of the padding, border, or content.
+//   $origin... : [padding-box | border-box | content-box]
+@mixin background-origin($origin...) {
+  $output: compact();
+  $deprecated: compact();
+
+  @if (length($origin) > 0) {
+    @each $layer in $origin {
+      $output: append($output, unquote($layer));
+      $deprecated: append($deprecated, legacy-box($layer));
+    }
+  } @else {
+    $output: $default-background-origin;
+    $deprecated: legacy-box($default-background-origin);
+  }
+
+  // Legacy versions of Mozilla support a different syntax, prefixed.
+  @include experimental-only-for(background-origin, $deprecated,
+    $moz: $legacy-support-for-mozilla,
+    $webkit: $legacy-support-for-webkit
   );
+
+  // Official syntax for the rest
+  @include experimental(background-origin, $output, $background-origin-support...);
 }

data/frameworks/compass/stylesheets/compass/css3/_background-size.scss

@@ -1,26 +1,23 @@
+// Background Size
+
 @import "shared";
 
+// @private css3-feature-support variables must always include a list of five boolean values
+// representing in order: -moz, -webkit, -ms, -o, -khtml
+//   - mozilla/webkit legacy support handled seperately below
+$background-size-support: -moz, -webkit, not -ms, -o, -khtml;
+
+
 //  override to change the default
 $default-background-size: 100% auto !default;
 
+
 // Set the size of background images using px, width and height, or percentages.
 // Currently supported in: Opera, Gecko, Webkit.
 //
 // * percentages are relative to the background-origin (default = padding-box)
 // * mixin defaults to: `$default-background-size`
-@mixin background-size(
-  $size-1: $default-background-size,
-  $size-2: false,
-  $size-3: false,
-  $size-4: false,
-  $size-5: false,
-  $size-6: false,
-  $size-7: false,
-  $size-8: false,
-  $size-9: false,
-  $size-10: false
-) {
-  $size-1: if(type-of($size-1) == string, unquote($size-1), $size-1);
-  $sizes: compact($size-1, $size-2, $size-3, $size-4, $size-5, $size-6, $size-7, $size-8, $size-9, $size-10);
-  @include experimental(background-size, $sizes, -moz, -webkit, -o, not -ms, not -khtml);
+@mixin background-size($size...) {
+  $size: set-arglist-default($size, $default-background-size);
+  @include experimental(background-size, $size, $background-size-support...);
 }