styled-system - npm Package Compare versions

Comparing version 5.0.0-alpha.0 to 5.0.0

dist/index.js

 "use strict";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "get", {
-  enumerable: true,
-  get: function get() {
-    return _core.get;
-  }
-});
-Object.defineProperty(exports, "createParser", {
-  enumerable: true,
-  get: function get() {
-    return _core.createParser;
-  }
-});
-Object.defineProperty(exports, "createStyleFunction", {
-  enumerable: true,
-  get: function get() {
-    return _core.createStyleFunction;
-  }
-});
-Object.defineProperty(exports, "compose", {
-  enumerable: true,
-  get: function get() {
-    return _core.compose;
-  }
-});
-Object.defineProperty(exports, "variant", {
-  enumerable: true,
-  get: function get() {
-    return _variant.variant;
-  }
-});
-Object.defineProperty(exports, "margin", {
-  enumerable: true,
-  get: function get() {
-    return _space.margin;
-  }
-});
-Object.defineProperty(exports, "marginTop", {
-  enumerable: true,
-  get: function get() {
-    return _space.marginTop;
-  }
-});
-Object.defineProperty(exports, "marginRight", {
-  enumerable: true,
-  get: function get() {
-    return _space.marginRight;
-  }
-});
-Object.defineProperty(exports, "marginBottom", {
-  enumerable: true,
-  get: function get() {
-    return _space.marginBottom;
-  }
-});
-Object.defineProperty(exports, "marginLeft", {
-  enumerable: true,
-  get: function get() {
-    return _space.marginLeft;
-  }
-});
-Object.defineProperty(exports, "marginX", {
-  enumerable: true,
-  get: function get() {
-    return _space.marginX;
-  }
-});
-Object.defineProperty(exports, "padding", {
-  enumerable: true,
-  get: function get() {
-    return _space.padding;
-  }
-});
-Object.defineProperty(exports, "paddingTop", {
-  enumerable: true,
-  get: function get() {
-    return _space.paddingTop;
-  }
-});
-Object.defineProperty(exports, "paddingRight", {
-  enumerable: true,
-  get: function get() {
-    return _space.paddingRight;
-  }
-});
-Object.defineProperty(exports, "paddingBottom", {
-  enumerable: true,
-  get: function get() {
-    return _space.paddingBottom;
-  }
-});
-Object.defineProperty(exports, "paddingLeft", {
-  enumerable: true,
-  get: function get() {
-    return _space.paddingLeft;
-  }
-});
-Object.defineProperty(exports, "paddingX", {
-  enumerable: true,
-  get: function get() {
-    return _space.paddingX;
-  }
-});
-Object.defineProperty(exports, "paddingY", {
-  enumerable: true,
-  get: function get() {
-    return _space.paddingY;
-  }
-});
-Object.defineProperty(exports, "space", {
-  enumerable: true,
-  get: function get() {
-    return _space.space;
-  }
-});
-Object.defineProperty(exports, "color", {
-  enumerable: true,
-  get: function get() {
-    return _color.color;
-  }
-});
-Object.defineProperty(exports, "layout", {
-  enumerable: true,
-  get: function get() {
-    return _layout.layout;
-  }
-});
-Object.defineProperty(exports, "width", {
-  enumerable: true,
-  get: function get() {
-    return _layout["default"];
-  }
-});
-Object.defineProperty(exports, "height", {
-  enumerable: true,
-  get: function get() {
-    return _layout["default"];
-  }
-});
-Object.defineProperty(exports, "minWidth", {
-  enumerable: true,
-  get: function get() {
-    return _layout["default"];
-  }
-});
-Object.defineProperty(exports, "minHeight", {
-  enumerable: true,
-  get: function get() {
-    return _layout["default"];
-  }
-});
-Object.defineProperty(exports, "maxWidth", {
-  enumerable: true,
-  get: function get() {
-    return _layout["default"];
-  }
-});
-Object.defineProperty(exports, "maxHeight", {
-  enumerable: true,
-  get: function get() {
-    return _layout["default"];
-  }
-});
-Object.defineProperty(exports, "size", {
-  enumerable: true,
-  get: function get() {
-    return _layout["default"];
-  }
-});
-Object.defineProperty(exports, "verticalAlign", {
-  enumerable: true,
-  get: function get() {
-    return _layout["default"];
-  }
-});
-Object.defineProperty(exports, "display", {
-  enumerable: true,
-  get: function get() {
-    return _layout["default"];
-  }
-});
-Object.defineProperty(exports, "typography", {
-  enumerable: true,
-  get: function get() {
-    return _typography.typography;
-  }
-});
-Object.defineProperty(exports, "fontSize", {
-  enumerable: true,
-  get: function get() {
-    return _typography["default"];
-  }
-});
-Object.defineProperty(exports, "fontFamily", {
-  enumerable: true,
-  get: function get() {
-    return _typography["default"];
-  }
-});
-Object.defineProperty(exports, "fontWeight", {
-  enumerable: true,
-  get: function get() {
-    return _typography["default"];
-  }
-});
-Object.defineProperty(exports, "lineHeight", {
-  enumerable: true,
-  get: function get() {
-    return _typography["default"];
-  }
-});
-Object.defineProperty(exports, "textAlign", {
-  enumerable: true,
-  get: function get() {
-    return _typography["default"];
-  }
-});
-Object.defineProperty(exports, "fontStyle", {
-  enumerable: true,
-  get: function get() {
-    return _typography["default"];
-  }
-});
-Object.defineProperty(exports, "letterSpacing", {
-  enumerable: true,
-  get: function get() {
-    return _typography["default"];
-  }
-});
-Object.defineProperty(exports, "flexbox", {
-  enumerable: true,
-  get: function get() {
-    return _flexbox.flexbox;
-  }
-});
-Object.defineProperty(exports, "alignItems", {
-  enumerable: true,
-  get: function get() {
-    return _flexbox["default"];
-  }
-});
-Object.defineProperty(exports, "alignContent", {
-  enumerable: true,
-  get: function get() {
-    return _flexbox["default"];
-  }
-});
-Object.defineProperty(exports, "justifyItems", {
-  enumerable: true,
-  get: function get() {
-    return _flexbox["default"];
-  }
-});
-Object.defineProperty(exports, "justifyContent", {
-  enumerable: true,
-  get: function get() {
-    return _flexbox["default"];
-  }
-});
-Object.defineProperty(exports, "flexWrap", {
-  enumerable: true,
-  get: function get() {
-    return _flexbox["default"];
-  }
-});
-Object.defineProperty(exports, "flexDirection", {
-  enumerable: true,
-  get: function get() {
-    return _flexbox["default"];
-  }
-});
-Object.defineProperty(exports, "flex", {
-  enumerable: true,
-  get: function get() {
-    return _flexbox["default"];
-  }
-});
-Object.defineProperty(exports, "flexGrow", {
-  enumerable: true,
-  get: function get() {
-    return _flexbox["default"];
-  }
-});
-Object.defineProperty(exports, "flexShrink", {
-  enumerable: true,
-  get: function get() {
-    return _flexbox["default"];
-  }
-});
-Object.defineProperty(exports, "flexBasis", {
-  enumerable: true,
-  get: function get() {
-    return _flexbox["default"];
-  }
-});
-Object.defineProperty(exports, "justifySelf", {
-  enumerable: true,
-  get: function get() {
-    return _flexbox["default"];
-  }
-});
-Object.defineProperty(exports, "alignSelf", {
-  enumerable: true,
-  get: function get() {
-    return _flexbox["default"];
-  }
-});
-Object.defineProperty(exports, "order", {
-  enumerable: true,
-  get: function get() {
-    return _flexbox["default"];
-  }
-});
-Object.defineProperty(exports, "border", {
-  enumerable: true,
-  get: function get() {
-    return _border.border;
-  }
-});
-Object.defineProperty(exports, "borderWidth", {
-  enumerable: true,
-  get: function get() {
-    return _border["default"];
-  }
-});
-Object.defineProperty(exports, "borderStyle", {
-  enumerable: true,
-  get: function get() {
-    return _border["default"];
-  }
-});
-Object.defineProperty(exports, "borderColor", {
-  enumerable: true,
-  get: function get() {
-    return _border["default"];
-  }
-});
-Object.defineProperty(exports, "borderTop", {
-  enumerable: true,
-  get: function get() {
-    return _border["default"];
-  }
-});
-Object.defineProperty(exports, "borderRight", {
-  enumerable: true,
-  get: function get() {
-    return _border["default"];
-  }
-});
-Object.defineProperty(exports, "borderBottom", {
-  enumerable: true,
-  get: function get() {
-    return _border["default"];
-  }
-});
-Object.defineProperty(exports, "borderLeft", {
-  enumerable: true,
-  get: function get() {
-    return _border["default"];
-  }
-});
-Object.defineProperty(exports, "borderRadius", {
-  enumerable: true,
-  get: function get() {
-    return _border["default"];
-  }
-});
-Object.defineProperty(exports, "borders", {
-  enumerable: true,
-  get: function get() {
-    return _border["default"];
-  }
-});
-Object.defineProperty(exports, "background", {
-  enumerable: true,
-  get: function get() {
-    return _background.background;
-  }
-});
-Object.defineProperty(exports, "backgroundImage", {
-  enumerable: true,
-  get: function get() {
-    return _background["default"];
-  }
-});
-Object.defineProperty(exports, "backgroundSize", {
-  enumerable: true,
-  get: function get() {
-    return _background["default"];
-  }
-});
-Object.defineProperty(exports, "backgroundPosition", {
-  enumerable: true,
-  get: function get() {
-    return _background["default"];
-  }
-});
-Object.defineProperty(exports, "backgroundRepeat", {
-  enumerable: true,
-  get: function get() {
-    return _background["default"];
-  }
-});
-Object.defineProperty(exports, "gridGap", {
-  enumerable: true,
-  get: function get() {
-    return _grid["default"];
-  }
-});
-Object.defineProperty(exports, "gridColumnGap", {
-  enumerable: true,
-  get: function get() {
-    return _grid["default"];
-  }
-});
-Object.defineProperty(exports, "gridRowGap", {
-  enumerable: true,
-  get: function get() {
-    return _grid["default"];
-  }
-});
-Object.defineProperty(exports, "gridColumn", {
-  enumerable: true,
-  get: function get() {
-    return _grid["default"];
-  }
-});
-Object.defineProperty(exports, "gridRow", {
-  enumerable: true,
-  get: function get() {
-    return _grid["default"];
-  }
-});
-Object.defineProperty(exports, "gridAutoFlow", {
-  enumerable: true,
-  get: function get() {
-    return _grid["default"];
-  }
-});
-Object.defineProperty(exports, "gridAutoColumns", {
-  enumerable: true,
-  get: function get() {
-    return _grid["default"];
-  }
-});
-Object.defineProperty(exports, "gridAutoRows", {
-  enumerable: true,
-  get: function get() {
-    return _grid["default"];
-  }
-});
-Object.defineProperty(exports, "gridTemplateColumns", {
-  enumerable: true,
-  get: function get() {
-    return _grid["default"];
-  }
-});
-Object.defineProperty(exports, "gridTemplateRows", {
-  enumerable: true,
-  get: function get() {
-    return _grid["default"];
-  }
-});
-Object.defineProperty(exports, "gridTemplateAreas", {
-  enumerable: true,
-  get: function get() {
-    return _grid["default"];
-  }
-});
-Object.defineProperty(exports, "gridArea", {
-  enumerable: true,
-  get: function get() {
-    return _grid["default"];
-  }
-});
-Object.defineProperty(exports, "position", {
-  enumerable: true,
-  get: function get() {
-    return _position["default"];
-  }
-});
-Object.defineProperty(exports, "zIndex", {
-  enumerable: true,
-  get: function get() {
-    return _position["default"];
-  }
-});
-Object.defineProperty(exports, "top", {
-  enumerable: true,
-  get: function get() {
-    return _position["default"];
-  }
-});
-Object.defineProperty(exports, "right", {
-  enumerable: true,
-  get: function get() {
-    return _position["default"];
-  }
-});
-Object.defineProperty(exports, "bottom", {
-  enumerable: true,
-  get: function get() {
-    return _position["default"];
-  }
-});
-Object.defineProperty(exports, "left", {
-  enumerable: true,
-  get: function get() {
-    return _position["default"];
-  }
-});
-exports.colorStyle = exports.textStyle = exports.buttonStyle = exports.overflow = exports.opacity = exports.boxShadow = exports.style = void 0;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 
+exports.__esModule = true;
+exports.style = exports.left = exports.bottom = exports.right = exports.top = exports.zIndex = exports.backgroundRepeat = exports.backgroundPosition = exports.backgroundSize = exports.backgroundImage = exports.borders = exports.borderRadius = exports.borderLeft = exports.borderBottom = exports.borderRight = exports.borderTop = exports.borderColor = exports.borderStyle = exports.borderWidth = exports.gridArea = exports.gridTemplateAreas = exports.gridTemplateRows = exports.gridTemplateColumns = exports.gridAutoRows = exports.gridAutoColumns = exports.gridAutoFlow = exports.gridRow = exports.gridColumn = exports.gridRowGap = exports.gridColumnGap = exports.gridGap = exports.order = exports.alignSelf = exports.justifySelf = exports.flexBasis = exports.flexShrink = exports.flexGrow = exports.flex = exports.flexDirection = exports.flexWrap = exports.justifyContent = exports.justifyItems = exports.alignContent = exports.alignItems = exports.letterSpacing = exports.fontStyle = exports.textAlign = exports.lineHeight = exports.fontWeight = exports.fontFamily = exports.fontSize = exports.opacity = exports.overflow = exports.display = exports.verticalAlign = exports.size = exports.maxHeight = exports.maxWidth = exports.minHeight = exports.minWidth = exports.height = exports.width = exports.colorStyle = exports.textStyle = exports.buttonStyle = exports.variant = exports.shadow = exports.grid = exports.position = exports.background = exports.border = exports.flexbox = exports.typography = exports.layout = exports.color = exports.space = exports.padding = exports.margin = exports.compose = exports.get = void 0;
+
 var _core = require("@styled-system/core");
 
