From 1cf6e2e912f9bc1c2b109ddbe45573ea3da92d20 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ka=CC=88nel=2C=20Thomas?= Date: Sat, 11 Mar 2017 18:53:31 +0100 Subject: [PATCH 1/5] Add variable for left & right to simplify ltr/rtl block definitions --- lib/lost-column.js | 216 ++++++++++++++------------------------------- lib/lost-waffle.js | 175 ++++++++++++------------------------ 2 files changed, 119 insertions(+), 272 deletions(-) diff --git a/lib/lost-column.js b/lib/lost-column.js index 17a1a3ff..af96026f 100644 --- a/lib/lost-column.js +++ b/lib/lost-column.js @@ -45,6 +45,8 @@ module.exports = function lostColumnDecl(css, settings, result) { var lostColumnGutter = settings.gutter; var lostColumnFlexbox = settings.flexbox; var validUnits = ['%', 'vw']; + var left = (gridDirection === 'ltr') ? 'left' : 'right'; + var right = (gridDirection === 'ltr') ? 'right' : 'left'; if (decl.value !== 'none') { if (settings.cycle === 'auto') { @@ -132,21 +134,12 @@ module.exports = function lostColumnDecl(css, settings, result) { }); if (lostColumnCycle !== 0) { - if (gridDirection === 'rtl') { - newBlock( - decl, - ':nth-child(' + lostColumnCycle + 'n)', - ['margin-left', 'margin-right'], - [0, 'auto'] - ); - } else { - newBlock( - decl, - ':nth-child(' + lostColumnCycle + 'n)', - ['margin-right', 'margin-left'], - [0, 'auto'] - ); - } + newBlock( + decl, + ':nth-child(' + lostColumnCycle + 'n)', + ['margin-' + right, 'margin-' + left], + [0, 'auto'] + ); } decl.cloneBefore({ @@ -154,126 +147,67 @@ module.exports = function lostColumnDecl(css, settings, result) { value: lgLogic.calcValue(lostColumn, lostColumnGutter, lostColumnRounder, unit) }); - if (gridDirection === 'rtl') { - newBlock( - decl, - ':last-child', - ['margin-left'], - [0] - ); - newBlock( - decl, - ':nth-child(1n)', - ['margin-left', 'margin-right'], - [lostColumnGutter, 0] - ); - } else { - newBlock( - decl, - ':last-child', - ['margin-right'], - [0] - ); - newBlock( - decl, - ':nth-child(1n)', - ['margin-right', 'margin-left'], - [lostColumnGutter, 0] - ); - } + newBlock( + decl, + ':last-child', + ['margin-' + right], + [0] + ); + newBlock( + decl, + ':nth-child(1n)', + ['margin-' + right, 'margin-' + left], + [lostColumnGutter, 0] + ); } else { if (lostColumnCycle !== 0) { if (settings.clearing === 'left') { - if (gridDirection === 'rtl') { - newBlock( - decl, - ':nth-child(' + lostColumnCycle + 'n + 1)', - ['clear'], - ['right'] - ); - } else { - newBlock( - decl, - ':nth-child(' + lostColumnCycle + 'n + 1)', - ['clear'], - ['left'] - ); - } - } else { newBlock( decl, ':nth-child(' + lostColumnCycle + 'n + 1)', ['clear'], - ['both'] - ); - } - - if (gridDirection === 'rtl') { - newBlock( - decl, - ':nth-child(' + lostColumnCycle + 'n)', - ['margin-left', 'float'], - [0, 'left'] - ); - } else { - newBlock( - decl, - ':nth-child(' + lostColumnCycle + 'n)', - ['margin-right', 'float'], - [0, 'right'] - ); - } - } else { - if (gridDirection === 'rtl') { - newBlock( - decl, - ':nth-child(' + lostColumnCycle + 'n)', - ['float'], - ['left'] + [left] ); } else { newBlock( decl, - ':nth-child(' + lostColumnCycle + 'n)', - ['float'], - ['right'] + ':nth-child(' + lostColumnCycle + 'n + 1)', + ['clear'], + ['both'] ); } - } - if (gridDirection === 'rtl') { newBlock( decl, - ':last-child', - ['margin-left'], - [0] + ':nth-child(' + lostColumnCycle + 'n)', + ['margin-' + right, 'float'], + [0, right] ); - } else { - newBlock( - decl, - ':last-child', - ['margin-right'], - [0] - ); - } - if (gridDirection === 'rtl') { - newBlock( - decl, - ':nth-child(1n)', - ['float', 'margin-left', 'clear'], - ['right', lostColumnGutter, 'none'] - ); } else { newBlock( decl, - ':nth-child(1n)', - ['float', 'margin-right', 'clear'], - ['left', lostColumnGutter, 'none'] + ':nth-child(' + lostColumnCycle + 'n)', + ['float'], + [right] ); } + newBlock( + decl, + ':last-child', + ['margin-' + right], + [0] + ); + + newBlock( + decl, + ':nth-child(1n)', + ['float', 'margin-' + right, 'clear'], + [left, lostColumnGutter, 'none'] + ); + } decl.cloneBefore({ prop: 'width', @@ -285,49 +219,27 @@ module.exports = function lostColumnDecl(css, settings, result) { value: 'auto' }); - if (gridDirection === 'rtl') { - newBlock( - decl, - ':nth-child(1n + 1)', - ['float', 'clear', 'margin-left', 'width'], - ['none', 'none', 0, 'auto'] - ); + newBlock( + decl, + ':nth-child(1n + 1)', + ['float', 'clear', 'margin-' + right, 'width'], + ['none', 'none', 0, 'auto'] + ); + + newBlock( + decl, + ':nth-child(1n)', + ['float', 'clear', 'margin-' + right, 'width'], + ['none', 'none', 0, 'auto'] + ); + + newBlock( + decl, + ':last-child', + ['float', 'clear', 'margin-' + right, 'width'], + ['none', 'none', 0, 'auto'] + ); - newBlock( - decl, - ':nth-child(1n)', - ['float', 'clear', 'margin-left', 'width'], - ['none', 'none', 0, 'auto'] - ); - - newBlock( - decl, - ':last-child', - ['float', 'clear', 'margin-left', 'width'], - ['none', 'none', 0, 'auto'] - ); - } else { - newBlock( - decl, - ':nth-child(1n + 1)', - ['float', 'clear', 'margin-right', 'width'], - ['none', 'none', 0, 'auto'] - ); - - newBlock( - decl, - ':nth-child(1n)', - ['float', 'clear', 'margin-right', 'width'], - ['none', 'none', 0, 'auto'] - ); - - newBlock( - decl, - ':last-child', - ['float', 'clear', 'margin-right', 'width'], - ['none', 'none', 0, 'auto'] - ); - } } decl.remove(); diff --git a/lib/lost-waffle.js b/lib/lost-waffle.js index c5b80b73..888e6a14 100644 --- a/lib/lost-waffle.js +++ b/lib/lost-waffle.js @@ -47,6 +47,8 @@ module.exports = function lostWaffleDecl(css, settings, result) { var lostWaffleGutter = settings.gutter; var lostWaffleFlexbox = settings.flexbox; var validUnits = ['%', 'vh', 'vw']; + var left = (gridDirection === 'ltr') ? 'left' : 'right'; + var right = (gridDirection === 'ltr') ? 'right' : 'left'; function cloneAllBefore(props) { Object.keys(props).forEach(function traverseProps(prop) { @@ -152,21 +154,12 @@ module.exports = function lostWaffleDecl(css, settings, result) { [0] ); - if (gridDirection === 'rtl') { - newBlock( - decl, - ':nth-child(' + lostWaffleCycle + 'n)', - ['margin-left', 'margin-right'], - [0, 'auto'] - ); - } else { - newBlock( - decl, - ':nth-child(' + lostWaffleCycle + 'n)', - ['margin-right', 'margin-left'], - [0, 'auto'] - ); - } + newBlock( + decl, + ':nth-child(' + lostWaffleCycle + 'n)', + ['margin-' + right, 'margin-' + left], + [0, 'auto'] + ); } decl.cloneBefore({ @@ -174,35 +167,19 @@ module.exports = function lostWaffleDecl(css, settings, result) { value: lgLogic.calcValue(lostWaffle, lostWaffleGutter, lostWaffleRounder) }); - if (gridDirection === 'rtl') { - newBlock( - decl, - ':last-child', - ['margin-left', 'margin-bottom'], - [0, 0] - ); - - newBlock( - decl, - ':nth-child(1n)', - ['margin-left', 'margin-bottom', 'margin-right'], - [lostWaffleGutter, lostWaffleGutter, 0] - ); - } else { - newBlock( - decl, - ':last-child', - ['margin-right', 'margin-bottom'], - [0, 0] - ); - - newBlock( - decl, - ':nth-child(1n)', - ['margin-right', 'margin-bottom', 'margin-left'], - [lostWaffleGutter, lostWaffleGutter, 0] - ); - } + newBlock( + decl, + ':last-child', + ['margin-' + right, 'margin-bottom'], + [0, 0] + ); + + newBlock( + decl, + ':nth-child(1n)', + ['margin-' + right, 'margin-bottom', 'margin-' + left], + [lostWaffleGutter, lostWaffleGutter, 0] + ); } else { if (lostWaffleCycle !== 0) { newBlock( @@ -214,21 +191,12 @@ module.exports = function lostWaffleDecl(css, settings, result) { if (settings.clearing === 'left') { // FIXME: this doesn't make sense w/ rtl - if (gridDirection === 'rtl') { - newBlock( - decl, - ':nth-child(' + lostWaffleCycle + 'n + 1)', - ['clear'], - ['right'] - ); - } else { - newBlock( - decl, - ':nth-child(' + lostWaffleCycle + 'n + 1)', - ['clear'], - ['left'] - ); - } + newBlock( + decl, + ':nth-child(' + lostWaffleCycle + 'n + 1)', + ['clear'], + [left] + ); } else { newBlock( decl, @@ -237,71 +205,38 @@ module.exports = function lostWaffleDecl(css, settings, result) { ['both'] ); } - if (gridDirection === 'rtl') { - // FIXME: this doesn't make sense w/ rtl - if (floatRight === true) { - newBlock( - decl, - ':nth-child(' + lostWaffleCycle + 'n)', - ['margin-left', 'float'], - [0, 'left'] - ); - } else { - newBlock( - decl, - ':nth-child(' + lostWaffleCycle + 'n)', - ['margin-left'], - [0] - ); - } + + // FIXME: this doesn't make sense w/ rtl + if (floatRight === true) { + newBlock( + decl, + ':nth-child(' + lostWaffleCycle + 'n)', + ['margin-' + right, 'float'], + [0, right] + ); } else { - if (floatRight === true) { - newBlock( - decl, - ':nth-child(' + lostWaffleCycle + 'n)', - ['margin-right', 'float'], - [0, 'right'] - ); - } else { - newBlock( - decl, - ':nth-child(' + lostWaffleCycle + 'n)', - ['margin-right'], - [0] - ); - } + newBlock( + decl, + ':nth-child(' + lostWaffleCycle + 'n)', + ['margin-' + right], + [0] + ); } } - if (gridDirection === 'rtl') { - newBlock( - decl, - ':last-child', - ['margin-left', 'margin-bottom'], - [0, 0] - ); - - newBlock( - decl, - ':nth-child(1n)', - ['float', 'margin-left', 'margin-bottom', 'clear'], - ['right', lostWaffleGutter, lostWaffleGutter, 'none'] - ); - } else { - newBlock( - decl, - ':last-child', - ['margin-right', 'margin-bottom'], - [0, 0] - ); - - newBlock( - decl, - ':nth-child(1n)', - ['float', 'margin-right', 'margin-bottom', 'clear'], - ['left', lostWaffleGutter, lostWaffleGutter, 'none'] - ); - } + newBlock( + decl, + ':last-child', + ['margin-' + right, 'margin-bottom'], + [0, 0] + ); + + newBlock( + decl, + ':nth-child(1n)', + ['float', 'margin-' + right, 'margin-bottom', 'clear'], + [left, lostWaffleGutter, lostWaffleGutter, 'none'] + ); } cloneAllBefore({ From b09fddbdc770a496507902fa67c44e63e8507853 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ka=CC=88nel=2C=20Thomas?= Date: Sat, 11 Mar 2017 18:54:03 +0100 Subject: [PATCH 2/5] Cycle should be only everything following the / of the first argument --- lib/lost-column.js | 5 +++-- lib/lost-waffle.js | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/lib/lost-column.js b/lib/lost-column.js index af96026f..8b2bda43 100644 --- a/lib/lost-column.js +++ b/lib/lost-column.js @@ -49,13 +49,14 @@ module.exports = function lostColumnDecl(css, settings, result) { var right = (gridDirection === 'ltr') ? 'right' : 'left'; if (decl.value !== 'none') { + declArr = decl.value.split(' '); + if (settings.cycle === 'auto') { - lostColumnCycle = decl.value.split('/')[1]; + lostColumnCycle = declArr[0].split('/')[1]; } else { lostColumnCycle = settings.cycle; } - declArr = decl.value.split(' '); lostColumn = declArr[0]; if (declArr[1] !== undefined && declArr[1].search(/^\d/) !== -1) { diff --git a/lib/lost-waffle.js b/lib/lost-waffle.js index 888e6a14..6e906ce0 100644 --- a/lib/lost-waffle.js +++ b/lib/lost-waffle.js @@ -59,13 +59,14 @@ module.exports = function lostWaffleDecl(css, settings, result) { }); } + declArr = decl.value.split(' '); + if (settings.cycle === 'auto') { - lostWaffleCycle = decl.value.split('/')[1]; + lostWaffleCycle = declArr[0].split('/')[1]; } else { lostWaffleCycle = settings.cycle; } - declArr = decl.value.split(' '); lostWaffle = declArr[0]; if (declArr[1] !== undefined && declArr[1].search(/^\d/) !== -1) { From 913085eaa32b3e8e6f90b697e50d542616c4aa1c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ka=CC=88nel=2C=20Thomas?= Date: Sat, 11 Mar 2017 18:54:24 +0100 Subject: [PATCH 3/5] Update gridDirection if rtf is defined as an argument on lost-column or --- lib/lost-column.js | 6 ++++++ lib/lost-waffle.js | 6 ++++++ 2 files changed, 12 insertions(+) diff --git a/lib/lost-column.js b/lib/lost-column.js index 8b2bda43..c861a196 100644 --- a/lib/lost-column.js +++ b/lib/lost-column.js @@ -79,6 +79,12 @@ module.exports = function lostColumnDecl(css, settings, result) { lostColumnFlexbox = 'no-flex'; } + if (declArr.indexOf('rtl') !== -1) { + gridDirection = 'rtl'; + left = 'right'; + right = 'left'; + } + decl.parent.nodes.forEach(function lostColumnCycleFunction(declaration) { if (declaration.prop === 'lost-column-cycle') { lostColumnCycle = declaration.value; diff --git a/lib/lost-waffle.js b/lib/lost-waffle.js index 6e906ce0..34a087c3 100644 --- a/lib/lost-waffle.js +++ b/lib/lost-waffle.js @@ -93,6 +93,12 @@ module.exports = function lostWaffleDecl(css, settings, result) { floatRight = true; } + if (declArr.indexOf('rtl') !== -1) { + gridDirection = 'rtl'; + left = 'right'; + right = 'left'; + } + decl.parent.nodes.forEach(function lostWaffleRounderFunction(declaration) { if (declaration.prop === 'lost-waffle-rounder') { lostWaffleRounder = declaration.value; From b1523c08073d3f19a091b20b161152b8c5acb3b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ka=CC=88nel=2C=20Thomas?= Date: Sun, 12 Mar 2017 16:54:52 +0100 Subject: [PATCH 4/5] add/update tests --- test/lost-column.js | 119 +++++++++++++++++++++++++++++++++++++------- test/lost-waffle.js | 84 +++++++++++++++++++++++++++---- 2 files changed, 173 insertions(+), 30 deletions(-) diff --git a/test/lost-column.js b/test/lost-column.js index 66b91602..bc39954b 100644 --- a/test/lost-column.js +++ b/test/lost-column.js @@ -167,25 +167,106 @@ describe('lost-column', function() { }); describe('supports RTL', () => { - it('works with typical column', () => { - check( - `@lost --beta-direction rtl;\n`+ - `a { lost-column: 1/2; }`, - `a { width: calc(99.9% * 1/2 - (30px - 30px * 1/2)); }\n` + - `a:nth-child(1n) { float: right; margin-left: 30px; clear: none; }\n` + - `a:last-child { margin-left: 0; }\n` + - `a:nth-child(2n) { margin-left: 0; float: left; }\n` + - `a:nth-child(2n + 1) { clear: both; }` - ); - check( - `@lost --beta-direction rtl;\n`+ - `a { lost-column: 5/10; }`, - `a { width: calc(99.9% * 5/10 - (30px - 30px * 5/10)); }\n` + - `a:nth-child(1n) { float: right; margin-left: 30px; clear: none; }\n` + - `a:last-child { margin-left: 0; }\n` + - `a:nth-child(10n) { margin-left: 0; float: left; }\n` + - `a:nth-child(10n + 1) { clear: both; }` - ); + describe('when set as a global option', () => { + it('works with typical column', () => { + check( + `@lost --beta-direction rtl;\n`+ + `a { lost-column: 1/2; }`, + `a { width: calc(99.9% * 1/2 - (30px - 30px * 1/2)); }\n` + + `a:nth-child(1n) { float: right; margin-left: 30px; clear: none; }\n` + + `a:last-child { margin-left: 0; }\n` + + `a:nth-child(2n) { margin-left: 0; float: left; }\n` + + `a:nth-child(2n + 1) { clear: both; }` + ); + check( + `@lost --beta-direction rtl;\n`+ + `a { lost-column: 5/10; }`, + `a { width: calc(99.9% * 5/10 - (30px - 30px * 5/10)); }\n` + + `a:nth-child(1n) { float: right; margin-left: 30px; clear: none; }\n` + + `a:last-child { margin-left: 0; }\n` + + `a:nth-child(10n) { margin-left: 0; float: left; }\n` + + `a:nth-child(10n + 1) { clear: both; }` + ); + }); + }); + + describe('when set on a specific element', () => { + it('works with typical column', () => { + check( + `a { lost-column: 1/2 rtl; }`, + + `a { width: calc(99.9% * 1/2 - (30px - 30px * 1/2)); }\n` + + `a:nth-child(1n) { float: right; margin-left: 30px; clear: none; }\n` + + `a:last-child { margin-left: 0; }\n` + + `a:nth-child(2n) { margin-left: 0; float: left; }\n` + + `a:nth-child(2n + 1) { clear: both; }` + ); + check( + `a { lost-column: 5/10 rtl; }`, + + `a { width: calc(99.9% * 5/10 - (30px - 30px * 5/10)); }\n` + + `a:nth-child(1n) { float: right; margin-left: 30px; clear: none; }\n` + + `a:last-child { margin-left: 0; }\n` + + `a:nth-child(10n) { margin-left: 0; float: left; }\n` + + `a:nth-child(10n + 1) { clear: both; }` + ); + }); + + it('provides 3 column layout', function() { + check( + 'a { lost-column: 1/3 rtl; }', + 'a { width: calc(99.9% * 1/3 - (30px - 30px * 1/3)); }\n' + + 'a:nth-child(1n) { float: right; margin-left: 30px; clear: none; }\n' + + 'a:last-child { margin-left: 0; }\n' + + 'a:nth-child(3n) { margin-left: 0; float: left; }\n' + + 'a:nth-child(3n + 1) { clear: both; }' + ); + }); + + it('provides 2/5 column layout', function() { + check( + 'a { lost-column: 2/5 rtl; }', + 'a { width: calc(99.9% * 2/5 - (30px - 30px * 2/5)); }\n' + + 'a:nth-child(1n) { float: right; margin-left: 30px; clear: none; }\n' + + 'a:last-child { margin-left: 0; }\n' + + 'a:nth-child(5n) { margin-left: 0; float: left; }\n' + + 'a:nth-child(5n + 1) { clear: both; }' + ); + }); + + it('can support custom cycle', function() { + check( + 'a { lost-column: 2/4 2 rtl; }', + 'a { width: calc(99.9% * 2/4 - (30px - 30px * 2/4)); }\n' + + 'a:nth-child(1n) { float: right; margin-left: 30px; clear: none; }\n' + + 'a:last-child { margin-left: 0; }\n' + + 'a:nth-child(2n) { margin-left: 0; float: left; }\n' + + 'a:nth-child(2n + 1) { clear: both; }' + ); + }); + + it('supports no gutter', function() { + check( + 'a { lost-column: 2/5 3 0 rtl; }', + 'a { width: calc(99.9% * 2/5); }\n' + + 'a:nth-child(1n) { float: right; margin-left: 0; clear: none; }\n' + + 'a:last-child { margin-left: 0; }\n' + + 'a:nth-child(3n) { margin-left: 0; float: left; }\n' + + 'a:nth-child(3n + 1) { clear: both; }' + ); + }); + + it('supports flexbox', function() { + check( + 'a { lost-column: 2/6 3 60px flex rtl; }', + 'a { flex-grow: 0; flex-shrink: 0; ' + + 'flex-basis: calc(99.9% * 2/6 - (60px - 60px * 2/6)); ' + + 'width: calc(99.9% * 2/6 - (60px - 60px * 2/6)); }\n' + + 'a:nth-child(1n) { margin-left: 60px; margin-right: 0; }\n' + + 'a:last-child { margin-left: 0; }\n' + + 'a:nth-child(3n) { margin-left: 0; margin-right: auto; }' + ); + }); }); }); }); diff --git a/test/lost-waffle.js b/test/lost-waffle.js index 768081b1..332fae12 100644 --- a/test/lost-waffle.js +++ b/test/lost-waffle.js @@ -141,17 +141,79 @@ describe('lost-waffle', function() { }); describe('supports RTL', () => { - it('works with typical waffle', () => { - 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: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` + - `div:nth-child(3n + 1) { clear: both; }\n` + - `div:nth-last-child(-n + 3) { margin-bottom: 0; }` - ); + describe('when set as a global option', () => { + it('provides 3 column layout', () => { + 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: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` + + `div:nth-child(3n + 1) { clear: both; }\n` + + `div:nth-last-child(-n + 3) { margin-bottom: 0; }` + ); + }); + }); + + describe('when set on a specific element', () => { + it('provides 3 column layout', () => { + check( + `div { lost-waffle: 1/3 rtl; }`, + + `div { 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` + + `div:nth-child(3n + 1) { clear: both; }\n` + + `div:nth-last-child(-n + 3) { margin-bottom: 0; }` + ); + }); + + it('supports a custom cycle', function() { + check( + 'a { lost-waffle: 2/4 2 rtl; }', + + 'a { 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: right; margin-left: 30px;' + + ' margin-bottom: 30px; clear: none; }\n' + + 'a:last-child { margin-left: 0; margin-bottom: 0; }\n' + + 'a:nth-child(2n) { margin-left: 0; }\n' + + 'a:nth-child(2n + 1) { clear: both; }\n' + + 'a:nth-last-child(-n + 2) { margin-bottom: 0; }' + ); + }); + + it('supports a custom gutter', function() { + check( + 'a { lost-waffle: 3/6 2 60px rtl; }', + + 'a { 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: right; margin-left: 60px;' + + ' margin-bottom: 60px; clear: none; }\n' + + 'a:last-child { margin-left: 0; margin-bottom: 0; }\n' + + 'a:nth-child(2n) { margin-left: 0; }\n' + + 'a:nth-child(2n + 1) { clear: both; }\n' + + 'a:nth-last-child(-n + 2) { margin-bottom: 0; }' + ); + }); + + it('supports flexbox', function() { + check( + 'a { lost-waffle: 2/5 3 0 flex rtl; }', + + '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' + + 'a:nth-child(1n) { ' + + 'margin-left: 0; margin-bottom: 0; margin-right: 0; }\n' + + 'a:last-child { margin-left: 0; margin-bottom: 0; }\n' + + 'a:nth-child(3n) { margin-left: 0; margin-right: auto; }\n' + + 'a:nth-last-child(-n + 3) { margin-bottom: 0; }' + ); + }); }); }); }); From 8f93261fbc537b90df789c9ce728bc873139d44b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ka=CC=88nel=2C=20Thomas?= Date: Sun, 12 Mar 2017 16:58:38 +0100 Subject: [PATCH 5/5] add documentation --- lib/lost-column.js | 3 +++ lib/lost-waffle.js | 3 +++ 2 files changed, 6 insertions(+) diff --git a/lib/lost-column.js b/lib/lost-column.js index c861a196..dfd7e74e 100644 --- a/lib/lost-column.js +++ b/lib/lost-column.js @@ -24,6 +24,9 @@ var lgLogic = require('./_lg-logic'); * @param {string} [flex|no-flex] - Determines whether this element should * use Flexbox or not. * + * @param {string} [ltr|rtl] - Determines whether this element should + * use standard left-to-right or right-to-left layout. + * * @example * div { * lost-column: 1/3; diff --git a/lib/lost-waffle.js b/lib/lost-waffle.js index 34a087c3..81ef7f47 100644 --- a/lib/lost-waffle.js +++ b/lib/lost-waffle.js @@ -27,6 +27,9 @@ var lgLogic = require('./_lg-logic'); * @param {string} [flex|no-flex] - Determines whether this element should * use Flexbox or not. * + * @param {string} [ltr|rtl] - Determines whether this element should + * use standard left-to-right or right-to-left layout. + * * @example * section { * height: 100%;