Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
styled-system
Advanced tools
styled-system - npm Package Compare versions
Comparing version 4.2.3 to 5.0.0-1
@@ -1,590 +0,2 @@ | ||
| import _extends from "@babel/runtime/helpers/esm/extends"; | ||
| import PropTypes from 'prop-types'; | ||
| var compare = function compare(a, b) { | ||
| if (a < b) return -1; | ||
| if (a > b) return 1; | ||
| return 0; | ||
| }; | ||
| 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, | ||
| cssProperty = _ref.cssProperty, | ||
| alias = _ref.alias, | ||
| 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); | ||
| }); | ||
| return func; | ||
| }; | ||
| 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' | ||
| }); | ||
| export{margin,marginTop,marginRight,marginBottom,marginLeft,marginX,padding,paddingTop,paddingRight,paddingBottom,paddingLeft,paddingX,paddingY,space}from"@styled-system/space";import{createStyleFunction as e,createParser as r,system as o,get as t}from"@styled-system/core";export{get,createParser,createStyleFunction,compose}from"@styled-system/core";import{variant as a}from"@styled-system/variant";export{variant}from"@styled-system/variant";var s=function(o){var t=o.prop,a=o.alias,s={};return s[t]=e({properties:o.properties,property:o.cssProperty||t,scale:o.key,defaultScale:o.scale,transform:o.transformValue}),a&&(s[a]=s[t]),r(s)},i={color:{property:"color",scale:"colors"},backgroundColor:{property:"backgroundColor",scale:"colors"}};i.bg=i.backgroundColor;var d=o(i),p=o({width:{property:"width",scale:"sizes",transform:function(e,r){return t(r,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"}}),l=o({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}),n=o({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}),g=o({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"}}),c={background:!0,backgroundImage:!0,backgroundSize:!0,backgroundPosition:!0,backgroundRepeat:!0};c.bgImage=c.backgroundImage,c.bgSize=c.backgroundSize,c.bgPosition=c.backgroundPosition,c.bgRepeat=c.backgroundRepeat;var b=o(c),m={space:[0,4,8,16,32,64,128,256,512]},y=o({gridGap:{property:"gridGap",scale:"space",defaultScale:m.space},gridColumnGap:{property:"gridColumnGap",scale:"space",defaultScale:m.space},gridRowGap:{property:"gridRowGap",scale:"space",defaultScale:m.space},gridColumn:!0,gridRow:!0,gridAutoFlow:!0,gridAutoColumns:!0,gridAutoRows:!0,gridTemplateColumns:!0,gridTemplateRows:!0,gridTemplateAreas:!0,gridArea:!0}),f=o({position:!0,zIndex:{property:"zIndex",scale:"zIndices"},top:!0,right:!0,bottom:!0,left:!0}),u=o({boxShadow:{property:"boxShadow",scale:"shadows"}}),h=o({opacity:!0}),S=o({overflow:!0}),x=a({key:"buttons"}),k=a({key:"textStyles",prop:"textStyle"}),R=a({key:"colorStyles",prop:"colors"});export{s as style,d as color,p as layout,l as typography,n as flexbox,g as border,b as background,p as width,p as height,p as minWidth,p as minHeight,p as maxWidth,p as maxHeight,p as size,p as verticalAlign,p as display,l as fontSize,l as fontFamily,l as fontWeight,l as lineHeight,l as textAlign,l as fontStyle,l as letterSpacing,n as alignItems,n as alignContent,n as justifyItems,n as justifyContent,n as flexWrap,n as flexDirection,n as flex,n as flexGrow,n as flexShrink,n as flexBasis,n as justifySelf,n as alignSelf,n as order,y as gridGap,y as gridColumnGap,y as gridRowGap,y as gridColumn,y as gridRow,y as gridAutoFlow,y as gridAutoColumns,y as gridAutoRows,y as gridTemplateColumns,y as gridTemplateRows,y as gridTemplateAreas,y as gridArea,g as borderWidth,g as borderStyle,g as borderColor,g as borderTop,g as borderRight,g as borderBottom,g as borderLeft,g as borderRadius,g as borders,b as backgroundImage,b as backgroundSize,b as backgroundPosition,b as backgroundRepeat,f as position,f as zIndex,f as top,f as right,f as bottom,f as left,u as boxShadow,h as opacity,S as overflow,x as buttonStyle,k as textStyle,R as colorStyle}; | ||
| //# sourceMappingURL=index.esm.js.map |
@@ -1,109 +0,2 @@ | ||
| "use strict"; | ||
| exports.__esModule = true; | ||
| exports.colorStyle = exports.textStyle = exports.buttonStyle = exports.left = exports.bottom = exports.right = exports.top = exports.zIndex = exports.position = exports.backgroundRepeat = exports.backgroundPosition = exports.backgroundSize = exports.backgroundImage = exports.background = exports.overflow = exports.opacity = exports.boxShadow = exports.borders = exports.borderRadius = exports.borderLeft = exports.borderBottom = exports.borderRight = exports.borderTop = exports.borderColor = exports.borderStyle = exports.borderWidth = exports.border = 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.flex = exports.flexDirection = exports.flexBasis = exports.flexWrap = exports.justifyContent = exports.justifyItems = exports.alignContent = exports.alignItems = exports.verticalAlign = exports.size = exports.minHeight = exports.maxHeight = exports.height = exports.minWidth = exports.maxWidth = exports.display = exports.letterSpacing = exports.fontStyle = exports.textAlign = exports.lineHeight = exports.fontWeight = exports.fontFamily = exports.fontSize = exports.width = exports.color = exports.backgroundColor = exports.textColor = 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.themeGet = exports.variant = exports.compose = exports.style = exports.createStyleFunction = exports.createParser = exports.get = void 0; | ||
| var _core = require("./core"); | ||
| exports.get = _core.get; | ||
| exports.createParser = _core.createParser; | ||
| exports.createStyleFunction = _core.createStyleFunction; | ||
| var _shim = require("./shim"); | ||
| exports.style = _shim.style; | ||
| exports.compose = _shim.compose; | ||
| var _variant = require("./variant"); | ||
| exports.variant = _variant.variant; | ||
| var _themeGet = require("./themeGet"); | ||
| exports.themeGet = _themeGet.themeGet; | ||
| var _styles = require("./styles"); | ||
| exports.margin = _styles.margin; | ||
| exports.marginTop = _styles.marginTop; | ||
| exports.marginRight = _styles.marginRight; | ||
| exports.marginBottom = _styles.marginBottom; | ||
| exports.marginLeft = _styles.marginLeft; | ||
| exports.marginX = _styles.marginX; | ||
| exports.padding = _styles.padding; | ||
| exports.paddingTop = _styles.paddingTop; | ||
| exports.paddingRight = _styles.paddingRight; | ||
| exports.paddingBottom = _styles.paddingBottom; | ||
| exports.paddingLeft = _styles.paddingLeft; | ||
| exports.paddingX = _styles.paddingX; | ||
| exports.paddingY = _styles.paddingY; | ||
| exports.space = _styles.space; | ||
| exports.textColor = _styles.textColor; | ||
| exports.backgroundColor = _styles.backgroundColor; | ||
| exports.color = _styles.color; | ||
| exports.width = _styles.width; | ||
| exports.fontSize = _styles.fontSize; | ||
| exports.fontFamily = _styles.fontFamily; | ||
| exports.fontWeight = _styles.fontWeight; | ||
| exports.lineHeight = _styles.lineHeight; | ||
| exports.textAlign = _styles.textAlign; | ||
| exports.fontStyle = _styles.fontStyle; | ||
| exports.letterSpacing = _styles.letterSpacing; | ||
| exports.display = _styles.display; | ||
| exports.maxWidth = _styles.maxWidth; | ||
| exports.minWidth = _styles.minWidth; | ||
| exports.height = _styles.height; | ||
| exports.maxHeight = _styles.maxHeight; | ||
| exports.minHeight = _styles.minHeight; | ||
| exports.size = _styles.size; | ||
| exports.verticalAlign = _styles.verticalAlign; | ||
| exports.alignItems = _styles.alignItems; | ||
| exports.alignContent = _styles.alignContent; | ||
| exports.justifyItems = _styles.justifyItems; | ||
| exports.justifyContent = _styles.justifyContent; | ||
| exports.flexWrap = _styles.flexWrap; | ||
| exports.flexBasis = _styles.flexBasis; | ||
| exports.flexDirection = _styles.flexDirection; | ||
| exports.flex = _styles.flex; | ||
| exports.justifySelf = _styles.justifySelf; | ||
| exports.alignSelf = _styles.alignSelf; | ||
| exports.order = _styles.order; | ||
| exports.gridGap = _styles.gridGap; | ||
| exports.gridColumnGap = _styles.gridColumnGap; | ||
| exports.gridRowGap = _styles.gridRowGap; | ||
| exports.gridColumn = _styles.gridColumn; | ||
| exports.gridRow = _styles.gridRow; | ||
| exports.gridAutoFlow = _styles.gridAutoFlow; | ||
| exports.gridAutoColumns = _styles.gridAutoColumns; | ||
| exports.gridAutoRows = _styles.gridAutoRows; | ||
| exports.gridTemplateColumns = _styles.gridTemplateColumns; | ||
| exports.gridTemplateRows = _styles.gridTemplateRows; | ||
| exports.gridTemplateAreas = _styles.gridTemplateAreas; | ||
| exports.gridArea = _styles.gridArea; | ||
| exports.border = _styles.border; | ||
| exports.borderWidth = _styles.borderWidth; | ||
| exports.borderStyle = _styles.borderStyle; | ||
| exports.borderColor = _styles.borderColor; | ||
| exports.borderTop = _styles.borderTop; | ||
| exports.borderRight = _styles.borderRight; | ||
| exports.borderBottom = _styles.borderBottom; | ||
| exports.borderLeft = _styles.borderLeft; | ||
| exports.borderRadius = _styles.borderRadius; | ||
| exports.borders = _styles.borders; | ||
| exports.boxShadow = _styles.boxShadow; | ||
| exports.opacity = _styles.opacity; | ||
| exports.overflow = _styles.overflow; | ||
| exports.background = _styles.background; | ||
| exports.backgroundImage = _styles.backgroundImage; | ||
| exports.backgroundSize = _styles.backgroundSize; | ||
| exports.backgroundPosition = _styles.backgroundPosition; | ||
| exports.backgroundRepeat = _styles.backgroundRepeat; | ||
| exports.position = _styles.position; | ||
| exports.zIndex = _styles.zIndex; | ||
| exports.top = _styles.top; | ||
| exports.right = _styles.right; | ||
| exports.bottom = _styles.bottom; | ||
| exports.left = _styles.left; | ||
| exports.buttonStyle = _styles.buttonStyle; | ||
| exports.textStyle = _styles.textStyle; | ||
| exports.colorStyle = _styles.colorStyle; | ||
| 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 |
| { | ||
| "name": "styled-system", | ||
| "version": "4.2.3", | ||
| "version": "5.0.0-1", | ||
| "description": "Responsive, theme-based style props for building design systems with React", | ||
| "main": "dist/index.cjs.js", | ||
| "main": "dist/index.js", | ||
| "module": "dist/index.esm.js", | ||
| "sideEffects": false, | ||
| "keywords": [ | ||
@@ -17,14 +16,14 @@ "react", | ||
| "devDependencies": { | ||
| "@babel/cli": "^7.2.3" | ||
| "microbundle": "^0.11.0" | ||
| }, | ||
| "dependencies": { | ||
| "@babel/runtime": "^7.4.2", | ||
| "prop-types": "^15.7.2" | ||
| "@styled-system/core": "^5.0.0-1", | ||
| "@styled-system/space": "^5.0.0-1", | ||
| "@styled-system/variant": "^5.0.0-1", | ||
| "object-assign": "^4.1.1" | ||
| }, | ||
| "scripts": { | ||
| "prepare": "mkdir -p dist && npm run build:cjs && npm run build:esm", | ||
| "build:cjs": "NODE_ENV=cjs babel src -o dist/index.cjs.js", | ||
| "build:esm": "NODE_ENV=esm babel src -o dist/index.esm.js" | ||
| "prepare": "microbundle" | ||
| }, | ||
| "gitHead": "86303f2c482465ce0bf74eb75473e71c6ef6a80d" | ||
| "gitHead": "3abf9641f83c9d620869f7750edd56cc0d48be10" | ||
| } |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage 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
Minified code
QualityThis 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
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by684.98%
721275
Worsened metrics
- Dependency count
- increased by100%
4
- Number of package files
- decreased by-31.25%
11
- Lines of code
- decreased by-94.93%
154
- Number of low quality alerts
- increased by300%
4
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
+ Added@styled-system/core@^5.0.0-1
+ Addedobject-assign@^4.1.1
+ Added@styled-system/core@5.1.2(transitive)
+ Added@styled-system/css@5.1.5(transitive)
+ Added@styled-system/space@5.1.2(transitive)
+ Added@styled-system/variant@5.1.5(transitive)
- Removed@babel/runtime@^7.4.2
- Removedprop-types@^15.7.2
- Removed@babel/runtime@7.26.0(transitive)
- Removedjs-tokens@4.0.0(transitive)
- Removedloose-envify@1.4.0(transitive)
- Removedprop-types@15.8.1(transitive)
- Removedreact-is@16.13.1(transitive)
- Removedregenerator-runtime@0.14.1(transitive)