diff --git a/lib/lost-waffle.js b/lib/lost-waffle.js index a35c6e03..451faec1 100644 --- a/lib/lost-waffle.js +++ b/lib/lost-waffle.js @@ -280,6 +280,7 @@ module.exports = function lostWaffleDecl(css, settings) { cloneAllBefore({ width: lgLogic.calcValue(lostWaffle, lostWaffleGutter, lostWaffleRounder, unit), + 'max-width': lgLogic.calcValue(lostWaffle, lostWaffleGutter, lostWaffleRounder, unit), height: lgLogic.calcValue(lostWaffle, lostWaffleGutter, lostWaffleRounder, unit) }); diff --git a/test/lg-gutter.js b/test/lg-gutter.js index 6b87d29e..55a9ee64 100644 --- a/test/lg-gutter.js +++ b/test/lg-gutter.js @@ -66,7 +66,7 @@ describe('lost-gutter-local', () => { it('works on shortcut lost-waffle', () => { check( 'div { padding: $lost-gutter-local; lost-waffle: 1/3 3 20px;}', - 'div { padding: 20px; width: calc(99.9% * 1/3 - (20px - 20px * 1/3)); height: calc(99.9% * 1/3 - (20px - 20px * 1/3));}\n'+ + 'div { padding: 20px; width: calc(99.9% * 1/3 - (20px - 20px * 1/3)); max-width: calc(99.9% * 1/3 - (20px - 20px * 1/3)); height: calc(99.9% * 1/3 - (20px - 20px * 1/3));}\n'+ 'div:nth-child(1n) { float: left; margin-right: 20px; margin-bottom: 20px; clear: none;}\n' + 'div:last-child { margin-right: 0; margin-bottom: 0;}\n' + 'div:nth-child(3n) { margin-right: 0;}\n' + diff --git a/test/lost-vars.js b/test/lost-vars.js index 954559ab..7872933d 100644 --- a/test/lost-vars.js +++ b/test/lost-vars.js @@ -63,7 +63,7 @@ describe('lost-vars', function() { it('works on shortcut lost-waffle', () => { check( 'div { padding: lost-vars(\'gutter-local\'); lost-waffle: 1/3 3 20px;}', - 'div { padding: 20px; width: calc(99.9% * 1/3 - (20px - 20px * 1/3)); height: calc(99.9% * 1/3 - (20px - 20px * 1/3));}\n'+ + 'div { padding: 20px; width: calc(99.9% * 1/3 - (20px - 20px * 1/3)); max-width: calc(99.9% * 1/3 - (20px - 20px * 1/3)); height: calc(99.9% * 1/3 - (20px - 20px * 1/3));}\n'+ 'div:nth-child(1n) { float: left; margin-right: 20px; margin-bottom: 20px; clear: none;}\n' + 'div:last-child { margin-right: 0; margin-bottom: 0;}\n' + 'div:nth-child(3n) { margin-right: 0;}\n' + diff --git a/test/lost-waffle.js b/test/lost-waffle.js index 8fe75f84..7250943f 100644 --- a/test/lost-waffle.js +++ b/test/lost-waffle.js @@ -8,6 +8,7 @@ describe('lost-waffle', function() { check( 'a { lost-waffle: 1/3; }', 'a { width: calc(99.9% * 1/3 - (30px - 30px * 1/3));' + + ' max-width: calc(99.9% * 1/3 - (30px - 30px * 1/3));\n' + ' height: calc(99.9% * 1/3 - (30px - 30px * 1/3)); }\n' + 'a:nth-child(1n) { float: left; margin-right: 30px;' + ' margin-bottom: 30px; clear: none; }\n' + @@ -22,6 +23,7 @@ describe('lost-waffle', function() { check( 'a { lost-waffle: 2/4 2; }', 'a { width: calc(99.9% * 2/4 - (30px - 30px * 2/4));' + + ' max-width: calc(99.9% * 2/4 - (30px - 30px * 2/4));\n' + ' height: calc(99.9% * 2/4 - (30px - 30px * 2/4)); }\n' + 'a:nth-child(1n) { float: left; margin-right: 30px;' + ' margin-bottom: 30px; clear: none; }\n' + @@ -33,6 +35,7 @@ describe('lost-waffle', function() { check( 'a { lost-waffle: 2/4; lost-waffle-cycle: 2; }', 'a { width: calc(99.9% * 2/4 - (30px - 30px * 2/4));' + + ' max-width: calc(99.9% * 2/4 - (30px - 30px * 2/4));' + ' height: calc(99.9% * 2/4 - (30px - 30px * 2/4)); }\n' + 'a:nth-child(1n) { float: left; margin-right: 30px;' + ' margin-bottom: 30px; clear: none; }\n' + @@ -45,6 +48,7 @@ describe('lost-waffle', function() { '@lost cycle 0;' + 'a { lost-waffle: 2/4; }', 'a { width: calc(99.9% * 2/4 - (30px - 30px * 2/4));' + + ' max-width: calc(99.9% * 2/4 - (30px - 30px * 2/4));' + ' height: calc(99.9% * 2/4 - (30px - 30px * 2/4)); }' + 'a:nth-child(1n) { float: left; margin-right: 30px;' + ' margin-bottom: 30px; clear: none; }' + @@ -53,7 +57,8 @@ describe('lost-waffle', function() { check( 'a { lost-waffle: 2/4 0 0 flex; }', 'a { flex-grow: 0; flex-shrink: 0; flex-basis: calc(99.9% * 2/4);' + - 'width: calc(99.9% * 2/4); height: calc(99.9% * 2/4) }' + + 'width: calc(99.9% * 2/4); max-width: calc(99.9% * 2/4); '+ + 'height: calc(99.9% * 2/4)}' + 'a:nth-child(1n) { margin-right: 0; margin-bottom: 0; margin-left:0; }' + 'a:last-child { margin-right: 0; margin-bottom: 0;}' ); @@ -63,6 +68,7 @@ describe('lost-waffle', function() { check( 'a { lost-waffle: 3/6 2 60px; }', 'a { width: calc(99.9% * 3/6 - (60px - 60px * 3/6));' + + 'max-width: calc(99.9% * 3/6 - (60px - 60px * 3/6));'+ ' height: calc(99.9% * 3/6 - (60px - 60px * 3/6)); }\n' + 'a:nth-child(1n) { float: left; margin-right: 60px;' + ' margin-bottom: 60px; clear: none; }\n' + @@ -74,6 +80,7 @@ describe('lost-waffle', function() { check( 'a { lost-waffle: 3/6 2; lost-waffle-gutter: 60px; }', 'a { width: calc(99.9% * 3/6 - (60px - 60px * 3/6));' + + ' max-width: calc(99.9% * 3/6 - (60px - 60px * 3/6));' + ' height: calc(99.9% * 3/6 - (60px - 60px * 3/6)); }\n' + 'a:nth-child(1n) { float: left; margin-right: 60px;' + ' margin-bottom: 60px; clear: none; }\n' + @@ -89,6 +96,7 @@ describe('lost-waffle', function() { '@lost clearing left; \n' + 'a { lost-waffle: 1/3; }', 'a { width: calc(99.9% * 1/3 - (30px - 30px * 1/3));' + + ' max-width: calc(99.9% * 1/3 - (30px - 30px * 1/3));' + ' height: calc(99.9% * 1/3 - (30px - 30px * 1/3)); }\n' + 'a:nth-child(1n) { float: left; margin-right: 30px;' + ' margin-bottom: 30px; clear: none; }\n' + @@ -104,7 +112,8 @@ describe('lost-waffle', function() { 'a { lost-waffle: 2/5 3 0 flex; }', 'a { flex-grow: 0; flex-shrink: 0; ' + 'flex-basis: calc(99.9% * 2/5); ' + - 'width: calc(99.9% * 2/5); height: calc(99.9% * 2/5); }\n' + + 'width: calc(99.9% * 2/5); max-width: calc(99.9% * 2/5);' + + 'height: calc(99.9% * 2/5); }'+ 'a:nth-child(1n) { ' + 'margin-right: 0; margin-bottom: 0; margin-left: 0; }\n' + 'a:last-child { margin-right: 0; margin-bottom: 0; }\n' + @@ -116,6 +125,7 @@ describe('lost-waffle', function() { 'a { flex-grow: 0; flex-shrink: 0;' + 'flex-basis: calc(99.9% * 2/5 - (30px - 30px * 2/5));' + 'width: calc(99.9% * 2/5 - (30px - 30px * 2/5));' + + 'max-width: calc(99.9% * 2/5 - (30px - 30px * 2/5));' + 'height: calc(99.9% * 2/5 - (30px - 30px * 2/5)) }' + 'a:nth-child(1n) { margin-right: 30px; margin-bottom: 30px; margin-left:0; }' + 'a:last-child{ margin-right: 0; margin-bottom: 0;}' + @@ -132,7 +142,8 @@ describe('lost-waffle', function() { check( 'a { lost-waffle: 2/5 3 0 no-flex; }', - 'a { width: calc(99.9% * 2/5); height: calc(99.9% * 2/5); }\n' + + 'a { width: calc(99.9% * 2/5); max-width: calc(99.9% * 2/5); ' + + 'height: calc(99.9% * 2/5); }' + 'a:nth-child(1n) { float: left; margin-right: 0; margin-bottom: 0; clear: none; }\n' + 'a:last-child { margin-right: 0; margin-bottom: 0; }\n' + 'a:nth-child(3n) { margin-right: 0; }\n' + @@ -145,7 +156,8 @@ describe('lost-waffle', function() { check( 'a { lost-waffle: 2/5 3 0 no-flex float-right; }', - 'a { width: calc(99.9% * 2/5); height: calc(99.9% * 2/5); }\n' + + 'a { width: calc(99.9% * 2/5); max-width: calc(99.9% * 2/5); ' + + 'height: calc(99.9% * 2/5); }' + 'a:nth-child(1n) { float: left; margin-right: 0; margin-bottom: 0; clear: none; }\n' + 'a:last-child { margin-right: 0; margin-bottom: 0; }\n' + 'a:nth-child(3n) { margin-right: 0; float: right; }\n' + @@ -157,7 +169,8 @@ describe('lost-waffle', function() { it('Supports custom unit', function() { check( 'a { lost-waffle: 2/5 3 0 no-flex float-right; lost-unit: vw; }', - 'a { width: calc(99.9vw * 2/5); height: calc(99.9vw * 2/5); }\n' + + 'a { width: calc(99.9vw * 2/5); max-width: calc(99.9vw * 2/5);' + + 'height: calc(99.9vw * 2/5); }\n' + 'a:nth-child(1n) { float: left; margin-right: 0; margin-bottom: 0; clear: none; }\n' + 'a:last-child { margin-right: 0; margin-bottom: 0; }\n' + 'a:nth-child(3n) { margin-right: 0; float: right; }\n' + @@ -175,7 +188,8 @@ describe('lost-waffle', function() { check( 'a { lost-waffle: 2/5 3 0 no-flex; lost-waffle-rounder: 100; }', - 'a { width: calc(100% * 2/5); height: calc(100% * 2/5); }\n' + + 'a { width: calc(100% * 2/5); max-width: calc(100% * 2/5);' + + ' height: calc(100% * 2/5); }\n' + 'a:nth-child(1n) { float: left; margin-right: 0; margin-bottom: 0; clear: none; }\n' + 'a:last-child { margin-right: 0; margin-bottom: 0; }\n' + 'a:nth-child(3n) { margin-right: 0; }\n' + @@ -188,7 +202,7 @@ describe('lost-waffle', function() { check( 'a { lost-waffle: 2/5 3 0 no-flex; lost-waffle-rounder: 99.99999999999; }', - 'a { width: calc(99.99999999999% * 2/5); height: calc(99.99999999999% * 2/5); }\n' + + 'a { width: calc(99.99999999999% * 2/5); max-width: calc(99.99999999999% * 2/5); height: calc(99.99999999999% * 2/5); }\n' + 'a:nth-child(1n) { float: left; margin-right: 0; margin-bottom: 0; clear: none; }\n' + 'a:last-child { margin-right: 0; margin-bottom: 0; }\n' + 'a:nth-child(3n) { margin-right: 0; }\n' + @@ -203,7 +217,8 @@ describe('lost-waffle', function() { check( '@lost --beta-direction rtl;\n'+ 'div { lost-waffle: 1/3; }', - 'div { width: calc(99.9% * 1/3 - (30px - 30px * 1/3)); height: calc(99.9% * 1/3 - (30px - 30px * 1/3)); }\n' + + 'div { width: calc(99.9% * 1/3 - (30px - 30px * 1/3));' + + ' max-width: calc(99.9% * 1/3 - (30px - 30px * 1/3)); height: calc(99.9% * 1/3 - (30px - 30px * 1/3)); }\n' + 'div:nth-child(1n) { float: right; margin-left: 30px; margin-bottom: 30px; clear: none; }\n' + 'div:last-child { margin-left: 0; margin-bottom: 0; }\n' + 'div:nth-child(3n) { margin-left: 0; }\n' + @@ -216,6 +231,7 @@ describe('lost-waffle', function() { 'div { flex-grow: 0; flex-shrink: 0; ' + 'flex-basis: calc(99.9% * 1/3 - (30px - 30px * 1/3));' + 'width: calc(99.9% * 1/3 - (30px - 30px * 1/3));' + + 'max-width: calc(99.9% * 1/3 - (30px - 30px * 1/3));' + 'height: calc(99.9% * 1/3 - (30px - 30px * 1/3)) }' + 'div:nth-child(1n) { margin-left: 30px; margin-bottom: 30px; margin-right: 0; }' + 'div:last-child{ margin-left: 0; margin-bottom: 0; }' +