diff --git a/lib/lost-waffle.js b/lib/lost-waffle.js index 58784688..34688814 100644 --- a/lib/lost-waffle.js +++ b/lib/lost-waffle.js @@ -1,5 +1,4 @@ var newBlock = require('./new-block.js'); - var lgLogic = require('./_lg-logic'); module.exports = function lostWaffleDecl(css, settings) { @@ -9,6 +8,7 @@ module.exports = function lostWaffleDecl(css, settings) { var lostWaffle; var floatRight; var lostWaffleCycle; + var lostWaffleStart = 0; var unit = settings.gridUnit; var lostWaffleRounder = settings.rounder; var lostWaffleGutter = settings.gutter; @@ -33,6 +33,10 @@ module.exports = function lostWaffleDecl(css, settings) { declArr = decl.value.split(' '); lostWaffle = declArr[0]; + if (declArr[1] !== undefined && declArr[1].indexOf('/') !== -1) { + lostWaffleStart = declArr[1].split('/')[1]; + } + if (declArr[1] !== undefined && declArr[1].search(/^\d/) !== -1) { lostWaffleCycle = declArr[1]; } @@ -116,6 +120,30 @@ module.exports = function lostWaffleDecl(css, settings) { } }); + var selectors = { + lastChild: '', + firstChild: '', + lastRow: ':nth-last-child(-n + ' + lostWaffleCycle + ')' + }; + + if (lostWaffleStart === 0) { + selectors.lastChild = ':nth-child(' + lostWaffleCycle + 'n)'; + selectors.firstChild = ':nth-child(' + lostWaffleCycle + 'n + 1)'; + } else { + selectors.lastChild = + ':nth-child(' + lostWaffleCycle + 'n + ' + lostWaffleStart + ')'; + selectors.firstChild = + ':nth-child(' + + lostWaffleCycle + + 'n + ' + + ((1 + lostWaffleStart) % lostWaffleCycle) + + ')'; + } + + if ((lostWaffleStart + 1) % lostWaffleCycle === 0) { + selectors.firstChild = ':nth-child(' + lostWaffleCycle + 'n)'; + } + if (lostWaffleFlexbox === 'flex') { decl.cloneBefore({ prop: 'flex-grow', @@ -127,24 +155,19 @@ module.exports = function lostWaffleDecl(css, settings) { }); if (lostWaffleCycle !== 0) { - newBlock( - decl, - ':nth-last-child(-n + ' + lostWaffleCycle + ')', - ['margin-bottom'], - [0] - ); + newBlock(decl, selectors.lastRow, ['margin-bottom'], [0]); if (gridDirection === 'rtl') { newBlock( decl, - ':nth-child(' + lostWaffleCycle + 'n)', + selectors.lastChild, ['margin-left', 'margin-right'], [0, 'auto'] ); } else { newBlock( decl, - ':nth-child(' + lostWaffleCycle + 'n)', + selectors.lastChild, ['margin-right', 'margin-left'], [0, 'auto'] ); @@ -186,38 +209,18 @@ module.exports = function lostWaffleDecl(css, settings) { } } else { if (lostWaffleCycle !== 0) { - newBlock( - decl, - ':nth-last-child(-n + ' + lostWaffleCycle + ')', - ['margin-bottom'], - [0] - ); + newBlock(decl, selectors.lastRow, ['margin-bottom'], [0]); if (settings.clearing === 'left') { // FIXME: this doesn't make sense w/ rtl /* istanbul ignore if */ if (gridDirection === 'rtl') { - newBlock( - decl, - ':nth-child(' + lostWaffleCycle + 'n + 1)', - ['clear'], - ['right'] - ); + newBlock(decl, selectors.firstChild, ['clear'], ['right']); } else { - newBlock( - decl, - ':nth-child(' + lostWaffleCycle + 'n + 1)', - ['clear'], - ['left'] - ); + newBlock(decl, selectors.firstChild, ['clear'], ['left']); } } else { - newBlock( - decl, - ':nth-child(' + lostWaffleCycle + 'n + 1)', - ['clear'], - ['both'] - ); + newBlock(decl, selectors.firstChild, ['clear'], ['both']); } /* istanbul ignore if */ if (gridDirection === 'rtl') { @@ -225,33 +228,23 @@ module.exports = function lostWaffleDecl(css, settings) { if (floatRight === true) { newBlock( decl, - ':nth-child(' + lostWaffleCycle + 'n)', + selectors.lastChild, ['margin-left', 'float'], [0, 'left'] ); } else { - newBlock( - decl, - ':nth-child(' + lostWaffleCycle + 'n)', - ['margin-left'], - [0] - ); + newBlock(decl, selectors.lastChild, ['margin-left'], [0]); } } else { if (floatRight === true) { newBlock( decl, - ':nth-child(' + lostWaffleCycle + 'n)', + selectors.lastChild, ['margin-right', 'float'], [0, 'right'] ); } else { - newBlock( - decl, - ':nth-child(' + lostWaffleCycle + 'n)', - ['margin-right'], - [0] - ); + newBlock(decl, selectors.lastChild, ['margin-right'], [0]); } } } diff --git a/test/lost-waffle.js b/test/lost-waffle.js index 5a80af12..79da05b9 100644 --- a/test/lost-waffle.js +++ b/test/lost-waffle.js @@ -236,4 +236,39 @@ describe('lost-waffle', function() { ); }); }); + + describe('supports start-indication', () => { + it('supports start-indication', () => { + check( + 'div { lost-waffle: 1/3 3/1 }', + 'div { width: calc(99.9% * 1/3 - (30px - 30px * 1/3));\n' + + 'max-width: calc(99.9% * 1/3 - (30px - 30px * 1/3));\n' + + 'height: calc(99.9% * 1/3 - (30px - 30px * 1/3)) }' + + 'div:nth-child(1n) { float:left;\n' + + 'margin-right: 30px;\n' + + 'margin-bottom: 30px;\n' + + 'clear: none }\n' + + 'div:last-child { margin-right: 0;\n' + + 'margin-bottom: 0 }\n' + + 'div:nth-child(3n+1) { margin-right: 0 }\n' + + 'div:nth-child(3n+2) { clear:both }\n' + + 'div:nth-last-child(-n+3){ margin-bottom:0 }' + ); + check( + 'div { lost-waffle: 1/3 3/2 }', + 'div { width: calc(99.9% * 1/3 - (30px - 30px * 1/3));\n' + + 'max-width: calc(99.9% * 1/3 - (30px - 30px * 1/3));\n' + + 'height: calc(99.9% * 1/3 - (30px - 30px * 1/3)) }' + + 'div:nth-child(1n) { float:left;\n' + + 'margin-right: 30px;\n' + + 'margin-bottom: 30px;\n' + + 'clear: none }\n' + + 'div:last-child { margin-right: 0;\n' + + 'margin-bottom: 0 }\n' + + 'div:nth-child(3n+2) { margin-right: 0 }\n' + + 'div:nth-child(3n) { clear:both }\n' + + 'div:nth-last-child(-n+3){ margin-bottom:0 }' + ); + }); + }); });