From e757ff9a7a0ed99a5c811b0a08470cb4df453f27 Mon Sep 17 00:00:00 2001 From: Steve Holland Date: Mon, 27 Mar 2017 12:00:39 +0100 Subject: [PATCH 1/3] Adds optional fraction value to lost-center. --- lib/_lg-logic.js | 12 +++++++++ lib/lost-center.js | 61 ++++++++++++++++++++++++++++++++------------- test/lg-logic.js | 36 ++++++++++++++++++++++++++ test/lost-center.js | 30 ++++++++++++++++++++++ 4 files changed, 122 insertions(+), 17 deletions(-) diff --git a/lib/_lg-logic.js b/lib/_lg-logic.js index 00fd1e34..bdb092d3 100644 --- a/lib/_lg-logic.js +++ b/lib/_lg-logic.js @@ -26,5 +26,17 @@ module.exports = { validation = true; } return validation; + }, + parseLostProperty: function(nodes, propertyName, defaultPropertyValue) { + let propertyValue = defaultPropertyValue; + + nodes.forEach(declaration => { + if (declaration.prop === propertyName) { + propertyValue = declaration.value; + declaration.remove(); + } + }); + + return propertyValue; } }; diff --git a/lib/lost-center.js b/lib/lost-center.js index 743fc2b6..3d094c09 100644 --- a/lib/lost-center.js +++ b/lib/lost-center.js @@ -1,10 +1,13 @@ var newBlock = require('./new-block.js'); +var lgLogic = require('./_lg-logic'); + /** * lost-center: Horizontally center a container element and apply padding * to it. * - * @param {length} [max-width] - A max-width to assign. Can be any unit. + * @param {length} [max-width|fraction] - Either a max-width to assign (can be + * any unit). Or, a simple fraction of the containing element's width. * * @param {length} [padding] - Padding on the left and right of the element. * Can be any unit. @@ -19,14 +22,34 @@ var newBlock = require('./new-block.js'); * * @example * section { + * lost-center: 3/12; + * } + * + * @example + * section { * lost-center: 1140px 30px flex; * } + * + * @example + * section { + * lost-center: 2/6 30px flex; + * } */ -module.exports = function lostCenterDecl(css, settings) { +module.exports = function lostCenterDecl(css, settings, result) { css.walkDecls('lost-center', function lostCenterFunction(decl) { var declArr = []; var lostCenterPadding; + var lostCenterMaxWidth; var lostCenterFlexbox = settings.flexbox; + var lostUnit = settings.gridUnit; + var lostColumnRounder = settings.rounder; + var lostColumnGutter = 0; + var validUnits = ['%', 'vw']; + + const isFractionValue = (value) => { + const lostFractionPattern = /^\d+\/\d+$/; + return lostFractionPattern.test(value); + }; declArr = decl.value.split(' '); @@ -42,23 +65,27 @@ module.exports = function lostCenterDecl(css, settings) { lostCenterFlexbox = 'no-flex'; } - decl.parent.nodes.forEach(function lostCenterPaddingFunction(declaration) { - if (declaration.prop === 'lost-center-padding') { - lostCenterPadding = declaration.value; + lostCenterPadding = lgLogic.parseLostProperty(decl.parent.nodes, 'lost-center-padding', lostCenterPadding); + lostColumnRounder = lgLogic.parseLostProperty(decl.parent.nodes, 'lost-column-rounder', lostColumnRounder); - declaration.remove(); - } - }); + lostUnit = lgLogic.parseLostProperty(decl.parent.nodes, 'lost-unit', lostUnit); - decl.parent.nodes.forEach(function lostCenterFlexboxFunction(declaration) { - if (declaration.prop === 'lost-center-flexbox') { - if (declaration.value === 'flex') { - lostCenterFlexbox = declaration.value; - } + if (!lgLogic.validateUnit(lostUnit, validUnits)) { + decl.warn(result, `${lostUnit} is not a valid unit for lost-center`); + lostUnit = settings.gridUnit; + } - declaration.remove(); - } - }); + lostCenterFlexbox = lgLogic.parseLostProperty(decl.parent.nodes, 'lost-center-flexbox', lostCenterFlexbox); + + if(lostCenterFlexbox !== 'flex') { + lostCenterFlexbox = settings.flexbox; + } + + if(declArr[0] !== undefined && isFractionValue(declArr[0])) { + lostCenterMaxWidth = lgLogic.calcValue(declArr[0], lostColumnGutter, lostColumnRounder, lostUnit); + } else { + lostCenterMaxWidth = declArr[0]; + } if (lostCenterFlexbox === 'no-flex') { newBlock( @@ -88,7 +115,7 @@ module.exports = function lostCenterDecl(css, settings) { decl.cloneBefore({ prop: 'max-width', - value: declArr[0] + value: lostCenterMaxWidth }); decl.cloneBefore({ diff --git a/test/lg-logic.js b/test/lg-logic.js index 57867155..45920abd 100644 --- a/test/lg-logic.js +++ b/test/lg-logic.js @@ -2,6 +2,7 @@ var expect = require('chai').expect; var lgLogic = require('../lib/_lg-logic.js'); +var postcss = require('postcss'); describe('calcValue works as it should', () => { @@ -37,3 +38,38 @@ describe('Units are validated based on if they make sense', () => { expect(lgLogic.validateUnit(3, ['%','vw'])).to.not.be.true; }); }); + +describe('parseLostProperty works as it should', () => { + it('returns default value if property not found', () => { + var css = 'a { lost-unit: vw; lost-center-padding: 25px }'; + var nodes = postcss.parse(css).nodes[0].nodes; + + var testCase = lgLogic.parseLostProperty(nodes, 'lost-column-rounder', 0); + var expectedResult = 0; + + expect(testCase).to.equal(expectedResult); + }); + + it('returns value if property is found', () => { + var css = 'a { lost-unit: vw; lost-center-padding: 25px }'; + var nodes = postcss.parse(css).nodes[0].nodes; + + var testCase = lgLogic.parseLostProperty(nodes, 'lost-unit', '%'); + var expectedResult = 'vw'; + + expect(testCase).to.equal(expectedResult); + }); + + it('property node removed if found', () => { + var css = 'a { height: 100px; lost-unit: vw; lost-center-padding: 25px }'; + var nodes = postcss.parse(css).nodes[0].nodes; + + lgLogic.parseLostProperty(nodes, 'lost-unit', '%'); + + var testCase = nodes.length; + var expectedResult = 2; + + expect(testCase).to.equal(expectedResult); + }); + +}); diff --git a/test/lost-center.js b/test/lost-center.js index 027460df..c8e0ce55 100644 --- a/test/lost-center.js +++ b/test/lost-center.js @@ -3,6 +3,26 @@ var check = require('./check'); describe('lost-center', function() { + it('Ignores bad unit', function() { + check( + '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 }' + ); + }); + + it('Uses unit if one is passed', function() { + check( + '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 }' + ); + }); + it('horizontally centers container', function() { check( 'a { lost-center: 980px }', @@ -12,6 +32,16 @@ describe('lost-center', function() { ); }); + it('horizontally centers container (fraction)', function() { + check( + '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 }' + ); + }); + it('adds 30px padding', function() { check( 'a { lost-center: 980px 30px }', From 5f39363ba82adb1992580724a10eba3bdd41d9ba Mon Sep 17 00:00:00 2001 From: Steve Holland Date: Wed, 29 Mar 2017 14:52:18 +0100 Subject: [PATCH 2/3] Updates parseLostProperty unit test. --- test/lg-logic.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/test/lg-logic.js b/test/lg-logic.js index 45920abd..8a4f150e 100644 --- a/test/lg-logic.js +++ b/test/lg-logic.js @@ -62,12 +62,12 @@ describe('parseLostProperty works as it should', () => { it('property node removed if found', () => { var css = 'a { height: 100px; lost-unit: vw; lost-center-padding: 25px }'; - var nodes = postcss.parse(css).nodes[0].nodes; + var cssProperties = postcss.parse(css); - lgLogic.parseLostProperty(nodes, 'lost-unit', '%'); + lgLogic.parseLostProperty(cssProperties.nodes[0].nodes, 'lost-unit', '%'); - var testCase = nodes.length; - var expectedResult = 2; + var testCase = 'a { height: 100px; lost-center-padding: 25px }'; + var expectedResult = cssProperties.toString(); expect(testCase).to.equal(expectedResult); }); From 29a3410f30d95dcc62f1cfce471122dc226d139b Mon Sep 17 00:00:00 2001 From: Steve Holland Date: Wed, 29 Mar 2017 15:06:10 +0100 Subject: [PATCH 3/3] Updates use of ES6 features not supported in early nodeJS versions. --- lib/_lg-logic.js | 2 +- lib/lost-center.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/_lg-logic.js b/lib/_lg-logic.js index bdb092d3..510d12f1 100644 --- a/lib/_lg-logic.js +++ b/lib/_lg-logic.js @@ -28,7 +28,7 @@ module.exports = { return validation; }, parseLostProperty: function(nodes, propertyName, defaultPropertyValue) { - let propertyValue = defaultPropertyValue; + var propertyValue = defaultPropertyValue; nodes.forEach(declaration => { if (declaration.prop === propertyName) { diff --git a/lib/lost-center.js b/lib/lost-center.js index 3d094c09..3084859e 100644 --- a/lib/lost-center.js +++ b/lib/lost-center.js @@ -46,8 +46,8 @@ module.exports = function lostCenterDecl(css, settings, result) { var lostColumnGutter = 0; var validUnits = ['%', 'vw']; - const isFractionValue = (value) => { - const lostFractionPattern = /^\d+\/\d+$/; + var isFractionValue = (value) => { + var lostFractionPattern = /^\d+\/\d+$/; return lostFractionPattern.test(value); };