Merge pull request #332 from peterramsing/99-percent

Adds rounder feature
peterramsing · Nov 6, 2016 · 2097644 · 2097644
2 parents 6bcee6f + ad96d41
commit 2097644
Show file tree

Hide file tree

Showing 17 changed files with 256 additions and 24 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,17 @@
+# Change Log
+All notable changes to this project will be documented in this file.
+
+This project adheres to [Semantic Versioning](http://semver.org/).
+
+## [v8.0.0-beta.1] - 2016-11-05
+### Added
+- Global and local configuration for setting the "rounder". The default is 99.9% but this can be adapted with a global `@ rounder [insert percent here]` or you can do it on the local level with `lost-column-rounder: 100` rule.
+
+### Fixed
+- Issue where 99.9 pixels could cause issues. You can now use the custom rounder to fine-tune your width to remove pixel rounding issues.
+
+
+## [v8.0.0-beta.0] - 2016-10-18
+### Changed
+- ([#184](https://github.com/peterramsing/lost/issues/184))[API Change] Changes the lost-offset to be more intuitive.
+This reverses the current api from moving left to right based on negative fractions which didn’t make much sense. This breaks that api’s current functionality and makes it more intuitive.
diff --git a/lib/lost-at-rule.js b/lib/lost-at-rule.js
@@ -24,6 +24,9 @@ module.exports = function lostAtRule(css, Settings) {
     if (rule.params[0] === 'flexbox') {
       settings.flexbox = rule.params[1];
     }
+    if (rule.params[0] === 'rounder') {
+      settings.rounder = rule.params[1];
+    }
     if (rule.params[0] === 'cycle') {
       if (rule.params[1] !== 'auto') {
         if (rule.params[1] === 'none' || rule.params[1] === '0') {

diff --git a/lib/lost-column.js b/lib/lost-column.js
@@ -37,6 +37,7 @@ module.exports = function lostColumnDecl(css, settings) {
     var declArr = [];
     var lostColumn;
     var lostColumnCycle;
+    var lostColumnRounder = settings.rounder;
     var lostColumnGutter = settings.gutter;
     var lostColumnFlexbox = settings.flexbox;
 
@@ -78,6 +79,14 @@ module.exports = function lostColumnDecl(css, settings) {
         }
       });
 
+      decl.parent.nodes.forEach(function lostColumnRounderFunction(declaration) {
+        if (declaration.prop === 'lost-column-rounder') {
+          lostColumnRounder = declaration.value;
+
+          declaration.remove();
+        }
+      });
+
       decl.parent.nodes.forEach(function lostColumnGutterFunction(declaration) {
         if (declaration.prop === 'lost-column-gutter') {
           lostColumnGutter = declaration.value;
@@ -175,14 +184,14 @@ module.exports = function lostColumnDecl(css, settings) {
       if (lostColumnGutter !== '0') {
         decl.cloneBefore({
           prop: 'width',
-          value: 'calc(99.9% * '
+          value: 'calc(' + lostColumnRounder + '% * '
           + lostColumn + ' - (' + lostColumnGutter + ' - '
           + lostColumnGutter + ' * ' + lostColumn + '))'
         });
       } else {
         decl.cloneBefore({
           prop: 'width',
-          value: 'calc(99.9% * ' + lostColumn + ')'
+          value: 'calc(' + lostColumnRounder + '% * ' + lostColumn + ')'
         });
       }
     } else {

diff --git a/lib/lost-masonry-column.js b/lib/lost-masonry-column.js
@@ -22,6 +22,7 @@ module.exports = function lostMasonryColumnDecl(css, settings) {
   css.walkDecls('lost-masonry-column', function lostMasonryColumnFunction(decl) {
     var declArr = [];
     var lostMasonryColumn;
+    var lostMasonryColumnRounder = settings.rounder;
     var lostMasonryColumnFlexbox = settings.flexbox;
     var lostMasonryColumnGutter = settings.gutter;
     var lostMasonryColumnGutterUnit;
@@ -54,14 +55,28 @@ module.exports = function lostMasonryColumnDecl(css, settings) {
       lostMasonryColumnFlexbox = 'no-flex';
     }
 
+    decl.parent.nodes.forEach(function lostMasonryColumnRounderFunction(declaration) {
+      if (declaration.prop === 'lost-masonry-column-rounder') {
+        lostMasonryColumnRounder = declaration.value;
+
+        declaration.remove();
+      }
+    });
+
     decl.parent.nodes.forEach(function lostMasonryColumnGutterFunction(declaration) {
       if (declaration.prop === 'lost-masonry-column-gutter') {
         lostMasonryColumnGutter = declaration.value;
 
         declaration.remove();
       }
     });
+    decl.parent.nodes.forEach(function lostMasonryColumnRounderFunction(declaration) {
+      if (declaration.prop === 'lost-rounder') {
+        lostMasonryColumnRounder = declaration.value;
 
+        declaration.remove();
+      }
+    });
     decl.parent.nodes.forEach(function lostMasonryColumnFlexboxFunction(declaration) {
       if (declaration.prop === 'lost-masonry-column-flexbox') {
         if (declaration.value === 'flex') {
@@ -88,13 +103,14 @@ module.exports = function lostMasonryColumnDecl(css, settings) {
 
     if (lostMasonryColumnGutter !== '0') {
       cloneAllBefore({
-        width: 'calc(99.9% * ' + lostMasonryColumn + ' - ' + lostMasonryColumnGutter + ')',
+        width: 'calc(' + lostMasonryColumnRounder + '% * ' + lostMasonryColumn +
+        ' - ' + lostMasonryColumnGutter + ')',
         'margin-left': (parseInt(lostMasonryColumnGutter, 10) / 2) + lostMasonryColumnGutterUnit,
         'margin-right': (parseInt(lostMasonryColumnGutter, 10) / 2) + lostMasonryColumnGutterUnit
       });
     } else {
       cloneAllBefore({
-        width: 'calc(99.9% * ' + lostMasonryColumn + ')',
+        width: 'calc(' + lostMasonryColumnRounder + '% * ' + lostMasonryColumn + ')',
         'margin-left': (parseInt(lostMasonryColumnGutter, 10) / 2) + lostMasonryColumnGutterUnit,
         'margin-right': (parseInt(lostMasonryColumnGutter, 10) / 2) + lostMasonryColumnGutterUnit
       });

diff --git a/lib/lost-move.js b/lib/lost-move.js
@@ -26,6 +26,7 @@ module.exports = function lostMoveDecl(css, settings) {
     var declArr = [];
     var lostMove;
     var lostMoveDirection;
+    var lostMoveRounder = settings.rounder;
     var lostMoveGutter = settings.gutter;
 
     declArr = decl.value.split(' ');
@@ -39,6 +40,14 @@ module.exports = function lostMoveDecl(css, settings) {
       lostMoveGutter = declArr[2];
     }
 
+    decl.parent.nodes.forEach(function lostMoveRounderFunction(declaration) {
+      if (declaration.prop === 'lost-move-rounder') {
+        lostMoveRounder = declaration.value;
+
+        declaration.remove();
+      }
+    });
+
     decl.parent.nodes.forEach(function lostMoveDirectionFunction(declaration) {
       if (declaration.prop === 'lost-move-direction') {
         lostMoveDirection = declaration.value;
@@ -64,27 +73,27 @@ module.exports = function lostMoveDecl(css, settings) {
       if (lostMoveGutter !== '0') {
         decl.cloneBefore({
           prop: 'top',
-          value: 'calc(99.9% * '
+          value: 'calc(' + lostMoveRounder + '% * '
           + lostMove + ' - (' + lostMoveGutter + ' - '
           + lostMoveGutter + ' * ' + lostMove + ') + ' + lostMoveGutter + ')'
         });
       } else {
         decl.cloneBefore({
           prop: 'top',
-          value: 'calc(99.999999% * ' + lostMove + ')'
+          value: 'calc(' + lostMoveRounder + '% * ' + lostMove + ')'
         });
       }
     } else if (lostMoveGutter !== '0') {
       decl.cloneBefore({
         prop: 'left',
-        value: 'calc(99.9% * '
+        value: 'calc(' + lostMoveRounder + '% * '
         + lostMove + ' - (' + lostMoveGutter + ' - '
         + lostMoveGutter + ' * ' + lostMove + ') + ' + lostMoveGutter + ')'
       });
     } else {
       decl.cloneBefore({
         prop: 'left',
-        value: 'calc(99.999999% * ' + lostMove + ')'
+        value: 'calc(' + lostMoveRounder + '% * ' + lostMove + ')'
       });
     }
 

diff --git a/lib/lost-offset.js b/lib/lost-offset.js
@@ -27,6 +27,7 @@ module.exports = function lostOffsetDecl(css, settings) {
     var lostOffset;
     var lostOffsetNumerator;
     var lostOffsetDirection;
+    var lostOffsetRounder = settings.rounder;
     var lostOffsetGutter = settings.gutter;
 
     function cloneAllBefore(props) {
@@ -50,6 +51,14 @@ module.exports = function lostOffsetDecl(css, settings) {
       lostOffsetGutter = declArr[2];
     }
 
+    decl.parent.nodes.forEach(function lostOffsetRounderFunction(declaration) {
+      if (declaration.prop === 'lost-offset-rounder') {
+        lostOffsetRounder = declaration.value;
+
+        declaration.remove();
+      }
+    });
+
     decl.parent.nodes.forEach(function lostOffsetDirectionFunction(declaration) {
       if (declaration.prop === 'lost-offset-direction') {
         lostOffsetDirection = declaration.value;
@@ -71,30 +80,30 @@ module.exports = function lostOffsetDecl(css, settings) {
         if (lostOffsetGutter !== '0') {
           decl.cloneBefore({
             prop: 'margin-bottom',
-            value: 'calc(99.9% * '
+            value: 'calc(' + lostOffsetRounder + '% * '
             + lostOffset + ' - (' + lostOffsetGutter + ' - '
             + lostOffsetGutter + ' * ' + lostOffset + ') + ('
             + lostOffsetGutter + ' * 2)) !important'
           });
         } else {
           decl.cloneBefore({
             prop: 'margin-bottom',
-            value: 'calc(99.999999% * ' + lostOffset + ') !important'
+            value: 'calc(' + lostOffsetRounder + '% * ' + lostOffset + ') !important'
           });
         }
       } else if (lostOffsetNumerator < 0) {
         if (lostOffsetGutter !== '0') {
           decl.cloneBefore({
             prop: 'margin-top',
-            value: 'calc(99.9% * ('
+            value: 'calc(' + lostOffsetRounder + '% * ('
             + lostOffset + ' * -1) - (' + lostOffsetGutter + ' - '
             + lostOffsetGutter + ' * (' + lostOffset + ' * -1)) + '
             + lostOffsetGutter + ') !important'
           });
         } else {
           decl.cloneBefore({
             prop: 'margin-top',
-            value: 'calc(99.999999% * ' + lostOffset + ') !important'
+            value: 'calc(' + lostOffsetRounder + '% * ' + lostOffset + ') !important'
           });
         }
       } else {
@@ -112,30 +121,30 @@ module.exports = function lostOffsetDecl(css, settings) {
       if (lostOffsetGutter !== '0') {
         decl.cloneBefore({
           prop: 'margin-left',
-          value: 'calc(99.9% * (-'
+          value: 'calc(' + lostOffsetRounder + '% * (-'
           + lostOffset + ' * -1) - (' + lostOffsetGutter + ' - '
           + lostOffsetGutter + ' * (-' + lostOffset + ' * -1)) + '
           + lostOffsetGutter + ') !important'
         });
       } else {
         decl.cloneBefore({
           prop: 'margin-left',
-          value: 'calc(99.999999% * ' + lostOffset + ') !important'
+          value: 'calc(' + lostOffsetRounder + '% * ' + lostOffset + ') !important'
         });
       }
     } else if (lostOffsetNumerator < 0) {
       if (lostOffsetGutter !== '0') {
         decl.cloneBefore({
           prop: 'margin-left',
-          value: 'calc(99.9% * '
+          value: 'calc(' + lostOffsetRounder + '% * '
           + lostOffset + ' - (' + lostOffsetGutter + ' - '
           + lostOffsetGutter + ' * ' + lostOffset + ') + '
           + lostOffsetGutter + ') !important'
         });
       } else {
         decl.cloneBefore({
           prop: 'margin-left',
-          value: 'calc(99.999999% * ' + lostOffset + ') !important'
+          value: 'calc(' + lostOffsetRounder + '% * ' + lostOffset + ') !important'
         });
       }
     } else {

diff --git a/lib/lost-row.js b/lib/lost-row.js
@@ -30,6 +30,7 @@ module.exports = function lostRowDecl(css, settings) {
   css.walkDecls('lost-row', function lostRowDeclFunction(decl) {
     var declArr = [];
     var lostRow;
+    var lostRowRounder = settings.rounder;
     var lostRowGutter = settings.gutter;
     var lostRowFlexbox = settings.flexbox;
 
@@ -49,6 +50,14 @@ module.exports = function lostRowDecl(css, settings) {
         lostRowFlexbox = 'no-flex';
       }
 
+      decl.parent.nodes.forEach(function lostRowRounderFunction(declaration) {
+        if (declaration.prop === 'lost-row-rounder') {
+          lostRowRounder = declaration.value;
+
+          declaration.remove();
+        }
+      });
+
       decl.parent.nodes.forEach(function lostRowGutterFunction(declaration) {
         if (declaration.prop === 'lost-row-gutter') {
           lostRowGutter = declaration.value;
@@ -82,14 +91,14 @@ module.exports = function lostRowDecl(css, settings) {
       if (lostRowGutter !== '0') {
         decl.cloneBefore({
           prop: 'height',
-          value: 'calc(99.9% * '
+          value: 'calc(' + lostRowRounder + '% * '
           + lostRow + ' - (' + lostRowGutter + ' - '
           + lostRowGutter + ' * ' + lostRow + '))'
         });
       } else {
         decl.cloneBefore({
           prop: 'height',
-          value: 'calc(99.9% * ' + lostRow + ')'
+          value: 'calc(' + lostRowRounder + '% * ' + lostRow + ')'
         });
       }
 

diff --git a/lib/lost-waffle.js b/lib/lost-waffle.js
@@ -36,6 +36,7 @@ module.exports = function lostWaffleDecl(css, settings) {
     var declArr = [];
     var lostWaffle;
     var lostWaffleCycle;
+    var lostWaffleRounder = settings.rounder;
     var lostWaffleGutter = settings.gutter;
     var lostWaffleFlexbox = settings.flexbox;
 
@@ -77,6 +78,13 @@ module.exports = function lostWaffleDecl(css, settings) {
       lostWaffleFlexbox = 'no-flex';
     }
 
+    decl.parent.nodes.forEach(function lostWaffleRounderFunction(declaration) {
+      if (declaration.prop === 'lost-waffle-rounder') {
+        lostWaffleRounder = declaration.value;
+        declaration.remove();
+      }
+    });
+
     decl.parent.nodes.forEach(function lostWaffleCycleFunction(declaration) {
       if (declaration.prop === 'lost-waffle-cycle') {
         lostWaffleCycle = declaration.value;
@@ -188,17 +196,17 @@ module.exports = function lostWaffleDecl(css, settings) {
 
     if (lostWaffleGutter !== '0') {
       cloneAllBefore({
-        width: 'calc(99.9% * '
+        width: 'calc(' + lostWaffleRounder + '% * '
         + lostWaffle + ' - (' + lostWaffleGutter + ' - '
         + lostWaffleGutter + ' * ' + lostWaffle + '))',
-        height: 'calc(99.9% * ' + lostWaffle + ' - ('
+        height: 'calc(' + lostWaffleRounder + '% * ' + lostWaffle + ' - ('
         + lostWaffleGutter + ' - ' + lostWaffleGutter + ' * '
         + lostWaffle + '))'
       });
     } else {
       cloneAllBefore({
-        width: 'calc(99.9% * ' + lostWaffle + ')',
-        height: 'calc(99.9% * ' + lostWaffle + ')'
+        width: 'calc(' + lostWaffleRounder + '% * ' + lostWaffle + ')',
+        height: 'calc(' + lostWaffleRounder + '% * ' + lostWaffle + ')'
       });
     }
 

diff --git a/lost.js b/lost.js
@@ -35,7 +35,8 @@ var defaultSettings = {
   gutter: '30px',
   flexbox: 'no-flex',
   cycle: 'auto',
-  clearing: 'both'
+  clearing: 'both',
+  rounder: 99.9
 };
 
 module.exports = postcss.plugin('lost', function lost(settings) {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lost",
-  "version": "8.0.0-beta.0",
+  "version": "8.0.0-beta.1",
   "description": "LostGrid is a powerful grid system built in PostCSS that works with any preprocessor and even vanilla CSS.",
   "main": "lost.js",
   "repository": {