diff --git a/lib/lost-column.js b/lib/lost-column.js index 2535ab65..e3dc5577 100644 --- a/lib/lost-column.js +++ b/lib/lost-column.js @@ -269,53 +269,91 @@ module.exports = function lostColumnDecl(css, settings, result) { ), }); } else { - decl.cloneBefore({ - prop: 'width', - value: 'auto', + decl.parent.nodes.forEach((declaration) => { + if (declaration.prop === 'lost-column-flexbox') { + if (declaration.value === 'flex') { + lostColumnFlexbox = 'flex'; + } else { + throw declaration.error( + `lost-column-flexbox: property '${declaration.value}' is unknown.` + ); + } + + declaration.remove(); + } }); - if (gridDirection === 'rtl') { - newBlock( - decl, - ':nth-child(1n + 1)', - ['float', 'clear', 'margin-left', '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'] - ); + if (lostColumnFlexbox === 'flex') { + decl.cloneBefore({ + prop: 'flex', + value: 'unset', + }); + decl.cloneBefore({ + prop: 'max-width', + value: 'unset', + }); + decl.cloneBefore({ + prop: 'width', + value: 'unset', + }); + if (gridDirection === 'rtl') { + newBlock(decl, ':nth-child(1n + 1)', ['margin-left'], [0]); + newBlock(decl, ':nth-child(1n)', ['margin-left'], [0]); + newBlock(decl, ':last-child', ['margin-left'], [0]); + } else { + newBlock(decl, ':nth-child(1n + 1)', ['margin-right'], [0]); + newBlock(decl, ':nth-child(1n)', ['margin-right'], [0]); + newBlock(decl, ':last-child', ['margin-right'], [0]); + } } 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.cloneBefore({ + prop: 'width', + 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)', + ['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'] + ); + } } } diff --git a/test/lost-column.js b/test/lost-column.js index e869b5bb..b3aa3879 100644 --- a/test/lost-column.js +++ b/test/lost-column.js @@ -18,6 +18,126 @@ describe('lost-column', () => { "lost-column-flexbox: property 'flexible' is unknown." ); }); + describe('reset', () => { + it('resets lost-column with global flex in LTR', () => { + check( + ` + @lost flexbox flex; + + .grid { + lost-flex-container: row; + } + + .grid--alternate .right { + lost-column: none; + } + `, + ` + .grid { + display: flex; + flex-flow: row wrap; + } + .grid--alternate .right { + flex: unset; + max-width: unset; + width: unset; + } + .grid--alternate .right:last-child { + margin-right: 0; + } + .grid--alternate .right:nth-child(1n) { + margin-right: 0; + } + .grid--alternate .right:nth-child(1n+1) { + margin-right: 0; + } + ` + ); + check( + ` + .grid { + lost-flex-container: row; + } + + .grid--alternate .right { + lost-column-flexbox: flex; + lost-column: none; + } + `, + ` + .grid { + display: flex; + flex-flow: row wrap; + } + .grid--alternate .right { + flex: unset; + max-width: unset; + width: unset; + } + .grid--alternate .right:last-child { + margin-right: 0; + } + .grid--alternate .right:nth-child(1n) { + margin-right: 0; + } + .grid--alternate .right:nth-child(1n+1) { + margin-right: 0; + } + ` + ); + throws( + ` + @lost flexbox flex; + + .grid { + lost-flex-container: row; + } + + .grid--alternate .thing { + lost-column-flexbox: flexible; + lost-column: none; + } + `, + "lost-column-flexbox: property 'flexible' is unknown." + ); + }); + it('resets lost-column with global flex in RTL', () => { + check( + ` + @lost flexbox flex; + @lost --beta-direction rtl; + + .grid { + lost-flex-container: row; + } + + .grid--alternate .thing { + lost-column: none; + } + `, + ` + .grid { + display: flex; + flex-flow: row wrap; + } + .grid--alternate .thing { + flex: unset; + max-width: unset; + width: unset; + } + .grid--alternate .thing:last-child { + margin-left: 0; + } + .grid--alternate .thing:nth-child(1n) { + margin-left: 0; + } + .grid--alternate .thing:nth-child(1n+1) { + margin-left: 0; + } + ` + ); + }); + }); }); it('provides 3 column layout', () => {