From 8075c8eedcdebc5fbccffab5a3e159377a7e5ea5 Mon Sep 17 00:00:00 2001 From: Wyatt Anderson Date: Thu, 5 Feb 2015 19:44:14 +0000 Subject: [PATCH 1/3] Flexbox --- lib/compass/css3/_flexbox.scss | 86 ++++++++++++++++++++++++++++++++++ test/css3/flexboxSpec.js | 13 +++++ test/helper/compare.js | 11 +++++ 3 files changed, 110 insertions(+) create mode 100644 lib/compass/css3/_flexbox.scss create mode 100644 test/css3/flexboxSpec.js create mode 100644 test/helper/compare.js 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/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/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); + }); +}; From 613d07b33f5e3febf0b89b520f78b9c8bf91e163 Mon Sep 17 00:00:00 2001 From: Wyatt Anderson Date: Thu, 5 Feb 2015 19:45:16 +0000 Subject: [PATCH 2/3] Update for compatibility with latest node-sass --- package.json | 2 +- test/css3/borderRadiusSpec.js | 4 ++-- test/css3/boxShadowSpec.js | 4 ++-- test/css3/imagesSpec.js | 10 +++++----- test/css3/transitionSpec.js | 2 +- test/helper/property.js | 2 +- test/helper/render.js | 4 ++-- 7 files changed, 14 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index 60411ae..6b382de 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/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/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 +} From 9b5ce4a04efef34a83d5f4bd394dd9b3a526e8c2 Mon Sep 17 00:00:00 2001 From: Wyatt Anderson Date: Thu, 5 Feb 2015 20:09:35 +0000 Subject: [PATCH 3/3] Add import to css3 module --- lib/compass/_css3.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/compass/_css3.scss b/lib/compass/_css3.scss index c0c9fcc..af8d2e1 100644 --- a/lib/compass/_css3.scss +++ b/lib/compass/_css3.scss @@ -17,3 +17,4 @@ @import "css3/regions"; @import "css3/hyphenation"; @import "css3/filter"; +@import "css3/flexbox";