diff --git a/lib/compass/_css3.scss b/lib/compass/_css3.scss index a0e0241..199d89d 100644 --- a/lib/compass/_css3.scss +++ b/lib/compass/_css3.scss @@ -19,3 +19,4 @@ @import "css3/filter"; @import "css3/pie"; @import "css3/user-interface"; +@import "css3/flexbox"; \ No newline at end of file diff --git a/lib/compass/css3/_flexbox.scss b/lib/compass/css3/_flexbox.scss new file mode 100644 index 0000000..f83f287 --- /dev/null +++ b/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)); +} diff --git a/package.json b/package.json index d7a0fb9..61ae2de 100644 --- a/package.json +++ b/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" } } diff --git a/test/css3/borderRadiusSpec.js b/test/css3/borderRadiusSpec.js index 897413a..fa26504 100644 --- a/test/css3/borderRadiusSpec.js +++ b/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']); }); diff --git a/test/css3/boxShadowSpec.js b/test/css3/boxShadowSpec.js index fef368d..73e6afe 100644 --- a/test/css3/boxShadowSpec.js +++ b/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']); }); diff --git a/test/css3/flexboxSpec.js b/test/css3/flexboxSpec.js new file mode 100644 index 0000000..8736475 --- /dev/null +++ b/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']); +}); diff --git a/test/css3/imagesSpec.js b/test/css3/imagesSpec.js index 3caf745..99ebcb0 100644 --- a/test/css3/imagesSpec.js +++ b/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']); }); diff --git a/test/css3/transitionSpec.js b/test/css3/transitionSpec.js index 31026df..1cef644 100644 --- a/test/css3/transitionSpec.js +++ b/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']); }); diff --git a/test/helper/compare.js b/test/helper/compare.js new file mode 100644 index 0000000..f36273f --- /dev/null +++ b/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); + }); +}; diff --git a/test/helper/property.js b/test/helper/property.js index c7a988d..730566b 100644 --- a/test/helper/property.js +++ b/test/helper/property.js @@ -1,3 +1,3 @@ module.exports = function(prop) { - return 'a{b:'+prop+';}'; + return 'a{b:'+prop+'}'; } diff --git a/test/helper/render.js b/test/helper/render.js index 1f86925..4bff2f9 100644 --- a/test/helper/render.js +++ b/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); } }); -} \ No newline at end of file +}