diff --git a/README.md b/README.md index 67be477c..116c3300 100644 --- a/README.md +++ b/README.md @@ -130,7 +130,7 @@ div:nth-child(3n + 1) { ##### Basic Columns -To create a basic horizontal grid, just insert some elements into any containing element like so and pass a fraction to the `lost-column` property. +To create a basic horizontal grid, just insert some elements into any containing element like so and pass a fraction to the `lost-column` property. To unset (or remove) a column rule, possibly at a larger breakpoint, use `lost-column: none;` ```html
diff --git a/lib/lost-column.js b/lib/lost-column.js index 1d3c91ec..a6490141 100644 --- a/lib/lost-column.js +++ b/lib/lost-column.js @@ -40,132 +40,165 @@ module.exports = function lostColumnDecl(css, settings) { lostColumnGutter = settings.gutter, lostColumnFlexbox = settings.flexbox; - if (settings.cycle === 'auto') { - lostColumnCycle = decl.value.split('/')[1]; - } else { - lostColumnCycle = settings.cycle; - } - - declArr = decl.value.split(' '); - lostColumn = declArr[0]; - - if (declArr[1] !== undefined && declArr[1].search(/^\d/) !== -1) { - lostColumnCycle = declArr[1]; - } + if (decl.value !== 'none') { + if (settings.cycle === 'auto') { + lostColumnCycle = decl.value.split('/')[1]; + } else { + lostColumnCycle = settings.cycle; + } - if (declArr[1] == 'flex' || declArr[1] == 'no-flex' || declArr[1] == 'auto') { - lostColumnCycle = declArr[0].split('/')[1]; - } + declArr = decl.value.split(' '); + lostColumn = declArr[0]; - if (declArr[2] !== undefined && declArr[2].search(/^\d/) !== -1) { - lostColumnGutter = declArr[2]; - } + if (declArr[1] !== undefined && declArr[1].search(/^\d/) !== -1) { + lostColumnCycle = declArr[1]; + } - if (declArr.indexOf('flex') !== -1) { - lostColumnFlexbox = 'flex'; - } + if (declArr[1] == 'flex' || declArr[1] == 'no-flex' || declArr[1] == 'auto') { + lostColumnCycle = declArr[0].split('/')[1]; + } - if (declArr.indexOf('no-flex') !== -1) { - lostColumnFlexbox = 'no-flex'; - } + if (declArr[2] !== undefined && declArr[2].search(/^\d/) !== -1) { + lostColumnGutter = declArr[2]; + } - decl.parent.nodes.forEach(function (decl) { - if (decl.prop == 'lost-column-cycle') { - lostColumnCycle = decl.value; + if (declArr.indexOf('flex') !== -1) { + lostColumnFlexbox = 'flex'; + } - decl.remove(); + if (declArr.indexOf('no-flex') !== -1) { + lostColumnFlexbox = 'no-flex'; } - }); - decl.parent.nodes.forEach(function (decl) { - if (decl.prop == 'lost-column-gutter') { - lostColumnGutter = decl.value; + decl.parent.nodes.forEach(function (decl) { + if (decl.prop == 'lost-column-cycle') { + lostColumnCycle = decl.value; - decl.remove(); - } - }); + decl.remove(); + } + }); - decl.parent.nodes.forEach(function (decl) { - if (decl.prop == 'lost-column-flexbox') { - if (decl.prop == 'flex') { - lostColumnFlexbox = 'flex'; + decl.parent.nodes.forEach(function (decl) { + if (decl.prop == 'lost-column-gutter') { + lostColumnGutter = decl.value; + + decl.remove(); } + }); - decl.remove(); - } - }); + decl.parent.nodes.forEach(function (decl) { + if (decl.prop == 'lost-column-flexbox') { + if (decl.prop == 'flex') { + lostColumnFlexbox = 'flex'; + } - if (lostColumnFlexbox === 'flex') { - decl.cloneBefore({ - prop: 'flex', - value: '0 0 auto' + decl.remove(); + } }); - if (lostColumnCycle !== 0) { + if (lostColumnFlexbox === 'flex') { + decl.cloneBefore({ + prop: 'flex', + value: '0 0 auto' + }); + + if (lostColumnCycle !== 0) { + newBlock( + decl, + ':nth-child('+ lostColumnCycle +'n)', + ['margin-right'], + [0] + ); + } + newBlock( decl, - ':nth-child('+ lostColumnCycle +'n)', + ':last-child', ['margin-right'], [0] ); - } - newBlock( - decl, - ':last-child', - ['margin-right'], - [0] - ); - - newBlock( - decl, - ':nth-child(n)', - ['margin-right'], - [lostColumnGutter] - ); - } else { - - if (lostColumnCycle !== 0) { newBlock( decl, - ':nth-child('+ lostColumnCycle +'n + 1)', - ['clear'], - ['left'] + ':nth-child(n)', + ['margin-right'], + [lostColumnGutter] ); + } else { + + if (lostColumnCycle !== 0) { + newBlock( + decl, + ':nth-child('+ lostColumnCycle +'n + 1)', + ['clear'], + ['left'] + ); + + newBlock( + decl, + ':nth-child('+ lostColumnCycle +'n)', + ['margin-right'], + [0] + ); + } newBlock( decl, - ':nth-child('+ lostColumnCycle +'n)', + ':last-child', ['margin-right'], [0] ); + + newBlock( + decl, + ':nth-child(n)', + ['float', 'margin-right', 'clear'], + ['left', lostColumnGutter, 'none'] + ); + } + + if (lostColumnGutter !== '0') { + decl.cloneBefore({ + prop: 'width', + value: 'calc(99.99% * '+ lostColumn +' - ('+ lostColumnGutter +' - '+ lostColumnGutter +' * '+ lostColumn +'))' + }); + } else { + decl.cloneBefore({ + prop: 'width', + value: 'calc(99.999999% * '+ lostColumn +')' + }); } + } else { + decl.cloneBefore({ + prop: 'width', + value: 'auto' + }); newBlock( decl, - ':last-child', - ['margin-right'], - [0] + ':nth-child(1n)', + ['float', 'clear', 'margin-right', 'width'], + ['none', 'none', 0, 'auto'] + ); + newBlock( + decl, + ':nth-child(1n + 1)', + ['float', 'clear', 'margin-right', 'width'], + ['none', 'none', 0, 'auto'] ); - newBlock( decl, ':nth-child(n)', - ['float', 'margin-right', 'clear'], - ['left', lostColumnGutter, 'none'] + ['float', 'clear', 'margin-right', 'width'], + ['none', 'none', 0, 'auto'] + ); + newBlock( + decl, + ':last-child', + ['float', 'clear', 'margin-right', 'width'], + ['none', 'none', 0, 'auto'] ); - } - if (lostColumnGutter !== '0') { - decl.cloneBefore({ - prop: 'width', - value: 'calc(99.99% * '+ lostColumn +' - ('+ lostColumnGutter +' - '+ lostColumnGutter +' * '+ lostColumn +'))' - }); - } else { - decl.cloneBefore({ - prop: 'width', - value: 'calc(99.999999% * '+ lostColumn +')' - }); } decl.remove(); diff --git a/test/lost-column.js b/test/lost-column.js index 00479faf..1895da11 100644 --- a/test/lost-column.js +++ b/test/lost-column.js @@ -57,4 +57,14 @@ describe('lost-column', function() { 'a:nth-child(3n) { margin-right: 0; }' ); }); + it('provides none rule', function() { + check( + 'a { lost-column: none; }', + 'a { width: auto; }\n' + + 'a:last-child { float: none; clear: none; margin-right: 0; width: auto; }\n' + + 'a:nth-child(n) { float: none; clear: none; margin-right: 0; width: auto; }\n' + + 'a:nth-child(1n + 1) { float: none; clear: none; margin-right: 0; width: auto; }\n' + + 'a:nth-child(1n) { float: none; clear: none; margin-right: 0; width: auto; }' + ); + }); });