styled-system - npm Package Compare versions

Comparing version 5.0.0-2 to 5.0.0-3

dist/index.js

@@ -1,2 +0,183 @@
-var e=require("@styled-system/space"),r=require("@styled-system/core"),t=require("@styled-system/variant"),o={color:{property:"color",scale:"colors"},backgroundColor:{property:"backgroundColor",scale:"colors"}};o.bg=o.backgroundColor;var s=r.system(o),p={width:{property:"width",scale:"sizes",transform:function(e,t){return r.get(t,e,!function(e){return"number"==typeof e&&!isNaN(e)}(e)||e>1?e:100*e+"%")}},height:{property:"height",scale:"sizes"},minWidth:{property:"minWidth",scale:"sizes"},minHeight:{property:"minHeight",scale:"sizes"},maxWidth:{property:"maxWidth",scale:"sizes"},maxHeight:{property:"maxHeight",scale:"sizes"},display:!0,verticalAlign:!0,size:{properties:["width","height"],scale:"sizes"}},i=r.system(p),a=r.system({fontSize:{property:"fontSize",scale:"fontSizes",defaultScale:[12,14,16,20,24,32,48,64,72]},fontWeight:{property:"fontWeight",scale:"fontWeights"},lineHeight:{property:"lineHeight",scale:"lineHeights"},letterSpacing:{property:"letterSpacing",scale:"letterSpacings"},fontStyle:!0,textAlign:!0}),d=r.system({alignItems:!0,alignContent:!0,justifyItems:!0,justifyContent:!0,flexWrap:!0,flexDirection:!0,flex:!0,flexGrow:!0,flexShrink:!0,flexBasis:!0,justifySelf:!0,alignSelf:!0,order:!0}),l=r.system({border:{property:"border",scale:"borders"},borderWidth:{property:"borderWidth",scale:"borderWidths"},borderStyle:{property:"borderStyle",scale:"borderStyles"},borderColor:{property:"borderColor",scale:"colors"},borderRadius:{property:"borderRadius",scale:"radii"},borderTop:{property:"borderTop",scale:"borders"},borderRight:{property:"borderRight",scale:"borders"},borderBottom:{property:"borderBottom",scale:"borders"},borderLeft:{property:"borderLeft",scale:"borders"},borderX:{properties:["borderLeft","borderRight"],scale:"borders"},borderY:{properties:["borderTop","borderBottom"],scale:"borders"}}),n={background:!0,backgroundImage:!0,backgroundSize:!0,backgroundPosition:!0,backgroundRepeat:!0};n.bgImage=n.backgroundImage,n.bgSize=n.backgroundSize,n.bgPosition=n.backgroundPosition,n.bgRepeat=n.backgroundRepeat;var g=r.system(n),x={space:[0,4,8,16,32,64,128,256,512]},c=r.system({gridGap:{property:"gridGap",scale:"space",defaultScale:x.space},gridColumnGap:{property:"gridColumnGap",scale:"space",defaultScale:x.space},gridRowGap:{property:"gridRowGap",scale:"space",defaultScale:x.space},gridColumn:!0,gridRow:!0,gridAutoFlow:!0,gridAutoColumns:!0,gridAutoRows:!0,gridTemplateColumns:!0,gridTemplateRows:!0,gridTemplateAreas:!0,gridArea:!0}),y=r.system({position:!0,zIndex:{property:"zIndex",scale:"zIndices"},top:!0,right:!0,bottom:!0,left:!0}),m=r.system({boxShadow:{property:"boxShadow",scale:"shadows"}}),b=r.system({opacity:!0}),u=r.system({overflow:!0}),f=t.variant({key:"buttons"}),h=t.variant({key:"textStyles",prop:"textStyle"}),S=t.variant({key:"colorStyles",prop:"colors"});exports.margin=e.margin,exports.marginTop=e.marginTop,exports.marginRight=e.marginRight,exports.marginBottom=e.marginBottom,exports.marginLeft=e.marginLeft,exports.marginX=e.marginX,exports.padding=e.padding,exports.paddingTop=e.paddingTop,exports.paddingRight=e.paddingRight,exports.paddingBottom=e.paddingBottom,exports.paddingLeft=e.paddingLeft,exports.paddingX=e.paddingX,exports.paddingY=e.paddingY,exports.space=e.space,exports.get=r.get,exports.createParser=r.createParser,exports.createStyleFunction=r.createStyleFunction,exports.compose=r.compose,exports.variant=t.variant,exports.style=function(e){var t=e.prop,o=e.alias,s={};return s[t]=r.createStyleFunction({properties:e.properties,property:e.cssProperty||t,scale:e.key,defaultScale:e.scale,transform:e.transformValue}),o&&(s[o]=s[t]),r.createParser(s)},exports.color=s,exports.layout=i,exports.typography=a,exports.flexbox=d,exports.border=l,exports.background=g,exports.width=i,exports.height=i,exports.minWidth=i,exports.minHeight=i,exports.maxWidth=i,exports.maxHeight=i,exports.size=i,exports.verticalAlign=i,exports.display=i,exports.fontSize=a,exports.fontFamily=a,exports.fontWeight=a,exports.lineHeight=a,exports.textAlign=a,exports.fontStyle=a,exports.letterSpacing=a,exports.alignItems=d,exports.alignContent=d,exports.justifyItems=d,exports.justifyContent=d,exports.flexWrap=d,exports.flexDirection=d,exports.flex=d,exports.flexGrow=d,exports.flexShrink=d,exports.flexBasis=d,exports.justifySelf=d,exports.alignSelf=d,exports.order=d,exports.gridGap=c,exports.gridColumnGap=c,exports.gridRowGap=c,exports.gridColumn=c,exports.gridRow=c,exports.gridAutoFlow=c,exports.gridAutoColumns=c,exports.gridAutoRows=c,exports.gridTemplateColumns=c,exports.gridTemplateRows=c,exports.gridTemplateAreas=c,exports.gridArea=c,exports.borderWidth=l,exports.borderStyle=l,exports.borderColor=l,exports.borderTop=l,exports.borderRight=l,exports.borderBottom=l,exports.borderLeft=l,exports.borderRadius=l,exports.borders=l,exports.backgroundImage=g,exports.backgroundSize=g,exports.backgroundPosition=g,exports.backgroundRepeat=g,exports.position=y,exports.zIndex=y,exports.top=y,exports.right=y,exports.bottom=y,exports.left=y,exports.boxShadow=m,exports.opacity=b,exports.overflow=u,exports.buttonStyle=f,exports.textStyle=h,exports.colorStyle=S;
-//# sourceMappingURL=index.js.map
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+exports.__esModule = true;
+exports.colorStyle = exports.textStyle = exports.buttonStyle = exports.overflow = exports.opacity = exports.boxShadow = exports.style = exports.left = exports.bottom = exports.right = exports.top = exports.zIndex = exports.position = 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.display = exports.verticalAlign = exports.size = exports.maxHeight = exports.maxWidth = exports.minHeight = exports.minWidth = exports.height = exports.width = exports.background = exports.border = exports.flexbox = exports.typography = exports.layout = exports.color = exports.space = exports.paddingY = exports.paddingX = exports.paddingLeft = exports.paddingBottom = exports.paddingRight = exports.paddingTop = exports.padding = exports.marginX = exports.marginLeft = exports.marginBottom = exports.marginRight = exports.marginTop = exports.margin = exports.compose = exports.get = void 0;
+
+var _core = require("@styled-system/core");
+
+exports.createStyleFunction = _core.createStyleFunction;
+exports.createParser = _core.createParser;
+exports.get = _core.get;
+exports.compose = _core.compose;
+
+var _variant = require("@styled-system/variant");
+
+exports.variant = _variant.variant;
+
+var _space = require("@styled-system/space");
+
+exports.margin = _space.margin;
+exports.marginTop = _space.marginTop;
+exports.marginRight = _space.marginRight;
+exports.marginBottom = _space.marginBottom;
+exports.marginLeft = _space.marginLeft;
+exports.marginX = _space.marginX;
+exports.padding = _space.padding;
+exports.paddingTop = _space.paddingTop;
+exports.paddingRight = _space.paddingRight;
+exports.paddingBottom = _space.paddingBottom;
+exports.paddingLeft = _space.paddingLeft;
+exports.paddingX = _space.paddingX;
+exports.paddingY = _space.paddingY;
+exports.space = _space.space;
+
+var _color = require("@styled-system/color");
+
+exports.color = _color.color;
+
+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"];
+
+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"));
+
+exports.background = _background.background;
+exports.backgroundImage = _background["default"];
+exports.backgroundSize = _background["default"];
+exports.backgroundPosition = _background["default"];
+exports.backgroundRepeat = _background["default"];
+
+var _grid = _interopRequireDefault(require("@styled-system/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 _position = _interopRequireDefault(require("@styled-system/position"));
+
+exports.position = _position["default"];
+exports.zIndex = _position["default"];
+exports.top = _position["default"];
+exports.right = _position["default"];
+exports.bottom = _position["default"];
+exports.left = _position["default"];
+
+// new packages
+// v4 api shims
+// v4 style API shim
+var style = function style(_ref) {
+  var prop = _ref.prop,
+      cssProperty = _ref.cssProperty,
+      alias = _ref.alias,
+      key = _ref.key,
+      transformValue = _ref.transformValue,
+      scale = _ref.scale,
+      properties = _ref.properties;
+  var config = {};
+  config[prop] = (0, _core.createStyleFunction)({
+    properties: properties,
+    property: cssProperty || prop,
+    scale: key,
+    defaultScale: scale,
+    transform: transformValue
+  });
+  if (alias) config[alias] = config[prop];
+  var parse = (0, _core.createParser)(config);
+  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;

package.json

 {
   "name": "styled-system",
-  "version": "5.0.0-2",
+  "version": "5.0.0-3",
   "description": "Responsive, theme-based style props for building design systems with React",
   "main": "dist/index.js",
-  "module": "dist/index.esm.js",
   "keywords": [
@@ -16,14 +15,14 @@ "react",
   "devDependencies": {
-    "microbundle": "^0.11.0"
+    "@babel/cli": "^7.4.4"
   },
   "dependencies": {
-    "@styled-system/core": "^5.0.0-2",
-    "@styled-system/space": "^5.0.0-1",
-    "@styled-system/variant": "^5.0.0-2",
+    "@styled-system/core": "^5.0.0-3",
+    "@styled-system/space": "^5.0.0-3",
+    "@styled-system/variant": "^5.0.0-3",
     "object-assign": "^4.1.1"
   },
   "scripts": {
-    "prepare": "microbundle"
+    "prepare": "NODE_ENV=cjs babel src -d dist"
   },
-  "gitHead": "97dba5f4aded4362695c886ce13f9dcb730df8d2"
+  "gitHead": "dabec1cd94786c71679a550b4e3686bf7f8993dd"
 }

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Lines of code

253

increased by64.29%

Number of low quality alerts

2

decreased by-50%

Worsened metrics

Total package byte prevSize

18080

decreased by-67.05%

Number of package files

5

decreased by-50%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@styled-system/core@^5.0.0-3

• Updated@styled-system/space@^5.0.0-3

• Updated@styled-system/variant@^5.0.0-3