Socket
Socket
Sign inDemoInstall

styled-system

Package Overview
Dependencies
13
Maintainers
2
Versions
149
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 5.0.0-8 to 5.0.0-11

615

dist/index.esm.js

@@ -1,94 +0,25 @@

import _extends from "@babel/runtime/helpers/esm/extends";
import PropTypes from 'prop-types';
import { createStyleFunction, createParser, system } from '@styled-system/core';
export { get, createParser, createStyleFunction, compose } from '@styled-system/core';
export { margin, padding, space } from '@styled-system/space';
export { color } from '@styled-system/color';
export { layout } from '@styled-system/layout';
export { typography } from '@styled-system/typography';
export { flexbox } from '@styled-system/flexbox';
export { border } from '@styled-system/border';
export { background } from '@styled-system/background';
export { position } from '@styled-system/position';
export { grid } from '@styled-system/grid';
export { shadow } from '@styled-system/shadow';
export { variant, buttonStyle, textStyle, colorStyle } from '@styled-system/variant'; // v4 api shims
var compare = function compare(a, b) {
if (a < b) return -1;
if (a > b) return 1;
return 0;
};
export { default as width, default as height, default as minWidth, default as minHeight, default as maxWidth, default as maxHeight, default as size, default as verticalAlign, default as display, default as overflow } from '@styled-system/layout';
export { default as opacity } from '@styled-system/color';
export { default as fontSize, default as fontFamily, default as fontWeight, default as lineHeight, default as textAlign, default as fontStyle, default as letterSpacing } from '@styled-system/typography';
export { default as alignItems, default as alignContent, default as justifyItems, default as justifyContent, default as flexWrap, default as flexDirection, default as flex, default as flexGrow, default as flexShrink, default as flexBasis, default as justifySelf, default as alignSelf, default as order } from '@styled-system/flexbox';
export { default as gridGap, default as gridColumnGap, default as gridRowGap, default as gridColumn, default as gridRow, default as gridAutoFlow, default as gridAutoColumns, default as gridAutoRows, default as gridTemplateColumns, default as gridTemplateRows, default as gridTemplateAreas, default as gridArea } from '@styled-system/grid';
export { default as borderWidth, default as borderStyle, default as borderColor, default as borderTop, default as borderRight, default as borderBottom, default as borderLeft, default as borderRadius, default as borders } from '@styled-system/border';
export { default as backgroundImage, default as backgroundSize, default as backgroundPosition, default as backgroundRepeat } from '@styled-system/background';
export { default as zIndex, default as top, default as right, default as bottom, default as left } from '@styled-system/position'; // v4 style API shim
export var defaultBreakpoints = [40, 52, 64].map(function (n) {
return n + 'em';
});
export var propType = PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array, PropTypes.object]);
export var cloneFunction = function cloneFunction(fn) {
return function () {
return fn.apply(void 0, arguments);
};
};
export var get = function get(obj) {
for (var _len = arguments.length, paths = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
paths[_key - 1] = arguments[_key];
}
var value = paths.reduce(function (a, path) {
if (is(a)) return a;
var keys = typeof path === 'string' ? path.split('.') : [path];
return keys.reduce(function (a, key) {
return a && is(a[key]) ? a[key] : null;
}, obj);
}, null);
return is(value) ? value : paths[paths.length - 1];
};
export var themeGet = function themeGet(path, fallback) {
if (fallback === void 0) {
fallback = null;
}
return function (props) {
return get(props.theme, path, fallback);
};
};
export var is = function is(n) {
return n !== undefined && n !== null;
};
export var isObject = function isObject(n) {
return typeof n === 'object' && n !== null;
};
export var num = function num(n) {
return typeof n === 'number' && !isNaN(n);
};
export var px = function px(n) {
return num(n) && n !== 0 ? n + 'px' : n;
};
export var createMediaQuery = function createMediaQuery(n) {
return "@media screen and (min-width: " + px(n) + ")";
};
var getValue = function getValue(n, scale) {
return get(scale, n);
}; // loosely based on deepmerge package
export var merge = function merge(a, b) {
var result = {};
for (var key in a) {
result[key] = a[key];
}
for (var _key2 in b) {
if (!a[_key2] || typeof a[_key2] !== 'object') {
result[_key2] = b[_key2];
} else {
result[_key2] = merge(a[_key2], b[_key2]);
}
}
return result;
};
var mergeAll = function mergeAll() {
var result = {};
for (var i = 0; i < arguments.length; i++) {
result = merge(result, i < 0 || arguments.length <= i ? undefined : arguments[i]);
}
return result;
};
export var style = function style(_ref) {
var _func$propTypes;
var prop = _ref.prop,

@@ -98,494 +29,16 @@ cssProperty = _ref.cssProperty,

key = _ref.key,
_ref$transformValue = _ref.transformValue,
transformValue = _ref$transformValue === void 0 ? getValue : _ref$transformValue,
_ref$scale = _ref.scale,
defaultScale = _ref$scale === void 0 ? {} : _ref$scale;
var property = cssProperty || prop;
var func = function func(props) {
var value = get(props, prop, alias, null);
if (!is(value)) return null;
var scale = get(props.theme, key, defaultScale);
var createStyle = function createStyle(n) {
var _ref2;
return is(n) ? (_ref2 = {}, _ref2[property] = transformValue(n, scale), _ref2) : null;
};
if (!isObject(value)) return createStyle(value);
var breakpoints = get(props.theme, 'breakpoints', defaultBreakpoints);
var styles = [];
if (Array.isArray(value)) {
styles.push(createStyle(value[0]));
for (var i = 1; i < value.slice(0, breakpoints.length + 1).length; i++) {
var rule = createStyle(value[i]);
if (rule) {
var _styles$push;
var media = createMediaQuery(breakpoints[i - 1]);
styles.push((_styles$push = {}, _styles$push[media] = rule, _styles$push));
}
}
} else {
for (var _key3 in value) {
var breakpoint = breakpoints[_key3];
var _media = createMediaQuery(breakpoint);
var _rule = createStyle(value[_key3]);
if (!breakpoint) {
styles.unshift(_rule);
} else {
var _styles$push2;
styles.push((_styles$push2 = {}, _styles$push2[_media] = _rule, _styles$push2));
}
}
styles.sort(compare);
}
return mergeAll.apply(void 0, styles);
};
func.propTypes = (_func$propTypes = {}, _func$propTypes[prop] = cloneFunction(propType), _func$propTypes);
func.propTypes[prop].meta = {
prop: prop,
themeKey: key
};
if (alias) {
func.propTypes[alias] = cloneFunction(propType);
func.propTypes[alias].meta = {
prop: alias,
themeKey: key
};
}
return func;
};
export var compose = function compose() {
for (var _len2 = arguments.length, funcs = new Array(_len2), _key4 = 0; _key4 < _len2; _key4++) {
funcs[_key4] = arguments[_key4];
}
var func = function func(props) {
var n = funcs.map(function (fn) {
return fn(props);
}).filter(Boolean);
return mergeAll.apply(void 0, n);
};
func.propTypes = {};
funcs.forEach(function (fn) {
func.propTypes = _extends({}, func.propTypes, fn.propTypes);
transformValue = _ref.transformValue,
scale = _ref.scale,
properties = _ref.properties;
var config = {};
config[prop] = createStyleFunction({
properties: properties,
property: cssProperty || prop,
scale: key,
defaultScale: scale,
transform: transformValue
});
return func;
if (alias) config[alias] = config[prop];
var parse = createParser(config);
return parse;
};
export var mapProps = function mapProps(mapper) {
return function (func) {
var next = function next(props) {
return func(mapper(props));
};
for (var key in func) {
next[key] = func[key];
}
return next;
};
};
export var variant = function variant(_ref3) {
var _fn$propTypes;
var key = _ref3.key,
_ref3$prop = _ref3.prop,
prop = _ref3$prop === void 0 ? 'variant' : _ref3$prop;
var fn = function fn(props) {
return get(props.theme, [key, props[prop]].join('.'), null);
};
fn.propTypes = (_fn$propTypes = {}, _fn$propTypes[prop] = PropTypes.oneOfType([PropTypes.number, PropTypes.string]), _fn$propTypes);
return fn;
}; // space
var spaceScale = [0, 4, 8, 16, 32, 64, 128, 256, 512];
var getSpace = function getSpace(n, scale) {
if (!num(n)) {
return px(get(scale, n, n));
}
var isNegative = n < 0;
var absolute = Math.abs(n);
var value = get(scale, absolute);
if (!num(value)) {
return isNegative ? '-' + value : value;
}
return px(value * (isNegative ? -1 : 1));
};
export var margin = style({
prop: 'margin',
alias: 'm',
key: 'space',
transformValue: getSpace,
scale: spaceScale
});
export var marginTop = style({
prop: 'marginTop',
alias: 'mt',
key: 'space',
transformValue: getSpace,
scale: spaceScale
});
export var marginBottom = style({
prop: 'marginBottom',
alias: 'mb',
key: 'space',
transformValue: getSpace,
scale: spaceScale
});
export var marginLeft = style({
prop: 'marginLeft',
alias: 'ml',
key: 'space',
transformValue: getSpace,
scale: spaceScale
});
export var marginRight = style({
prop: 'marginRight',
alias: 'mr',
key: 'space',
transformValue: getSpace,
scale: spaceScale
});
export var padding = style({
prop: 'padding',
alias: 'p',
key: 'space',
transformValue: getSpace,
scale: spaceScale
});
export var paddingTop = style({
prop: 'paddingTop',
alias: 'pt',
key: 'space',
transformValue: getSpace,
scale: spaceScale
});
export var paddingBottom = style({
prop: 'paddingBottom',
alias: 'pb',
key: 'space',
transformValue: getSpace,
scale: spaceScale
});
export var paddingLeft = style({
prop: 'paddingLeft',
alias: 'pl',
key: 'space',
transformValue: getSpace,
scale: spaceScale
});
export var paddingRight = style({
prop: 'paddingRight',
alias: 'pr',
key: 'space',
transformValue: getSpace,
scale: spaceScale
});
export var space = mapProps(function (props) {
return _extends({}, props, {
mt: is(props.my) ? props.my : props.mt,
mb: is(props.my) ? props.my : props.mb,
ml: is(props.mx) ? props.mx : props.ml,
mr: is(props.mx) ? props.mx : props.mr,
pt: is(props.py) ? props.py : props.pt,
pb: is(props.py) ? props.py : props.pb,
pl: is(props.px) ? props.px : props.pl,
pr: is(props.px) ? props.px : props.pr
});
})(compose(margin, marginTop, marginBottom, marginLeft, marginRight, padding, paddingTop, paddingBottom, paddingLeft, paddingRight)); // color
export var textColor = style({
prop: 'color',
key: 'colors'
});
export var backgroundColor = style({
prop: 'backgroundColor',
alias: 'bg',
key: 'colors'
});
export var color = compose(textColor, backgroundColor); // width
export var getWidth = function getWidth(n, scale) {
return !num(n) || n > 1 ? px(n) : n * 100 + '%';
};
export var width = style({
prop: 'width',
key: 'widths',
transformValue: getWidth
}); // typography
export var getPx = function getPx(n, scale) {
return px(get(scale, n));
};
export var fontSize = style({
prop: 'fontSize',
key: 'fontSizes',
transformValue: getPx,
scale: [12, 14, 16, 20, 24, 32, 48, 64, 72]
});
export var fontFamily = style({
prop: 'fontFamily',
key: 'fonts'
});
export var fontWeight = style({
prop: 'fontWeight',
key: 'fontWeights'
});
export var lineHeight = style({
prop: 'lineHeight',
key: 'lineHeights'
});
export var textAlign = style({
prop: 'textAlign'
});
export var fontStyle = style({
prop: 'fontStyle'
});
export var letterSpacing = style({
prop: 'letterSpacing',
key: 'letterSpacings',
transformValue: getPx
}); // layout
export var display = style({
prop: 'display'
});
export var maxWidth = style({
prop: 'maxWidth',
key: 'maxWidths',
transformValue: getPx
});
export var minWidth = style({
prop: 'minWidth',
key: 'minWidths',
transformValue: getPx
});
export var height = style({
prop: 'height',
key: 'heights',
transformValue: getPx
});
export var maxHeight = style({
prop: 'maxHeight',
key: 'maxHeights',
transformValue: getPx
});
export var minHeight = style({
prop: 'minHeight',
key: 'minHeights',
transformValue: getPx
});
export var size = mapProps(function (props) {
return _extends({}, props, {
width: props.size,
height: props.size
});
})(compose(width, height));
export var verticalAlign = style({
prop: 'verticalAlign'
}); // flexbox
export var alignItems = style({
prop: 'alignItems'
});
export var alignContent = style({
prop: 'alignContent'
});
export var justifyItems = style({
prop: 'justifyItems'
});
export var justifyContent = style({
prop: 'justifyContent'
});
export var flexWrap = style({
prop: 'flexWrap'
});
export var flexBasis = style({
prop: 'flexBasis',
transformValue: getWidth
});
export var flexDirection = style({
prop: 'flexDirection'
});
export var flex = style({
prop: 'flex'
});
export var justifySelf = style({
prop: 'justifySelf'
});
export var alignSelf = style({
prop: 'alignSelf'
});
export var order = style({
prop: 'order'
}); // grid
export var gridGap = style({
prop: 'gridGap',
key: 'space',
transformValue: getPx,
scale: spaceScale
});
export var gridColumnGap = style({
prop: 'gridColumnGap',
key: 'space',
transformValue: getPx,
scale: spaceScale
});
export var gridRowGap = style({
prop: 'gridRowGap',
key: 'space',
transformValue: getPx,
scale: spaceScale
});
export var gridColumn = style({
prop: 'gridColumn'
});
export var gridRow = style({
prop: 'gridRow'
});
export var gridAutoFlow = style({
prop: 'gridAutoFlow'
});
export var gridAutoColumns = style({
prop: 'gridAutoColumns'
});
export var gridAutoRows = style({
prop: 'gridAutoRows'
});
export var gridTemplateColumns = style({
prop: 'gridTemplateColumns'
});
export var gridTemplateRows = style({
prop: 'gridTemplateRows'
});
export var gridTemplateAreas = style({
prop: 'gridTemplateAreas'
});
export var gridArea = style({
prop: 'gridArea'
}); // borders
export var border = style({
prop: 'border',
key: 'borders'
});
export var borderWidth = style({
prop: 'borderWidth',
key: 'borderWidths',
transformValue: getPx
});
export var borderStyle = style({
prop: 'borderStyle',
key: 'borderStyles'
});
export var borderColor = style({
prop: 'borderColor',
key: 'colors'
});
export var borderTop = style({
prop: 'borderTop',
key: 'borders'
});
export var borderRight = style({
prop: 'borderRight',
key: 'borders'
});
export var borderBottom = style({
prop: 'borderBottom',
key: 'borders'
});
export var borderLeft = style({
prop: 'borderLeft',
key: 'borders'
});
export var borderRadius = style({
prop: 'borderRadius',
key: 'radii',
transformValue: getPx
});
export var borders = compose(border, borderTop, borderRight, borderBottom, borderLeft, borderWidth, borderStyle, borderColor, borderRadius);
export var boxShadow = style({
prop: 'boxShadow',
key: 'shadows'
});
export var opacity = style({
prop: 'opacity'
});
export var overflow = style({
prop: 'overflow'
}); // backgrounds
export var background = style({
prop: 'background'
});
export var backgroundImage = style({
prop: 'backgroundImage'
});
export var backgroundSize = style({
prop: 'backgroundSize'
});
export var backgroundPosition = style({
prop: 'backgroundPosition'
});
export var backgroundRepeat = style({
prop: 'backgroundRepeat'
}); // position
export var position = style({
prop: 'position'
});
export var zIndex = style({
prop: 'zIndex',
key: 'zIndices'
});
export var top = style({
prop: 'top',
transformValue: getPx
});
export var right = style({
prop: 'right',
transformValue: getPx
});
export var bottom = style({
prop: 'bottom',
transformValue: getPx
});
export var left = style({
prop: 'left',
transformValue: getPx
}); // variants
export var buttonStyle = variant({
key: 'buttons'
});
export var textStyle = variant({
key: 'textStyles',
prop: 'textStyle'
});
export var colorStyle = variant({
key: 'colorStyles',
prop: 'colors'
});

68

dist/index.js

@@ -6,3 +6,3 @@ "use strict";

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.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.grid = exports.position = 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;
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;

@@ -16,26 +16,12 @@ var _core = require("@styled-system/core");

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");
var _color = _interopRequireWildcard(require("@styled-system/color"));
exports.color = _color.color;
exports.opacity = _color["default"];

@@ -54,2 +40,3 @@ var _layout = _interopRequireWildcard(require("@styled-system/layout"));

exports.display = _layout["default"];
exports.overflow = _layout["default"];

@@ -130,3 +117,13 @@ var _typography = _interopRequireWildcard(require("@styled-system/typography"));

// new packages
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

@@ -153,35 +150,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;

34

package.json
{
"name": "styled-system",
"version": "5.0.0-8",
"version": "5.0.0-11",
"description": "Responsive, theme-based style props for building design systems with React",
"main": "dist/index.js",
"module": "dist/index.esm.js",
"keywords": [

@@ -14,23 +15,18 @@ "react",

"license": "MIT",
"devDependencies": {
"@babel/cli": "^7.4.4"
},
"dependencies": {
"@styled-system/background": "5.0.0-7",
"@styled-system/border": "5.0.0-7",
"@styled-system/color": "5.0.0-7",
"@styled-system/core": "5.0.0-7",
"@styled-system/flexbox": "5.0.0-7",
"@styled-system/grid": "5.0.0-7",
"@styled-system/layout": "5.0.0-7",
"@styled-system/position": "5.0.0-7",
"@styled-system/space": "5.0.0-7",
"@styled-system/typography": "5.0.0-7",
"@styled-system/variant": "5.0.0-7",
"@styled-system/background": "^5.0.0-11",
"@styled-system/border": "^5.0.0-11",
"@styled-system/color": "^5.0.0-11",
"@styled-system/core": "^5.0.0-11",
"@styled-system/flexbox": "^5.0.0-11",
"@styled-system/grid": "^5.0.0-11",
"@styled-system/layout": "^5.0.0-11",
"@styled-system/position": "^5.0.0-11",
"@styled-system/shadow": "^5.0.0-11",
"@styled-system/space": "^5.0.0-11",
"@styled-system/typography": "^5.0.0-11",
"@styled-system/variant": "^5.0.0-11",
"object-assign": "^4.1.1"
},
"scripts": {
"prepare": "NODE_ENV=cjs babel src -d dist"
},
"gitHead": "2422aac3651adf70ef6997b430e516987dd76d3c"
"gitHead": "be83686fe5f3756814cf9da74ced7a686d2fda9c"
}
dist/index.cjs.js
dist/index.esm.js.map
dist/index.js.map
dist/index.umd.js
dist/index.umd.js.map
props.js
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc