Updates lost-offset to be more intuitively | #184 (#331)

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
peterramsing · Oct 19, 2016 · f46a75b · f46a75b
1 parent 1b11e98
commit f46a75b
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 14 deletions.
diff --git a/lib/lost-offset.js b/lib/lost-offset.js
@@ -111,25 +111,25 @@ module.exports = function lostOffsetDecl(css, settings) {
     } else if (lostOffsetNumerator > 0) {
       if (lostOffsetGutter !== '0') {
         decl.cloneBefore({
-          prop: 'margin-right',
-          value: 'calc(99.9% * '
-          + lostOffset + ' - (' + lostOffsetGutter + ' - '
-          + lostOffsetGutter + ' * ' + lostOffset + ') + ('
-          + lostOffsetGutter + ' * 2)) !important'
+          prop: 'margin-left',
+          value: 'calc(99.9% * (-'
+          + lostOffset + ' * -1) - (' + lostOffsetGutter + ' - '
+          + lostOffsetGutter + ' * (-' + lostOffset + ' * -1)) + '
+          + lostOffsetGutter + ') !important'
         });
       } else {
         decl.cloneBefore({
-          prop: 'margin-right',
+          prop: 'margin-left',
           value: 'calc(99.999999% * ' + lostOffset + ') !important'
         });
       }
     } else if (lostOffsetNumerator < 0) {
       if (lostOffsetGutter !== '0') {
         decl.cloneBefore({
           prop: 'margin-left',
-          value: 'calc(99.9% * ('
-          + lostOffset + ' * -1) - (' + lostOffsetGutter + ' - '
-          + lostOffsetGutter + ' * (' + lostOffset + ' * -1)) + '
+          value: 'calc(99.9% * '
+          + lostOffset + ' - (' + lostOffsetGutter + ' - '
+          + lostOffsetGutter + ' * ' + lostOffset + ') + '
           + lostOffsetGutter + ') !important'
         });
       } else {

diff --git a/test/lost-offset.js b/test/lost-offset.js
@@ -6,16 +6,16 @@ describe('lost-offset', function() {
   it('moves element to the left', function() {
     check(
       'a { lost-offset: 1/3; }',
-      'a { margin-right: calc(99.9% * 1/3 - (30px - 30px * 1/3) + (30px * 2)' +
+      'a { margin-left: calc(99.9% * (-1/3 * -1) - (30px - 30px * (-1/3 * -1)) + 30px' +
       ') !important; }'
     );
   });
 
   it('moves element to the right', function() {
     check(
       'a { lost-offset: -1/3; }',
-      'a { margin-left: calc(99.9% * (-1/3 * -1) - (30px - 30px * ' +
-      '(-1/3 * -1)) + 30px) !important; }'
+      'a { margin-left: calc(99.9% * -1/3 - (30px - 30px * ' +
+      '-1/3) + 30px) !important; }'
     );
   });
 
@@ -38,8 +38,8 @@ describe('lost-offset', function() {
   it('supports custom gutter', function() {
     check(
       'a { lost-offset: 1/2 row 60px; }',
-      'a { margin-right: calc(99.9% * 1/2 - (60px - 60px * 1/2) + ' +
-      '(60px * 2)) !important; }'
+      'a { margin-left: calc(99.9% * (-1/2 * -1) - (60px - 60px * (-1/2 * -1)) + ' +
+      '60px) !important; }'
     );
   });
 });