-var _variant = require("@styled-system/variant");
+exports.createStyleFunction = _core.createStyleFunction;
+exports.createParser = _core.createParser;
+exports.get = _core.get;
+exports.compose = _core.compose;
 
 var _space = require("@styled-system/space");
 
-var _color = require("@styled-system/color");
+exports.margin = _space.margin;
+exports.padding = _space.padding;
+exports.space = _space.space;
 
+var _color = _interopRequireWildcard(require("@styled-system/color"));
+
+exports.color = _color.color;
+exports.opacity = _color["default"];
+
 var _layout = _interopRequireWildcard(require("@styled-system/layout"));
 
+exports.layout = _layout.layout;
+exports.width = _layout["default"];
+exports.height = _layout["default"];
+exports.minWidth = _layout["default"];
+exports.minHeight = _layout["default"];
+exports.maxWidth = _layout["default"];
+exports.maxHeight = _layout["default"];
+exports.size = _layout["default"];
+exports.verticalAlign = _layout["default"];
+exports.display = _layout["default"];
+exports.overflow = _layout["default"];
+
 var _typography = _interopRequireWildcard(require("@styled-system/typography"));
 
+exports.typography = _typography.typography;
+exports.fontSize = _typography["default"];
+exports.fontFamily = _typography["default"];
+exports.fontWeight = _typography["default"];
+exports.lineHeight = _typography["default"];
+exports.textAlign = _typography["default"];
+exports.fontStyle = _typography["default"];
+exports.letterSpacing = _typography["default"];
+
 var _flexbox = _interopRequireWildcard(require("@styled-system/flexbox"));
 
