Customizable Units in the calc.

lib/_lg-logic.js

@@ -1,6 +1,6 @@
 module.exports = {
 
-  calcValue: function(fraction, gutter, rounder) {
+  calcValue: function(fraction, gutter, rounder, unit) {
     var calcValue = '';
     var gutterLogic = '';
 
@@ -12,8 +12,19 @@ module.exports = {
       gutterLogic = ` - (${gutter} - ${gutter} * ${fraction})`;
     }
 
-    calcValue = `calc(${rounder}% * ${fraction}${gutterLogic})`;
+    if (!unit) {
+      unit = '%';
+    }
+
+    calcValue = `calc(${rounder}${unit} * ${fraction}${gutterLogic})`;
     return calcValue;
-  }
+  },
+  validateUnit: function(value, validUnits) {
+    var validation = false;
 
+    if (validUnits.indexOf(value) !== -1) {
+      validation = true;
+    }
+    return validation;
+  }
 };

lib/lost-column.js

@@ -34,14 +34,16 @@ var lgLogic = require('./_lg-logic');
  *     lost-column: 2/6 3 60px flex;
  *   }
  */
-module.exports = function lostColumnDecl(css, settings) {
+module.exports = function lostColumnDecl(css, settings, result) {
   css.walkDecls('lost-column', function lostColumnFunction(decl) {
     var declArr = [];
     var lostColumn;
     var lostColumnCycle;
+    var unit = settings.gridUnit;
     var lostColumnRounder = settings.rounder;
     var lostColumnGutter = settings.gutter;
     var lostColumnFlexbox = settings.flexbox;
+    var validUnits = ['%', 'vw'];
 
     if (decl.value !== 'none') {
       if (settings.cycle === 'auto') {
@@ -81,6 +83,17 @@ module.exports = function lostColumnDecl(css, settings) {
         }
       });
 
+      decl.parent.nodes.forEach(declaration => {
+        if (declaration.prop === 'lost-unit') {
+          if (lgLogic.validateUnit(declaration.value, validUnits)) {
+            unit = declaration.value;
+          } else {
+            decl.warn(result, `${declaration.value} is not a valid unit for lost-column`);
+          }
+          declaration.remove();
+        }
+      });
+
       decl.parent.nodes.forEach(function lostColumnRounderFunction(declaration) {
         if (declaration.prop === 'lost-column-rounder') {
           lostColumnRounder = declaration.value;
@@ -128,7 +141,7 @@ module.exports = function lostColumnDecl(css, settings) {
 
         decl.cloneBefore({
           prop: 'flex-basis',
-          value: lgLogic.calcValue(lostColumn, lostColumnGutter, lostColumnRounder)
+          value: lgLogic.calcValue(lostColumn, lostColumnGutter, lostColumnRounder, unit)
         });
 
         newBlock(
@@ -193,7 +206,7 @@ module.exports = function lostColumnDecl(css, settings) {
       }
       decl.cloneBefore({
         prop: 'width',
-        value: lgLogic.calcValue(lostColumn, lostColumnGutter, lostColumnRounder)
+        value: lgLogic.calcValue(lostColumn, lostColumnGutter, lostColumnRounder, unit)
       });
     } else {
       decl.cloneBefore({

lib/lost-row.js

@@ -28,13 +28,15 @@ var lgLogic = require('./_lg-logic');
  *     lost-row: 1/3;
  *   }
  */
-module.exports = function lostRowDecl(css, settings) {
+module.exports = function lostRowDecl(css, settings, result) {
   css.walkDecls('lost-row', function lostRowDeclFunction(decl) {
     var declArr = [];
     var lostRow;
+    var unit = settings.gridUnit;
     var lostRowRounder = settings.rounder;
     var lostRowGutter = settings.gutter;
     var lostRowFlexbox = settings.flexbox;
+    var validUnits = ['%', 'vh'];
 
     if (decl.value !== 'none') {
       declArr = decl.value.split(' ');
@@ -78,6 +80,17 @@ module.exports = function lostRowDecl(css, settings) {
         }
       });
 
+      decl.parent.nodes.forEach(declaration => {
+        if (declaration.prop === 'lost-unit') {
+          if (lgLogic.validateUnit(declaration.value, validUnits)) {
+            unit = declaration.value;
+          } else {
+            decl.warn(result, `${declaration.value} is not a valid unit for lost-row`);
+          }
+          declaration.remove();
+        }
+      });
+
       decl.cloneBefore({
         prop: 'width',
         value: '100%'
@@ -93,12 +106,12 @@ module.exports = function lostRowDecl(css, settings) {
       if (lostRowGutter !== '0') {
         decl.cloneBefore({
           prop: 'height',
-          value: lgLogic.calcValue(lostRow, lostRowGutter, lostRowRounder)
+          value: lgLogic.calcValue(lostRow, lostRowGutter, lostRowRounder, unit)
         });
       } else {
         decl.cloneBefore({
           prop: 'height',
-          value: lgLogic.calcValue(lostRow, lostRowGutter, lostRowRounder)
+          value: lgLogic.calcValue(lostRow, lostRowGutter, lostRowRounder, unit)
         });
       }
 

lib/lost-waffle.js

@@ -35,15 +35,17 @@ var lgLogic = require('./_lg-logic');
  *     lost-waffle: 1/3;
  *   }
  */
-module.exports = function lostWaffleDecl(css, settings) {
+module.exports = function lostWaffleDecl(css, settings, result) {
   css.walkDecls('lost-waffle', function lostWaffleDeclFunction(decl) {
     var declArr = [];
     var lostWaffle;
     var floatRight;
     var lostWaffleCycle;
+    var unit = settings.gridUnit;
     var lostWaffleRounder = settings.rounder;
     var lostWaffleGutter = settings.gutter;
     var lostWaffleFlexbox = settings.flexbox;
+    var validUnits = ['%', 'vh', 'vw'];
 
     function cloneAllBefore(props) {
       Object.keys(props).forEach(function traverseProps(prop) {
@@ -110,6 +112,17 @@ module.exports = function lostWaffleDecl(css, settings) {
       }
     });
 
+    decl.parent.nodes.forEach(declaration => {
+      if (declaration.prop === 'lost-unit') {
+        if (lgLogic.validateUnit(declaration.value, validUnits)) {
+          unit = declaration.value;
+        } else {
+          decl.warn(result, `${declaration.value} is not a valid unit for lost-waffle`);
+        }
+        declaration.remove();
+      }
+    });
+
     decl.parent.nodes.forEach(function lostWaffleFlexboxFunction(declaration) {
       if (declaration.prop === 'lost-waffle-flexbox') {
         if (declaration.prop === 'flex') {
@@ -222,8 +235,8 @@ module.exports = function lostWaffleDecl(css, settings) {
     }
 
     cloneAllBefore({
-      width: lgLogic.calcValue(lostWaffle, lostWaffleGutter, lostWaffleRounder),
-      height: lgLogic.calcValue(lostWaffle, lostWaffleGutter, lostWaffleRounder)
+      width: lgLogic.calcValue(lostWaffle, lostWaffleGutter, lostWaffleRounder, unit),
+      height: lgLogic.calcValue(lostWaffle, lostWaffleGutter, lostWaffleRounder, unit)
     });
 
     decl.remove();

lost.js

@@ -40,7 +40,8 @@ var defaultSettings = {
   flexbox: 'no-flex',
   cycle: 'auto',
   clearing: 'both',
-  rounder: 99.9
+  rounder: 99.9,
+  gridUnit: '%'
 };
 
 module.exports = postcss.plugin('lost', function lost(settings) {
@@ -50,9 +51,9 @@ module.exports = postcss.plugin('lost', function lost(settings) {
     console.log(checkNodeVersion(nodeVersion).warning);
   }
 
-  return function executeLostGrid(css) {
+  return function executeLostGrid(css, result) {
     libs.forEach(function executeEachLostRule(lib) {
-      lib(css, theseSettings);
+      lib(css, theseSettings, result);
     });
   };
 });

test/lg-logic.js

@@ -5,10 +5,10 @@ var lgLogic = require('../lib/_lg-logic.js');
 
 
 describe('calcValue works as it should', () => {
-  it('gutter and rounder ✅', () => {
-    var testCase = lgLogic.calcValue('1/3', '30px', 100);
+  it('gutter, rounder, and unit ✅', () => {
+    var testCase = lgLogic.calcValue('1/3', '30px', 100, 'vw');
 
-    var expectedResult = `calc(100% * 1/3 - (30px - 30px * 1/3))`;
+    var expectedResult = `calc(100vw * 1/3 - (30px - 30px * 1/3))`;
 
     expect(testCase).to.equal(expectedResult);
   });
@@ -19,11 +19,21 @@ describe('calcValue works as it should', () => {
 
     expect(testCase).to.equal(expectedResult);
   });
-  it('no gutter ✅ when gutter is undefined', () => {
+  it('no gutter ✅  when gutter is undefined', () => {
     var testCase = lgLogic.calcValue('1/3', undefined, 99.9);
 
     var expectedResult = `calc(99.9% * 1/3)`;
 
     expect(testCase).to.equal(expectedResult);
   });
 });
+
+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;
+  });
+});

test/lost-column.js

@@ -116,6 +116,30 @@ describe('lost-column', function() {
     );
   });
 
+  it('Ignores bad unit', function() {
+    check(
+      `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; }'
+    );
+  });
+
+  it('Uses unit if one is passed', function() {
+    check(
+      `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; }'
+    );
+  });
+
   describe('allows for customizable rounders', function() {
     it('100%', function() {
       check(

test/lost-row.js

@@ -39,6 +39,26 @@ describe('lost-row', function() {
     );
   });
 
+  it('ignores bad unit', 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; }'
+    );
+  });
+
+  it('Uses unit if one is passed', 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; }'
+    );
+  });
+
   it('provides none rule', function() {
     check(
       'a { lost-row: none; }',

test/lost-waffle.js

@@ -100,6 +100,18 @@ describe('lost-waffle', function() {
     );
   });
 
+  it('Supports custom unit', function() {
+    check(
+      'a { lost-waffle: 2/5 3 0 no-flex float-right; lost-unit: vw; }',
+      'a { 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; }'
+    );
+  });
+
   describe('allows for customizable rounders', function() {
     it('100%', function() {
       check(