diff --git a/.eslintrc.js b/.eslintrc.js index 0c239cac..94d41e89 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,33 +1,26 @@ module.exports = { - 'env': { - 'es6': true, - 'node': true + env: { + es6: true, + node: true }, - 'extends': 'eslint:recommended', - 'parserOptions': { - 'sourceType': 'module' + plugins: ['prettier'], + extends: 'eslint:recommended', + parserOptions: { + sourceType: 'module' }, - 'rules': { + rules: { 'eol-last': 2, - 'no-multiple-empty-lines': [ - 2, - { max: 2, maxEOF: 1 } - ], - 'indent': [ - 'error', - 2 - ], - 'linebreak-style': [ + 'no-multiple-empty-lines': [2, { max: 2, maxEOF: 1 }], + indent: ['error', 2], + 'linebreak-style': ['error', 'unix'], + quotes: [ 'error', - 'unix' + 'single', + { + avoidEscape: true + } ], - 'quotes': [ - 'error', - 'single' - ], - 'semi': [ - 'error', - 'always' - ] + semi: ['error', 'always'], + 'prettier/prettier': 'error' } }; diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..544138be --- /dev/null +++ b/.prettierrc @@ -0,0 +1,3 @@ +{ + "singleQuote": true +} diff --git a/lib/_lg-logic.js b/lib/_lg-logic.js index 510d12f1..aee98149 100644 --- a/lib/_lg-logic.js +++ b/lib/_lg-logic.js @@ -1,5 +1,4 @@ module.exports = { - calcValue: function(fraction, gutter, rounder, unit) { var calcValue = ''; var gutterLogic = ''; diff --git a/lib/lg-gutter.js b/lib/lg-gutter.js index cb4a77f8..63769de1 100644 --- a/lib/lg-gutter.js +++ b/lib/lg-gutter.js @@ -4,7 +4,7 @@ var lostGutterLocal = require('./lost-vars-gutter-local'); module.exports = function lgGutter(css, settings) { var gutter, newValue; - css.walkDecls( declaration => { + css.walkDecls(declaration => { if ( /(\$lost-gutter)/g.test(declaration.value) && !/(\$lost-gutter-local)/g.test(declaration.value) diff --git a/lib/lost-align.js b/lib/lost-align.js index 6f1fb903..c4759613 100644 --- a/lib/lost-align.js +++ b/lib/lost-align.js @@ -51,7 +51,10 @@ module.exports = function lostAlign(css, settings) { ['position', 'top', 'right', 'bottom', 'left', 'transform'], ['absolute', '0', 'auto', 'auto', '0', 'translate(0, 0)'] ); - } else if (alignDirection === 'top-center' || alignDirection === 'top') { + } else if ( + alignDirection === 'top-center' || + alignDirection === 'top' + ) { newBlock( decl, ' > *', @@ -65,21 +68,30 @@ module.exports = function lostAlign(css, settings) { ['position', 'top', 'right', 'bottom', 'left', 'transform'], ['absolute', '0', '0', 'auto', 'auto', 'translate(0, 0)'] ); - } else if (alignDirection === 'middle-left' || alignDirection === 'left') { + } else if ( + alignDirection === 'middle-left' || + alignDirection === 'left' + ) { newBlock( decl, ' > *', ['position', 'top', 'right', 'bottom', 'left', 'transform'], ['absolute', '50%', 'auto', 'auto', '0', 'translate(0, -50%)'] ); - } else if (alignDirection === 'middle-center' || alignDirection === 'center') { + } else if ( + alignDirection === 'middle-center' || + alignDirection === 'center' + ) { newBlock( decl, ' > *', ['position', 'top', 'right', 'bottom', 'left', 'transform'], ['absolute', '50%', 'auto', 'auto', '50%', 'translate(-50%, -50%)'] ); - } else if (alignDirection === 'middle-right' || alignDirection === 'right') { + } else if ( + alignDirection === 'middle-right' || + alignDirection === 'right' + ) { newBlock( decl, ' > *', @@ -93,7 +105,10 @@ module.exports = function lostAlign(css, settings) { ['position', 'top', 'right', 'bottom', 'left', 'transform'], ['absolute', 'auto', 'auto', '0', '0', 'translate(0, 0)'] ); - } else if (alignDirection === 'bottom-center' || alignDirection === 'bottom') { + } else if ( + alignDirection === 'bottom-center' || + alignDirection === 'bottom' + ) { newBlock( decl, ' > *', @@ -108,7 +123,9 @@ module.exports = function lostAlign(css, settings) { ['absolute', 'auto', '0', '0', 'auto', 'translate(0, 0)'] ); } else { - throw decl.error(`lost-align: direction '${alignDirection}' is unknown.`); + throw decl.error( + `lost-align: direction '${alignDirection}' is unknown.` + ); } } } else if (alignDirection === 'reset') { @@ -162,21 +179,30 @@ module.exports = function lostAlign(css, settings) { ['justify-content', 'align-items'], ['flex-end', 'flex-start'] ); - } else if (alignDirection === 'middle-left' || alignDirection === 'left') { + } else if ( + alignDirection === 'middle-left' || + alignDirection === 'left' + ) { newBlock( decl, '', ['justify-content', 'align-items'], ['flex-start', 'center'] ); - } else if (alignDirection === 'middle-center' || alignDirection === 'center') { + } else if ( + alignDirection === 'middle-center' || + alignDirection === 'center' + ) { newBlock( decl, '', ['justify-content', 'align-items'], ['center', 'center'] ); - } else if (alignDirection === 'middle-right' || alignDirection === 'right') { + } else if ( + alignDirection === 'middle-right' || + alignDirection === 'right' + ) { newBlock( decl, '', @@ -190,7 +216,10 @@ module.exports = function lostAlign(css, settings) { ['justify-content', 'align-items'], ['flex-start', 'flex-end'] ); - } else if (alignDirection === 'bottom-center' || alignDirection === 'bottom') { + } else if ( + alignDirection === 'bottom-center' || + alignDirection === 'bottom' + ) { newBlock( decl, '', @@ -205,7 +234,9 @@ module.exports = function lostAlign(css, settings) { ['flex-end', 'flex-end'] ); } else { - throw decl.error(`lost-align: direction '${alignDirection}' is unknown.`); + throw decl.error( + `lost-align: direction '${alignDirection}' is unknown.` + ); } } decl.remove(); diff --git a/lib/lost-center.js b/lib/lost-center.js index 23fc687d..0076bf79 100644 --- a/lib/lost-center.js +++ b/lib/lost-center.js @@ -13,7 +13,7 @@ module.exports = function lostCenterDecl(css, settings, result) { var lostColumnGutter = 0; var validUnits = ['%', 'vw']; - var isFractionValue = (value) => { + var isFractionValue = value => { var lostFractionPattern = /^\d+\/\d+$/; return lostFractionPattern.test(value); }; @@ -24,7 +24,7 @@ module.exports = function lostCenterDecl(css, settings, result) { lostCenterPadding = declArr[1]; } - if(lostCenterFlexbox !== 'flex') { + if (lostCenterFlexbox !== 'flex') { lostCenterFlexbox = settings.flexbox; } @@ -36,19 +36,40 @@ module.exports = function lostCenterDecl(css, settings, result) { lostCenterFlexbox = 'no-flex'; } - lostCenterFlexbox = lgLogic.parseLostProperty(decl.parent.nodes, 'lost-center-flexbox', lostCenterFlexbox); - lostCenterPadding = lgLogic.parseLostProperty(decl.parent.nodes, 'lost-center-padding', lostCenterPadding); - lostColumnRounder = lgLogic.parseLostProperty(decl.parent.nodes, 'lost-column-rounder', lostColumnRounder); - - lostUnit = lgLogic.parseLostProperty(decl.parent.nodes, 'lost-unit', lostUnit); + lostCenterFlexbox = lgLogic.parseLostProperty( + decl.parent.nodes, + 'lost-center-flexbox', + lostCenterFlexbox + ); + lostCenterPadding = lgLogic.parseLostProperty( + decl.parent.nodes, + 'lost-center-padding', + lostCenterPadding + ); + lostColumnRounder = lgLogic.parseLostProperty( + decl.parent.nodes, + 'lost-column-rounder', + lostColumnRounder + ); + + lostUnit = lgLogic.parseLostProperty( + decl.parent.nodes, + 'lost-unit', + lostUnit + ); if (!lgLogic.validateUnit(lostUnit, validUnits)) { decl.warn(result, `${lostUnit} is not a valid unit for lost-center`); lostUnit = settings.gridUnit; } - if(declArr[0] !== undefined && isFractionValue(declArr[0])) { - lostCenterMaxWidth = lgLogic.calcValue(declArr[0], lostColumnGutter, lostColumnRounder, lostUnit); + if (declArr[0] !== undefined && isFractionValue(declArr[0])) { + lostCenterMaxWidth = lgLogic.calcValue( + declArr[0], + lostColumnGutter, + lostColumnRounder, + lostUnit + ); } else { lostCenterMaxWidth = declArr[0]; } @@ -58,15 +79,10 @@ module.exports = function lostCenterDecl(css, settings, result) { decl, ':after', ['content', 'display', 'clear'], - ['\'\'', 'table', 'both'] + ["''", 'table', 'both'] ); - newBlock( - decl, - ':before', - ['content', 'display'], - ['\'\'', 'table'] - ); + newBlock(decl, ':before', ['content', 'display'], ["''", 'table']); } else { decl.cloneBefore({ prop: 'display', diff --git a/lib/lost-column.js b/lib/lost-column.js index a9664aaa..087345ea 100644 --- a/lib/lost-column.js +++ b/lib/lost-column.js @@ -27,7 +27,11 @@ module.exports = function lostColumnDecl(css, settings, result) { lostColumnCycle = declArr[1]; } - if (declArr[1] === 'flex' || declArr[1] === 'no-flex' || declArr[1] === 'auto') { + if ( + declArr[1] === 'flex' || + declArr[1] === 'no-flex' || + declArr[1] === 'auto' + ) { lostColumnCycle = declArr[0].split('/')[1]; } @@ -59,13 +63,18 @@ module.exports = function lostColumnDecl(css, settings, result) { if (lgLogic.validateUnit(declaration.value, validUnits)) { unit = declaration.value; } else { - decl.warn(result, `${declaration.value} is not a valid unit for lost-column`); + decl.warn( + result, + `${declaration.value} is not a valid unit for lost-column` + ); } declaration.remove(); } }); - decl.parent.nodes.forEach(function lostColumnRounderFunction(declaration) { + decl.parent.nodes.forEach(function lostColumnRounderFunction( + declaration + ) { if (declaration.prop === 'lost-column-rounder') { lostColumnRounder = declaration.value; @@ -81,12 +90,16 @@ module.exports = function lostColumnDecl(css, settings, result) { } }); - decl.parent.nodes.forEach(function lostColumnFlexboxFunction(declaration) { + decl.parent.nodes.forEach(function lostColumnFlexboxFunction( + 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.`); + throw declaration.error( + `lost-column-flexbox: property '${declaration.value}' is unknown.` + ); } declaration.remove(); @@ -123,7 +136,12 @@ module.exports = function lostColumnDecl(css, settings, result) { decl.cloneBefore({ prop: 'flex-basis', - value: lgLogic.calcValue(lostColumn, lostColumnGutter, lostColumnRounder, unit) + value: lgLogic.calcValue( + lostColumn, + lostColumnGutter, + lostColumnRounder, + unit + ) }); // IE 10-11 don't take into account box-sizing when calculating flex-basis, but @@ -131,16 +149,16 @@ module.exports = function lostColumnDecl(css, settings, result) { // https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-box decl.cloneBefore({ prop: 'max-width', - value: lgLogic.calcValue(lostColumn, lostColumnGutter, lostColumnRounder, unit) + value: lgLogic.calcValue( + lostColumn, + lostColumnGutter, + lostColumnRounder, + unit + ) }); if (gridDirection === 'rtl') { - newBlock( - decl, - ':last-child', - ['margin-left'], - [0] - ); + newBlock(decl, ':last-child', ['margin-left'], [0]); newBlock( decl, ':nth-child(1n)', @@ -148,12 +166,7 @@ module.exports = function lostColumnDecl(css, settings, result) { [lostColumnGutter, 0] ); } else { - newBlock( - decl, - ':last-child', - ['margin-right'], - [0] - ); + newBlock(decl, ':last-child', ['margin-right'], [0]); newBlock( decl, ':nth-child(1n)', @@ -161,7 +174,6 @@ module.exports = function lostColumnDecl(css, settings, result) { [lostColumnGutter, 0] ); } - } else { if (lostColumnCycle !== 0) { if (settings.clearing === 'left') { @@ -223,19 +235,9 @@ module.exports = function lostColumnDecl(css, settings, result) { } if (gridDirection === 'rtl') { - newBlock( - decl, - ':last-child', - ['margin-left'], - [0] - ); + newBlock(decl, ':last-child', ['margin-left'], [0]); } else { - newBlock( - decl, - ':last-child', - ['margin-right'], - [0] - ); + newBlock(decl, ':last-child', ['margin-right'], [0]); } if (gridDirection === 'rtl') { @@ -253,11 +255,15 @@ module.exports = function lostColumnDecl(css, settings, result) { ['left', lostColumnGutter, 'none'] ); } - } decl.cloneBefore({ prop: 'width', - value: lgLogic.calcValue(lostColumn, lostColumnGutter, lostColumnRounder, unit) + value: lgLogic.calcValue( + lostColumn, + lostColumnGutter, + lostColumnRounder, + unit + ) }); } else { decl.cloneBefore({ diff --git a/lib/lost-flex-container.js b/lib/lost-flex-container.js index 0253c311..4f3de56e 100644 --- a/lib/lost-flex-container.js +++ b/lib/lost-flex-container.js @@ -1,5 +1,7 @@ module.exports = function lostFlexContainerDecl(css) { - css.walkDecls('lost-flex-container', function lostFlexContainerFunction(decl) { + css.walkDecls('lost-flex-container', function lostFlexContainerFunction( + decl + ) { decl.cloneBefore({ prop: 'display', value: 'flex' diff --git a/lib/lost-masonry-column.js b/lib/lost-masonry-column.js index 518e8f01..847da053 100644 --- a/lib/lost-masonry-column.js +++ b/lib/lost-masonry-column.js @@ -1,5 +1,7 @@ module.exports = function lostMasonryColumnDecl(css, settings) { - css.walkDecls('lost-masonry-column', function lostMasonryColumnFunction(decl) { + css.walkDecls('lost-masonry-column', function lostMasonryColumnFunction( + decl + ) { var declArr = []; var lostMasonryColumn; var lostMasonryColumnRounder = settings.rounder; @@ -31,7 +33,9 @@ module.exports = function lostMasonryColumnDecl(css, settings) { lostMasonryColumnFlexbox = 'no-flex'; } - decl.parent.nodes.forEach(function lostMasonryColumnRounderFunction(declaration) { + decl.parent.nodes.forEach(function lostMasonryColumnRounderFunction( + declaration + ) { if (declaration.prop === 'lost-masonry-column-rounder') { lostMasonryColumnRounder = declaration.value; @@ -39,14 +43,18 @@ module.exports = function lostMasonryColumnDecl(css, settings) { } }); - decl.parent.nodes.forEach(function lostMasonryColumnGutterFunction(declaration) { + decl.parent.nodes.forEach(function lostMasonryColumnGutterFunction( + declaration + ) { if (declaration.prop === 'lost-masonry-column-gutter') { lostMasonryColumnGutter = declaration.value; declaration.remove(); } }); - decl.parent.nodes.forEach(function lostMasonryColumnFlexboxFunction(declaration) { + decl.parent.nodes.forEach(function lostMasonryColumnFlexboxFunction( + declaration + ) { if (declaration.prop === 'lost-masonry-column-flexbox') { if (declaration.value === 'flex') { lostMasonryColumnFlexbox = 'flex'; @@ -57,7 +65,9 @@ module.exports = function lostMasonryColumnDecl(css, settings) { }); if (lostMasonryColumnGutter !== '0') { - lostMasonryColumnGutterUnit = lostMasonryColumnGutter.match(/\D/g).join(''); + lostMasonryColumnGutterUnit = lostMasonryColumnGutter + .match(/\D/g) + .join(''); } else { lostMasonryColumnGutterUnit = ''; } @@ -76,16 +86,27 @@ module.exports = function lostMasonryColumnDecl(css, settings) { if (lostMasonryColumnGutter !== '0') { cloneAllBefore({ - width: 'calc(' + lostMasonryColumnRounder + '% * ' + lostMasonryColumn + - ' - ' + lostMasonryColumnGutter + ')', - 'margin-left': (parseInt(lostMasonryColumnGutter, 10) / 2) + lostMasonryColumnGutterUnit, - 'margin-right': (parseInt(lostMasonryColumnGutter, 10) / 2) + lostMasonryColumnGutterUnit + width: + 'calc(' + + lostMasonryColumnRounder + + '% * ' + + lostMasonryColumn + + ' - ' + + lostMasonryColumnGutter + + ')', + 'margin-left': + parseInt(lostMasonryColumnGutter, 10) / 2 + + lostMasonryColumnGutterUnit, + 'margin-right': + parseInt(lostMasonryColumnGutter, 10) / 2 + + lostMasonryColumnGutterUnit }); } else { cloneAllBefore({ - width: 'calc(' + lostMasonryColumnRounder + '% * ' + lostMasonryColumn + ')', - 'margin-left': (parseInt(lostMasonryColumnGutter, 10) / 2), - 'margin-right': (parseInt(lostMasonryColumnGutter, 10) / 2) + width: + 'calc(' + lostMasonryColumnRounder + '% * ' + lostMasonryColumn + ')', + 'margin-left': parseInt(lostMasonryColumnGutter, 10) / 2, + 'margin-right': parseInt(lostMasonryColumnGutter, 10) / 2 }); } diff --git a/lib/lost-masonry-wrap.js b/lib/lost-masonry-wrap.js index 22da2f34..131ce9eb 100644 --- a/lib/lost-masonry-wrap.js +++ b/lib/lost-masonry-wrap.js @@ -1,7 +1,9 @@ var newBlock = require('./new-block.js'); module.exports = function lostMasonryWrapDecl(css, settings) { - css.walkDecls('lost-masonry-wrap', function lostMasonryWrapDeclFunction(decl) { + css.walkDecls('lost-masonry-wrap', function lostMasonryWrapDeclFunction( + decl + ) { var declArr = []; var lostMasonryWrapFlexbox = settings.flexbox; var lostMasonryWrapGutter = settings.gutter; @@ -18,7 +20,10 @@ module.exports = function lostMasonryWrapDecl(css, settings) { declArr = decl.value.split(' '); - if ((declArr[0] !== undefined && declArr[0] === 'flex') || declArr[0] === 'no-flex') { + if ( + (declArr[0] !== undefined && declArr[0] === 'flex') || + declArr[0] === 'no-flex' + ) { lostMasonryWrapFlexbox = declArr[0]; } @@ -34,7 +39,9 @@ module.exports = function lostMasonryWrapDecl(css, settings) { lostMasonryWrapGutter = declArr[1]; } - decl.parent.nodes.forEach(function lostMasonryWrapFlexboxFunction(declaration) { + decl.parent.nodes.forEach(function lostMasonryWrapFlexboxFunction( + declaration + ) { if (declaration.prop === 'lost-masonry-wrap-flexbox') { if (declaration.value === 'flex') { lostMasonryWrapFlexbox = 'flex'; @@ -56,15 +63,10 @@ module.exports = function lostMasonryWrapDecl(css, settings) { decl, ':after', ['content', 'display', 'clear'], - ['\'\'', 'table', 'both'] + ["''", 'table', 'both'] ); - newBlock( - decl, - ':before', - ['content', 'display'], - ['\'\'', 'table'] - ); + newBlock(decl, ':before', ['content', 'display'], ["''", 'table']); } else { decl.cloneBefore({ prop: 'display', @@ -80,8 +82,10 @@ module.exports = function lostMasonryWrapDecl(css, settings) { lostMasonryWrapGutterUnit = lostMasonryWrapGutter.match(/\D/g).join(''); cloneAllBefore({ - 'margin-left': (parseInt(lostMasonryWrapGutter, 10) / -2) + lostMasonryWrapGutterUnit, - 'margin-right': (parseInt(lostMasonryWrapGutter, 10) / -2) + lostMasonryWrapGutterUnit + 'margin-left': + parseInt(lostMasonryWrapGutter, 10) / -2 + lostMasonryWrapGutterUnit, + 'margin-right': + parseInt(lostMasonryWrapGutter, 10) / -2 + lostMasonryWrapGutterUnit }); decl.remove(); diff --git a/lib/lost-move.js b/lib/lost-move.js index 57e33d79..f8833bfd 100644 --- a/lib/lost-move.js +++ b/lib/lost-move.js @@ -9,7 +9,10 @@ module.exports = function lostMoveDecl(css, settings) { declArr = decl.value.split(' '); lostMove = declArr[0]; - if ((declArr[1] !== undefined && declArr[1] === 'row') || declArr[1] === 'column') { + if ( + (declArr[1] !== undefined && declArr[1] === 'row') || + declArr[1] === 'column' + ) { lostMoveDirection = declArr[1]; } @@ -21,7 +24,7 @@ module.exports = function lostMoveDecl(css, settings) { } }); - decl.parent.nodes.forEach( (declaration) => { + decl.parent.nodes.forEach(declaration => { if (declaration.prop === 'lost-column') { var columnArray = declaration.value.split(' '); if (columnArray[2]) { @@ -33,7 +36,7 @@ module.exports = function lostMoveDecl(css, settings) { } }); - decl.parent.nodes.forEach( (declaration) => { + decl.parent.nodes.forEach(declaration => { if (declaration.prop === 'lost-row') { var rowArray = declaration.value.split(' '); if (rowArray[1]) { @@ -74,9 +77,20 @@ module.exports = function lostMoveDecl(css, settings) { if (lostMoveGutter !== '0') { decl.cloneBefore({ prop: 'top', - value: 'calc(' + lostMoveRounder + '% * ' - + lostMove + ' - (' + lostMoveGutter + ' - ' - + lostMoveGutter + ' * ' + lostMove + ') + ' + lostMoveGutter + ')' + value: + 'calc(' + + lostMoveRounder + + '% * ' + + lostMove + + ' - (' + + lostMoveGutter + + ' - ' + + lostMoveGutter + + ' * ' + + lostMove + + ') + ' + + lostMoveGutter + + ')' }); } else { decl.cloneBefore({ @@ -87,9 +101,20 @@ module.exports = function lostMoveDecl(css, settings) { } else if (lostMoveGutter !== '0') { decl.cloneBefore({ prop: 'left', - value: 'calc(' + lostMoveRounder + '% * ' - + lostMove + ' - (' + lostMoveGutter + ' - ' - + lostMoveGutter + ' * ' + lostMove + ') + ' + lostMoveGutter + ')' + value: + 'calc(' + + lostMoveRounder + + '% * ' + + lostMove + + ' - (' + + lostMoveGutter + + ' - ' + + lostMoveGutter + + ' * ' + + lostMove + + ') + ' + + lostMoveGutter + + ')' }); } else { decl.cloneBefore({ diff --git a/lib/lost-offset.js b/lib/lost-offset.js index 793861dd..4bd58161 100644 --- a/lib/lost-offset.js +++ b/lib/lost-offset.js @@ -20,7 +20,10 @@ module.exports = function lostOffsetDecl(css, settings) { lostOffset = declArr[0]; lostOffsetNumerator = declArr[0].split('/')[0]; - if ((declArr[1] !== undefined && declArr[1] === 'row') || declArr[1] === 'column') { + if ( + (declArr[1] !== undefined && declArr[1] === 'row') || + declArr[1] === 'column' + ) { lostOffsetDirection = declArr[1]; } @@ -36,7 +39,9 @@ module.exports = function lostOffsetDecl(css, settings) { } }); - decl.parent.nodes.forEach(function lostOffsetDirectionFunction(declaration) { + decl.parent.nodes.forEach(function lostOffsetDirectionFunction( + declaration + ) { if (declaration.prop === 'lost-offset-direction') { lostOffsetDirection = declaration.value; @@ -76,30 +81,52 @@ module.exports = function lostOffsetDecl(css, settings) { if (lostOffsetGutter !== '0') { decl.cloneBefore({ prop: 'margin-bottom', - value: 'calc(' + lostOffsetRounder + '% * ' - + lostOffset + ' - (' + lostOffsetGutter + ' - ' - + lostOffsetGutter + ' * ' + lostOffset + ') + (' - + lostOffsetGutter + ' * 2)) !important' + value: + 'calc(' + + lostOffsetRounder + + '% * ' + + lostOffset + + ' - (' + + lostOffsetGutter + + ' - ' + + lostOffsetGutter + + ' * ' + + lostOffset + + ') + (' + + lostOffsetGutter + + ' * 2)) !important' }); } else { decl.cloneBefore({ prop: 'margin-bottom', - value: 'calc(' + lostOffsetRounder + '% * ' + lostOffset + ') !important' + value: + 'calc(' + lostOffsetRounder + '% * ' + lostOffset + ') !important' }); } } else if (lostOffsetNumerator < 0) { if (lostOffsetGutter !== '0') { decl.cloneBefore({ prop: 'margin-top', - value: 'calc(' + lostOffsetRounder + '% * (' - + lostOffset + ' * -1) - (' + lostOffsetGutter + ' - ' - + lostOffsetGutter + ' * (' + lostOffset + ' * -1)) + ' - + lostOffsetGutter + ') !important' + value: + 'calc(' + + lostOffsetRounder + + '% * (' + + lostOffset + + ' * -1) - (' + + lostOffsetGutter + + ' - ' + + lostOffsetGutter + + ' * (' + + lostOffset + + ' * -1)) + ' + + lostOffsetGutter + + ') !important' }); } else { decl.cloneBefore({ prop: 'margin-top', - value: 'calc(' + lostOffsetRounder + '% * ' + lostOffset + ') !important' + value: + 'calc(' + lostOffsetRounder + '% * ' + lostOffset + ') !important' }); } } else { @@ -136,30 +163,52 @@ module.exports = function lostOffsetDecl(css, settings) { if (lostOffsetGutter !== '0') { decl.cloneBefore({ prop: 'margin-left', - value: 'calc(' + lostOffsetRounder + '% * (-' - + lostOffset + ' * -1) - (' + lostOffsetGutter + ' - ' - + lostOffsetGutter + ' * (-' + lostOffset + ' * -1)) + ' - + lostOffsetGutter + ') !important' + value: + 'calc(' + + lostOffsetRounder + + '% * (-' + + lostOffset + + ' * -1) - (' + + lostOffsetGutter + + ' - ' + + lostOffsetGutter + + ' * (-' + + lostOffset + + ' * -1)) + ' + + lostOffsetGutter + + ') !important' }); } else { decl.cloneBefore({ prop: 'margin-left', - value: 'calc(' + lostOffsetRounder + '% * ' + lostOffset + ') !important' + value: + 'calc(' + lostOffsetRounder + '% * ' + lostOffset + ') !important' }); } } else if (lostOffsetNumerator < 0) { if (lostOffsetGutter !== '0') { decl.cloneBefore({ prop: 'margin-left', - value: 'calc(' + lostOffsetRounder + '% * ' - + lostOffset + ' - (' + lostOffsetGutter + ' - ' - + lostOffsetGutter + ' * ' + lostOffset + ') + ' - + lostOffsetGutter + ') !important' + value: + 'calc(' + + lostOffsetRounder + + '% * ' + + lostOffset + + ' - (' + + lostOffsetGutter + + ' - ' + + lostOffsetGutter + + ' * ' + + lostOffset + + ') + ' + + lostOffsetGutter + + ') !important' }); } else { decl.cloneBefore({ prop: 'margin-left', - value: 'calc(' + lostOffsetRounder + '% * ' + lostOffset + ') !important' + value: + 'calc(' + lostOffsetRounder + '% * ' + lostOffset + ') !important' }); } } else { diff --git a/lib/lost-row.js b/lib/lost-row.js index 1592edba..df2b248c 100644 --- a/lib/lost-row.js +++ b/lib/lost-row.js @@ -59,7 +59,10 @@ module.exports = function lostRowDecl(css, settings, result) { if (lgLogic.validateUnit(declaration.value, validUnits)) { unit = declaration.value; } else { - decl.warn(result, `${declaration.value} is not a valid unit for lost-row`); + decl.warn( + result, + `${declaration.value} is not a valid unit for lost-row` + ); } declaration.remove(); } @@ -94,12 +97,7 @@ module.exports = function lostRowDecl(css, settings, result) { value: lostRowGutter }); - newBlock( - decl, - ':last-child', - ['margin-bottom'], - [0] - ); + newBlock(decl, ':last-child', ['margin-bottom'], [0]); } else { decl.cloneBefore({ prop: 'width', diff --git a/lib/lost-utility.js b/lib/lost-utility.js index 7ea05bb6..c89fa8dd 100644 --- a/lib/lost-utility.js +++ b/lib/lost-utility.js @@ -13,7 +13,7 @@ function unitsMatch() { var matched = true; args.forEach(function compareExtension(arg) { - if(arg.match(re).toString() !== extension) { + if (arg.match(re).toString() !== extension) { matched = false; } }); @@ -51,15 +51,10 @@ module.exports = function lostUtilityDecl(css) { decl, ':after', ['content', 'display', 'clear'], - ['\'\'', 'table', 'both'] + ["''", 'table', 'both'] ); - newBlock( - decl, - ':before', - ['content', 'display'], - ['\'\'', 'table'] - ); + newBlock(decl, ':before', ['content', 'display'], ["''", 'table']); } if (utility === 'overlay') { @@ -67,18 +62,25 @@ module.exports = function lostUtilityDecl(css) { numCols = utilityArray[2] || 12, gutter = utilityArray[3] || '20px', totalGutter = parseFloat(gutter) * (numCols - 1), - colWidth = (((parseFloat(maxWidth) - totalGutter) / numCols) / parseFloat(maxWidth)) * 100, - gutterPercentage = parseFloat(gutter) / parseFloat(maxWidth) * 100, + colWidth = + ((parseFloat(maxWidth) - totalGutter) / + numCols / + parseFloat(maxWidth)) * + 100, + gutterPercentage = (parseFloat(gutter) / parseFloat(maxWidth)) * 100, position = 0, gradient = 'to right, '; color = utilityArray[4] || '#e6f6ff'; - if(!unitsMatch(maxWidth, gutter)) { - throw decl.error('lost-utility: Please use the same units for width and gutter.', { plugin: 'lost', word: 'lost-utility' }); + if (!unitsMatch(maxWidth, gutter)) { + throw decl.error( + 'lost-utility: Please use the same units for width and gutter.', + { plugin: 'lost', word: 'lost-utility' } + ); } - - for(var i = 1; i < numCols; i++) { + + for (var i = 1; i < numCols; i++) { // Start of color column gradient = gradient + color + ' ' + position + '%, '; @@ -86,7 +88,14 @@ module.exports = function lostUtilityDecl(css) { position = position + colWidth; // End of color column + Start of gutter column - gradient = gradient + color + ' ' + position + '%, transparent ' + position + '%, '; + gradient = + gradient + + color + + ' ' + + position + + '%, transparent ' + + position + + '%, '; // Move position to end of gutter column position = position + gutterPercentage; @@ -96,12 +105,40 @@ module.exports = function lostUtilityDecl(css) { } gradient = gradient + color + ' ' + position + '%, ' + color + ' 100%'; - + newBlock( decl, ':before', - ['background-image', 'content', 'display', 'height', 'left', 'margin', 'max-width', 'opacity', 'pointer-events', 'position', 'right', 'width', 'z-index'], - ['linear-gradient(' + gradient + ')', '\'\'', 'inline-block', '100%', '0', '0 auto', maxWidth, '0.4', 'none', 'fixed', '0', '100%', '1'] + [ + 'background-image', + 'content', + 'display', + 'height', + 'left', + 'margin', + 'max-width', + 'opacity', + 'pointer-events', + 'position', + 'right', + 'width', + 'z-index' + ], + [ + 'linear-gradient(' + gradient + ')', + "''", + 'inline-block', + '100%', + '0', + '0 auto', + maxWidth, + '0.4', + 'none', + 'fixed', + '0', + '100%', + '1' + ] ); } diff --git a/lib/lost-vars-gutter-local.js b/lib/lost-vars-gutter-local.js index 315fc86d..0a9bca61 100644 --- a/lib/lost-vars-gutter-local.js +++ b/lib/lost-vars-gutter-local.js @@ -1,15 +1,18 @@ module.exports = function lostVarsGutterLocal(declaration, settings) { var newLocalValue = settings.gutter; - declaration.parent.nodes.forEach( parentDeclaration => { + declaration.parent.nodes.forEach(parentDeclaration => { var declarationArray = parentDeclaration.value.split(' '); - + if ( parentDeclaration.prop === 'lost-column' || parentDeclaration.prop === 'lost-waffle' || parentDeclaration.prop === 'lost-offset' ) { - if (declarationArray[2] !== undefined && declarationArray[2].search(/^\d/) !== -1) { + if ( + declarationArray[2] !== undefined && + declarationArray[2].search(/^\d/) !== -1 + ) { newLocalValue = declarationArray[2]; } } else if ( @@ -18,7 +21,10 @@ module.exports = function lostVarsGutterLocal(declaration, settings) { parentDeclaration.prop === 'lost-masonry-column' || parentDeclaration.prop === 'lost-row' ) { - if (declarationArray[1] !== undefined && declarationArray[1].search(/^\d/) !== -1) { + if ( + declarationArray[1] !== undefined && + declarationArray[1].search(/^\d/) !== -1 + ) { newLocalValue = declarationArray[1]; } } else if (parentDeclaration.prop === 'lost-column-gutter') { diff --git a/lib/lost-vars.js b/lib/lost-vars.js index 8de03f44..a77220ec 100644 --- a/lib/lost-vars.js +++ b/lib/lost-vars.js @@ -2,8 +2,8 @@ var lostGutter = require('./lost-vars-gutter'); var lostGutterLocal = require('./lost-vars-gutter-local'); var variableFunctions = { - 'gutter': lostGutter, - 'gutter-local': lostGutterLocal, + gutter: lostGutter, + 'gutter-local': lostGutterLocal }; module.exports = function lostVarsDecl(css, settings) { @@ -13,14 +13,14 @@ module.exports = function lostVarsDecl(css, settings) { re = /lost\-vars\(\s?['"]([\w\-]+)['"]\s?\)/gi, match = null; - if(value.indexOf('lost-vars(') === -1) { + if (value.indexOf('lost-vars(') === -1) { return; - } - + } + while ((match = re.exec(value)) !== null) { var variableFound = match[1].replace(/["']/g, ''); - if(variables.indexOf(variableFound) === -1) { + if (variables.indexOf(variableFound) === -1) { variables.push(variableFound); } } @@ -28,16 +28,21 @@ module.exports = function lostVarsDecl(css, settings) { variables.forEach(variable => { var func = variableFunctions[variable]; - if(typeof func !== 'function') { - throw declaration.error(`lost-vars: variable '${variable}' is unknown.`); + if (typeof func !== 'function') { + throw declaration.error( + `lost-vars: variable '${variable}' is unknown.` + ); } - + var newValue = func(declaration, settings); - var replaceRegex = new RegExp(`lost-vars\\(\s?['"]${variable}['"]\s?\\)`, 'gi'); + var replaceRegex = new RegExp( + `lost-vars\\(\s?['"]${variable}['"]\s?\\)`, + 'gi' + ); value = value.replace(replaceRegex, newValue); }); - declaration.value = value; + declaration.value = value; }); }; diff --git a/lib/lost-waffle.js b/lib/lost-waffle.js index 451faec1..58784688 100644 --- a/lib/lost-waffle.js +++ b/lib/lost-waffle.js @@ -37,7 +37,11 @@ module.exports = function lostWaffleDecl(css, settings) { lostWaffleCycle = declArr[1]; } - if (declArr[1] === 'flex' || declArr[1] === 'no-flex' || declArr[1] === 'auto') { + if ( + declArr[1] === 'flex' || + declArr[1] === 'no-flex' || + declArr[1] === 'auto' + ) { lostWaffleCycle = declArr[0].split('/')[1]; } @@ -88,7 +92,11 @@ module.exports = function lostWaffleDecl(css, settings) { if (lgLogic.validateUnit(declaration.value, validUnits)) { unit = declaration.value; } else { - throw declaration.error(`lost-unit: property ${declaration.value} is not a valid unit for lost-waffle.`); + throw declaration.error( + `lost-unit: property ${ + declaration.value + } is not a valid unit for lost-waffle.` + ); } declaration.remove(); } @@ -99,7 +107,9 @@ module.exports = function lostWaffleDecl(css, settings) { if (declaration.value === 'flex') { lostWaffleFlexbox = 'flex'; } else { - throw declaration.error(`lost-waffle-flexbox: property '${declaration.value}' is unknown.`); + throw declaration.error( + `lost-waffle-flexbox: property '${declaration.value}' is unknown.` + ); } declaration.remove(); @@ -143,16 +153,15 @@ module.exports = function lostWaffleDecl(css, settings) { decl.cloneBefore({ prop: 'flex-basis', - value: lgLogic.calcValue(lostWaffle, lostWaffleGutter, lostWaffleRounder) + value: lgLogic.calcValue( + lostWaffle, + lostWaffleGutter, + lostWaffleRounder + ) }); if (gridDirection === 'rtl') { - newBlock( - decl, - ':last-child', - ['margin-left', 'margin-bottom'], - [0, 0] - ); + newBlock(decl, ':last-child', ['margin-left', 'margin-bottom'], [0, 0]); newBlock( decl, @@ -248,12 +257,7 @@ module.exports = function lostWaffleDecl(css, settings) { } if (gridDirection === 'rtl') { - newBlock( - decl, - ':last-child', - ['margin-left', 'margin-bottom'], - [0, 0] - ); + newBlock(decl, ':last-child', ['margin-left', 'margin-bottom'], [0, 0]); newBlock( decl, @@ -279,9 +283,24 @@ 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) + width: lgLogic.calcValue( + lostWaffle, + lostWaffleGutter, + lostWaffleRounder, + unit + ), + 'max-width': lgLogic.calcValue( + lostWaffle, + lostWaffleGutter, + lostWaffleRounder, + unit + ), + height: lgLogic.calcValue( + lostWaffle, + lostWaffleGutter, + lostWaffleRounder, + unit + ) }); decl.remove(); diff --git a/package-lock.json b/package-lock.json index 62f74215..74ccf98b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -378,6 +378,12 @@ "supports-color": "^2.0.0" } }, + "ci-info": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-1.1.3.tgz", + "integrity": "sha512-SK/846h/Rcy8q9Z9CAwGBLfCJ6EkjJWdpelWDufQpqVDYq2Wnnv8zlSO6AMQap02jvhVruKKpEtQOufo3pFhLg==", + "dev": true + }, "circular-json": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/circular-json/-/circular-json-0.3.3.tgz", @@ -708,6 +714,16 @@ "user-home": "^2.0.0" } }, + "eslint-plugin-prettier": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-2.6.0.tgz", + "integrity": "sha512-floiaI4F7hRkTrFe8V2ItOK97QYrX75DjmdzmVITZoAP6Cn06oEDPQRsO6MlHEP/u2SxI3xQ52Kpjw6j5WGfeQ==", + "dev": true, + "requires": { + "fast-diff": "^1.1.1", + "jest-docblock": "^21.0.0" + } + }, "espree": { "version": "3.5.3", "resolved": "https://registry.npmjs.org/espree/-/espree-3.5.3.tgz", @@ -788,6 +804,12 @@ "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=", "dev": true }, + "fast-diff": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz", + "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==", + "dev": true + }, "fast-json-stable-stringify": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz", @@ -987,6 +1009,17 @@ "sshpk": "^1.7.0" } }, + "husky": { + "version": "0.14.3", + "resolved": "https://registry.npmjs.org/husky/-/husky-0.14.3.tgz", + "integrity": "sha512-e21wivqHpstpoiWA/Yi8eFti8E+sQDSS53cpJsPptPs295QTOQR0ZwnHo2TXy1XOpZFD9rPOd3NpmqTK6uMLJA==", + "dev": true, + "requires": { + "is-ci": "^1.0.10", + "normalize-path": "^1.0.0", + "strip-indent": "^2.0.0" + } + }, "ignore": { "version": "3.3.7", "resolved": "https://registry.npmjs.org/ignore/-/ignore-3.3.7.tgz", @@ -1051,6 +1084,15 @@ "loose-envify": "^1.0.0" } }, + "is-ci": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-1.1.0.tgz", + "integrity": "sha512-c7TnwxLePuqIlxHgr7xtxzycJPegNHFuIrBkwbf8hc58//+Op1CqFkyS+xnIMkwn9UsJIwc174BIjkyBmSpjKg==", + "dev": true, + "requires": { + "ci-info": "^1.0.0" + } + }, "is-fullwidth-code-point": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", @@ -1154,6 +1196,12 @@ "semver": "^5.5.0" } }, + "jest-docblock": { + "version": "21.2.0", + "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-21.2.0.tgz", + "integrity": "sha512-5IZ7sY9dBAYSV+YjQ0Ovb540Ku7AO9Z5o2Cg789xj167iQuZ2cG+z0f3Uct6WeYLbU6aQiM2pCs7sZ+4dotydw==", + "dev": true + }, "js-tokens": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz", @@ -1355,6 +1403,12 @@ "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=", "dev": true }, + "normalize-path": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-1.0.0.tgz", + "integrity": "sha1-MtDkcvkf80VwHBWoMRAY07CpA3k=", + "dev": true + }, "number-is-nan": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", @@ -2609,6 +2663,12 @@ "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=", "dev": true }, + "prettier": { + "version": "1.13.5", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.13.5.tgz", + "integrity": "sha512-4M90mfvLz6yRf2Dhzd+xPIE6b4xkI8nHMJhsSm9IlfG17g6wujrrm7+H1X8x52tC4cSNm6HmuhCUSNe6Hd5wfw==", + "dev": true + }, "process-nextick-args": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz", @@ -2854,6 +2914,12 @@ "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=", "dev": true }, + "strip-indent": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-2.0.0.tgz", + "integrity": "sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g=", + "dev": true + }, "strip-json-comments": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz", diff --git a/package.json b/package.json index adf828ee..75121ff9 100644 --- a/package.json +++ b/package.json @@ -29,12 +29,19 @@ "clean-css": "^4.1.6", "codecov": "^3.0.2", "eslint": "^3.16", + "eslint-plugin-prettier": "2.6.0", + "husky": "^0.14.3", "mocha": "^5.2.0", - "nyc": "^13.0.0" + "nyc": "^13.0.0", + "prettier": "1.13.5" }, "scripts": { + "precommit": "lint-staged", "test": "nyc mocha", "lint": "eslint .", "report-coverage": "nyc report --reporter=text-lcov > coverage.lcov && codecov" + }, + "lint-staged": { + "*.{js,json,css,md}": ["prettier --write", "git add"] } } diff --git a/test/.eslintrc.js b/test/.eslintrc.js index 2f4a9666..dfa8c65e 100644 --- a/test/.eslintrc.js +++ b/test/.eslintrc.js @@ -1,5 +1,5 @@ module.exports = { - 'env': { - 'mocha': true, - }, + env: { + mocha: true + } }; diff --git a/test/check.js b/test/check.js index d3c7edfd..2aaf795d 100644 --- a/test/check.js +++ b/test/check.js @@ -1,11 +1,11 @@ 'use strict'; -var expect = require('chai').expect; -var lost = require('../lost'); +var expect = require('chai').expect; +var lost = require('../lost'); var cleanCss = require('clean-css'); var postcss = require('postcss'); -module.exports = function check( input, output, opts ) { +module.exports = function check(input, output, opts) { var processor = postcss([lost(opts)]); var cleanInput = new cleanCss({}).minify(processor.process(input).css); var cleanOutput = new cleanCss({}).minify(output); diff --git a/test/lg-gutter.js b/test/lg-gutter.js index 55a9ee64..daa9e328 100644 --- a/test/lg-gutter.js +++ b/test/lg-gutter.js @@ -4,25 +4,19 @@ var check = require('./check'); describe('lost-gutter', () => { it('replaces $lost-gutter with global', () => { - check( - 'div { padding: $lost-gutter; }', - 'div { padding: 30px; }' - ); - check( - 'div { margin: 25px $lost-gutter; }', - 'div { margin: 25px 30px; }' - ); + check('div { padding: $lost-gutter; }', 'div { padding: 30px; }'); + check('div { margin: 25px $lost-gutter; }', 'div { margin: 25px 30px; }'); check( 'div { margin: 25px $lost-gutter $lost-gutter; }', 'div { margin: 25px 30px 30px; }' ); check( 'div { padding: $lost-gutter; lost-column: 1/3 3 40px; }', - 'div { padding: 30px; width: calc(99.9% * 1/3 - (40px - 40px * 1/3)); }\n'+ - 'div:nth-child(1n) { float: left; margin-right: 40px; clear: none; }\n'+ - 'div:last-child { margin-right: 0; }\n'+ - 'div:nth-child(3n) { margin-right: 0; float: right; }\n'+ - 'div:nth-child(3n + 1) { clear: both; }' + 'div { padding: 30px; width: calc(99.9% * 1/3 - (40px - 40px * 1/3)); }\n' + + 'div:nth-child(1n) { float: left; margin-right: 40px; clear: none; }\n' + + 'div:last-child { margin-right: 0; }\n' + + 'div:nth-child(3n) { margin-right: 0; float: right; }\n' + + 'div:nth-child(3n + 1) { clear: both; }' ); }); it('replaces $lost-gutter with global when global is not default', () => { @@ -33,45 +27,44 @@ describe('lost-gutter', () => { }); }); - describe('lost-gutter-local', () => { it('replaces $lost-gutter-local', () => { check( 'div { padding: $lost-gutter-local; lost-column: 1/3; lost-column-gutter: 50px; }', - 'div { padding: 50px; width: calc(99.9% * 1/3 - (50px - 50px * 1/3)); }\n'+ - 'div:nth-child(1n) { float: left; margin-right: 50px; clear: none; }\n'+ - 'div:last-child { margin-right: 0; }\n'+ - 'div:nth-child(3n) { margin-right: 0; float: right; }\n'+ - 'div:nth-child(3n + 1) { clear: both; }' + 'div { padding: 50px; width: calc(99.9% * 1/3 - (50px - 50px * 1/3)); }\n' + + 'div:nth-child(1n) { float: left; margin-right: 50px; clear: none; }\n' + + 'div:last-child { margin-right: 0; }\n' + + 'div:nth-child(3n) { margin-right: 0; float: right; }\n' + + 'div:nth-child(3n + 1) { clear: both; }' ); check( 'div { padding: $lost-gutter-local; lost-column: 1/3; lost-column-gutter: 0; }', - 'div { padding: 0; width: calc(99.9% * 1/3); }\n'+ - 'div:nth-child(1n) { float: left; margin-right: 0; clear: none; }\n'+ - 'div:last-child { margin-right: 0; }\n'+ - 'div:nth-child(3n) { margin-right: 0; float: right; }\n'+ - 'div:nth-child(3n + 1) { clear: both; }' + 'div { padding: 0; width: calc(99.9% * 1/3); }\n' + + 'div:nth-child(1n) { float: left; margin-right: 0; clear: none; }\n' + + 'div:last-child { margin-right: 0; }\n' + + 'div:nth-child(3n) { margin-right: 0; float: right; }\n' + + 'div:nth-child(3n + 1) { clear: both; }' ); }); it('works on shortcut lost-column', () => { check( 'div { padding: $lost-gutter-local; lost-column: 1/3 3 70px;}', - 'div { padding: 70px; width: calc(99.9% * 1/3 - (70px - 70px * 1/3));}\n'+ - 'div:nth-child(1n) { float: left; margin-right: 70px; clear: none;}\n'+ - 'div:last-child { margin-right: 0;}\n'+ - 'div:nth-child(3n) { margin-right: 0; float: right;}\n'+ - 'div:nth-child(3n + 1) { clear: both;}' + 'div { padding: 70px; width: calc(99.9% * 1/3 - (70px - 70px * 1/3));}\n' + + 'div:nth-child(1n) { float: left; margin-right: 70px; clear: none;}\n' + + 'div:last-child { margin-right: 0;}\n' + + 'div:nth-child(3n) { margin-right: 0; float: right;}\n' + + 'div:nth-child(3n + 1) { clear: both;}' ); }); 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)); 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' + - 'div:nth-child(3n + 1) { clear: both;}\n' + - 'div:nth-last-child(-n + 3) { margin-bottom: 0;}' + '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' + + 'div:nth-child(3n + 1) { clear: both;}\n' + + 'div:nth-last-child(-n + 3) { margin-bottom: 0;}' ); }); it('works on shortcut lost-offset', () => { @@ -84,8 +77,8 @@ describe('lost-gutter-local', () => { check( 'div { padding: $lost-gutter-local; lost-center: 400px 60px;}', 'div { padding: 60px; max-width: 400px; margin-left: auto; margin-right: auto; padding-left: 60px; padding-right: 60px;}\n' + - 'div:before { content: \'\'; display: table;}\n' + - 'div:after { content: \'\'; display: table; clear: both;}' + "div:before { content: ''; display: table;}\n" + + "div:after { content: ''; display: table; clear: both;}" ); }); it('works on shortcut lost-masonry-wrap', () => { @@ -104,27 +97,27 @@ describe('lost-gutter-local', () => { check( 'div { padding: $lost-gutter-local; lost-row: 1/3 70px;}', 'div { padding: 70px; width: 100%; height: calc(99.9% * 1/3 - (70px - 70px * 1/3)); margin-bottom: 70px;}\n' + - 'div:last-child { margin-bottom: 0;}' + 'div:last-child { margin-bottom: 0;}' ); }); it('takes global if no local one is given', () => { check( 'div { padding: $lost-gutter-local; lost-column: 1/3;}', 'div { padding: 30px; width: calc(99.9% * 1/3 - (30px - 30px * 1/3));}\n' + - 'div:nth-child(1n) { float: left; margin-right: 30px; clear: none;}\n' + - 'div:last-child { margin-right: 0;}\n' + - 'div:nth-child(3n) { margin-right: 0; float: right;}\n' + - 'div:nth-child(3n + 1) { clear: both;}' + 'div:nth-child(1n) { float: left; margin-right: 30px; clear: none;}\n' + + 'div:last-child { margin-right: 0;}\n' + + 'div:nth-child(3n) { margin-right: 0; float: right;}\n' + + 'div:nth-child(3n + 1) { clear: both;}' ); }); it('allows for multiple uses of the variable', () => { check( 'div { padding: $lost-gutter-local; lost-column: 1/3 3 20px; margin-top: $lost-gutter-local;}', 'div { padding: 20px; width: calc(99.9% * 1/3 - (20px - 20px * 1/3)); margin-top: 20px;}\n' + - 'div:nth-child(1n) { float: left; margin-right: 20px; clear: none;}\n' + - 'div:last-child { margin-right: 0;}\n' + - 'div:nth-child(3n) { margin-right: 0; float: right;}\n' + - 'div:nth-child(3n + 1) { clear: both;}' + 'div:nth-child(1n) { float: left; margin-right: 20px; clear: none;}\n' + + 'div:last-child { margin-right: 0;}\n' + + 'div:nth-child(3n) { margin-right: 0; float: right;}\n' + + 'div:nth-child(3n + 1) { clear: both;}' ); }); }); diff --git a/test/lg-logic.js b/test/lg-logic.js index c2fa6af3..241a7bde 100644 --- a/test/lg-logic.js +++ b/test/lg-logic.js @@ -4,7 +4,6 @@ var expect = require('chai').expect; var lgLogic = require('../lib/_lg-logic.js'); var postcss = require('postcss'); - describe('calcValue works as it should', () => { it('gutter, rounder, and unit ✅', () => { var testCase = lgLogic.calcValue('1/3', '30px', 100, 'vw'); @@ -31,11 +30,11 @@ describe('calcValue works as it should', () => { describe('Units are validated based on if they make sense', () => { it('only allows what is in the array of accepted units', () => { - expect(lgLogic.validateUnit('vw', ['%','vw'])).to.be.true; - expect(lgLogic.validateUnit('%', ['%','vw'])).to.be.true; - expect(lgLogic.validateUnit('px', ['%','vw', 'px', 'em'])).to.be.true; - expect(lgLogic.validateUnit('foobar', ['%','vw'])).to.not.be.true; - expect(lgLogic.validateUnit(3, ['%','vw'])).to.not.be.true; + expect(lgLogic.validateUnit('vw', ['%', 'vw'])).to.be.true; + expect(lgLogic.validateUnit('%', ['%', 'vw'])).to.be.true; + expect(lgLogic.validateUnit('px', ['%', 'vw', 'px', 'em'])).to.be.true; + expect(lgLogic.validateUnit('foobar', ['%', 'vw'])).to.not.be.true; + expect(lgLogic.validateUnit(3, ['%', 'vw'])).to.not.be.true; }); }); @@ -71,5 +70,4 @@ describe('parseLostProperty works as it should', () => { expect(testCase).to.equal(expectedResult); }); - }); diff --git a/test/lost-align.js b/test/lost-align.js index d721a4f8..d741d08b 100644 --- a/test/lost-align.js +++ b/test/lost-align.js @@ -8,8 +8,8 @@ describe('lost-align', function() { check( 'a { lost-align: reset; }', 'a { position: static; }\n' + - 'a > * { position: static; top: auto; right: auto; bottom: auto;' + - ' left: auto; transform: translate(0, 0); }' + 'a > * { position: static; top: auto; right: auto; bottom: auto;' + + ' left: auto; transform: translate(0, 0); }' ); }); @@ -17,8 +17,8 @@ describe('lost-align', function() { check( 'a { lost-align: horizontal; }', 'a { position: relative; }\n' + - 'a > * { position: absolute; top: auto; right: auto; bottom: auto;' + - ' left: 50%; transform: translate(-50%, 0); }' + 'a > * { position: absolute; top: auto; right: auto; bottom: auto;' + + ' left: 50%; transform: translate(-50%, 0); }' ); }); @@ -26,8 +26,8 @@ describe('lost-align', function() { check( 'a { lost-align: vertical; }', 'a { position: relative; }\n' + - 'a > * { position: absolute; top: 50%; right: auto; bottom: auto;' + - ' left: auto; transform: translate(0, -50%); }' + 'a > * { position: absolute; top: 50%; right: auto; bottom: auto;' + + ' left: auto; transform: translate(0, -50%); }' ); }); @@ -35,8 +35,8 @@ describe('lost-align', function() { check( 'a { lost-align: top-left; }', 'a { position: relative; }\n' + - 'a > * { position: absolute; top: 0; right: auto; bottom: auto;' + - ' left: 0; transform: translate(0, 0); }' + 'a > * { position: absolute; top: 0; right: auto; bottom: auto;' + + ' left: 0; transform: translate(0, 0); }' ); }); @@ -44,8 +44,8 @@ describe('lost-align', function() { check( 'a { lost-align: top-center; }', 'a { position: relative; }\n' + - 'a > * { position: absolute; top: 0; right: auto; bottom: auto;' + - ' left: 50%; transform: translate(-50%, 0); }' + 'a > * { position: absolute; top: 0; right: auto; bottom: auto;' + + ' left: 50%; transform: translate(-50%, 0); }' ); }); @@ -53,8 +53,8 @@ describe('lost-align', function() { check( 'a { lost-align: top; }', 'a { position: relative; }\n' + - 'a > * { position: absolute; top: 0; right: auto; bottom: auto;' + - ' left: 50%; transform: translate(-50%, 0); }' + 'a > * { position: absolute; top: 0; right: auto; bottom: auto;' + + ' left: 50%; transform: translate(-50%, 0); }' ); }); @@ -62,8 +62,8 @@ describe('lost-align', function() { check( 'a { lost-align: top-right; }', 'a { position: relative; }\n' + - 'a > * { position: absolute; top: 0; right: 0; bottom: auto;' + - ' left: auto; transform: translate(0, 0); }' + 'a > * { position: absolute; top: 0; right: 0; bottom: auto;' + + ' left: auto; transform: translate(0, 0); }' ); }); @@ -71,8 +71,8 @@ describe('lost-align', function() { check( 'a { lost-align: middle-left; }', 'a { position: relative; }\n' + - 'a > * { position: absolute; top: 50%; right: auto; bottom: auto;' + - ' left: 0; transform: translate(0, -50%); }' + 'a > * { position: absolute; top: 50%; right: auto; bottom: auto;' + + ' left: 0; transform: translate(0, -50%); }' ); }); @@ -80,8 +80,8 @@ describe('lost-align', function() { check( 'a { lost-align: left; }', 'a { position: relative; }\n' + - 'a > * { position: absolute; top: 50%; right: auto; bottom: auto;' + - ' left: 0; transform: translate(0, -50%); }' + 'a > * { position: absolute; top: 50%; right: auto; bottom: auto;' + + ' left: 0; transform: translate(0, -50%); }' ); }); @@ -89,8 +89,8 @@ describe('lost-align', function() { check( 'a { lost-align: middle-center; }', 'a { position: relative; }\n' + - 'a > * { position: absolute; top: 50%; right: auto; bottom: auto;' + - ' left: 50%; transform: translate(-50%, -50%); }' + 'a > * { position: absolute; top: 50%; right: auto; bottom: auto;' + + ' left: 50%; transform: translate(-50%, -50%); }' ); }); @@ -98,8 +98,8 @@ describe('lost-align', function() { check( 'a { lost-align: center; }', 'a { position: relative; }\n' + - 'a > * { position: absolute; top: 50%; right: auto; bottom: auto;' + - ' left: 50%; transform: translate(-50%, -50%); }' + 'a > * { position: absolute; top: 50%; right: auto; bottom: auto;' + + ' left: 50%; transform: translate(-50%, -50%); }' ); }); @@ -107,8 +107,8 @@ describe('lost-align', function() { check( 'a { lost-align: middle-right; }', 'a { position: relative; }\n' + - 'a > * { position: absolute; top: 50%; right: 0; bottom: auto;' + - ' left: auto; transform: translate(0, -50%); }' + 'a > * { position: absolute; top: 50%; right: 0; bottom: auto;' + + ' left: auto; transform: translate(0, -50%); }' ); }); @@ -116,8 +116,8 @@ describe('lost-align', function() { check( 'a { lost-align: right; }', 'a { position: relative; }\n' + - 'a > * { position: absolute; top: 50%; right: 0; bottom: auto;' + - ' left: auto; transform: translate(0, -50%); }' + 'a > * { position: absolute; top: 50%; right: 0; bottom: auto;' + + ' left: auto; transform: translate(0, -50%); }' ); }); @@ -125,8 +125,8 @@ describe('lost-align', function() { check( 'a { lost-align: bottom-left; }', 'a { position: relative; }\n' + - 'a > * { position: absolute; top: auto; right: auto; bottom: 0;' + - ' left: 0; transform: translate(0, 0); }' + 'a > * { position: absolute; top: auto; right: auto; bottom: 0;' + + ' left: 0; transform: translate(0, 0); }' ); }); @@ -134,8 +134,8 @@ describe('lost-align', function() { check( 'a { lost-align: bottom-center; }', 'a { position: relative; }\n' + - 'a > * { position: absolute; top: auto; right: auto; bottom: 0;' + - ' left: 50%; transform: translate(-50%, 0); }' + 'a > * { position: absolute; top: auto; right: auto; bottom: 0;' + + ' left: 50%; transform: translate(-50%, 0); }' ); }); @@ -143,8 +143,8 @@ describe('lost-align', function() { check( 'a { lost-align: bottom; }', 'a { position: relative; }\n' + - 'a > * { position: absolute; top: auto; right: auto; bottom: 0;' + - ' left: 50%; transform: translate(-50%, 0); }' + 'a > * { position: absolute; top: auto; right: auto; bottom: 0;' + + ' left: 50%; transform: translate(-50%, 0); }' ); }); @@ -152,15 +152,15 @@ describe('lost-align', function() { check( 'a { lost-align: bottom-right; }', 'a { position: relative; }\n' + - 'a > * { position: absolute; top: auto; right: 0; bottom: 0;' + - ' left: auto; transform: translate(0, 0); }' + 'a > * { position: absolute; top: auto; right: 0; bottom: 0;' + + ' left: auto; transform: translate(0, 0); }' ); }); it('throws error if it does not understand the direction', function() { throws( 'a { lost-align: bottom-rigth; }', - 'lost-align: direction \'bottom-rigth\' is unknown.' + "lost-align: direction 'bottom-rigth' is unknown." ); }); @@ -169,7 +169,7 @@ describe('lost-align', function() { check( 'a { lost-align: reset flex; }', 'a { display: initial; }\n' + - 'a { justify-content: inherit; align-items: inherit; }' + 'a { justify-content: inherit; align-items: inherit; }' ); }); @@ -177,7 +177,7 @@ describe('lost-align', function() { check( 'a { lost-align: horizontal flex; }', 'a { display: flex; }\n' + - 'a { justify-content: center; align-items: inherit; }' + 'a { justify-content: center; align-items: inherit; }' ); }); @@ -185,7 +185,7 @@ describe('lost-align', function() { check( 'a { lost-align: vertical flex; }', 'a { display: flex; }\n' + - 'a { justify-content: inherit; align-items: center; }' + 'a { justify-content: inherit; align-items: center; }' ); }); @@ -193,7 +193,7 @@ describe('lost-align', function() { check( 'a { lost-align: top-left flex; }', 'a { display: flex; }\n' + - 'a { justify-content: flex-start; align-items: flex-start; }' + 'a { justify-content: flex-start; align-items: flex-start; }' ); }); @@ -201,7 +201,7 @@ describe('lost-align', function() { check( 'a { lost-align: top-center flex; }', 'a { display: flex; }\n' + - 'a { justify-content: center; align-items: flex-start; }' + 'a { justify-content: center; align-items: flex-start; }' ); }); @@ -209,7 +209,7 @@ describe('lost-align', function() { check( 'a { lost-align: top flex; }', 'a { display: flex; }\n' + - 'a { justify-content: center; align-items: flex-start; }' + 'a { justify-content: center; align-items: flex-start; }' ); }); @@ -217,7 +217,7 @@ describe('lost-align', function() { check( 'a { lost-align: top-right flex; }', 'a { display: flex; }\n' + - 'a { justify-content: flex-end; align-items: flex-start; }' + 'a { justify-content: flex-end; align-items: flex-start; }' ); }); @@ -225,7 +225,7 @@ describe('lost-align', function() { check( 'a { lost-align: middle-left flex; }', 'a { display: flex; }\n' + - 'a { justify-content: flex-start; align-items: center; }' + 'a { justify-content: flex-start; align-items: center; }' ); }); @@ -233,7 +233,7 @@ describe('lost-align', function() { check( 'a { lost-align: left flex; }', 'a { display: flex; }\n' + - 'a { justify-content: flex-start; align-items: center; }' + 'a { justify-content: flex-start; align-items: center; }' ); }); @@ -241,7 +241,7 @@ describe('lost-align', function() { check( 'a { lost-align: middle-center flex; }', 'a { display: flex; }\n' + - 'a { justify-content: center; align-items: center; }' + 'a { justify-content: center; align-items: center; }' ); }); @@ -249,7 +249,7 @@ describe('lost-align', function() { check( 'a { lost-align: center flex; }', 'a { display: flex; }\n' + - 'a { justify-content: center; align-items: center; }' + 'a { justify-content: center; align-items: center; }' ); }); @@ -257,7 +257,7 @@ describe('lost-align', function() { check( 'a { lost-align: middle-right flex; }', 'a { display: flex; }\n' + - 'a { justify-content: flex-end; align-items: center; }' + 'a { justify-content: flex-end; align-items: center; }' ); }); @@ -265,7 +265,7 @@ describe('lost-align', function() { check( 'a { lost-align: right flex; }', 'a { display: flex; }\n' + - 'a { justify-content: flex-end; align-items: center; }' + 'a { justify-content: flex-end; align-items: center; }' ); }); @@ -273,7 +273,7 @@ describe('lost-align', function() { check( 'a { lost-align: bottom-left flex; }', 'a { display: flex; }\n' + - 'a { justify-content: flex-start; align-items: flex-end; }' + 'a { justify-content: flex-start; align-items: flex-end; }' ); }); @@ -281,7 +281,7 @@ describe('lost-align', function() { check( 'a { lost-align: bottom-center flex; }', 'a { display: flex; }\n' + - 'a { justify-content: center; align-items: flex-end; }' + 'a { justify-content: center; align-items: flex-end; }' ); }); @@ -289,7 +289,7 @@ describe('lost-align', function() { check( 'a { lost-align: bottom flex; }', 'a { display: flex; }\n' + - 'a { justify-content: center; align-items: flex-end; }' + 'a { justify-content: center; align-items: flex-end; }' ); }); @@ -297,23 +297,22 @@ describe('lost-align', function() { check( 'a { lost-align: bottom-right flex; }', 'a { display: flex; }\n' + - 'a { justify-content: flex-end; align-items: flex-end; }' + 'a { justify-content: flex-end; align-items: flex-end; }' ); }); it('throws error if it does not understand the direction', function() { throws( 'a { lost-align: bottom-rigth flex; }', - 'lost-align: direction \'bottom-rigth\' is unknown.' + "lost-align: direction 'bottom-rigth' is unknown." ); }); it('Flexbox is set globally', function() { check( - '@lost flexbox flex; \n'+ - 'a { lost-align: bottom-right; }', + '@lost flexbox flex; \n' + 'a { lost-align: bottom-right; }', 'a { display: flex; }\n' + - 'a { justify-content: flex-end; align-items: flex-end; }' + 'a { justify-content: flex-end; align-items: flex-end; }' ); }); }); diff --git a/test/lost-at-rule.js b/test/lost-at-rule.js index 8612da98..d2481ceb 100644 --- a/test/lost-at-rule.js +++ b/test/lost-at-rule.js @@ -5,165 +5,147 @@ var check = require('./check'); describe('lost-at-rule', function() { it('changes the default gutter', function() { check( - '@lost gutter 60px;\n' + - 'div {\n' + - ' lost-column: 1/3;\n' + - '}', + '@lost gutter 60px;\n' + 'div {\n' + ' lost-column: 1/3;\n' + '}', 'div {\n' + - ' width: calc(99.9% * 1/3 - (60px - 60px * 1/3));\n' + - '}\n' + - 'div:nth-child(1n) {\n' + - ' float: left;\n' + - ' margin-right: 60px;\n' + - ' clear: none;\n' + - '}\n' + - 'div:last-child {\n' + - ' margin-right: 0;\n' + - '}\n' + - 'div:nth-child(3n) {\n' + - ' margin-right: 0;\n' + - ' float: right;\n' + - '}\n' + - 'div:nth-child(3n + 1) {\n' + - ' clear: both;\n' + - '}' + ' width: calc(99.9% * 1/3 - (60px - 60px * 1/3));\n' + + '}\n' + + 'div:nth-child(1n) {\n' + + ' float: left;\n' + + ' margin-right: 60px;\n' + + ' clear: none;\n' + + '}\n' + + 'div:last-child {\n' + + ' margin-right: 0;\n' + + '}\n' + + 'div:nth-child(3n) {\n' + + ' margin-right: 0;\n' + + ' float: right;\n' + + '}\n' + + 'div:nth-child(3n + 1) {\n' + + ' clear: both;\n' + + '}' ); }); it('changes the flexbox default', function() { check( - '@lost flexbox flex;\n' + - 'div {\n' + - ' lost-column: 1/3;\n' + - '}', + '@lost flexbox flex;\n' + 'div {\n' + ' lost-column: 1/3;\n' + '}', 'div {\n' + - ' flex-grow: 0;\n' + - ' flex-shrink: 0;\n' + - ' flex-basis: calc(99.9% * 1/3 - (30px - 30px * 1/3));\n' + - ' max-width: calc(99.9% * 1/3 - (30px - 30px * 1/3));\n' + - ' width: calc(99.9% * 1/3 - (30px - 30px * 1/3));\n' + - '}\n' + - 'div:nth-child(1n) {\n' + - ' margin-right: 30px;\n' + - ' margin-left: 0;\n' + - '}\n' + - 'div:last-child {\n' + - ' margin-right: 0;\n' + - '}\n' + - 'div:nth-child(3n) {\n' + - ' margin-right: 0;\n' + - ' margin-left: auto;\n' + - '}' + ' flex-grow: 0;\n' + + ' flex-shrink: 0;\n' + + ' flex-basis: calc(99.9% * 1/3 - (30px - 30px * 1/3));\n' + + ' max-width: calc(99.9% * 1/3 - (30px - 30px * 1/3));\n' + + ' width: calc(99.9% * 1/3 - (30px - 30px * 1/3));\n' + + '}\n' + + 'div:nth-child(1n) {\n' + + ' margin-right: 30px;\n' + + ' margin-left: 0;\n' + + '}\n' + + 'div:last-child {\n' + + ' margin-right: 0;\n' + + '}\n' + + 'div:nth-child(3n) {\n' + + ' margin-right: 0;\n' + + ' margin-left: auto;\n' + + '}' ); }); it('changes the cycle to none', function() { check( - '@lost cycle none;\n' + - 'div {\n' + - ' lost-column: 1/3;\n' + - '}', + '@lost cycle none;\n' + 'div {\n' + ' lost-column: 1/3;\n' + '}', 'div {\n' + - ' width: calc(99.9% * 1/3 - (30px - 30px * 1/3));\n' + - '}\n' + - 'div:nth-child(1n) {\n' + - ' float: left;\n' + - ' margin-right: 30px;\n' + - ' clear: none;\n' + - '}\n' + - 'div:last-child {\n' + - ' margin-right: 0;\n' + - '}\n' + - 'div:nth-child(0n) {\n' + - ' float: right;\n' + - '}' + ' width: calc(99.9% * 1/3 - (30px - 30px * 1/3));\n' + + '}\n' + + 'div:nth-child(1n) {\n' + + ' float: left;\n' + + ' margin-right: 30px;\n' + + ' clear: none;\n' + + '}\n' + + 'div:last-child {\n' + + ' margin-right: 0;\n' + + '}\n' + + 'div:nth-child(0n) {\n' + + ' float: right;\n' + + '}' ); }); it('changes the cycle to auto', function() { check( - '@lost cycle auto;\n' + - 'div {\n' + - ' lost-column: 1/3;\n' + - '}', + '@lost cycle auto;\n' + 'div {\n' + ' lost-column: 1/3;\n' + '}', 'div {\n' + - ' width: calc(99.9% * 1/3 - (30px - 30px * 1/3));\n' + - '}\n' + - 'div:nth-child(1n) {\n' + - ' float: left;\n' + - ' margin-right: 30px;\n' + - ' clear: none;\n' + - '}\n' + - 'div:last-child {\n' + - ' margin-right: 0;\n' + - '}\n' + - 'div:nth-child(3n) {\n' + - ' margin-right: 0;\n' + - ' float: right;\n' + - '}\n' + - 'div:nth-child(3n + 1) {\n' + - ' clear: both;\n' + - '}' + ' width: calc(99.9% * 1/3 - (30px - 30px * 1/3));\n' + + '}\n' + + 'div:nth-child(1n) {\n' + + ' float: left;\n' + + ' margin-right: 30px;\n' + + ' clear: none;\n' + + '}\n' + + 'div:last-child {\n' + + ' margin-right: 0;\n' + + '}\n' + + 'div:nth-child(3n) {\n' + + ' margin-right: 0;\n' + + ' float: right;\n' + + '}\n' + + 'div:nth-child(3n + 1) {\n' + + ' clear: both;\n' + + '}' ); }); it('changes the cycle to number', function() { check( - '@lost cycle 2;\n' + - 'div {\n' + - ' lost-column: 1/3;\n' + - '}', + '@lost cycle 2;\n' + 'div {\n' + ' lost-column: 1/3;\n' + '}', 'div {\n' + - ' width: calc(99.9% * 1/3 - (30px - 30px * 1/3));\n' + - '}\n' + - 'div:nth-child(1n) {\n' + - ' float: left;\n' + - ' margin-right: 30px;\n' + - ' clear: none;\n' + - '}\n' + - 'div:last-child {\n' + - ' margin-right: 0;\n' + - '}\n' + - 'div:nth-child(2n) {\n' + - ' margin-right: 0;\n' + - ' float: right;\n' + - '}\n' + - 'div:nth-child(2n + 1) {\n' + - ' clear: both;\n' + - '}' + ' width: calc(99.9% * 1/3 - (30px - 30px * 1/3));\n' + + '}\n' + + 'div:nth-child(1n) {\n' + + ' float: left;\n' + + ' margin-right: 30px;\n' + + ' clear: none;\n' + + '}\n' + + 'div:last-child {\n' + + ' margin-right: 0;\n' + + '}\n' + + 'div:nth-child(2n) {\n' + + ' margin-right: 0;\n' + + ' float: right;\n' + + '}\n' + + 'div:nth-child(2n + 1) {\n' + + ' clear: both;\n' + + '}' ); }); it('can adapt the global rounder', function() { check( - '@lost rounder 100;\n' + - 'div {\n' + - ' lost-column: 1/3;\n' + - '}', + '@lost rounder 100;\n' + 'div {\n' + ' lost-column: 1/3;\n' + '}', 'div {\n' + - ' width: calc(100% * 1/3 - (30px - 30px * 1/3));\n' + - '}\n' + - 'div:nth-child(1n) {\n' + - ' float: left;\n' + - ' margin-right: 30px;\n' + - ' clear: none;\n' + - '}\n' + - 'div:last-child {\n' + - ' margin-right: 0;\n' + - '}\n' + - 'div:nth-child(3n) {\n' + - ' margin-right: 0;\n' + - ' float: right;\n' + - '}\n' + - 'div:nth-child(3n + 1) {\n' + - ' clear: both;\n' + - '}' + ' width: calc(100% * 1/3 - (30px - 30px * 1/3));\n' + + '}\n' + + 'div:nth-child(1n) {\n' + + ' float: left;\n' + + ' margin-right: 30px;\n' + + ' clear: none;\n' + + '}\n' + + 'div:last-child {\n' + + ' margin-right: 0;\n' + + '}\n' + + 'div:nth-child(3n) {\n' + + ' margin-right: 0;\n' + + ' float: right;\n' + + '}\n' + + 'div:nth-child(3n + 1) {\n' + + ' clear: both;\n' + + '}' ); }); }); diff --git a/test/lost-center.js b/test/lost-center.js index f44b7048..7ef31619 100644 --- a/test/lost-center.js +++ b/test/lost-center.js @@ -8,8 +8,8 @@ describe('lost-center', function() { 'a { lost-center: 4/12; lost-unit: $ }', 'a { max-width: calc(99.9% * 4/12); margin-left: auto; margin-right: auto }\n' + - 'a:before { content: \'\'; display: table }\n' + - 'a:after { content: \'\'; display: table; clear: both }' + "a:before { content: ''; display: table }\n" + + "a:after { content: ''; display: table; clear: both }" ); }); @@ -18,8 +18,8 @@ describe('lost-center', function() { 'a { lost-center: 3/9; lost-unit: vw }', 'a { max-width: calc(99.9vw * 3/9); margin-left: auto; margin-right: auto }\n' + - 'a:before { content: \'\'; display: table }\n' + - 'a:after { content: \'\'; display: table; clear: both }' + "a:before { content: ''; display: table }\n" + + "a:after { content: ''; display: table; clear: both }" ); }); @@ -27,8 +27,8 @@ describe('lost-center', function() { check( 'a { lost-center: 980px }', 'a { max-width: 980px; margin-left: auto; margin-right: auto }\n' + - 'a:before { content: \'\'; display: table }\n' + - 'a:after { content: \'\'; display: table; clear: both }' + "a:before { content: ''; display: table }\n" + + "a:after { content: ''; display: table; clear: both }" ); }); @@ -37,8 +37,8 @@ describe('lost-center', function() { 'a { lost-center: 2/6 }', 'a { max-width: calc(99.9% * 2/6); margin-left: auto; margin-right: auto }\n' + - 'a:before { content: \'\'; display: table }\n' + - 'a:after { content: \'\'; display: table; clear: both }' + "a:before { content: ''; display: table }\n" + + "a:after { content: ''; display: table; clear: both }" ); }); @@ -46,8 +46,8 @@ describe('lost-center', function() { check( 'a { lost-center: 980px 30px }', 'a { max-width: 980px; margin-left: auto; margin-right: auto; padding-left: 30px; padding-right: 30px }\n' + - 'a:before { content: \'\'; display: table }\n' + - 'a:after { content: \'\'; display: table; clear: both }' + "a:before { content: ''; display: table }\n" + + "a:after { content: ''; display: table; clear: both }" ); }); @@ -62,8 +62,8 @@ describe('lost-center', function() { check( 'a { lost-center: 1140px 30px no-flex }', 'a { max-width: 1140px; margin-left: auto; margin-right: auto; padding-left: 30px; padding-right: 30px }\n' + - 'a:before { content: \'\'; display: table }\n' + - 'a:after { content: \'\'; display: table; clear: both }' + "a:before { content: ''; display: table }\n" + + "a:after { content: ''; display: table; clear: both }" ); }); @@ -72,8 +72,8 @@ describe('lost-center', function() { 'a { lost-center: 1140px 30px; lost-center-padding: 10px }', 'a { max-width: 1140px; margin-left: auto; margin-right: auto; padding-left: 10px; padding-right: 10px }\n' + - 'a:before { content: \'\'; display: table }\n' + - 'a:after { content: \'\'; display: table; clear: both }' + "a:before { content: ''; display: table }\n" + + "a:after { content: ''; display: table; clear: both }" ); }); @@ -89,14 +89,14 @@ describe('lost-center', function() { check( '@lost flexbox flex; .root { lost-center: 600px no-flex; }', '.root { max-width: 600px; margin-left: auto; margin-right: auto; }\n' + - '.root:before { content: \'\'; display: table; }\n' + - '.root:after { content: \'\'; display: table; clear: both; }' + ".root:before { content: ''; display: table; }\n" + + ".root:after { content: ''; display: table; clear: both; }" ); check( '@lost flexbox flex; .root { lost-center: 600px; lost-center-flexbox: no-flex;}', '.root { max-width: 600px; margin-left: auto; margin-right: auto; }\n' + - '.root:before { content: \'\'; display: table; }\n' + - '.root:after { content: \'\'; display: table; clear: both; }' + ".root:before { content: ''; display: table; }\n" + + ".root:after { content: ''; display: table; clear: both; }" ); }); }); diff --git a/test/lost-column.js b/test/lost-column.js index 9564cc8f..de45ea7e 100644 --- a/test/lost-column.js +++ b/test/lost-column.js @@ -4,32 +4,30 @@ var check = require('./check'); var throws = require('./throws'); describe('lost-column', function() { - describe('flexbox support', function() { it('supports being set in long form', function() { check( 'a { lost-column: 1/3; lost-column-flexbox: flex; }', 'a { flex-grow: 0; flex-shrink: 0; flex-basis: calc(99.9% * 1/3 - (30px - 30px * 1/3));' + - 'max-width: calc(99.9% * 1/3 - (30px - 30px * 1/3)); width:calc(99.9% * 1/3 - (30px - 30px * 1/3)); }' + - 'a:nth-child(1n) { margin-right: 30px; margin-left: 0; } a:last-child{ margin-right: 0; }' + - 'a:nth-child(3n) { margin-right: 0; margin-left: auto; }' + 'max-width: calc(99.9% * 1/3 - (30px - 30px * 1/3)); width:calc(99.9% * 1/3 - (30px - 30px * 1/3)); }' + + 'a:nth-child(1n) { margin-right: 30px; margin-left: 0; } a:last-child{ margin-right: 0; }' + + 'a:nth-child(3n) { margin-right: 0; margin-left: auto; }' ); throws( 'a { lost-column: 1/2; lost-column-flexbox: flexible; }', - 'lost-column-flexbox: property \'flexible\' is unknown.' + "lost-column-flexbox: property 'flexible' is unknown." ); }); }); - it('provides 3 column layout', function() { check( 'a { lost-column: 1/3; }', 'a { width: calc(99.9% * 1/3 - (30px - 30px * 1/3)); }\n' + - 'a:nth-child(1n) { float: left; margin-right: 30px; clear: none; }\n' + - 'a:last-child { margin-right: 0; }\n' + - 'a:nth-child(3n) { margin-right: 0; float: right; }\n' + - 'a:nth-child(3n + 1) { clear: both; }' + 'a:nth-child(1n) { float: left; margin-right: 30px; clear: none; }\n' + + 'a:last-child { margin-right: 0; }\n' + + 'a:nth-child(3n) { margin-right: 0; float: right; }\n' + + 'a:nth-child(3n + 1) { clear: both; }' ); }); @@ -37,10 +35,10 @@ describe('lost-column', function() { check( 'a { lost-column: 2/5; }', 'a { width: calc(99.9% * 2/5 - (30px - 30px * 2/5)); }\n' + - 'a:nth-child(1n) { float: left; margin-right: 30px; clear: none; }\n' + - 'a:last-child { margin-right: 0; }\n' + - 'a:nth-child(5n) { margin-right: 0; float: right; }\n' + - 'a:nth-child(5n + 1) { clear: both; }' + 'a:nth-child(1n) { float: left; margin-right: 30px; clear: none; }\n' + + 'a:last-child { margin-right: 0; }\n' + + 'a:nth-child(5n) { margin-right: 0; float: right; }\n' + + 'a:nth-child(5n + 1) { clear: both; }' ); }); @@ -48,10 +46,10 @@ describe('lost-column', function() { check( 'a { lost-column: 2/4 2; }', 'a { width: calc(99.9% * 2/4 - (30px - 30px * 2/4)); }\n' + - 'a:nth-child(1n) { float: left; margin-right: 30px; clear: none; }\n' + - 'a:last-child { margin-right: 0; }\n' + - 'a:nth-child(2n) { margin-right: 0; float: right; }\n' + - 'a:nth-child(2n + 1) { clear: both; }' + 'a:nth-child(1n) { float: left; margin-right: 30px; clear: none; }\n' + + 'a:last-child { margin-right: 0; }\n' + + 'a:nth-child(2n) { margin-right: 0; float: right; }\n' + + 'a:nth-child(2n + 1) { clear: both; }' ); }); @@ -59,10 +57,10 @@ describe('lost-column', function() { check( 'a { lost-column: 2/5 3 0; }', 'a { width: calc(99.9% * 2/5); }\n' + - 'a:nth-child(1n) { float: left; margin-right: 0; clear: none; }\n' + - 'a:last-child { margin-right: 0; }\n' + - 'a:nth-child(3n) { margin-right: 0; float: right; }\n' + - 'a:nth-child(3n + 1) { clear: both; }' + 'a:nth-child(1n) { float: left; margin-right: 0; clear: none; }\n' + + 'a:last-child { margin-right: 0; }\n' + + 'a:nth-child(3n) { margin-right: 0; float: right; }\n' + + 'a:nth-child(3n + 1) { clear: both; }' ); }); @@ -71,9 +69,9 @@ describe('lost-column', function() { 'a { lost-column: 2/5 0 0.7em; }', 'a { width: calc(99.9% * 2/5 - (0.7em - 0.7em * 2/5)); }\n' + - 'a:nth-child(1n) { float: left; margin-right: 0.7em; clear: none; }\n' + - 'a:last-child { margin-right: 0; }\n' + - 'a:nth-child(0n) { float: right; }' + 'a:nth-child(1n) { float: left; margin-right: 0.7em; clear: none; }\n' + + 'a:last-child { margin-right: 0; }\n' + + 'a:nth-child(0n) { float: right; }' ); }); @@ -82,9 +80,9 @@ describe('lost-column', function() { 'a { lost-column: 2/5 0 .5em; }', 'a { width: calc(99.9% * 2/5 - (.5em - .5em * 2/5)); }\n' + - 'a:nth-child(1n) { float: left; margin-right: .5em; clear: none; }\n' + - 'a:last-child { margin-right: 0; }\n' + - 'a:nth-child(0n) { float: right; }' + 'a:nth-child(1n) { float: left; margin-right: .5em; clear: none; }\n' + + 'a:last-child { margin-right: 0; }\n' + + 'a:nth-child(0n) { float: right; }' ); }); @@ -92,33 +90,32 @@ describe('lost-column', function() { check( 'a { lost-column: 2/4 0; }', 'a { width: calc(99.9% * 2/4 - (30px - 30px * 2/4)); }' + - 'a:nth-child(1n) { float: left; margin-right: 30px; clear: none; }' + - 'a:last-child { margin-right: 0; }' + - 'a:nth-child(0n) { float: right; }' + 'a:nth-child(1n) { float: left; margin-right: 30px; clear: none; }' + + 'a:last-child { margin-right: 0; }' + + 'a:nth-child(0n) { float: right; }' ); }); it('supports flexbox', function() { check( 'a { lost-column: 2/6 3 60px flex; }', 'a { flex-grow: 0; flex-shrink: 0; ' + - 'flex-basis: calc(99.9% * 2/6 - (60px - 60px * 2/6)); ' + - 'max-width: 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-right: 60px; margin-left: 0; }\n' + - 'a:last-child { margin-right: 0; }\n' + - 'a:nth-child(3n) { margin-right: 0; margin-left: auto; }' + 'flex-basis: calc(99.9% * 2/6 - (60px - 60px * 2/6)); ' + + 'max-width: 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-right: 60px; margin-left: 0; }\n' + + 'a:last-child { margin-right: 0; }\n' + + 'a:nth-child(3n) { margin-right: 0; margin-left: auto; }' ); }); it('supports clearing fallback', function() { check( - '@lost clearing left; \n' + - 'a { lost-column: 1/3; }', + '@lost clearing left; \n' + 'a { lost-column: 1/3; }', 'a { width: calc(99.9% * 1/3 - (30px - 30px * 1/3)); }\n' + - 'a:nth-child(1n) { float: left; margin-right: 30px; clear: none; }\n' + - 'a:last-child { margin-right: 0; }\n' + - 'a:nth-child(3n) { margin-right: 0; float: right; }\n' + - 'a:nth-child(3n + 1) { clear: left; }' + 'a:nth-child(1n) { float: left; margin-right: 30px; clear: none; }\n' + + 'a:last-child { margin-right: 0; }\n' + + 'a:nth-child(3n) { margin-right: 0; float: right; }\n' + + 'a:nth-child(3n + 1) { clear: left; }' ); }); @@ -126,9 +123,9 @@ describe('lost-column', 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(1n) { float: none; clear: none; margin-right: 0; width: auto; }\n' + - 'a:nth-child(1n + 1) { float: none; clear: none; margin-right: 0; width: auto; }' + 'a:last-child { float: none; clear: none; margin-right: 0; width: auto; }\n' + + 'a:nth-child(1n) { float: none; clear: none; margin-right: 0; width: auto; }\n' + + 'a:nth-child(1n + 1) { float: none; clear: none; margin-right: 0; width: auto; }' ); }); @@ -136,10 +133,10 @@ describe('lost-column', function() { check( 'a { lost-column: 2/6 3 60px no-flex; }', 'a { width: calc(99.9% * 2/6 - (60px - 60px * 2/6)); }\n' + - 'a:nth-child(1n) { float: left; margin-right: 60px; clear: none; }\n' + - 'a:last-child { margin-right: 0; }\n' + - 'a:nth-child(3n) { margin-right: 0; float: right; }\n' + - 'a:nth-child(3n + 1) { clear: both; }' + 'a:nth-child(1n) { float: left; margin-right: 60px; clear: none; }\n' + + 'a:last-child { margin-right: 0; }\n' + + 'a:nth-child(3n) { margin-right: 0; float: right; }\n' + + 'a:nth-child(3n + 1) { clear: both; }' ); }); @@ -148,10 +145,10 @@ describe('lost-column', function() { 'a { lost-column: 2/6; lost-column-cycle: 6; }', 'a { width: calc(99.9% * 2/6 - (30px - 30px * 2/6)); }\n' + - 'a:nth-child(1n) { float: left; margin-right: 30px; clear: none; }\n' + - 'a:last-child { margin-right: 0; }\n' + - 'a:nth-child(6n) { margin-right: 0; float: right; }\n' + - 'a:nth-child(6n + 1) { clear: both; }' + 'a:nth-child(1n) { float: left; margin-right: 30px; clear: none; }\n' + + 'a:last-child { margin-right: 0; }\n' + + 'a:nth-child(6n) { margin-right: 0; float: right; }\n' + + 'a:nth-child(6n + 1) { clear: both; }' ); }); @@ -160,10 +157,10 @@ describe('lost-column', function() { 'a { lost-column: 2/6; lost-column-gutter: 10px; }', 'a { width: calc(99.9% * 2/6 - (10px - 10px * 2/6)); }\n' + - 'a:nth-child(1n) { float: left; margin-right: 10px; clear: none; }\n' + - 'a:last-child { margin-right: 0; }\n' + - 'a:nth-child(6n) { margin-right: 0; float: right; }\n' + - 'a:nth-child(6n + 1) { clear: both; }' + 'a:nth-child(1n) { float: left; margin-right: 10px; clear: none; }\n' + + 'a:last-child { margin-right: 0; }\n' + + 'a:nth-child(6n) { margin-right: 0; float: right; }\n' + + 'a:nth-child(6n + 1) { clear: both; }' ); }); @@ -172,10 +169,10 @@ describe('lost-column', function() { 'a { lost-column: 2/6; lost-column-gutter: 10px; lost-unit: $; }', 'a { width: calc(99.9% * 2/6 - (10px - 10px * 2/6)); }\n' + - 'a:nth-child(1n) { float: left; margin-right: 10px; clear: none; }\n' + - 'a:last-child { margin-right: 0; }\n' + - 'a:nth-child(6n) { margin-right: 0; float: right; }\n' + - 'a:nth-child(6n + 1) { clear: both; }' + 'a:nth-child(1n) { float: left; margin-right: 10px; clear: none; }\n' + + 'a:last-child { margin-right: 0; }\n' + + 'a:nth-child(6n) { margin-right: 0; float: right; }\n' + + 'a:nth-child(6n + 1) { clear: both; }' ); }); @@ -184,10 +181,10 @@ describe('lost-column', function() { 'a { lost-column: 2/6; lost-column-gutter: 10px; lost-unit: vw; }', 'a { width: calc(99.9vw * 2/6 - (10px - 10px * 2/6)); }\n' + - 'a:nth-child(1n) { float: left; margin-right: 10px; clear: none; }\n' + - 'a:last-child { margin-right: 0; }\n' + - 'a:nth-child(6n) { margin-right: 0; float: right; }\n' + - 'a:nth-child(6n + 1) { clear: both; }' + 'a:nth-child(1n) { float: left; margin-right: 10px; clear: none; }\n' + + 'a:last-child { margin-right: 0; }\n' + + 'a:nth-child(6n) { margin-right: 0; float: right; }\n' + + 'a:nth-child(6n + 1) { clear: both; }' ); }); @@ -197,10 +194,10 @@ describe('lost-column', function() { 'a { lost-column: 2/6; lost-column-rounder: 100; }', 'a { width: calc(100% * 2/6 - (30px - 30px * 2/6)); }\n' + - 'a:nth-child(1n) { float: left; margin-right: 30px; clear: none; }\n' + - 'a:last-child { margin-right: 0; }\n' + - 'a:nth-child(6n) { margin-right: 0; float: right; }\n' + - 'a:nth-child(6n + 1) { clear: both; }' + 'a:nth-child(1n) { float: left; margin-right: 30px; clear: none; }\n' + + 'a:last-child { margin-right: 0; }\n' + + 'a:nth-child(6n) { margin-right: 0; float: right; }\n' + + 'a:nth-child(6n + 1) { clear: both; }' ); }); @@ -209,10 +206,10 @@ describe('lost-column', function() { 'a { lost-column: 2/6; lost-column-rounder: 99.99999999999; }', 'a { width: calc(99.99999999999% * 2/6 - (30px - 30px * 2/6)); }\n' + - 'a:nth-child(1n) { float: left; margin-right: 30px; clear: none; }\n' + - 'a:last-child { margin-right: 0; }\n' + - 'a:nth-child(6n) { margin-right: 0; float: right; }\n' + - 'a:nth-child(6n + 1) { clear: both; }' + 'a:nth-child(1n) { float: left; margin-right: 30px; clear: none; }\n' + + 'a:last-child { margin-right: 0; }\n' + + 'a:nth-child(6n) { margin-right: 0; float: right; }\n' + + 'a:nth-child(6n + 1) { clear: both; }' ); }); }); @@ -220,80 +217,75 @@ describe('lost-column', function() { describe('supports RTL', () => { it('works with typical column', () => { check( - '@lost --beta-direction rtl;\n'+ - 'a { lost-column: 1/2; }', + '@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; }' + '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; }', + '@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; }' + '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 ('supports flexbox', () => { + it('supports flexbox', () => { check( - '@lost --beta-direction rtl;\n'+ - 'a { lost-column: 1/2 flex; }', + '@lost --beta-direction rtl;\n' + 'a { lost-column: 1/2 flex; }', 'a { flex-grow: 0; flex-shrink: 0;' + 'flex-basis: calc(99.9% * 1/2 - (30px - 30px * 1/2));' + 'max-width: calc(99.9% * 1/2 - (30px - 30px * 1/2));' + 'width: calc(99.9% * 1/2 - (30px - 30px * 1/2)); }' + - 'a:nth-child(1n) { margin-left: 30px; margin-right: 0; }' + - 'a:last-child { margin-left: 0; }' + - 'a:nth-child(2n) { margin-left: 0; margin-right: auto;}' + 'a:nth-child(1n) { margin-left: 30px; margin-right: 0; }' + + 'a:last-child { margin-left: 0; }' + + 'a:nth-child(2n) { margin-left: 0; margin-right: auto;}' ); }); it('supports zero cycles', () => { check( - '@lost --beta-direction rtl;\n'+ - 'a { lost-column: 1/3; lost-column-cycle: 0; }', + '@lost --beta-direction rtl;\n' + + 'a { lost-column: 1/3; lost-column-cycle: 0; }', 'a{ width: calc( 99.9% * 1/3 - (30px - 30px * 1/3)); }' + - 'a:nth-child(1n) { float: right; margin-left: 30px; clear: none; }' + - 'a:last-child { margin-left: 0; } a:nth-child(0n) { float: left; }' + 'a:nth-child(1n) { float: right; margin-left: 30px; clear: none; }' + + 'a:last-child { margin-left: 0; } a:nth-child(0n) { float: left; }' ); check( - '@lost --beta-direction rtl;\n'+ - 'a { lost-column: 1/2 0 flex; }', + '@lost --beta-direction rtl;\n' + 'a { lost-column: 1/2 0 flex; }', 'a { flex-grow: 0; flex-shrink: 0;' + - 'flex-basis: calc(99.9% * 1/2 - (30px - 30px * 1/2));' + - 'max-width: calc(99.9% * 1/2 - (30px - 30px * 1/2));' + - 'width: calc(99.9% * 1/2 - (30px - 30px * 1/2)); }' + - 'a:nth-child(1n) { margin-left: 30px; margin-right: 0; }' + - 'a:last-child { margin-left: 0; }' + 'flex-basis: calc(99.9% * 1/2 - (30px - 30px * 1/2));' + + 'max-width: calc(99.9% * 1/2 - (30px - 30px * 1/2));' + + 'width: calc(99.9% * 1/2 - (30px - 30px * 1/2)); }' + + 'a:nth-child(1n) { margin-left: 30px; margin-right: 0; }' + + 'a:last-child { margin-left: 0; }' ); }); it('supports resetting columns', () => { check( - '@lost --beta-direction rtl;\n'+ - 'a { lost-column: none; }', + '@lost --beta-direction rtl;\n' + 'a { lost-column: none; }', 'a { width: auto; }\n' + - 'a:last-child { float: none; clear: none; margin-left: 0; width: auto; }' + - 'a:nth-child(1n) { float: none; clear: none; margin-left: 0; width: auto; }' + - 'a:nth-child(1n + 1) { float: none; clear: none; margin-left: 0; width: auto; }' + 'a:last-child { float: none; clear: none; margin-left: 0; width: auto; }' + + 'a:nth-child(1n) { float: none; clear: none; margin-left: 0; width: auto; }' + + 'a:nth-child(1n + 1) { float: none; clear: none; margin-left: 0; width: auto; }' ); }); it('plays nice with the clearing fallback', () => { check( '@lost clearing left; \n' + - '@lost --beta-direction rtl;\n'+ - 'a { lost-column: 1/2; }', + '@lost --beta-direction rtl;\n' + + 'a { lost-column: 1/2; }', 'a { width: calc(99.9% * 1/2 - (30px - 30px * 1/2)); }' + - 'a:nth-child(1n) { float: right; margin-left: 30px; clear: none; }' + - 'a:last-child { margin-left: 0; }' + - 'a:nth-child(2n) { margin-left: 0; float: left; }' + - 'a:nth-child(2n + 1) { clear: right; }' + 'a:nth-child(1n) { float: right; margin-left: 30px; clear: none; }' + + 'a:last-child { margin-left: 0; }' + + 'a:nth-child(2n) { margin-left: 0; float: left; }' + + 'a:nth-child(2n + 1) { clear: right; }' ); }); }); diff --git a/test/lost-global-settings.js b/test/lost-global-settings.js index 858e2a47..78b476d3 100644 --- a/test/lost-global-settings.js +++ b/test/lost-global-settings.js @@ -5,22 +5,21 @@ var check = require('./check'); describe('lost-global-settings', function() { it('resets global settings between builds', function() { check( - '@lost clearing left; \n' + - 'a { lost-column: 1/3; }', + '@lost clearing left; \n' + 'a { lost-column: 1/3; }', 'a { width: calc(99.9% * 1/3 - (30px - 30px * 1/3)); }\n' + - 'a:nth-child(1n) { float: left; margin-right: 30px; clear: none; }\n' + - 'a:last-child { margin-right: 0; }\n' + - 'a:nth-child(3n) { margin-right: 0; float: right; }\n' + - 'a:nth-child(3n + 1) { clear: left; }' + 'a:nth-child(1n) { float: left; margin-right: 30px; clear: none; }\n' + + 'a:last-child { margin-right: 0; }\n' + + 'a:nth-child(3n) { margin-right: 0; float: right; }\n' + + 'a:nth-child(3n + 1) { clear: left; }' ); check( 'a { lost-column: 1/3; }', 'a { width: calc(99.9% * 1/3 - (30px - 30px * 1/3)); }\n' + - 'a:nth-child(1n) { float: left; margin-right: 30px; clear: none; }\n' + - 'a:last-child { margin-right: 0; }\n' + - 'a:nth-child(3n) { margin-right: 0; float: right; }\n' + - 'a:nth-child(3n + 1) { clear: both; }' + 'a:nth-child(1n) { float: left; margin-right: 30px; clear: none; }\n' + + 'a:last-child { margin-right: 0; }\n' + + 'a:nth-child(3n) { margin-right: 0; float: right; }\n' + + 'a:nth-child(3n + 1) { clear: both; }' ); }); }); diff --git a/test/lost-masonry-column.js b/test/lost-masonry-column.js index 894fdee2..be7d76dc 100644 --- a/test/lost-masonry-column.js +++ b/test/lost-masonry-column.js @@ -8,7 +8,7 @@ describe('lost-masonry-column', function() { check( 'a { lost-masonry-column: 60px; lost-masonry-column-gutter: 20px; }', 'a { float: left; width: calc(99.9% * 60px - 20px); margin-left: 10px;' + - ' margin-right: 10px; }' + ' margin-right: 10px; }' ); }); @@ -16,12 +16,12 @@ describe('lost-masonry-column', function() { check( 'a { lost-masonry-column: 60px; lost-masonry-column-gutter: 0px; }', 'a { float: left; width: calc(99.9% * 60px - 0px); margin-left: 0;' + - ' margin-right: 0; }' + ' margin-right: 0; }' ); check( 'a { lost-masonry-column: 60px; lost-masonry-column-gutter: 0; }', 'a { float: left; width: calc(99.9% * 60px); margin-left: 0;' + - ' margin-right: 0; }' + ' margin-right: 0; }' ); }); }); @@ -31,7 +31,7 @@ describe('lost-masonry-column', function() { check( 'a { lost-masonry-column: 60px; lost-masonry-column-flexbox: flex; }', 'a { flex: 0 0 auto; width: calc(99.9% * 60px - 30px);' + - ' margin-left: 15px; margin-right: 15px; }' + ' margin-left: 15px; margin-right: 15px; }' ); }); @@ -39,7 +39,7 @@ describe('lost-masonry-column', function() { check( 'a { lost-masonry-column: 60px 10px flex; }', 'a { flex: 0 0 auto; width: calc(99.9% * 60px - 10px);' + - ' margin-left: 5px; margin-right: 5px; }' + ' margin-left: 5px; margin-right: 5px; }' ); }); @@ -47,7 +47,7 @@ describe('lost-masonry-column', function() { check( 'a { lost-masonry-column: 60px flex; }', 'a { flex: 0 0 auto; width: calc(99.9% * 60px - 30px);' + - ' margin-left: 15px; margin-right: 15px; }' + ' margin-left: 15px; margin-right: 15px; }' ); }); }); @@ -57,13 +57,13 @@ describe('lost-masonry-column', function() { check( 'a { lost-masonry-column: 60px no-flex; }', 'a { float: left; width: calc(99.9% * 60px - 30px); margin-left: 15px;' + - ' margin-right: 15px; }' + ' margin-right: 15px; }' ); check( 'a { lost-masonry-column: 60px; lost-masonry-column-flexbox: no-flex; }', 'a { float: left; width: calc(99.9% * 60px - 30px); margin-left: 15px;' + - ' margin-right: 15px; }' + ' margin-right: 15px; }' ); }); }); @@ -73,7 +73,7 @@ describe('lost-masonry-column', function() { check( 'a { lost-masonry-column: 60px; lost-masonry-column-rounder: 99.99999999999; }', 'a { float: left; width: calc(99.99999999999% * 60px - 30px); margin-left: 15px;' + - ' margin-right: 15px; }' + ' margin-right: 15px; }' ); }); @@ -81,7 +81,7 @@ describe('lost-masonry-column', function() { check( 'a { lost-masonry-column: 60px; lost-masonry-column-rounder: 100; }', 'a { float: left; width: calc(100% * 60px - 30px); margin-left: 15px;' + - ' margin-right: 15px; }' + ' margin-right: 15px; }' ); }); }); diff --git a/test/lost-masonry-wrap.js b/test/lost-masonry-wrap.js index f1efce6a..afbb6638 100644 --- a/test/lost-masonry-wrap.js +++ b/test/lost-masonry-wrap.js @@ -7,17 +7,17 @@ describe('lost-masonry-wrap', function() { check( 'a { lost-masonry-wrap: flex; }', 'a { display: flex; flex-flow: row wrap; margin-left: -15px;' + - ' margin-right: -15px; }' + ' margin-right: -15px; }' ); check( 'a { lost-masonry-wrap: flex; }', 'a { display: flex; flex-flow: row wrap; margin-left: -15px;' + - ' margin-right: -15px; }' + ' margin-right: -15px; }' ); check( 'a { lost-masonry-wrap: 30px; lost-masonry-wrap-flexbox: flex; }', 'a { display: flex; flex-flow: row wrap; margin-left: -15px;' + - ' margin-right: -15px; }' + ' margin-right: -15px; }' ); }); @@ -25,14 +25,14 @@ describe('lost-masonry-wrap', function() { check( 'a { lost-masonry-wrap: no-flex; }', 'a { margin-left: -15px; margin-right: -15px; }\n' + - 'a:before { content: \'\'; display: table; }\n' + - 'a:after { content: \'\'; display: table; clear: both; }' + "a:before { content: ''; display: table; }\n" + + "a:after { content: ''; display: table; clear: both; }" ); check( 'a { lost-masonry-wrap: 30px; lost-masonry-wrap-flexbox: no-flex; }', 'a { margin-left: -15px; margin-right: -15px; }\n' + - 'a:before { content: \'\'; display: table; }\n' + - 'a:after { content: \'\'; display: table; clear: both; }' + "a:before { content: ''; display: table; }\n" + + "a:after { content: ''; display: table; clear: both; }" ); }); @@ -40,12 +40,12 @@ describe('lost-masonry-wrap', function() { check( 'a { lost-masonry-wrap: flex 60px; }', 'a { display: flex; flex-flow: row wrap; margin-left: -30px;' + - ' margin-right: -30px; }' + ' margin-right: -30px; }' ); check( 'a { lost-masonry-wrap: flex; lost-masonry-wrap-gutter: 60px; }', 'a { display: flex; flex-flow: row wrap; margin-left: -30px;' + - ' margin-right: -30px; }' + ' margin-right: -30px; }' ); }); }); diff --git a/test/lost-move.js b/test/lost-move.js index 17b0f95a..456b64a9 100644 --- a/test/lost-move.js +++ b/test/lost-move.js @@ -7,7 +7,7 @@ describe('lost-move', function() { check( 'a { lost-move: 1/3; }', 'a { position: relative; left: calc(99.9% * 1/3 - (30px - 30px * 1/3)' + - ' + 30px); }' + ' + 30px); }' ); }); @@ -15,7 +15,7 @@ describe('lost-move', function() { check( 'a { lost-move: -1/3; }', 'a { position: relative; left: calc(99.9% * -1/3 -' + - ' (30px - 30px * -1/3) + 30px); }' + ' (30px - 30px * -1/3) + 30px); }' ); }); @@ -23,7 +23,7 @@ describe('lost-move', function() { check( 'a { lost-move: 1/3 column; }', 'a { position: relative; top: calc(99.9% * 1/3 - (30px - 30px * 1/3)' + - ' + 30px); }' + ' + 30px); }' ); }); @@ -31,7 +31,7 @@ describe('lost-move', function() { check( 'a { lost-move: -1/3 column; }', 'a { position: relative; top: calc(99.9% * -1/3 - (30px - 30px * -1/3)' + - ' + 30px); }' + ' + 30px); }' ); }); @@ -49,45 +49,45 @@ describe('lost-move', function() { it('retains the lost-column gutter', function() { check( 'a { lost-column: 1/3 3 50px; lost-move: -1/3 row; }', - 'a { width: calc(99.9% * 1/3 - (50px - 50px * 1/3)); position: relative; left: calc(99.9% * -1/3 - (50px - 50px * -1/3) + 50px); }\n'+ - 'a:nth-child(1n) { float: left; margin-right: 50px; clear: none; }\n'+ - 'a:last-child { margin-right: 0; }\n'+ - 'a:nth-child(3n) { margin-right: 0; float: right; }\n'+ - 'a:nth-child(3n + 1) { clear: both; }' + 'a { width: calc(99.9% * 1/3 - (50px - 50px * 1/3)); position: relative; left: calc(99.9% * -1/3 - (50px - 50px * -1/3) + 50px); }\n' + + 'a:nth-child(1n) { float: left; margin-right: 50px; clear: none; }\n' + + 'a:last-child { margin-right: 0; }\n' + + 'a:nth-child(3n) { margin-right: 0; float: right; }\n' + + 'a:nth-child(3n + 1) { clear: both; }' ); check( 'a { lost-column: 1/3; lost-move: -1/3 row; lost-column-gutter: 50px; }', - 'a { width: calc(99.9% * 1/3 - (50px - 50px * 1/3)); position: relative; left: calc(99.9% * -1/3 - (50px - 50px * -1/3) + 50px); }\n'+ - 'a:nth-child(1n) { float: left; margin-right: 50px; clear: none; }\n'+ - 'a:last-child { margin-right: 0; }\n'+ - 'a:nth-child(3n) { margin-right: 0; float: right; }\n'+ - 'a:nth-child(3n + 1) { clear: both; }' + 'a { width: calc(99.9% * 1/3 - (50px - 50px * 1/3)); position: relative; left: calc(99.9% * -1/3 - (50px - 50px * -1/3) + 50px); }\n' + + 'a:nth-child(1n) { float: left; margin-right: 50px; clear: none; }\n' + + 'a:last-child { margin-right: 0; }\n' + + 'a:nth-child(3n) { margin-right: 0; float: right; }\n' + + 'a:nth-child(3n + 1) { clear: both; }' ); }); it('retains the lost-row gutter', function() { check( 'a { lost-row: 1/3 50px; lost-move: -1/3 column; }', - 'a { width: 100%; height: calc(99.9% * 1/3 - (50px - 50px * 1/3)); margin-bottom: 50px; position: relative; top: calc(99.9% * -1/3 - (50px - 50px * -1/3) + 50px); }\n'+ - 'a:last-child { margin-bottom: 0; }' + 'a { width: 100%; height: calc(99.9% * 1/3 - (50px - 50px * 1/3)); margin-bottom: 50px; position: relative; top: calc(99.9% * -1/3 - (50px - 50px * -1/3) + 50px); }\n' + + 'a:last-child { margin-bottom: 0; }' ); check( 'a { lost-row: 1/3; lost-move: -1/3 column; lost-row-gutter: 50px; }', - 'a { width: 100%; height: calc(99.9% * 1/3 - (50px - 50px * 1/3)); margin-bottom: 50px; position: relative; top: calc(99.9% * -1/3 - (50px - 50px * -1/3) + 50px); }\n'+ - 'a:last-child { margin-bottom: 0; }' + 'a { width: 100%; height: calc(99.9% * 1/3 - (50px - 50px * 1/3)); margin-bottom: 50px; position: relative; top: calc(99.9% * -1/3 - (50px - 50px * -1/3) + 50px); }\n' + + 'a:last-child { margin-bottom: 0; }' ); }); - it('doesn\'t override the gutter set by lost-move', function() { + it("doesn't override the gutter set by lost-move", function() { check( 'a { lost-row: 1/3; lost-move: -1/3 column 70px; lost-row-gutter: 50px; }', - 'a { width: 100%; height: calc(99.9% * 1/3 - (50px - 50px * 1/3)); margin-bottom: 50px; position: relative; top: calc(99.9% * -1/3 - (70px - 70px * -1/3) + 70px); }\n'+ - 'a:last-child { margin-bottom: 0; }' + 'a { width: 100%; height: calc(99.9% * 1/3 - (50px - 50px * 1/3)); margin-bottom: 50px; position: relative; top: calc(99.9% * -1/3 - (70px - 70px * -1/3) + 70px); }\n' + + 'a:last-child { margin-bottom: 0; }' ); check( 'a { lost-row: 1/3; lost-move: -1/3 column; lost-move-gutter: 70px; lost-row-gutter: 50px; }', - 'a { width: 100%; height: calc(99.9% * 1/3 - (50px - 50px * 1/3)); margin-bottom: 50px; position: relative; top: calc(99.9% * -1/3 - (70px - 70px * -1/3) + 70px); }\n'+ - 'a:last-child { margin-bottom: 0; }' + 'a { width: 100%; height: calc(99.9% * 1/3 - (50px - 50px * 1/3)); margin-bottom: 50px; position: relative; top: calc(99.9% * -1/3 - (70px - 70px * -1/3) + 70px); }\n' + + 'a:last-child { margin-bottom: 0; }' ); }); @@ -95,7 +95,7 @@ describe('lost-move', function() { check( 'a { lost-move: 1/2 row 60px; }', 'a { position: relative; left: calc(99.9% * 1/2 - (60px - 60px * 1/2)' + - ' + 60px); }' + ' + 60px); }' ); }); @@ -104,7 +104,7 @@ describe('lost-move', function() { check( 'a { lost-move: 1/2 row 60px; lost-move-rounder: 100; }', 'a { position: relative; left: calc(100% * 1/2 - (60px - 60px * 1/2)' + - ' + 60px); }' + ' + 60px); }' ); }); @@ -112,13 +112,13 @@ describe('lost-move', function() { check( 'a { lost-move: 1/2 row 60px; lost-move-rounder: 99.99999999999; }', 'a { position: relative; left: calc(99.99999999999% * 1/2 - (60px - 60px * 1/2)' + - ' + 60px); }' + ' + 60px); }' ); }); }); describe('Long-form names', function() { - it('allows lost-move-direction to work', function () { + it('allows lost-move-direction to work', function() { check( 'a {lost-move: 1/2; lost-move-direction: column; }', 'a { position:relative; top:calc(99.9% * 1/2 - (30px - 30px * 1/2) + 30px); }' diff --git a/test/lost-offset.js b/test/lost-offset.js index 15abdda5..1041693f 100644 --- a/test/lost-offset.js +++ b/test/lost-offset.js @@ -3,21 +3,21 @@ var check = require('./check'); describe('lost-offset', function() { - it('Supports direction in new property', function () { + it('Supports direction in new property', function() { check( 'a { lost-offset: 0/3; lost-offset-direction: row; }', 'a { margin-left: 0 !important; margin-right: 30px !important; }' ); }); - it('Supports gutter in new property', function () { + it('Supports gutter in new property', function() { check( 'a { lost-offset: 0/3; lost-offset-gutter: 10px; }', 'a { margin-left: 0 !important; margin-right: 10px !important; }' ); }); - it('Does not move with a zero numerator (of you\'re so inclined)' , function() { + it("Does not move with a zero numerator (of you're so inclined)", function() { check( 'a { lost-offset: 0/3; }', 'a { margin-left: 0 !important; margin-right: 30px !important; }' @@ -33,7 +33,7 @@ describe('lost-offset', function() { check( 'a { lost-offset: 1/3; }', 'a { margin-left: calc(99.9% * (-1/3 * -1) - (30px - 30px * (-1/3 * -1)) + 30px' + - ') !important; }' + ') !important; }' ); }); @@ -41,7 +41,7 @@ describe('lost-offset', function() { check( 'a { lost-offset: -1/3; }', 'a { margin-left: calc(99.9% * -1/3 - (30px - 30px * ' + - '-1/3) + 30px) !important; }' + '-1/3) + 30px) !important; }' ); check( 'a { lost-offset: -1/3 row 0; }', @@ -53,7 +53,7 @@ describe('lost-offset', function() { check( 'a { lost-offset: 1/3 column; }', 'a { margin-bottom: calc(99.9% * 1/3 - (30px - 30px * 1/3) + ' + - '(30px * 2)) !important; }' + '(30px * 2)) !important; }' ); }); @@ -61,7 +61,7 @@ describe('lost-offset', function() { check( 'a { lost-offset: -1/3 column; }', 'a { margin-top: calc(99.9% * (-1/3 * -1) - (30px - 30px * ' + - '(-1/3 * -1)) + 30px) !important; }' + '(-1/3 * -1)) + 30px) !important; }' ); }); @@ -69,7 +69,7 @@ describe('lost-offset', function() { check( 'a { lost-offset: 1/2 row 60px; }', 'a { margin-left: calc(99.9% * (-1/2 * -1) - (60px - 60px * (-1/2 * -1)) + ' + - '60px) !important; }' + '60px) !important; }' ); check( @@ -92,7 +92,7 @@ describe('lost-offset', function() { check( 'a { lost-offset: 1/2 row 60px; lost-offset-rounder: 100; }', 'a { margin-left: calc(100% * (-1/2 * -1) - (60px - 60px * (-1/2 * -1)) + ' + - '60px) !important; }' + '60px) !important; }' ); }); @@ -100,7 +100,7 @@ describe('lost-offset', function() { check( 'a { lost-offset: 1/2 row 60px; lost-offset-rounder: 99.99999999999; }', 'a { margin-left: calc(99.99999999999% * (-1/2 * -1) - (60px - 60px * (-1/2 * -1)) + ' + - '60px) !important; }' + '60px) !important; }' ); }); }); diff --git a/test/lost-row.js b/test/lost-row.js index 4718f447..52acac7d 100644 --- a/test/lost-row.js +++ b/test/lost-row.js @@ -3,14 +3,13 @@ var check = require('./check'); describe('lost-row', function() { - - describe('Flexbox modifiers', function () { + describe('Flexbox modifiers', function() { it('supports no-flex', function() { check( 'a { lost-row: 1/3 no-flex; }', 'a { width: 100%; height: calc(99.9% * 1/3 - (30px - 30px * 1/3));' + - ' margin-bottom: 30px; }' + - 'a:last-child { margin-bottom: 0; }' + ' margin-bottom: 30px; }' + + 'a:last-child { margin-bottom: 0; }' ); }); @@ -18,8 +17,8 @@ describe('lost-row', function() { check( 'a { lost-row: 1/3; lost-row-flexbox: no-flex; }', 'a { width: 100%; height: calc(99.9% * 1/3 - (30px - 30px * 1/3));' + - ' margin-bottom: 30px; }' + - 'a:last-child { margin-bottom: 0; }' + ' margin-bottom: 30px; }' + + 'a:last-child { margin-bottom: 0; }' ); }); @@ -27,18 +26,17 @@ describe('lost-row', function() { check( 'a { lost-row: 1/3; lost-row-flexbox: flex; }', 'a { width:100%; flex:0 0 auto; height:calc(99.9% * 1/3 - (30px - 30px * 1/3)); ' + - 'margin-bottom: 30px; } a:last-child{ margin-bottom:0; }' + 'margin-bottom: 30px; } a:last-child{ margin-bottom:0; }' ); }); }); - it('provides 3 row layout', function() { check( 'a { lost-row: 1/3; }', 'a { width: 100%; height: calc(99.9% * 1/3 - (30px - 30px * 1/3));' + - ' margin-bottom: 30px; }\n' + - 'a:last-child { margin-bottom: 0; }' + ' margin-bottom: 30px; }\n' + + 'a:last-child { margin-bottom: 0; }' ); }); @@ -46,8 +44,8 @@ describe('lost-row', function() { check( 'a { lost-row: 2/5; }', 'a { width: 100%; height: calc(99.9% * 2/5 - (30px - 30px * 2/5));' + - ' margin-bottom: 30px; }\n' + - 'a:last-child { margin-bottom: 0; }' + ' margin-bottom: 30px; }\n' + + 'a:last-child { margin-bottom: 0; }' ); }); @@ -55,7 +53,7 @@ describe('lost-row', function() { check( 'a { lost-row: 2/5 0; }', 'a { width: 100%; height: calc(99.9% * 2/5); margin-bottom: 0; }\n' + - 'a:last-child { margin-bottom: 0; }' + 'a:last-child { margin-bottom: 0; }' ); }); @@ -63,9 +61,9 @@ describe('lost-row', function() { check( 'a { lost-row: 2/6 60px flex; }', 'a { width: 100%; flex: 0 0 auto;' + - ' height: calc(99.9% * 2/6 - (60px - 60px * 2/6));' + - ' margin-bottom: 60px; }\n' + - 'a:last-child { margin-bottom: 0; }' + ' height: calc(99.9% * 2/6 - (60px - 60px * 2/6));' + + ' margin-bottom: 60px; }\n' + + 'a:last-child { margin-bottom: 0; }' ); }); @@ -73,9 +71,9 @@ describe('lost-row', function() { check( 'a { lost-row: 2/6 60px flex; lost-unit: $; }', 'a { width: 100%; flex: 0 0 auto;' + - ' height: calc(99.9% * 2/6 - (60px - 60px * 2/6));' + - ' margin-bottom: 60px; }\n' + - 'a:last-child { margin-bottom: 0; }' + ' height: calc(99.9% * 2/6 - (60px - 60px * 2/6));' + + ' margin-bottom: 60px; }\n' + + 'a:last-child { margin-bottom: 0; }' ); }); @@ -83,17 +81,16 @@ describe('lost-row', function() { check( 'a { lost-row: 2/6 60px flex; lost-unit: vh; }', 'a { width: 100%; flex: 0 0 auto;' + - ' height: calc(99.9vh * 2/6 - (60px - 60px * 2/6));' + - ' margin-bottom: 60px; }\n' + - 'a:last-child { margin-bottom: 0; }' + ' height: calc(99.9vh * 2/6 - (60px - 60px * 2/6));' + + ' margin-bottom: 60px; }\n' + + 'a:last-child { margin-bottom: 0; }' ); }); it('provides none rule', function() { check( 'a { lost-row: none; }', - 'a { width: auto; height: auto;' + - ' margin-bottom: 0; }' + 'a { width: auto; height: auto;' + ' margin-bottom: 0; }' ); }); @@ -102,8 +99,8 @@ describe('lost-row', function() { check( 'a { lost-row: 1/3; lost-row-rounder: 100; }', 'a { width: 100%; height: calc(100% * 1/3 - (30px - 30px * 1/3));' + - ' margin-bottom: 30px; }\n' + - 'a:last-child { margin-bottom: 0; }' + ' margin-bottom: 30px; }\n' + + 'a:last-child { margin-bottom: 0; }' ); }); @@ -111,8 +108,8 @@ describe('lost-row', function() { check( 'a { lost-row: 1/3; lost-row-rounder: 99.99999999999; }', 'a { width: 100%; height: calc(99.99999999999% * 1/3 - (30px - 30px * 1/3));' + - ' margin-bottom: 30px; }\n' + - 'a:last-child { margin-bottom: 0; }' + ' margin-bottom: 30px; }\n' + + 'a:last-child { margin-bottom: 0; }' ); }); }); diff --git a/test/lost-utility.js b/test/lost-utility.js index 7843f583..7f28d348 100644 --- a/test/lost-utility.js +++ b/test/lost-utility.js @@ -4,11 +4,11 @@ var check = require('./check'); var throws = require('./throws'); describe('lost-utility', function() { - it('Doesn\'t remove the parent node if there are other rules in declaration', function () { + it("Doesn't remove the parent node if there are other rules in declaration", function() { check( 'a { lost-utility: edit; color: blue; }', 'a { color:blue; } a *:not(input):not(textarea):not(select) ' + - '{ background-color:rgba(0,0,255,.1); }' + '{ background-color:rgba(0,0,255,.1); }' ); }); @@ -16,8 +16,8 @@ describe('lost-utility', function() { check( 'a { lost-utility: edit }', 'a *:not(input):not(textarea):not(select) {\n' + - ' background-color: rgba(0, 0, 255, 0.1)\n' + - '}' + ' background-color: rgba(0, 0, 255, 0.1)\n' + + '}' ); }); @@ -25,14 +25,14 @@ describe('lost-utility', function() { check( 'a { lost-utility: edit rgb(44, 55, 33) }', 'a *:not(input):not(textarea):not(select) {\n' + - ' background-color: rgba(44, 55, 33, 0.1)\n' + - '}' + ' background-color: rgba(44, 55, 33, 0.1)\n' + + '}' ); check( 'a { lost-utility: edit rgb(44,55,111) }', 'a *:not(input):not(textarea):not(select) {\n' + - ' background-color: rgba(44,55,111, 0.1)\n' + - '}' + ' background-color: rgba(44,55,111, 0.1)\n' + + '}' ); }); @@ -40,72 +40,72 @@ describe('lost-utility', function() { check( 'a { lost-utility: clearfix }', 'a:before {\n' + - ' content: \'\';\n' + - ' display: table\n' + - '}\n' + - 'a:after {\n' + - ' content: \'\';\n' + - ' display: table;\n' + - ' clear: both\n' + - '}' + " content: '';\n" + + ' display: table\n' + + '}\n' + + 'a:after {\n' + + " content: '';\n" + + ' display: table;\n' + + ' clear: both\n' + + '}' ); }); - it('applies overlay uses defaults', function(){ + it('applies overlay uses defaults', function() { check( 'body { lost-utility: overlay }', 'body:before{background-image:linear-gradient(to right, ' + - '#e6f6ff 0,#e6f6ff 6.54296875%,transparent 6.54296875%,' + - 'transparent 8.49609375%,#e6f6ff 8.49609375%,#e6f6ff 15.0390625%,' + - 'transparent 15.0390625%,transparent 16.9921875%,#e6f6ff 16.9921875%,' + - '#e6f6ff 23.53515625%,transparent 23.53515625%,transparent 25.48828125%,' + - '#e6f6ff 25.48828125%,#e6f6ff 32.03125%,transparent 32.03125%,transparent 33.984375%,' + - '#e6f6ff 33.984375%,#e6f6ff 40.52734375%,transparent 40.52734375%,' + - 'transparent 42.48046875%,#e6f6ff 42.48046875%,#e6f6ff 49.0234375%,' + - 'transparent 49.0234375%,transparent 50.9765625%,#e6f6ff 50.9765625%,' + - '#e6f6ff 57.51953125%,transparent 57.51953125%,transparent 59.47265625%,' + - '#e6f6ff 59.47265625%,#e6f6ff 66.015625%,transparent 66.015625%,' + - 'transparent 67.96875%,#e6f6ff 67.96875%,#e6f6ff 74.51171875%,' + - 'transparent 74.51171875%,transparent 76.46484375%,#e6f6ff 76.46484375%,' + - '#e6f6ff 83.0078125%,transparent 83.0078125%,transparent 84.9609375%,' + - '#e6f6ff 84.9609375%,#e6f6ff 91.50390625%,transparent 91.50390625%,' + - 'transparent 93.45703125%,#e6f6ff 93.45703125%,#e6f6ff 100%);' + - 'content:\'\';' + - 'display:inline-block;' + - 'height:100%;' + - 'left:0;' + - 'margin:0 auto;' + - 'max-width:1024px;' + - 'opacity:.4;' + - 'pointer-events:none;' + - 'position:fixed;' + - 'right:0;' + - 'width:100%;' + - 'z-index:1}' + '#e6f6ff 0,#e6f6ff 6.54296875%,transparent 6.54296875%,' + + 'transparent 8.49609375%,#e6f6ff 8.49609375%,#e6f6ff 15.0390625%,' + + 'transparent 15.0390625%,transparent 16.9921875%,#e6f6ff 16.9921875%,' + + '#e6f6ff 23.53515625%,transparent 23.53515625%,transparent 25.48828125%,' + + '#e6f6ff 25.48828125%,#e6f6ff 32.03125%,transparent 32.03125%,transparent 33.984375%,' + + '#e6f6ff 33.984375%,#e6f6ff 40.52734375%,transparent 40.52734375%,' + + 'transparent 42.48046875%,#e6f6ff 42.48046875%,#e6f6ff 49.0234375%,' + + 'transparent 49.0234375%,transparent 50.9765625%,#e6f6ff 50.9765625%,' + + '#e6f6ff 57.51953125%,transparent 57.51953125%,transparent 59.47265625%,' + + '#e6f6ff 59.47265625%,#e6f6ff 66.015625%,transparent 66.015625%,' + + 'transparent 67.96875%,#e6f6ff 67.96875%,#e6f6ff 74.51171875%,' + + 'transparent 74.51171875%,transparent 76.46484375%,#e6f6ff 76.46484375%,' + + '#e6f6ff 83.0078125%,transparent 83.0078125%,transparent 84.9609375%,' + + '#e6f6ff 84.9609375%,#e6f6ff 91.50390625%,transparent 91.50390625%,' + + 'transparent 93.45703125%,#e6f6ff 93.45703125%,#e6f6ff 100%);' + + "content:'';" + + 'display:inline-block;' + + 'height:100%;' + + 'left:0;' + + 'margin:0 auto;' + + 'max-width:1024px;' + + 'opacity:.4;' + + 'pointer-events:none;' + + 'position:fixed;' + + 'right:0;' + + 'width:100%;' + + 'z-index:1}' ); }); - it('applies overlay', function(){ + it('applies overlay', function() { check( 'body { lost-utility: overlay 200px 2 50px #ccc }', 'body:before{background-image:linear-gradient(to right,' + - '#ccc 0,#ccc 37.5%,transparent 37.5%,transparent 62.5%,#ccc 62.5%,#ccc 100%);' + - 'content:\'\';' + - 'display:inline-block;' + - 'height:100%;' + - 'left:0;' + - 'margin:0 auto;' + - 'max-width:200px;' + - 'opacity:.4;' + - 'pointer-events:none;' + - 'position:fixed;' + - 'right:0;' + - 'width:100%;' + - 'z-index:1}' + '#ccc 0,#ccc 37.5%,transparent 37.5%,transparent 62.5%,#ccc 62.5%,#ccc 100%);' + + "content:'';" + + 'display:inline-block;' + + 'height:100%;' + + 'left:0;' + + 'margin:0 auto;' + + 'max-width:200px;' + + 'opacity:.4;' + + 'pointer-events:none;' + + 'position:fixed;' + + 'right:0;' + + 'width:100%;' + + 'z-index:1}' ); }); - it('applies overlay unit mismatch', function(){ + it('applies overlay unit mismatch', function() { throws( 'lost-utility: overlay 1600px 2 10em #999', 'lost-utility: Please use the same units for width and gutter.' diff --git a/test/lost-vars.js b/test/lost-vars.js index 7872933d..cd61c1fe 100644 --- a/test/lost-vars.js +++ b/test/lost-vars.js @@ -7,17 +7,17 @@ describe('lost-vars', function() { it('unknown variable', function() { throws( 'a { margin: 0 0 lost-vars("randomvariablename"); }', - 'lost-vars: variable \'randomvariablename\' is unknown.' + "lost-vars: variable 'randomvariablename' is unknown." ); }); it('matches multiple variables', function() { check( - 'div { margin: lost-vars(\'gutter\') lost-vars(\'gutter\'); padding: lost-vars(\'gutter-local\'); lost-offset: 1/3 3 100px;}', + "div { margin: lost-vars('gutter') lost-vars('gutter'); padding: lost-vars('gutter-local'); lost-offset: 1/3 3 100px;}", 'div { margin: 30px 30px; padding: 100px; margin-left: calc(99.9% * (-1/3 * -1) - (100px - 100px * (-1/3 * -1)) + 100px) !important;}' ); check( - 'div { margin: lost-vars(\'gutter\') lost-vars(\'gutter-local\'); lost-offset: 1/3 3 95px;}', + "div { margin: lost-vars('gutter') lost-vars('gutter-local'); lost-offset: 1/3 3 95px;}", 'div { margin: 30px 95px; margin-left: calc(99.9% * (-1/3 * -1) - (95px - 95px * (-1/3 * -1)) + 95px) !important;}' ); }); @@ -25,7 +25,7 @@ describe('lost-vars', function() { describe('gutter', function() { it('is replaced', function() { check( - 'a { margin: 0 0 lost-vars(\'gutter\'); }', + "a { margin: 0 0 lost-vars('gutter'); }", 'a { margin: 0 0 30px; }' ); }); @@ -34,93 +34,92 @@ describe('lost-vars', function() { describe('gutter-local', () => { it('is replaced', () => { check( - 'div { padding: lost-vars(\'gutter-local\'); lost-column: 1/3; lost-column-gutter: 50px; }', - 'div { padding: 50px; width: calc(99.9% * 1/3 - (50px - 50px * 1/3)); }\n'+ - 'div:nth-child(1n) { float: left; margin-right: 50px; clear: none; }\n'+ - 'div:last-child { margin-right: 0; }\n'+ - 'div:nth-child(3n) { margin-right: 0; float: right; }\n'+ - 'div:nth-child(3n + 1) { clear: both; }' + "div { padding: lost-vars('gutter-local'); lost-column: 1/3; lost-column-gutter: 50px; }", + 'div { padding: 50px; width: calc(99.9% * 1/3 - (50px - 50px * 1/3)); }\n' + + 'div:nth-child(1n) { float: left; margin-right: 50px; clear: none; }\n' + + 'div:last-child { margin-right: 0; }\n' + + 'div:nth-child(3n) { margin-right: 0; float: right; }\n' + + 'div:nth-child(3n + 1) { clear: both; }' ); check( - 'div { padding: lost-vars(\'gutter-local\'); lost-column: 1/3; lost-column-gutter: 0; }', - 'div { padding: 0; width: calc(99.9% * 1/3); }\n'+ - 'div:nth-child(1n) { float: left; margin-right: 0; clear: none; }\n'+ - 'div:last-child { margin-right: 0; }\n'+ - 'div:nth-child(3n) { margin-right: 0; float: right; }\n'+ - 'div:nth-child(3n + 1) { clear: both; }' + "div { padding: lost-vars('gutter-local'); lost-column: 1/3; lost-column-gutter: 0; }", + 'div { padding: 0; width: calc(99.9% * 1/3); }\n' + + 'div:nth-child(1n) { float: left; margin-right: 0; clear: none; }\n' + + 'div:last-child { margin-right: 0; }\n' + + 'div:nth-child(3n) { margin-right: 0; float: right; }\n' + + 'div:nth-child(3n + 1) { clear: both; }' ); }); it('works on shortcut lost-column', () => { check( - 'div { padding: lost-vars(\'gutter-local\'); lost-column: 1/3 3 70px;}', - 'div { padding: 70px; width: calc(99.9% * 1/3 - (70px - 70px * 1/3));}\n'+ - 'div:nth-child(1n) { float: left; margin-right: 70px; clear: none;}\n'+ - 'div:last-child { margin-right: 0;}\n'+ - 'div:nth-child(3n) { margin-right: 0; float: right;}\n'+ - 'div:nth-child(3n + 1) { clear: both;}' + "div { padding: lost-vars('gutter-local'); lost-column: 1/3 3 70px;}", + 'div { padding: 70px; width: calc(99.9% * 1/3 - (70px - 70px * 1/3));}\n' + + 'div:nth-child(1n) { float: left; margin-right: 70px; clear: none;}\n' + + 'div:last-child { margin-right: 0;}\n' + + 'div:nth-child(3n) { margin-right: 0; float: right;}\n' + + 'div:nth-child(3n + 1) { clear: both;}' ); }); 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)); 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' + - 'div:nth-child(3n + 1) { clear: both;}\n' + - 'div:nth-last-child(-n + 3) { margin-bottom: 0;}' + "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)); 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' + + 'div:nth-child(3n + 1) { clear: both;}\n' + + 'div:nth-last-child(-n + 3) { margin-bottom: 0;}' ); }); it('works on shortcut lost-offset', () => { check( - 'div { padding: lost-vars(\'gutter-local\'); lost-offset: 1/3 3 100px;}', + "div { padding: lost-vars('gutter-local'); lost-offset: 1/3 3 100px;}", 'div { padding: 100px; margin-left: calc(99.9% * (-1/3 * -1) - (100px - 100px * (-1/3 * -1)) + 100px) !important;}' ); }); it('works on shortcut lost-center', () => { check( - 'div { padding: lost-vars(\'gutter-local\'); lost-center: 400px 60px;}', + "div { padding: lost-vars('gutter-local'); lost-center: 400px 60px;}", 'div { padding: 60px; max-width: 400px; margin-left: auto; margin-right: auto; padding-left: 60px; padding-right: 60px;}\n' + - 'div:before { content: \'\'; display: table;}\n' + - 'div:after { content: \'\'; display: table; clear: both;}' + "div:before { content: ''; display: table;}\n" + + "div:after { content: ''; display: table; clear: both;}" ); }); it('works on shortcut lost-masonry-wrap', () => { check( - 'div { padding: lost-vars(\'gutter-local\'); lost-masonry-wrap: flex 60px;}', + "div { padding: lost-vars('gutter-local'); lost-masonry-wrap: flex 60px;}", 'div { padding: 60px; display: flex; flex-flow: row wrap; margin-left: -30px; margin-right: -30px;}' ); }); it('works on shortcut lost-masonry-column', () => { check( - 'div { padding: lost-vars(\'gutter-local\'); lost-masonry-column: 1/3 15px;}', + "div { padding: lost-vars('gutter-local'); lost-masonry-column: 1/3 15px;}", 'div { padding: 15px; float: left; width: calc(99.9% * 1/3 - 15px); margin-left: 7.5px; margin-right: 7.5px;}' ); }); it('works on shortcut lost-row', () => { check( - 'div { padding: lost-vars(\'gutter-local\'); lost-row: 1/3 70px;}', + "div { padding: lost-vars('gutter-local'); lost-row: 1/3 70px;}", 'div { padding: 70px; width: 100%; height: calc(99.9% * 1/3 - (70px - 70px * 1/3)); margin-bottom: 70px;}\n' + - 'div:last-child { margin-bottom: 0;}' + 'div:last-child { margin-bottom: 0;}' ); }); it('takes global if no local one is given', () => { check( - 'div { padding: lost-vars(\'gutter-local\'); lost-column: 1/3;}', + "div { padding: lost-vars('gutter-local'); lost-column: 1/3;}", 'div { padding: 30px; width: calc(99.9% * 1/3 - (30px - 30px * 1/3));}\n' + - 'div:nth-child(1n) { float: left; margin-right: 30px; clear: none;}\n' + - 'div:last-child { margin-right: 0;}\n' + - 'div:nth-child(3n) { margin-right: 0; float: right;}\n' + - 'div:nth-child(3n + 1) { clear: both;}' + 'div:nth-child(1n) { float: left; margin-right: 30px; clear: none;}\n' + + 'div:last-child { margin-right: 0;}\n' + + 'div:nth-child(3n) { margin-right: 0; float: right;}\n' + + 'div:nth-child(3n + 1) { clear: both;}' ); }); it('takes global if local one is invalid', () => { check( - 'div { padding: lost-vars(\'gutter-local\'); lost-row: 1/3 invalid;}', + "div { padding: lost-vars('gutter-local'); lost-row: 1/3 invalid;}", 'div { padding: 30px; width: 100%; height: calc(99.9% * 1/3 - (30px - 30px * 1/3)); margin-bottom: 30px;}\n' + - 'div:last-child { margin-bottom: 0;}' + 'div:last-child { margin-bottom: 0;}' ); }); }); }); - diff --git a/test/lost-waffle.js b/test/lost-waffle.js index 7250943f..5a80af12 100644 --- a/test/lost-waffle.js +++ b/test/lost-waffle.js @@ -8,14 +8,14 @@ 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' + - 'a:last-child { margin-right: 0; margin-bottom: 0; }\n' + - 'a:nth-child(3n) { margin-right: 0; }\n' + - 'a:nth-child(3n + 1) { clear: both; }\n' + - 'a:nth-last-child(-n + 3) { margin-bottom: 0; }' + ' 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' + + 'a:last-child { margin-right: 0; margin-bottom: 0; }\n' + + 'a:nth-child(3n) { margin-right: 0; }\n' + + 'a:nth-child(3n + 1) { clear: both; }\n' + + 'a:nth-last-child(-n + 3) { margin-bottom: 0; }' ); }); @@ -23,44 +23,43 @@ 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' + - 'a:last-child { margin-right: 0; margin-bottom: 0; }\n' + - 'a:nth-child(2n) { margin-right: 0; }\n' + - 'a:nth-child(2n + 1) { clear: both; }\n' + - 'a:nth-last-child(-n + 2) { margin-bottom: 0; }' + ' 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' + + 'a:last-child { margin-right: 0; margin-bottom: 0; }\n' + + 'a:nth-child(2n) { margin-right: 0; }\n' + + 'a:nth-child(2n + 1) { clear: both; }\n' + + 'a:nth-last-child(-n + 2) { margin-bottom: 0; }' ); 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' + - 'a:last-child { margin-right: 0; margin-bottom: 0; }\n' + - 'a:nth-child(2n) { margin-right: 0; }\n' + - 'a:nth-child(2n + 1) { clear: both; }\n' + - 'a:nth-last-child(-n + 2) { margin-bottom: 0; }' + ' 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' + + 'a:last-child { margin-right: 0; margin-bottom: 0; }\n' + + 'a:nth-child(2n) { margin-right: 0; }\n' + + 'a:nth-child(2n + 1) { clear: both; }\n' + + 'a:nth-last-child(-n + 2) { margin-bottom: 0; }' ); check( - '@lost cycle 0;' + - 'a { lost-waffle: 2/4; }', + '@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; }' + - 'a:last-child { margin-right: 0; margin-bottom: 0; }' + ' 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; }' + + 'a:last-child { margin-right: 0; margin-bottom: 0; }' ); 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); 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;}' + '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;}' ); }); @@ -68,42 +67,41 @@ 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' + - 'a:last-child { margin-right: 0; margin-bottom: 0; }\n' + - 'a:nth-child(2n) { margin-right: 0; }\n' + - 'a:nth-child(2n + 1) { clear: both; }\n' + - 'a:nth-last-child(-n + 2) { margin-bottom: 0; }' + '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' + + 'a:last-child { margin-right: 0; margin-bottom: 0; }\n' + + 'a:nth-child(2n) { margin-right: 0; }\n' + + 'a:nth-child(2n + 1) { clear: both; }\n' + + 'a:nth-last-child(-n + 2) { margin-bottom: 0; }' ); 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' + - 'a:last-child { margin-right: 0; margin-bottom: 0; }\n' + - 'a:nth-child(2n) { margin-right: 0; }\n' + - 'a:nth-child(2n + 1) { clear: both; }\n' + - 'a:nth-last-child(-n + 2) { margin-bottom: 0; }' + ' 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' + + 'a:last-child { margin-right: 0; margin-bottom: 0; }\n' + + 'a:nth-child(2n) { margin-right: 0; }\n' + + 'a:nth-child(2n + 1) { clear: both; }\n' + + 'a:nth-last-child(-n + 2) { margin-bottom: 0; }' ); }); it('supports clearing fallback', function() { check( - '@lost clearing left; \n' + - 'a { lost-waffle: 1/3; }', + '@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' + - 'a:last-child { margin-right: 0; margin-bottom: 0; }\n' + - 'a:nth-child(3n) { margin-right: 0; }\n' + - 'a:nth-child(3n + 1) { clear: left; }\n' + - 'a:nth-last-child(-n + 3) { margin-bottom: 0; }' + ' 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' + + 'a:last-child { margin-right: 0; margin-bottom: 0; }\n' + + 'a:nth-child(3n) { margin-right: 0; }\n' + + 'a:nth-child(3n + 1) { clear: left; }\n' + + 'a:nth-last-child(-n + 3) { margin-bottom: 0; }' ); }); @@ -111,30 +109,30 @@ describe('lost-waffle', function() { check( '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); 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' + - 'a:nth-child(3n) { margin-right: 0; margin-left: auto; }\n' + - 'a:nth-last-child(-n + 3) { margin-bottom: 0; }' + 'flex-basis: calc(99.9% * 2/5); ' + + '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' + + 'a:nth-child(3n) { margin-right: 0; margin-left: auto; }\n' + + 'a:nth-last-child(-n + 3) { margin-bottom: 0; }' ); check( 'a { lost-waffle: 2/5; lost-waffle-flexbox: flex; }', '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;}' + - 'a:nth-child(5n) { margin-right: 0; margin-left: auto; }' + - 'a:nth-last-child(-n+5) { margin-bottom: 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;}' + + 'a:nth-child(5n) { margin-right: 0; margin-left: auto; }' + + 'a:nth-last-child(-n+5) { margin-bottom: 0; }' ); throws( 'a { lost-waffle: 1/2; lost-waffle-flexbox: flexible; }', - 'lost-waffle-flexbox: property \'flexible\' is unknown.' + "lost-waffle-flexbox: property 'flexible' is unknown." ); }); @@ -143,12 +141,12 @@ describe('lost-waffle', function() { 'a { lost-waffle: 2/5 3 0 no-flex; }', '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' + - 'a:nth-child(3n + 1) { clear: both; }\n' + - 'a:nth-last-child(-n + 3) { margin-bottom: 0; }' + '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' + + 'a:nth-child(3n + 1) { clear: both; }\n' + + 'a:nth-last-child(-n + 3) { margin-bottom: 0; }' ); }); @@ -157,12 +155,12 @@ describe('lost-waffle', function() { 'a { lost-waffle: 2/5 3 0 no-flex float-right; }', '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' + - 'a:nth-child(3n + 1) { clear: both; }\n' + - 'a:nth-last-child(-n + 3) { margin-bottom: 0; }' + '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' + + 'a:nth-child(3n + 1) { clear: both; }\n' + + 'a:nth-last-child(-n + 3) { margin-bottom: 0; }' ); }); @@ -170,12 +168,12 @@ describe('lost-waffle', function() { check( 'a { lost-waffle: 2/5 3 0 no-flex float-right; lost-unit: vw; }', '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' + - 'a:nth-child(3n + 1) { clear: both; }\n' + - 'a:nth-last-child(-n + 3) { margin-bottom: 0; }' + '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' + + 'a:nth-child(3n + 1) { clear: both; }\n' + + 'a:nth-last-child(-n + 3) { margin-bottom: 0; }' ); throws( 'a { lost-waffle: 2/5 3 0 no-flex float-right; lost-unit: vww; }', @@ -189,12 +187,12 @@ describe('lost-waffle', function() { 'a { lost-waffle: 2/5 3 0 no-flex; lost-waffle-rounder: 100; }', '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' + - 'a:nth-child(3n + 1) { clear: both; }\n' + - 'a:nth-last-child(-n + 3) { margin-bottom: 0; }' + ' 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' + + 'a:nth-child(3n + 1) { clear: both; }\n' + + 'a:nth-last-child(-n + 3) { margin-bottom: 0; }' ); }); @@ -203,11 +201,11 @@ describe('lost-waffle', function() { 'a { lost-waffle: 2/5 3 0 no-flex; lost-waffle-rounder: 99.99999999999; }', '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' + - 'a:nth-child(3n + 1) { clear: both; }\n' + - 'a:nth-last-child(-n + 3) { margin-bottom: 0; }' + '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' + + 'a:nth-child(3n + 1) { clear: both; }\n' + + 'a:nth-last-child(-n + 3) { margin-bottom: 0; }' ); }); }); @@ -215,28 +213,26 @@ describe('lost-waffle', function() { describe('supports RTL', () => { it('works with typical waffle', () => { check( - '@lost --beta-direction rtl;\n'+ - 'div { lost-waffle: 1/3; }', + '@lost --beta-direction rtl;\n' + 'div { lost-waffle: 1/3; }', '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' + - 'div:nth-child(3n + 1) { clear: both; }\n' + - 'div:nth-last-child(-n + 3) { margin-bottom: 0; }' + ' 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' + + 'div:nth-child(3n + 1) { clear: both; }\n' + + 'div:nth-last-child(-n + 3) { margin-bottom: 0; }' ); check( - '@lost --beta-direction rtl;\n'+ - 'div { lost-waffle: 1/3 flex; }', + '@lost --beta-direction rtl;\n' + 'div { lost-waffle: 1/3 flex; }', '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; }' + - 'div:nth-child(3n){ margin-left: 0; margin-right: auto; }' + - 'div:nth-last-child(-n+3){ margin-bottom: 0; }' + 'div:nth-child(1n) { margin-left: 30px; margin-bottom: 30px; margin-right: 0; }' + + 'div:last-child{ margin-left: 0; margin-bottom: 0; }' + + 'div:nth-child(3n){ margin-left: 0; margin-right: auto; }' + + 'div:nth-last-child(-n+3){ margin-bottom: 0; }' ); }); }); diff --git a/test/throws.js b/test/throws.js index 3cfe7842..6674490d 100644 --- a/test/throws.js +++ b/test/throws.js @@ -1,13 +1,13 @@ 'use strict'; -var expect = require('chai').expect; -var lost = require('../lost'); +var expect = require('chai').expect; +var lost = require('../lost'); var postcss = require('postcss'); var CssSyntaxError = require('postcss').CssSyntaxError; -module.exports = function throws( input, message, opts ) { +module.exports = function throws(input, message, opts) { var processor = postcss([lost(opts)]); - expect(function(){ + expect(function() { return processor.process(input).css; }).to.throw(CssSyntaxError, message); };