Merge branch 'wyattanderson-flexbox'

lib/compass/_css3.scss

@@ -19,3 +19,4 @@
 @import "css3/filter";
 @import "css3/pie";
 @import "css3/user-interface";
+@import "css3/flexbox";

lib/compass/css3/_flexbox.scss

@@ -0,0 +1,86 @@
+@import "../support";
+@import "shared";
+
+// This is the underlying implementation for all the other mixins in this module.
+// It is the only way to access prefix support for older versions of the spec.
+// Deviates from canonical Compass implementation by dropping support for
+// older versions of the Flexbox spec.
+//
+// `$properties`: map of property-value pairs that should be prefixed
+@mixin flexbox($properties) {
+  @each $prop, $value in $properties {
+    @if $prop == display {
+      @include experimental-value(display, $value, not(-moz), -webkit,
+                                  not(-o), not(-ms), not(-khtml), official);
+    } @else {
+      @include experimental($prop, $value, not(-moz), -webkit, not(-o),
+                            not(-ms), not(-khtml), official);
+    }
+  }
+}
+
+// Values for $display are: flex (default), inline-flex
+@mixin display-flex($display: flex) {
+  @include flexbox((display: $display));
+}
+
+// Values: row | row-reverse | column | column-reverse
+@mixin flex-direction($direction) {
+  @include flexbox((flex-direction: $direction));
+}
+
+// Values: nowrap | wrap | wrap-reverse
+@mixin flex-wrap($wrap) {
+  @include flexbox((flex-wrap: $wrap));
+}
+
+// Shorthand for flex-direction and flex-wrap.
+@mixin flex-flow($flow) {
+  @include flexbox((flex-flow: $flow));
+}
+
+// Accepts an integer
+@mixin order($order) {
+  @include flexbox((order: $order));
+}
+
+// Shorthand for flex-grow, flex-shrink and optionally flex-basis.
+// Space separated, in that order.
+@mixin flex($flex) {
+  @include flexbox((flex: $flex));
+}
+
+// Accepts a number.
+@mixin flex-grow($flex-grow) {
+  @include flexbox((flex-grow: $flex-grow));
+}
+
+// Accepts a number.
+@mixin flex-shrink($flex-shrink) {
+  @include flexbox((flex-shrink: $flex-shrink));
+}
+
+// Accepts any legal value for the width property.
+@mixin flex-basis($flex-basis) {
+  @include flexbox((flex-basis: $flex-basis));
+}
+
+// Legal values: flex-start | flex-end | center | space-between | space-around
+@mixin justify-content($justify-content) {
+  @include flexbox((justify-content: $justify-content));
+}
+
+// Legal values: flex-start | flex-end | center | baseline | stretch
+@mixin align-items($align-items) {
+  @include flexbox((align-items: $align-items));
+}
+
+// Legal values: auto | flex-start | flex-end | center | baseline | stretch
+@mixin align-self($align-self) {
+  @include flexbox((align-self: $align-self));
+}
+
+// Legal values: flex-start | flex-end | center | space-between | space-around | stretch
+@mixin align-content($align-content) {
+  @include flexbox((align-content: $align-content));
+}

package.json

@@ -38,6 +38,6 @@
   "devDependencies": {
     "chalk": "^0.5.1",
     "jasmine-node": "^1.14.5",
-    "node-sass": "^0.9.3"
+    "node-sass": "^2.0.0-beta"
   }
 }

test/css3/borderRadiusSpec.js

