Adds new lost-vars functionality.

lib/lg-gutter.js

@@ -1,46 +1,24 @@
+var lostGutter = require('./lost-vars-gutter');
+var lostGutterLocal = require('./lost-vars-gutter-local');
+
 module.exports = function lgGutter(css, settings) {
-  var gutter = settings.gutter;
+  var gutter, newValue;
+
   css.walkDecls( declaration => {
     if (
       /(\$lost-gutter)/g.test(declaration.value) &&
       !/(\$lost-gutter-local)/g.test(declaration.value)
     ) {
-      var newGlobalValue = declaration.value.replace(/(\$lost-gutter)/g, gutter);
-      declaration.value = newGlobalValue;
+      gutter = lostGutter(declaration, settings);
+
+      newValue = declaration.value.replace(/(\$lost-gutter)/g, gutter);
+      declaration.value = newValue;
     }
     if (/(\$lost-gutter-local)/g.test(declaration.value)) {
-      var newLocalValue = gutter;
-      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) {
-            newLocalValue = declarationArray[2];
-          }
-        } else if (
-          parentDeclaration.prop === 'lost-center' ||
-          parentDeclaration.prop === 'lost-masonry-wrap' ||
-          parentDeclaration.prop === 'lost-masonry-column' ||
-          parentDeclaration.prop === 'lost-row'
-        ) {
-          if (declarationArray[1] !== undefined && declarationArray[1].search(/^\d/) !== -1) {
-            newLocalValue = declarationArray[1];
+      gutter = lostGutterLocal(declaration, settings);
 
-          }
-        } else if (parentDeclaration.prop === 'lost-column-gutter') {
-          newLocalValue = parentDeclaration.value;
-        }
-
-        declaration.value = newLocalValue;
-      });
-
-      newLocalValue = declaration.value.replace(/(\$lost-gutter-local)/g, gutter);
-      declaration.value = newLocalValue;
+      newValue = declaration.value.replace(/(\$lost-gutter-local)/g, gutter);
+      declaration.value = newValue;
     }
-
   });
 };

lib/lost-vars-gutter-local.js

@@ -0,0 +1,30 @@
+module.exports = function lostVarsGutterLocal(declaration, settings) {
+  var newLocalValue = settings.gutter;
+
+  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) {
+        newLocalValue = declarationArray[2];
+      }
+    } else if (
+      parentDeclaration.prop === 'lost-center' ||
+      parentDeclaration.prop === 'lost-masonry-wrap' ||
+      parentDeclaration.prop === 'lost-masonry-column' ||
+      parentDeclaration.prop === 'lost-row'
+    ) {
+      if (declarationArray[1] !== undefined && declarationArray[1].search(/^\d/) !== -1) {
+        newLocalValue = declarationArray[1];
+      }
+    } else if (parentDeclaration.prop === 'lost-column-gutter') {
+      newLocalValue = parentDeclaration.value;
+    }
+  });
+
+  return newLocalValue;
+};

lib/lost-vars-gutter.js

@@ -0,0 +1,3 @@
+module.exports = function lostVarsGutter(declaration, settings) {
+  return settings.gutter;
+};

lib/lost-vars.js

@@ -0,0 +1,43 @@
+var lostGutter = require('./lost-vars-gutter');
+var lostGutterLocal = require('./lost-vars-gutter-local');
+
+var variableFunctions = {
+  'gutter': lostGutter,
+  'gutter-local': lostGutterLocal,
+};
+
+module.exports = function lostVarsDecl(css, settings) {
+  css.walkDecls(declaration => {
+    var value = declaration.value,
+      variables = [],
+      re = /lost\-vars\(\s?['"]([\w\-]+)['"]\s?\)/gi,
+      match = null;
+
+    if(value.indexOf('lost-vars(') === -1) {
+      return;
+    } 
+
+    while ((match = re.exec(value)) !== null) {
+      var variableFound = match[1].replace(/["']/g, '');
+
+      if(variables.indexOf(variableFound) === -1) {
+        variables.push(variableFound);
+      }
+    }
+
+    variables.forEach(variable => {
+      var func = variableFunctions[variable];
+
+      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');
+
+      value = value.replace(replaceRegex, newValue);
+    });
+
+    declaration.value = value;    
+  });
+};

lost.js

@@ -15,10 +15,12 @@ var lostMove = require('./lib/lost-move');
 var lostMasonryWrap = require('./lib/lost-masonry-wrap');
 var lostMasonryColumn = require('./lib/lost-masonry-column');
 var lgGutter = require('./lib/lg-gutter');
+var lostVars = require('./lib/lost-vars');
 
 // Lost At Rules and Declarations
 var libs = [
   lostAtRule,
+  lostVars,
   lgGutter,
   lostMove,
   lostUtility,

test/lost-vars.js

@@ -0,0 +1,126 @@
+'use strict';
+
+var check = require('./check');
+var throws = require('./throws');
+
+describe('lost-vars', function() {
+  it('unknown variable', function() {
+    throws(
+      'a { margin: 0 0 lost-vars("randomvariablename"); }',
+      '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: 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: 30px 95px; margin-left: calc(99.9% * (-1/3 * -1) - (95px - 95px * (-1/3 * -1)) + 95px) !important;}'
+    );
+  });
+
+  describe('gutter', function() {
+    it('is replaced', function() {
+      check(
+        'a { margin: 0 0 lost-vars(\'gutter\'); }',
+        'a { margin: 0 0 30px; }'
+      );
+    });
+  });
+
+  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; }'
+      );
+      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; }'
+      );
+    });
+    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;}'
+      );
+    });
+    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)); 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: 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: 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;}'
+      );
+    });
+    it('works on shortcut lost-masonry-wrap', () => {
+      check(
+        '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: 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: 70px; width: 100%; height: calc(99.9% * 1/3 - (70px - 70px * 1/3)); margin-bottom: 70px;}\n' +
+        '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: 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;}'
+      );
+    });
+    it('takes global if local one is invalid', () => {
+      check(
+        '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;}'
+      );
+    });
+  });
+});
+