Lost center fraction

lib/_lg-logic.js

@@ -26,5 +26,17 @@ module.exports = {
       validation = true;
     }
     return validation;
+  },
+  parseLostProperty: function(nodes, propertyName, defaultPropertyValue) {
+    var propertyValue = defaultPropertyValue;
+
+    nodes.forEach(declaration => {
+      if (declaration.prop === propertyName) {
+        propertyValue = declaration.value;
+        declaration.remove();
+      }
+    });
+
+    return propertyValue;
   }
 };

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'];
+
+    var isFractionValue = (value) => {
+      var 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({

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 cssProperties = postcss.parse(css);
+
+    lgLogic.parseLostProperty(cssProperties.nodes[0].nodes, 'lost-unit', '%');
+
+    var testCase = 'a { height: 100px; lost-center-padding: 25px }';
+    var expectedResult = cssProperties.toString();
+
+    expect(testCase).to.equal(expectedResult);
+  });
+
+});

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 }',