+exports.flexbox = _flexbox.flexbox;
+exports.alignItems = _flexbox["default"];
+exports.alignContent = _flexbox["default"];
+exports.justifyItems = _flexbox["default"];
+exports.justifyContent = _flexbox["default"];
+exports.flexWrap = _flexbox["default"];
+exports.flexDirection = _flexbox["default"];
+exports.flex = _flexbox["default"];
+exports.flexGrow = _flexbox["default"];
+exports.flexShrink = _flexbox["default"];
+exports.flexBasis = _flexbox["default"];
+exports.justifySelf = _flexbox["default"];
+exports.alignSelf = _flexbox["default"];
+exports.order = _flexbox["default"];
+
 var _border = _interopRequireWildcard(require("@styled-system/border"));
 
+exports.border = _border.border;
+exports.borderWidth = _border["default"];
+exports.borderStyle = _border["default"];
+exports.borderColor = _border["default"];
+exports.borderTop = _border["default"];
+exports.borderRight = _border["default"];
+exports.borderBottom = _border["default"];
+exports.borderLeft = _border["default"];
+exports.borderRadius = _border["default"];
+exports.borders = _border["default"];
+
 var _background = _interopRequireWildcard(require("@styled-system/background"));
 
-var _grid = _interopRequireDefault(require("@styled-system/grid"));
+exports.background = _background.background;
+exports.backgroundImage = _background["default"];
+exports.backgroundSize = _background["default"];
+exports.backgroundPosition = _background["default"];
+exports.backgroundRepeat = _background["default"];
 
