css-box-model - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

dist/css-box-model.cjs.js

@@ -5,2 +5,6 @@ 'use strict';
 
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var invariant = _interopDefault(require('tiny-invariant'));
+
 var getRect = function getRect(_ref) {
@@ -11,6 +15,4 @@ var top = _ref.top,
       left = _ref.left;
-
   var width = right - left;
   var height = bottom - top;
-
   var rect = {
@@ -23,6 +25,4 @@ top: top,
     height: height,
-
     x: left,
     y: top,
-
     center: {
@@ -33,6 +33,4 @@ x: (right + left) / 2,
   };
-
   return rect;
 };
-
 var expand = function expand(target, expandBy) {
@@ -42,3 +40,2 @@ return {
     left: target.left - expandBy.left,
-
     bottom: target.bottom + expandBy.bottom,
@@ -48,3 +45,2 @@ right: target.right + expandBy.right
 };
-
 var shrink = function shrink(target, shrinkBy) {
@@ -54,3 +50,2 @@ return {
     left: target.left + shrinkBy.left,
-
     bottom: target.bottom - shrinkBy.bottom,
@@ -61,8 +56,8 @@ right: target.right - shrinkBy.right
 
-var shift = function shift(spacing, point) {
+var shift = function shift(target, shiftBy) {
   return {
-    top: spacing.top + point.y,
-    left: spacing.left + point.x,
-    bottom: spacing.bottom + point.y,
-    right: spacing.right + point.x
+    top: target.top + shiftBy.y,
+    left: target.left + shiftBy.x,
+    bottom: target.bottom + shiftBy.y,
+    right: target.right + shiftBy.x
   };
@@ -77,18 +72,13 @@ };
 };
-
 var createBox = function createBox(_ref2) {
   var borderBox = _ref2.borderBox,
       _ref2$margin = _ref2.margin,
-      margin = _ref2$margin === undefined ? noSpacing : _ref2$margin,
+      margin = _ref2$margin === void 0 ? noSpacing : _ref2$margin,
       _ref2$border = _ref2.border,
-      border = _ref2$border === undefined ? noSpacing : _ref2$border,
+      border = _ref2$border === void 0 ? noSpacing : _ref2$border,
       _ref2$padding = _ref2.padding,
-      padding = _ref2$padding === undefined ? noSpacing : _ref2$padding;
-
+      padding = _ref2$padding === void 0 ? noSpacing : _ref2$padding;
   var marginBox = getRect(expand(borderBox, margin));
-
   var paddingBox = getRect(shrink(borderBox, border));
-
   var contentBox = getRect(shrink(paddingBox, padding));
-
   return {
@@ -105,5 +95,11 @@ marginBox: marginBox,
 
-var parse = function parse(value) {
-  return parseInt(value, 10);
+var parse = function parse(raw) {
+  var value = raw.slice(0, -2);
+  var suffix = raw.slice(-2);
+  !(suffix === 'px') ? process.env.NODE_ENV !== "production" ? invariant(false, "Expected value to be a pixel value.\n      Expected form: 10px\n      Actual value: " + raw + "\n    ") : invariant(false) : void 0;
+  var result = Number(value);
+  !!isNaN(result) ? process.env.NODE_ENV !== "production" ? invariant(false, "Could not parse value [raw: " + raw + ", without suffix: " + value + "]") : invariant(false) : void 0;
+  return result;
 };
+
 var getWindowScroll = function getWindowScroll() {
@@ -121,5 +117,3 @@ return {
       padding = original.padding;
-
   var shifted = shift(borderBox, change);
-
   return createBox({
@@ -132,8 +126,9 @@ borderBox: shifted,
 };
+var withScroll = function withScroll(original, scroll) {
+  if (scroll === void 0) {
+    scroll = getWindowScroll();
+  }
 
-var withScroll = function withScroll(original) {
-  var scroll = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getWindowScroll();
   return offset(original, scroll);
 };
-
 var calculateBox = function calculateBox(borderBox, styles) {
@@ -158,3 +153,2 @@ var margin = {
   };
-
   return createBox({
@@ -167,7 +161,5 @@ borderBox: borderBox,
 };
-
 var getBox = function getBox(el) {
   var borderBox = el.getBoundingClientRect();
   var styles = window.getComputedStyle(el);
-
   return calculateBox(borderBox, styles);
@@ -177,2 +169,4 @@ };
 exports.getRect = getRect;
+exports.expand = expand;
+exports.shrink = shrink;
 exports.createBox = createBox;
@@ -179,0 +173,0 @@ exports.offset = offset;

dist/css-box-model.esm.js

@@ -0,1 +1,3 @@
+import invariant from 'tiny-invariant';
+
 var getRect = function getRect(_ref) {
@@ -6,6 +8,4 @@ var top = _ref.top,
       left = _ref.left;
-
   var width = right - left;
   var height = bottom - top;
-
   var rect = {
@@ -18,6 +18,4 @@ top: top,
     height: height,
-
     x: left,
     y: top,
-
     center: {
@@ -28,6 +26,4 @@ x: (right + left) / 2,
   };
-
   return rect;
 };
-
 var expand = function expand(target, expandBy) {
@@ -37,3 +33,2 @@ return {
     left: target.left - expandBy.left,
-
     bottom: target.bottom + expandBy.bottom,
@@ -43,3 +38,2 @@ right: target.right + expandBy.right
 };
-
 var shrink = function shrink(target, shrinkBy) {
@@ -49,3 +43,2 @@ return {
     left: target.left + shrinkBy.left,
-
     bottom: target.bottom - shrinkBy.bottom,
@@ -56,8 +49,8 @@ right: target.right - shrinkBy.right
 
-var shift = function shift(spacing, point) {
+var shift = function shift(target, shiftBy) {
   return {
-    top: spacing.top + point.y,
-    left: spacing.left + point.x,
-    bottom: spacing.bottom + point.y,
-    right: spacing.right + point.x
+    top: target.top + shiftBy.y,
+    left: target.left + shiftBy.x,
+    bottom: target.bottom + shiftBy.y,
+    right: target.right + shiftBy.x
   };
@@ -72,18 +65,13 @@ };
 };
-
 var createBox = function createBox(_ref2) {
   var borderBox = _ref2.borderBox,
       _ref2$margin = _ref2.margin,
-      margin = _ref2$margin === undefined ? noSpacing : _ref2$margin,
+      margin = _ref2$margin === void 0 ? noSpacing : _ref2$margin,
       _ref2$border = _ref2.border,
-      border = _ref2$border === undefined ? noSpacing : _ref2$border,
+      border = _ref2$border === void 0 ? noSpacing : _ref2$border,
       _ref2$padding = _ref2.padding,
-      padding = _ref2$padding === undefined ? noSpacing : _ref2$padding;
-
+      padding = _ref2$padding === void 0 ? noSpacing : _ref2$padding;
   var marginBox = getRect(expand(borderBox, margin));
-
   var paddingBox = getRect(shrink(borderBox, border));
-
   var contentBox = getRect(shrink(paddingBox, padding));
-
   return {
@@ -100,5 +88,11 @@ marginBox: marginBox,
 
-var parse = function parse(value) {
-  return parseInt(value, 10);
+var parse = function parse(raw) {
+  var value = raw.slice(0, -2);
+  var suffix = raw.slice(-2);
+  !(suffix === 'px') ? process.env.NODE_ENV !== "production" ? invariant(false, "Expected value to be a pixel value.\n      Expected form: 10px\n      Actual value: " + raw + "\n    ") : invariant(false) : void 0;
+  var result = Number(value);
+  !!isNaN(result) ? process.env.NODE_ENV !== "production" ? invariant(false, "Could not parse value [raw: " + raw + ", without suffix: " + value + "]") : invariant(false) : void 0;
+  return result;
 };
+
 var getWindowScroll = function getWindowScroll() {
@@ -116,5 +110,3 @@ return {
       padding = original.padding;
-
   var shifted = shift(borderBox, change);
-
   return createBox({
@@ -127,8 +119,9 @@ borderBox: shifted,
 };
+var withScroll = function withScroll(original, scroll) {
+  if (scroll === void 0) {
+    scroll = getWindowScroll();
+  }
 
-var withScroll = function withScroll(original) {
-  var scroll = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getWindowScroll();
   return offset(original, scroll);
 };
-
 var calculateBox = function calculateBox(borderBox, styles) {
@@ -153,3 +146,2 @@ var margin = {
   };
-
   return createBox({
@@ -162,10 +154,8 @@ borderBox: borderBox,
 };
-
 var getBox = function getBox(el) {
   var borderBox = el.getBoundingClientRect();
   var styles = window.getComputedStyle(el);
-
   return calculateBox(borderBox, styles);
 };
 
-export { getRect, createBox, offset, withScroll, calculateBox, getBox };
+export { getRect, expand, shrink, createBox, offset, withScroll, calculateBox, getBox };

dist/css-box-model.js

@@ -7,2 +7,14 @@ (function (global, factory) {
 
+  var prefix = 'Invariant failed';
+
+  var index = function index(condition, message) {
+    if (condition) {
+      return;
+    }
+
+    {
+      throw new Error(prefix + ": " + (message || ''));
+    }
+  };
+
   var getRect = function getRect(_ref) {
@@ -13,6 +25,4 @@ var top = _ref.top,
         left = _ref.left;
-
     var width = right - left;
     var height = bottom - top;
-
     var rect = {
@@ -25,6 +35,4 @@ top: top,
       height: height,
-
       x: left,
       y: top,
-
       center: {
@@ -35,6 +43,4 @@ x: (right + left) / 2,
     };
-
     return rect;
   };
-
   var expand = function expand(target, expandBy) {
@@ -44,3 +50,2 @@ return {
       left: target.left - expandBy.left,
-
       bottom: target.bottom + expandBy.bottom,
@@ -50,3 +55,2 @@ right: target.right + expandBy.right
   };
-
   var shrink = function shrink(target, shrinkBy) {
@@ -56,3 +60,2 @@ return {
       left: target.left + shrinkBy.left,
-
       bottom: target.bottom - shrinkBy.bottom,
@@ -63,8 +66,8 @@ right: target.right - shrinkBy.right
 
-  var shift = function shift(spacing, point) {
+  var shift = function shift(target, shiftBy) {
     return {
-      top: spacing.top + point.y,
-      left: spacing.left + point.x,
-      bottom: spacing.bottom + point.y,
-      right: spacing.right + point.x
+      top: target.top + shiftBy.y,
+      left: target.left + shiftBy.x,
+      bottom: target.bottom + shiftBy.y,
+      right: target.right + shiftBy.x
     };
@@ -79,18 +82,13 @@ };
   };
-
   var createBox = function createBox(_ref2) {
     var borderBox = _ref2.borderBox,
         _ref2$margin = _ref2.margin,
-        margin = _ref2$margin === undefined ? noSpacing : _ref2$margin,
+        margin = _ref2$margin === void 0 ? noSpacing : _ref2$margin,
         _ref2$border = _ref2.border,
-        border = _ref2$border === undefined ? noSpacing : _ref2$border,
+        border = _ref2$border === void 0 ? noSpacing : _ref2$border,
         _ref2$padding = _ref2.padding,
-        padding = _ref2$padding === undefined ? noSpacing : _ref2$padding;
-
+        padding = _ref2$padding === void 0 ? noSpacing : _ref2$padding;
     var marginBox = getRect(expand(borderBox, margin));
-
     var paddingBox = getRect(shrink(borderBox, border));
-
     var contentBox = getRect(shrink(paddingBox, padding));
-
     return {
@@ -107,5 +105,11 @@ marginBox: marginBox,
 
-  var parse = function parse(value) {
-    return parseInt(value, 10);
+  var parse = function parse(raw) {
+    var value = raw.slice(0, -2);
+    var suffix = raw.slice(-2);
+    !(suffix === 'px') ? index(false, "Expected value to be a pixel value.\n      Expected form: 10px\n      Actual value: " + raw + "\n    ") : void 0;
+    var result = Number(value);
+    !!isNaN(result) ? index(false, "Could not parse value [raw: " + raw + ", without suffix: " + value + "]") : void 0;
+    return result;
   };
+
   var getWindowScroll = function getWindowScroll() {
@@ -123,5 +127,3 @@ return {
         padding = original.padding;
-
     var shifted = shift(borderBox, change);
-
     return createBox({
@@ -134,8 +136,9 @@ borderBox: shifted,
   };
+  var withScroll = function withScroll(original, scroll) {
+    if (scroll === void 0) {
+      scroll = getWindowScroll();
+    }
 
-  var withScroll = function withScroll(original) {
-    var scroll = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getWindowScroll();
     return offset(original, scroll);
   };
-
   var calculateBox = function calculateBox(borderBox, styles) {
@@ -160,3 +163,2 @@ var margin = {
     };
-
     return createBox({
@@ -169,7 +171,5 @@ borderBox: borderBox,
   };
-
   var getBox = function getBox(el) {
     var borderBox = el.getBoundingClientRect();
     var styles = window.getComputedStyle(el);
-
     return calculateBox(borderBox, styles);
@@ -179,2 +179,4 @@ };
   exports.getRect = getRect;
+  exports.expand = expand;
+  exports.shrink = shrink;
   exports.createBox = createBox;
@@ -181,0 +183,0 @@ exports.offset = offset;

dist/css-box-model.min.js

@@ -1,1 +0,1 @@
-!function(t,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports):"function"==typeof define&&define.amd?define(["exports"],o):o(t.cssBoxModel={})}(this,function(t){"use strict";var h=function(t){var o=t.top,e=t.right,r=t.bottom,i=t.left;return{top:o,right:e,bottom:r,left:i,width:e-i,height:r-o,x:i,y:o,center:{x:(e+i)/2,y:(r+o)/2}}},u=function(t,o){return{top:t.top+o.top,left:t.left+o.left,bottom:t.bottom-o.bottom,right:t.right-o.right}},l={top:0,right:0,bottom:0,left:0},p=function(t){var o,e,r=t.borderBox,i=t.margin,n=void 0===i?l:i,d=t.border,g=void 0===d?l:d,f=t.padding,p=void 0===f?l:f,a=h((e=n,{top:(o=r).top-e.top,left:o.left-e.left,bottom:o.bottom+e.bottom,right:o.right+e.right})),b=h(u(r,g)),m=h(u(b,p));return{marginBox:a,borderBox:h(r),paddingBox:b,contentBox:m,margin:n,border:g,padding:p}},n=function(t){return parseInt(t,10)},e=function(t,o){var e,r,i=t.borderBox,n=t.border,d=t.margin,g=t.padding,f=(r=o,{top:(e=i).top+r.y,left:e.left+r.x,bottom:e.bottom+r.y,right:e.right+r.x});return p({borderBox:f,border:n,margin:d,padding:g})},r=function(t,o){var e={top:n(o.marginTop),right:n(o.marginRight),bottom:n(o.marginBottom),left:n(o.marginLeft)},r={top:n(o.paddingTop),right:n(o.paddingRight),bottom:n(o.paddingBottom),left:n(o.paddingLeft)},i={top:n(o.borderTopWidth),right:n(o.borderRightWidth),bottom:n(o.borderBottomWidth),left:n(o.borderLeftWidth)};return p({borderBox:t,margin:e,padding:r,border:i})};t.getRect=h,t.createBox=p,t.offset=e,t.withScroll=function(t){var o=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{x:window.pageXOffset,y:window.pageYOffset};return e(t,o)},t.calculateBox=r,t.getBox=function(t){var o=t.getBoundingClientRect(),e=window.getComputedStyle(t);return r(o,e)},Object.defineProperty(t,"__esModule",{value:!0})});
+!function(t,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports):"function"==typeof define&&define.amd?define(["exports"],o):o(t.cssBoxModel={})}(this,function(t){"use strict";var e=function(t,o){if(!t)throw new Error("Invariant failed")},b=function(t){var o=t.top,r=t.right,e=t.bottom,i=t.left;return{top:o,right:r,bottom:e,left:i,width:r-i,height:e-o,x:i,y:o,center:{x:(r+i)/2,y:(e+o)/2}}},m=function(t,o){return{top:t.top-o.top,left:t.left-o.left,bottom:t.bottom+o.bottom,right:t.right+o.right}},u=function(t,o){return{top:t.top+o.top,left:t.left+o.left,bottom:t.bottom-o.bottom,right:t.right-o.right}},h={top:0,right:0,bottom:0,left:0},a=function(t){var o=t.borderBox,r=t.margin,e=void 0===r?h:r,i=t.border,n=void 0===i?h:i,d=t.padding,f=void 0===d?h:d,g=b(m(o,e)),a=b(u(o,n)),p=b(u(a,f));return{marginBox:g,borderBox:b(o),paddingBox:a,contentBox:p,margin:e,border:n,padding:f}},n=function(t){var o=t.slice(0,-2);"px"!==t.slice(-2)&&e(!1);var r=Number(o);return isNaN(r)&&e(!1),r},r=function(t,o){var r,e,i=t.borderBox,n=t.border,d=t.margin,f=t.padding,g=(e=o,{top:(r=i).top+e.y,left:r.left+e.x,bottom:r.bottom+e.y,right:r.right+e.x});return a({borderBox:g,border:n,margin:d,padding:f})},i=function(t,o){var r={top:n(o.marginTop),right:n(o.marginRight),bottom:n(o.marginBottom),left:n(o.marginLeft)},e={top:n(o.paddingTop),right:n(o.paddingRight),bottom:n(o.paddingBottom),left:n(o.paddingLeft)},i={top:n(o.borderTopWidth),right:n(o.borderRightWidth),bottom:n(o.borderBottomWidth),left:n(o.borderLeftWidth)};return a({borderBox:t,margin:r,padding:e,border:i})};t.getRect=b,t.expand=m,t.shrink=u,t.createBox=a,t.offset=r,t.withScroll=function(t,o){return void 0===o&&(o={x:window.pageXOffset,y:window.pageYOffset}),r(t,o)},t.calculateBox=i,t.getBox=function(t){var o=t.getBoundingClientRect(),r=window.getComputedStyle(t);return i(o,r)},Object.defineProperty(t,"__esModule",{value:!0})});

package.json

 {
   "name": "css-box-model",
-  "version": "1.0.0",
-  "description": "Returns the css box model for a HTMLElement",
+  "version": "1.1.0",
+  "description": "Get accurate and well named css box model information about an Element 📦",
   "author": "Alex Reardon <[e-mail]>",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/atlassian/react-beautiful-dnd.git"
+  },
+  "bugs": {
+    "url": "https://github.com/atlassian/react-beautiful-dnd/issues"
+  },
   "keywords": [
     "css",
     "box model",
+    "css box model",
+    "getBoundingClientRect",
+    "DOMRect",
+    "ClientRect",
+    "Rect",
+    "Spacing",
     "DOM"
@@ -31,18 +44,22 @@ ],
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.3",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-flow": "^6.23.0",
-    "flow-bin": "^0.75.0",
-    "jest": "^23.2.0",
-    "prettier": "1.13.7",
+    "@babel/core": "^7.1.2",
+    "@babel/preset-env": "^7.1.0",
+    "@babel/preset-flow": "^7.0.0",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-jest": "^23.6.0",
+    "babel-plugin-dev-expression": "^0.2.1",
+    "flow-bin": "^0.83.0",
+    "jest": "^23.6.0",
+    "prettier": "1.14.3",
     "rimraf": "^2.6.2",
-    "rollup": "^0.62.0",
-    "rollup-plugin-babel": "^3.0.5",
-    "rollup-plugin-commonjs": "^9.1.3",
-    "rollup-plugin-replace": "^2.0.0",
-    "rollup-plugin-uglify": "^4.0.0"
+    "rollup": "^0.66.6",
+    "rollup-plugin-babel": "^4.0.3",
+    "rollup-plugin-commonjs": "^9.2.0",
+    "rollup-plugin-node-resolve": "^3.4.0",
+    "rollup-plugin-replace": "^2.1.0",
+    "rollup-plugin-uglify": "^6.0.0"
+  },
+  "dependencies": {
+    "tiny-invariant": "^1.0.1"
   }
 }

README.md

@@ -1,7 +0,14 @@
-# CSS box model 📦
+# `css-box-model` 📦
 
-> Get detailed [CSS Box Model](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) information about a [`HTMLElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement)
+Get accurate and well named [CSS Box Model](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) information about a [`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element).
 
-This library is useful for when you need to obtain detailed positioning information about an element. Any time you are using [`Element.getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) you might want to consider using `css-box-model` instead to get more detailed information.
+[![Build Status](https://travis-ci.org/alexreardon/css-box-model.svg?branch=master)](https://travis-ci.org/alexreardon/css-box-model)
+[![npm](https://img.shields.io/npm/v/css-box-model.svg)](https://www.npmjs.com/package/css-box-model)
+[![dependencies](https://david-dm.org/alexreardon/css-box-model.svg)](https://david-dm.org/alexreardon/css-box-model)
+[![Downloads per month](https://img.shields.io/npm/dm/css-box-model.svg)](https://www.npmjs.com/package/css-box-model)
+[![min](https://img.shields.io/bundlephobia/min/css-box-model.svg)](https://www.npmjs.com/package/css-box-model)
+[![minzip](https://img.shields.io/bundlephobia/minzip/css-box-model.svg)](https://www.npmjs.com/package/css-box-model)
 
+Any time you are using [`Element.getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) you might want to consider using `css-box-model` instead to get more detailed box model information.
+
 ## Usage
@@ -22,3 +29,7 @@
 ```bash
+## yarn
 yarn add css-box-model
+
+# npm
+npm install css-box-model --save
 ```
@@ -28,2 +39,4 @@
 
+![the box model](https://user-images.githubusercontent.com/2182637/46847224-f8a23e80-ce2e-11e8-80d6-0ca62a1871a7.png)
+
 | Box type    | Composition                         |
@@ -36,23 +49,2 @@ | ----------- | ----------------------------------- |
 
-```
-------------------------------------
-|              MARGIN              |  (marginBox)
-|  ------------------------------  |
-|  |           BORDER           |  |  (borderBox)
-|  |  ------------------------  |  |
-|  |  |       PADDING        |  |  |  (paddingBox)
-|  |  |  ------------------  |  |  |
-|  |  |  |    CONTENT     |  |  |  |  (contentBox)
-|  |  |  |                |  |  |  |
-|  |  |  |                |  |  |  |
-|  |  |  |                |  |  |  |
-|  |  |  ------------------  |  |  |
-|  |  |                      |  |  |
-|  |  ------------------------  |  |
-|  |                            |  |
-|  ------------------------------  |
-|                                  |
-| ---------------------------------|
-```
-
 This our returned `BoxModel`:
@@ -140,3 +132,3 @@
 
-This will do the box model calculations without needing to read from the DOM. This is useful if you have already got a `ClientRect` and `CSSStyleDeclaration` as we do not need to recompute it.
+This will do the box model calculations without needing to read from the DOM. This is useful if you have already got a `ClientRect` / `DOMRect` and a `CSSStyleDeclaration` as then we can skip computing these values.
 
@@ -161,3 +153,3 @@ ```js
 
-Allows you to create a `BoxModel` by passing in a `Rect` like shape and optionally your own `margin`, `border` and or `padding`.
+Allows you to create a `BoxModel` by passing in a `Rect` like shape (`AnyRectType`) and optionally your own `margin`, `border` and or `padding`.
 
@@ -190,2 +182,6 @@ ```js
 
+## Utility API
+
+> Functions to help you interact with the objects we provide
+
 ### `getRect`
@@ -195,3 +191,3 @@
 
-Given any `Rect` like shape, return a `Rect`
+Given any `Rect` like shape, return a `Rect`. Accepts any object that has `top`, `right`, `bottom` and `right` (eg `ClientRect`, `DOMRect`);
 
@@ -224,1 +220,79 @@ ```js
 ```
+
+### `expand`
+
+Used to expand a `Spacing`
+
+```js
+(target: Spacing, expandBy: Spacing) => Spacing;
+```
+
+```js
+const original: Spacing = {
+  top: 10,
+  left: 11,
+  right: 21,
+  bottom: 22,
+};
+
+const expandBy: Spacing = {
+  top: 1,
+  left: 2,
+  right: 3,
+  bottom: 4,
+};
+
+const expanded: Spacing = expand(original, expandBy);
+
+console.log(expanded);
+
+/*
+{
+  // pulled back
+  top: 8,
+  left: 8
+  // pushed forward
+  bottom: 22,
+  right: 22,
+}
+*/
+```
+
+### `shrink`
+
+Used to shrink a `Spacing`
+
+```js
+(target: Spacing, shrinkBy: Spacing) => Spacing;
+```
+
+```js
+const original: Spacing = {
+  top: 10,
+  left: 10,
+  right: 20,
+  bottom: 20,
+};
+
+const shrinkBy: Spacing = {
+  top: 2,
+  left: 2,
+  right: 2,
+  bottom: 2,
+};
+
+const smaller: Spacing = shrink(original, shrinkBy);
+
+console.log(smaller);
+
+/*
+{
+  // pushed forward
+  top: 12,
+  left: 12
+  // pulled back
+  bottom: 18,
+  right: 18,
+}
+*/
+```

src/index.js

 // @flow
+import invariant from 'tiny-invariant';
 
@@ -91,3 +92,3 @@ // # The CSS box model
 
-const expand = (target: Spacing, expandBy: Spacing): Spacing => ({
+export const expand = (target: Spacing, expandBy: Spacing): Spacing => ({
   // pulling back to increase size
@@ -101,7 +102,7 @@ top: target.top - expandBy.top,
 
-const shrink = (target: Spacing, shrinkBy: Spacing): Spacing => ({
-  // pushing forward to descrease size
+export const shrink = (target: Spacing, shrinkBy: Spacing): Spacing => ({
+  // pushing forward to decrease size
   top: target.top + shrinkBy.top,
   left: target.left + shrinkBy.left,
-  // pulling backwards to descrease size
+  // pulling backwards to decrease size
   bottom: target.bottom - shrinkBy.bottom,
@@ -111,7 +112,7 @@ right: target.right - shrinkBy.right,
 
-const shift = (spacing: Spacing, point: Position): Spacing => ({
-  top: spacing.top + point.y,
-  left: spacing.left + point.x,
-  bottom: spacing.bottom + point.y,
-  right: spacing.right + point.x,
+const shift = (target: Spacing, shiftBy: Position): Spacing => ({
+  top: target.top + shiftBy.y,
+  left: target.left + shiftBy.x,
+  bottom: target.bottom + shiftBy.y,
+  right: target.right + shiftBy.x,
 });
@@ -157,5 +158,24 @@
 
-// Computed styles will always be in pixels
+// Computed spacing styles will always be in pixels
 // https://codepen.io/alexreardon/pen/OZyqXe
-const parse = (value: string): number => parseInt(value, 10);
+const parse = (raw: string): number => {
+  const value: string = raw.slice(0, -2);
+  const suffix: string = raw.slice(-2);
+  invariant(
+    suffix === 'px',
+    `Expected value to be a pixel value.
+      Expected form: 10px
+      Actual value: ${raw}
+    `,
+  );
+
+  const result: number = Number(value);
+  invariant(
+    !isNaN(result),
+    `Could not parse value [raw: ${raw}, without suffix: ${value}]`,
+  );
+
+  return result;
+};
+
 const getWindowScroll = (): Position => ({
@@ -162,0 +182,0 @@ x: window.pageXOffset,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

29351

increased by14.86%

Lines of code

671

increased by8.93%

Number of low maintenance alerts

0

decreased by-100%

Number of lines in readme file

291

increased by34.1%

Worsened metrics

Dependency count

1

increased byInfinity%

Dev dependency count

16

increased by6.67%

Number of low supply chain risk alerts

4

increased by300%

Dependency changes

• + Addedtiny-invariant@^1.0.1

• + Addedtiny-invariant@1.3.3(transitive)