@styled-system/css - npm Package Compare versions

Comparing version 2.0.2 to 2.0.3

dist.js

@@ -6,8 +6,4 @@ "use strict";
 });
-exports.default = exports.css = exports.responsive = void 0;
+exports["default"] = exports.css = exports.responsive = void 0;
 
-var _lodash = _interopRequireDefault(require("lodash.get"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -27,2 +23,17 @@
 
+// based on https://github.com/developit/dlv
+var get = function get(obj) {
+  var key = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  var def = arguments.length > 2 ? arguments[2] : undefined;
+  var p = arguments.length > 3 ? arguments[3] : undefined;
+  var undef = arguments.length > 4 ? arguments[4] : undefined;
+  key = key.split ? key.split('.') : [key];
+
+  for (p = 0; p < key.length; p++) {
+    obj = obj ? obj[key[p]] : undef;
+  }
+
+  return obj === undef ? def : obj;
+};
+
 var defaultBreakpoints = [40, 52, 64].map(function (n) {
@@ -42,6 +53,4 @@ return n + 'em';
   ml: 'marginLeft',
-  mx: ['marginLeft', 'marginRight'],
-  my: ['marginTop', 'marginBottom'],
-  marginX: ['marginLeft', 'marginRight'],
-  marginY: ['marginTop', 'marginBottom'],
+  mx: 'marginX',
+  my: 'marginY',
   p: 'padding',
@@ -52,4 +61,8 @@ pt: 'paddingTop',
   pl: 'paddingLeft',
-  px: ['paddingLeft', 'paddingRight'],
-  py: ['paddingTop', 'paddingBottom'],
+  px: 'paddingX',
+  py: 'paddingY'
+};
+var directions = {
+  marginX: ['marginLeft', 'marginRight'],
+  marginY: ['marginTop', 'marginBottom'],
   paddingX: ['paddingLeft', 'paddingRight'],
@@ -67,2 +80,4 @@ paddingY: ['paddingTop', 'paddingBottom']
   marginLeft: 'space',
+  marginX: 'space',
+  marginY: 'space',
   padding: 'space',
@@ -73,2 +88,4 @@ paddingTop: 'space',
   paddingLeft: 'space',
+  paddingX: 'space',
+  paddingY: 'space',
   fontFamily: 'fonts',
@@ -101,6 +118,27 @@ fontSize: 'fontSizes',
 
+var getMargin = function getMargin(scale, value) {
+  if (typeof value !== 'number' || value >= 0) {
+    return get(scale, value, value);
+  }
+
+  var absolute = Math.abs(value);
+  var n = get(scale, absolute, absolute);
+  if (typeof n === 'string') return '-' + n;
+  return n * -1;
+};
+
+var transforms = {
+  margin: getMargin,
+  marginTop: getMargin,
+  marginRight: getMargin,
+  marginBottom: getMargin,
+  marginLeft: getMargin,
+  marginX: getMargin,
+  marginY: getMargin
+};
+
 var responsive = function responsive(styles) {
   return function (theme) {
     var next = {};
-    var breakpoints = (0, _lodash.default)(theme, 'breakpoints', ['40em', '52em', '64em']);
+    var breakpoints = get(theme, 'breakpoints', ['40em', '52em', '64em']);
     var mediaQueries = [null].concat(_toConsumableArray(breakpoints.map(function (n) {
@@ -148,5 +186,5 @@ return "@media screen and (min-width: ".concat(n, ")");
     for (var key in styles) {
-      var prop = aliases[key] || key;
-      var scaleName = scales[prop] || scales[prop[0]];
-      var scale = (0, _lodash.default)(theme, scaleName, (0, _lodash.default)(theme, prop, {}));
+      var prop = get(aliases, key, key);
+      var scaleName = get(scales, prop);
+      var scale = get(theme, scaleName, get(theme, prop, {}));
       var x = styles[key];
@@ -156,3 +194,3 @@ var val = typeof x === 'function' ? x(theme) : x;
       if (key === 'variant') {
-        var variant = css((0, _lodash.default)(theme, val))(theme);
+        var variant = css(get(theme, val))(theme);
         result = _objectSpread({}, result, variant);
@@ -167,7 +205,10 @@ continue;
 
-      var value = (0, _lodash.default)(scale, val, val);
+      var transform = get(transforms, prop, get);
+      var value = transform(scale, val, val);
 
-      if (Array.isArray(prop)) {
-        for (var i = 0; i < prop.length; i++) {
-          result[prop[i]] = value;
+      if (directions[prop]) {
+        var dirs = directions[prop];
+
+        for (var i = 0; i < dirs.length; i++) {
+          result[dirs[i]] = value;
         }
@@ -185,2 +226,2 @@ } else {
 var _default = css;
-exports.default = _default;
+exports["default"] = _default;

index.js

@@ -1,2 +0,9 @@
-import get from 'lodash.get'
+// based on https://github.com/developit/dlv
+const get = (obj, key = '', def, p, undef) => {
+  key = key.split ? key.split('.') : [key]
+  for (p = 0; p < key.length; p++) {
+    obj = obj ? obj[key[p]] : undef
+  }
+  return obj === undef ? def : obj
+}
 
@@ -21,6 +28,4 @@ const defaultBreakpoints = [40, 52, 64].map(n => n + 'em')
   ml: 'marginLeft',
-  mx: [ 'marginLeft', 'marginRight' ],
-  my: [ 'marginTop', 'marginBottom' ],
-  marginX: [ 'marginLeft', 'marginRight' ],
-  marginY: [ 'marginTop', 'marginBottom' ],
+  mx: 'marginX',
+  my: 'marginY',
   p: 'padding',
@@ -31,4 +36,9 @@ pt: 'paddingTop',
   pl: 'paddingLeft',
-  px: [ 'paddingLeft', 'paddingRight' ],
-  py: [ 'paddingTop', 'paddingBottom' ],
+  px: 'paddingX',
+  py: 'paddingY',
+}
+
+const directions = {
+  marginX: [ 'marginLeft', 'marginRight' ],
+  marginY: [ 'marginTop', 'marginBottom' ],
   paddingX: [ 'paddingLeft', 'paddingRight' ],
@@ -47,2 +57,4 @@ paddingY: [ 'paddingTop', 'paddingBottom' ],
   marginLeft: 'space',
+  marginX: 'space',
+  marginY: 'space',
   padding: 'space',
@@ -53,2 +65,4 @@ paddingTop: 'space',
   paddingLeft: 'space',
+  paddingX: 'space',
+  paddingY: 'space',
   fontFamily: 'fonts',
@@ -81,2 +95,22 @@ fontSize: 'fontSizes',
 
+const getMargin = (scale, value) => {
+  if (typeof value !== 'number' || value >= 0) {
+    return get(scale, value, value)
+  }
+  const absolute = Math.abs(value)
+  const n = get(scale, absolute, absolute)
+  if (typeof n === 'string') return '-' + n
+  return n * -1
+}
+
+const transforms = {
+  margin: getMargin,
+  marginTop: getMargin,
+  marginRight: getMargin,
+  marginBottom: getMargin,
+  marginLeft: getMargin,
+  marginX: getMargin,
+  marginY: getMargin,
+}
+
 export const responsive = styles => theme => {
@@ -114,4 +148,4 @@ const next = {}
   for (const key in styles) {
-    const prop = aliases[key] || key
-    const scaleName = scales[prop] || scales[prop[0]]
+    const prop = get(aliases, key, key)
+    const scaleName = get(scales, prop)
     const scale = get(theme, scaleName, get(theme, prop, {}))
@@ -129,6 +163,8 @@ const x = styles[key]
     }
-    const value = get(scale, val, val)
-    if (Array.isArray(prop)) {
-      for (let i = 0; i < prop.length; i++) {
-        result[prop[i]] = value
+    const transform = get(transforms, prop, get)
+    const value = transform(scale, val, val)
+    if (directions[prop]) {
+      const dirs = directions[prop]
+      for (let i = 0; i < dirs.length; i++) {
+        result[dirs[i]] = value
       }
@@ -135,0 +171,0 @@ } else {

package.json

 {
   "name": "@styled-system/css",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "",
@@ -13,12 +13,10 @@ "main": "dist.js",
   "license": "MIT",
-  "dependencies": {
-    "lodash.get": "^4.4.2"
-  },
+  "dependencies": {},
   "devDependencies": {
-    "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.4.0",
-    "@babel/preset-env": "^7.4.2",
-    "@babel/register": "^7.4.0",
+    "@babel/cli": "^7.4.4",
+    "@babel/core": "^7.4.5",
+    "@babel/preset-env": "^7.4.5",
+    "@babel/register": "^7.4.4",
     "ava": "^1.4.1",
-    "nyc": "^13.3.0"
+    "nyc": "^14.1.1"
   },
@@ -25,0 +23,0 @@ "ava": {

No alert changes

Improved metrics

Total package byte prevSize

13713

13.07%

Dependency count

0

-100%

Lines of code

342

25.27%

Dependency changes

• - Removed

  lodash.get@^4.4.2

• - Removed

  lodash.get@4.4.2
  (transitive)