-var _position = _interopRequireDefault(require("@styled-system/position"));
+var _position = _interopRequireWildcard(require("@styled-system/position"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+exports.position = _position.position;
+exports.zIndex = _position["default"];
+exports.top = _position["default"];
+exports.right = _position["default"];
+exports.bottom = _position["default"];
+exports.left = _position["default"];
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
+var _grid = _interopRequireWildcard(require("@styled-system/grid"));
 
-// new packages
+exports.grid = _grid.grid;
+exports.gridGap = _grid["default"];
+exports.gridColumnGap = _grid["default"];
+exports.gridRowGap = _grid["default"];
+exports.gridColumn = _grid["default"];
+exports.gridRow = _grid["default"];
+exports.gridAutoFlow = _grid["default"];
+exports.gridAutoColumns = _grid["default"];
+exports.gridAutoRows = _grid["default"];
+exports.gridTemplateColumns = _grid["default"];
+exports.gridTemplateRows = _grid["default"];
+exports.gridTemplateAreas = _grid["default"];
+exports.gridArea = _grid["default"];
+
+var _shadow = require("@styled-system/shadow");
+
+exports.shadow = _shadow.shadow;
+
+var _variant = require("@styled-system/variant");
+
+exports.variant = _variant.variant;
+exports.buttonStyle = _variant.buttonStyle;
+exports.textStyle = _variant.textStyle;
+exports.colorStyle = _variant.colorStyle;
+
 // v4 api shims
@@ -566,35 +146,4 @@ // v4 style API shim
   return parse;
-}; // todo move to separate package
+};
 
