Overlay

lib/lost-utility.js

@@ -6,6 +6,20 @@ function getColorValue(string) {
   return color;
 }
 
+function unitsMatch() {
+  var args = Array.prototype.slice.call(arguments, 0);
+  var re = /(px|%|em|rem|vh|vw)$/gi;
+  var extension = args[0].match(re).toString();
+  var matched = true;
+
+  args.forEach(function compareExtension(arg) {
+    if(arg.match(re).toString() !== extension) {
+      matched = false;
+    }
+  });
+  return matched;
+}
+
 module.exports = function lostUtilityDecl(css) {
   css.walkDecls('lost-utility', function lostUtilityDeclFunction(decl) {
     var utilityArray = decl.value.split(' ');
@@ -48,6 +62,49 @@ module.exports = function lostUtilityDecl(css) {
       );
     }
 
+    if (utility === 'overlay') {
+      var maxWidth = utilityArray[1] || '1024px',
+        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,
+        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' });
+      }
+
+      for(var i = 1; i < numCols; i++) {
+        // Start of color column
+        gradient = gradient + color + ' ' + position + '%, ';
+
+        // Move position to end of color column
+        position = position + colWidth;
+
+        // End of color column + Start of gutter column
+        gradient = gradient + color + ' ' + position + '%, transparent ' + position + '%, ';
+
+        // Move position to end of gutter column
+        position = position + gutterPercentage;
+
+        // End of gutter column
+        gradient = gradient + 'transparent ' + position + '%, ';
+      }
+
+      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']
+      );
+    }
+
     if (decl.parent.nodes.length === 1) {
       decl.parent.remove();
     } else {

test/lost-utility.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var check = require('./check');
+var throws = require('./throws');
 
 describe('lost-utility', function() {
   it('applies edit indicator', function() {
@@ -41,4 +42,65 @@ describe('lost-utility', 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}'
+    );
+  });
+
+  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}'
+    );
+  });
+
+  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.'
+    );
+  });
 });

test/throws.js

@@ -0,0 +1,13 @@
+'use strict';
+
+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 ) {
+  var processor = postcss([lost(opts)]);
+  expect(function(){
+    return processor.process(input).css;
+  }).to.throw(CssSyntaxError, message);
+};