@@ -4,8 +4,8 @@ var ruleset = require('../helper/ruleset');
 describe("CSS3 Border Radius", function () {
 
   it("should generate a border radius", function (done) {
-    render(ruleset('$experimental-support-for-mozilla: false; $experimental-support-for-opera: false; @include border-radius(0, 0);'), function(output, err) {
-      expect(output).toBe(ruleset('-webkit-border-radius:0 0;border-radius:0 / 0;'));
+    render(ruleset('$experimental-support-for-mozilla: false; $experimental-support-for-opera: false; @include border-radius(0, 0)'), function(output, err) {
+      expect(output).toBe(ruleset('-webkit-border-radius:0 0;border-radius:0 / 0'));
       done();
     }, ['compass/css3/border-radius']);
   });

test/css3/boxShadowSpec.js

@@ -4,8 +4,8 @@ var ruleset = require('../helper/ruleset');
 describe("CSS3 Box Shadow", function () {
 
   it("should generate a default box shadow", function (done) {
-    render(ruleset('$default-box-shadow-inset: inset; $default-box-shadow-h-offset: 23px; $default-box-shadow-v-offset: 24px; $default-box-shadow-blur: 17px; $default-box-shadow-spread: 15px; $default-box-shadow-color: #DEADBE; $experimental-support-for-mozilla: false; $experimental-support-for-opera: false; @include box-shadow;'), function(output, err) {
-      expect(output).toBe(ruleset('-webkit-box-shadow:inset 23px 24px 17px 15px #DEADBE;box-shadow:inset 23px 24px 17px 15px #DEADBE;'));
+    render(ruleset('$default-box-shadow-inset: inset; $default-box-shadow-h-offset: 23px; $default-box-shadow-v-offset: 24px; $default-box-shadow-blur: 17px; $default-box-shadow-spread: 15px; $default-box-shadow-color: #DEADBE; $experimental-support-for-mozilla: false; $experimental-support-for-opera: false; @include box-shadow'), function(output, err) {
+      expect(output).toBe(ruleset('-webkit-box-shadow:inset 23px 24px 17px 15px #DEADBE;box-shadow:inset 23px 24px 17px 15px #DEADBE'));
       done();
     }, ['compass/css3/box-shadow']);
   });

test/css3/flexboxSpec.js

@@ -0,0 +1,13 @@
+var compareIt = require('../helper/compare');
+
+describe("Flexbox", function() {
+  var flexShould = function(spec, ruleset, output) {
+    return compareIt("should " + spec, ruleset, output,
+                     ['compass/css3/flexbox']);
+  };
+
+  compareIt("should output all flexbox properties",
+            "@include flexbox(( display: flex, flex-direction: row-reverse, flex-wrap: wrap-reverse, flex-flow: row-reverse wrap-reverse, order: 1, flex: 1 0 auto, flex-grow: 1, flex-shrink: 0, flex-basis: auto, justify-content: flex-start, align-items: flex-start, align-self: flex-start, align-content: flex-start));",
+            "display:-webkit-flex;display:flex;-webkit-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse;-webkit-flex-flow:row-reverse wrap-reverse;flex-flow:row-reverse wrap-reverse;-webkit-order:1;order:1;-webkit-flex:1 0 auto;flex:1 0 auto;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-shrink:0;flex-shrink:0;-webkit-flex-basis:auto;flex-basis:auto;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:flex-start;align-items:flex-start;-webkit-align-self:flex-start;align-self:flex-start;-webkit-align-content:flex-start;align-content:flex-start",
+            ['compass/css3/flexbox']);
+});

test/css3/imagesSpec.js

@@ -5,21 +5,21 @@ describe("CSS3 Images", function () {
 
   it("should generate a background", function (done) {
     render(ruleset('@include background(ok);'), function(output, err) {
-      expect(output).toBe(ruleset('background:-owg-ok;background:-webkit-ok;background:-moz-ok;background:-o-ok;background:ok;'));
+      expect(output).toBe(ruleset('background:-owg-ok;background:-webkit-ok;background:-moz-ok;background:-o-ok;background:ok'));
       done();
     }, ['compass/css3/images']);
   });
 
   it("should generate multiple backgrounds", function (done) {
-    render(ruleset('$support-for-original-webkit-gradients: false; $experimental-support-for-mozilla: false; $experimental-support-for-opera: false; @include background(a, b, c);'), function(output, err) {
-      expect(output).toBe(ruleset('background:-webkit-a,-webkit-b,-webkit-c;background:a,b,c;'));
+    render(ruleset('$support-for-original-webkit-gradients: false; $experimental-support-for-mozilla: false; $experimental-support-for-opera: false; @include background(a, b, c)'), function(output, err) {
+      expect(output).toBe(ruleset('background:-webkit-a,-webkit-b,-webkit-c;background:a,b,c'));
       done();
     }, ['compass/css3/images']);
   });
 
   it("should generate multiple backgrounds of different types", function (done) {
-    render(ruleset('$support-for-original-webkit-gradients: false; $experimental-support-for-mozilla: false; $experimental-support-for-opera: false; @include background(#fff, url(1.gif), linear-gradient(white, black));'), function(output, err) {
-      expect(output).toBe(ruleset('background:#fff,url(1.gif),-webkit-linear-gradient(#ffffff, #000000);background:#fff,url(1.gif),linear-gradient(#ffffff, #000000);'));
+    render(ruleset('$support-for-original-webkit-gradients: false; $experimental-support-for-mozilla: false; $experimental-support-for-opera: false; @include background(#fff, url(1.gif), linear-gradient(white, black))'), function(output, err) {
+      expect(output).toBe(ruleset('background:#fff,url(1.gif),-webkit-linear-gradient(white, black);background:#fff,url(1.gif),linear-gradient(white, black)'));
       done();
     }, ['compass/css3/images']);
   });

test/css3/transitionSpec.js

@@ -5,7 +5,7 @@ describe("CSS3 Transition", function () {
 
   it("should generate a transition", function (done) {
     render(ruleset('$experimental-support-for-mozilla: false; $experimental-support-for-opera: false; @include transition(ok 0s);'), function(output, err) {
-      expect(output).toBe(ruleset('-webkit-transition:ok 0s;transition:ok 0s;'));
+      expect(output).toBe(ruleset('-webkit-transition:ok 0s;transition:ok 0s'));
       done();
     }, ['compass/css3/transition']);
   });

test/helper/compare.js

@@ -0,0 +1,11 @@
+var render = require('../helper/render');
+var ruleset = require('../helper/ruleset');
+
+module.exports = function(spec, inputRuleset, expectedOutput, imports) {
+  return it(spec, function (done) {
+    render(ruleset(inputRuleset), function(output, err) {
+      expect(output).toBe(ruleset(expectedOutput));
+      done();
+    }, imports);
+  });
+};

test/helper/property.js

@@ -1,3 +1,3 @@
 module.exports = function(prop) {
-  return 'a{b:'+prop+';}';
+  return 'a{b:'+prop+'}';
 }

test/helper/render.js

@@ -9,11 +9,11 @@ module.exports = function(data, callback, imports) {
     data: '@import "'+libDir+'/compass/functions";' + imports.join('') + data,
     outputStyle: 'compressed',
     success: function(output){
-      callback(output);
+      callback(output.css);
     },
     error: function(err){
       console.log(chalk.red("Sass error:"), err);
       callback('', err);
     }
   });
-}
+}