-
-exports.style = style;
-var boxShadow = (0, _core.system)({
-  boxShadow: {
-    property: 'boxShadow',
-    scale: 'shadows'
-  }
-});
-exports.boxShadow = boxShadow;
-var opacity = (0, _core.system)({
-  opacity: true
-});
-exports.opacity = opacity;
-var overflow = (0, _core.system)({
-  overflow: true
-}); // variants
-
-exports.overflow = overflow;
-var buttonStyle = (0, _variant.variant)({
-  key: 'buttons'
-});
-exports.buttonStyle = buttonStyle;
-var textStyle = (0, _variant.variant)({
-  key: 'textStyles',
-  prop: 'textStyle'
-});
-exports.textStyle = textStyle;
-var colorStyle = (0, _variant.variant)({
-  key: 'colorStyles',
-  prop: 'colors'
-});
-exports.colorStyle = colorStyle;
+exports.style = style;

package.json

 {
   "name": "styled-system",
-  "version": "5.0.0-alpha.0",
+  "version": "5.0.0",
   "description": "Responsive, theme-based style props for building design systems with React",
   "main": "dist/index.js",
+  "module": "dist/index.esm.js",
   "keywords": [
@@ -14,21 +15,18 @@ "react",
   "license": "MIT",
-  "devDependencies": {
-    "@babel/cli": "^7.4.4"
-  },
   "dependencies": {
-    "@styled-system/background": "^5.0.0-alpha.0",
-    "@styled-system/border": "^5.0.0-alpha.0",
-    "@styled-system/color": "^5.0.0-alpha.0",
-    "@styled-system/core": "^5.0.0-alpha.0",
-    "@styled-system/flexbox": "^5.0.0-alpha.0",
-    "@styled-system/layout": "^5.0.0-alpha.0",
-    "@styled-system/space": "^5.0.0-alpha.0",
-    "@styled-system/typography": "^5.0.0-alpha.0",
-    "@styled-system/variant": "^5.0.0-alpha.0",
+    "@styled-system/background": "^5.0.0",
+    "@styled-system/border": "^5.0.0",
+    "@styled-system/color": "^5.0.0",
+    "@styled-system/core": "^5.0.0",
+    "@styled-system/flexbox": "^5.0.0",
+    "@styled-system/grid": "^5.0.0",
+    "@styled-system/layout": "^5.0.0",
+    "@styled-system/position": "^5.0.0",
+    "@styled-system/shadow": "^5.0.0",
+    "@styled-system/space": "^5.0.0",
+    "@styled-system/typography": "^5.0.0",
+    "@styled-system/variant": "^5.0.0",
     "object-assign": "^4.1.1"
   },
-  "scripts": {
-    "prepare": "babel src -d dist"
-  },
-  "gitHead": "5357d5b7338f1236054dcd026bb27d8ca6a8e146"
+  "gitHead": "e67157cfd0222c355826adf5ad271534653c00df"
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

0

decreased by-100%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

18973

decreased by-23.16%

Dependency count

13

increased by30%

Lines of code

167

decreased by-75.26%

Dependency changes

• + Added@styled-system/grid@^5.0.0

• + Added@styled-system/position@^5.0.0

• + Added@styled-system/shadow@^5.0.0

• + Added@styled-system/grid@5.1.2(transitive)

• + Added@styled-system/position@5.1.2(transitive)

• + Added@styled-system/shadow@5.1.2(transitive)

• Updated@styled-system/background@^5.0.0

• Updated@styled-system/border@^5.0.0

• Updated@styled-system/color@^5.0.0

• Updated@styled-system/core@^5.0.0

• Updated@styled-system/flexbox@^5.0.0

• Updated@styled-system/layout@^5.0.0

• Updated@styled-system/space@^5.0.0

• Updated@styled-system/typography@^5.0.0

• Updated@styled-system/variant@^5.0.0