@xstyled/system - npm Package Compare versions

Comparing version 3.0.0-beta.0 to 3.0.0-beta.1

dist/index.js

@@ -12,3 +12,3 @@ 'use strict';
 const deg = unit("deg");
-const pxToRem = (value, {rootFontSize = 16} = {}) => round(value / rootFontSize);
+const pxToRem = (value, { rootFontSize = 16 } = {}) => round(value / rootFontSize);
 const remPx = (value, options) => util.num(value) && value !== 0 ? `${pxToRem(value, options)}rem` : value;
@@ -27,3 +27,3 @@ const rpx = (value, options) => {
 const percent = (n) => util.num(n) && n !== 0 && n >= -1 && n <= 1 ? `${round(n * 100)}%` : n;
-const transformNegative = (_, {rawValue, variants, props}) => {
+const transformNegative = (_, { rawValue, variants, props }) => {
   if (util.string(rawValue)) {
@@ -45,3 +45,3 @@ const neg = rawValue.startsWith("-");
   }
-  return null;
+  return void 0;
 };
@@ -74,3 +74,3 @@
   }
-  return {...medias, ...states};
+  return { ...medias, ...states };
 };
@@ -112,3 +112,7 @@ const getCachedVariants = (props, cache) => {
 let themeGetterId = 0;
-const SPACES = /\s+/;
+const SPLITTERS = {
+  shorthand: [/\s+/, " "],
+  multiple: [/\s*,\s*/, ","]
+};
+const splitValue = (splitter, transform) => (value) => value.split(splitter[0]).map(transform).join(splitter[1]);
 const themeGetter = ({
@@ -119,3 +123,4 @@ name,
   compose: compose2,
-  shorthand
+  shorthand,
+  multiple
 }) => {
@@ -158,5 +163,9 @@ const id = themeGetterId++;
     };
-    if (shorthand && util.string(value)) {
-      const values = value.split(SPACES);
-      res = values.map((value2) => getValue(value2)).join(" ");
+    if ((shorthand || multiple) && util.string(value)) {
+      let transform = getValue;
+      if (shorthand)
+        transform = splitValue(SPLITTERS.shorthand, transform);
+      if (multiple)
+        transform = splitValue(SPLITTERS.multiple, transform);
+      res = transform(value);
     } else {
@@ -168,15 +177,19 @@ res = getValue(value);
   };
-  getter.meta = {name, transform: defaultTransform};
+  getter.meta = { name, transform: defaultTransform };
   return getter;
 };
-const createStyleGenerator = (getStyle, props, generators) => {
+const createStyleGenerator = ({
+  getStyle,
+  props,
+  cssGetters = {},
+  generators
+}) => {
   const generator = getStyle;
   generator.meta = {
     props,
+    cssGetters,
     getStyle: generator,
     generators
   };
-  generator.apply = (values) => ({
-    theme
-  }) => generator({theme, ...values});
+  generator.apply = (values) => ({ theme }) => generator({ theme, ...values });
   return generator;
@@ -210,3 +223,3 @@ };
         return reduceVariants(props, value2, fromValue);
-      return util.cascade(mixin(themeGet(value2)(props)), props);
+      return util.cascade(mixin(themeGet ? themeGet(value2)(props) : value2), props);
     };
@@ -224,6 +237,6 @@ const value = props[prop];
 };
-const indexGeneratorsByProp = (styles) => {
+const indexGeneratorsByProp = (generators) => {
   const index = {};
-  for (let i = 0; i < styles.length; i++) {
-    const style2 = styles[i];
+  for (let i = 0; i < generators.length; i++) {
+    const style2 = generators[i];
     if (style2 && style2.meta) {
@@ -264,2 +277,3 @@ for (let j = 0; j < style2.meta.props.length; j++) {
     const styles = {};
+    let merged;
     for (const key in props2) {
@@ -270,5 +284,6 @@ const generator = generatorsByProp[key];
         util.merge(styles, style2);
+        merged = true;
       }
     }
-    if (!sort)
+    if (!merged || !sort)
       return styles;
@@ -278,8 +293,14 @@ const medias = getCachedVariants(props2, getCache(props2.theme, "__states"));
   };
-  const props = flatGenerators.reduce((allProps, generator) => [...allProps, ...generator.meta.props], []);
-  return createStyleGenerator(getStyle, props, generators);
+  const props = [];
+  const cssGetters = {};
+  for (let i = 0; i < flatGenerators.length; i++) {
+    const generator = flatGenerators[i];
+    props.push(...generator.meta.props);
+    Object.assign(cssGetters, generator.meta.cssGetters);
+  }
+  return createStyleGenerator({ getStyle, props, cssGetters, generators });
 };
 const getMixinFromCSSProperties = (properties) => (value) => {
   if (util.string(properties))
-    return {[properties]: value};
+    return { [properties]: value };
   const style2 = {};
@@ -296,2 +317,3 @@ for (const key in properties) {
 };
+const dasherize = (key) => key.replace(/[A-Z]/g, "-$&").toLowerCase();
 const style = ({
@@ -302,8 +324,10 @@ prop,
   key,
-  transform
+  transform,
+  cssProps: cssPropsOption
 }) => {
-  const getter = themeGet || themeGetter({key, transform});
+  const getter = themeGet || (key || transform ? themeGetter({ key, transform }) : void 0);
+  const cssProps = cssPropsOption || (util.string(css) ? [css] : Array.isArray(css) ? css : util.string(prop) ? [prop] : Array.isArray(prop) ? prop : []);
   if (Array.isArray(prop)) {
     const mixin2 = css ? getMixinFromCSSOption(css) : css;
-    const generators2 = prop.map((prop2) => style({prop: prop2, css: mixin2, themeGet: getter}));
+    const generators2 = prop.map((prop2) => style({ prop: prop2, css: mixin2, cssProps, themeGet: getter }));
     return compose(...generators2);
@@ -315,3 +339,7 @@ }
   const getStyle = getStyleFactory(prop, mixin, getter);
-  const generator = createStyleGenerator(getStyle, props);
+  const cssGetters = getter ? cssProps.reduce((getters, cssProp) => {
+    getters[dasherize(cssProp)] = getter;
+    return getters;
+  }, {}) : {};
+  const generator = createStyleGenerator({ getStyle, props, cssGetters });
   generators.push(generator);
@@ -321,2 +349,65 @@ return compose(...generators);
 
+const getPx = themeGetter({
+  name: "px",
+  transform: (value, { props }) => {
+    const rootFontSize = props?.theme?.settings?.rootFontSize ?? void 0;
+    const num = Number(value);
+    return px$1(rpx(Number.isNaN(num) ? value : num, { rootFontSize }));
+  }
+});
+const getDuration = themeGetter({
+  name: "duration",
+  key: "durations",
+  transform: (value) => {
+    const num = Number(value);
+    return ms(Number.isNaN(num) ? value : num);
+  }
+});
+const getAngle = themeGetter({
+  name: "angle",
+  transform: (value) => {
+    const num = Number(value);
+    return deg(Number.isNaN(num) ? value : num);
+  }
+});
+const getPercent = themeGetter({
+  name: "percent",
+  compose: getPx,
+  transform: percent
+});
+
+const getTransition = themeGetter({
+  name: "transition",
+  key: "transitions"
+});
+const getTransitionProperty = themeGetter({
+  name: "transitionProperty",
+  key: "transitionProperties"
+});
+const getTimingFunction = themeGetter({
+  name: "timingFunction",
+  key: "timingFunctions"
+});
+const transition = style({
+  prop: "transition",
+  themeGet: getTransition
+});
+const transitionProperty = style({
+  prop: "transitionProperty",
+  themeGet: getTransitionProperty
+});
+const transitionDuration = style({
+  prop: "transitionDuration",
+  themeGet: getDuration
+});
+const transitionTimingFunction = style({
+  prop: "transitionTimingFunction",
+  themeGet: getTimingFunction
+});
+const transitionDelay = style({
+  prop: "transitionDelay",
+  themeGet: getDuration
+});
+const transitions$1 = compose(transition, transitionProperty, transitionDuration, transitionTimingFunction, transitionDelay);
+
 const getAnimation = themeGetter({
@@ -330,3 +421,11 @@ name: "animation",
 });
-const animations = compose(animation);
+const animationDuration = style({
+  prop: "animationDuration",
+  themeGet: getDuration
+});
+const animationTimingFunction = style({
+  prop: "animationTimingFunction",
+  themeGet: getTimingFunction
+});
+const animations = compose(animation, animationDuration, animationTimingFunction);
 
@@ -405,31 +504,2 @@ const getColor = themeGetter({
 
-const getPx = themeGetter({
-  name: "px",
-  transform: (value, {props}) => {
-    const rootFontSize = props?.theme?.settings?.rootFontSize ?? void 0;
-    const num = Number(value);
-    return px$1(rpx(Number.isNaN(num) ? value : num, {rootFontSize}));
-  }
-});
-const getDuration = themeGetter({
-  name: "duration",
-  key: "durations",
-  transform: (value) => {
-    const num = Number(value);
-    return ms(Number.isNaN(num) ? value : num);
-  }
-});
-const getAngle = themeGetter({
-  name: "angle",
-  transform: (value) => {
-    const num = Number(value);
-    return deg(Number.isNaN(num) ? value : num);
-  }
-});
-const getPercent = themeGetter({
-  name: "percent",
-  compose: getPx,
-  transform: percent
-});
-
 const getBorder = themeGetter({
@@ -517,3 +587,10 @@ name: "border",
   prop: "borderStyle",
-  themeGet: getBorderStyle
+  themeGet: getBorderStyle,
+  cssProps: [
+    "borderStyle",
+    "borderTopStyle",
+    "borderRightStyle",
+    "borderBottomStyle",
+    "borderLeftStyle"
+  ]
 });
@@ -544,3 +621,10 @@ const outline = style({
   prop: "borderRadius",
-  themeGet: getRadius
+  themeGet: getRadius,
+  cssProps: [
+    "borderRadius",
+    "borderTopLeftRadius",
+    "borderTopRightRadius",
+    "borderBottomRightRadius",
+    "borderBottomLeftRadius"
+  ]
 });
@@ -625,3 +709,3 @@ const divideSelector = `& > :not([hidden]) ~ :not([hidden])`;
   prop: "ringInset",
-  css: () => ({"--x-ring-inset": "inset"})
+  css: () => ({ "--x-ring-inset": "inset" })
 });
@@ -631,3 +715,3 @@ const ringColor = style({
   themeGet: getColor,
-  css: (value) => ({"--x-ring-color": value})
+  css: (value) => ({ "--x-ring-color": value })
 });
@@ -638,3 +722,4 @@ const borders = compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth, borderStyle, borderRadius, outline, outlineColor, outlineWidth, outlineStyle, divideX, divideY, divideXReverse, divideYReverse, divideColor, divideStyle, ring, ringInset, ringColor);
   name: "shadow",
-  key: "shadows"
+  key: "shadows",
+  multiple: true
 });
@@ -667,3 +752,3 @@ const opacity = style({
 });
-function getColStyle(props, size) {
+const getColStyle = (props, size) => {
   if (!util.is(size))
@@ -690,23 +775,26 @@ return null;
   };
-}
-const col = createStyleGenerator((props) => {
-  const value = props.col;
-  const common = {
-    boxSizing: "border-box",
-    flexBasis: 0,
-    flexGrow: 1,
-    maxWidth: "100%"
-  };
-  if (util.obj(value)) {
-    const breakpointsStyle = reduceVariants(props, value, (v) => getColStyle(props, v));
+};
+const col = createStyleGenerator({
+  getStyle: (props) => {
+    const value = props.col;
+    const common = {
+      boxSizing: "border-box",
+      flexBasis: 0,
+      flexGrow: 1,
+      maxWidth: "100%"
+    };
+    if (util.obj(value)) {
+      const breakpointsStyle = reduceVariants(props, value, (v) => getColStyle(props, v));
+      return {
+        ...common,
+        ...breakpointsStyle
+      };
+    }
     return {
       ...common,
-      ...breakpointsStyle
+      ...getColStyle(props, value)
     };
-  }
-  return {
-    ...common,
-    ...getColStyle(props, value)
-  };
-}, ["col"]);
+  },
+  props: ["col"]
+});
 const flexboxGrids = compose(row, col);
@@ -723,15 +811,18 @@
 });
-const container = createStyleGenerator((props) => {
-  if (!props.container)
-    return null;
-  const breakpoints = getScreens(props);
-  let styles = reduceVariants(props, breakpoints, (v) => v !== 0 ? {maxWidth: v} : {});
-  if (util.obj(props.container)) {
-    styles = reduceVariants(props, props.container, () => styles);
-  }
-  return {
-    width: "100%",
-    ...styles
-  };
-}, ["container"]);
+const container = createStyleGenerator({
+  getStyle: (props) => {
+    if (!props.container)
+      return null;
+    const breakpoints = getScreens(props);
+    let styles = reduceVariants(props, breakpoints, (v) => v !== 0 ? { maxWidth: v } : {});
+    if (util.obj(props.container)) {
+      styles = reduceVariants(props, props.container, () => styles);
+    }
+    return {
+      width: "100%",
+      ...styles
+    };
+  },
+  props: ["container"]
+});
 const overflow = style({
@@ -836,2 +927,3 @@ prop: "overflow"
   compose: getPx,
+  shorthand: true,
   transform: transformNegative
@@ -1044,3 +1136,13 @@ });
 });
-const sizing = compose(width, height, maxWidth, maxHeight, minWidth, minHeight);
+const maskSize = style({
+  prop: "maskSize",
+  themeGet: themeGetter({
+    name: "size",
+    key: "sizes",
+    compose: getPercent,
+    multiple: true,
+    shorthand: true
+  })
+});
+const sizing = compose(width, height, maxWidth, maxHeight, minWidth, minHeight, maskSize);
 
@@ -1085,3 +1187,3 @@ const fill = style({
     }
-    return {transform: value};
+    return { transform: value };
   }
@@ -1134,43 +1236,9 @@ });
 
-const getTransition = themeGetter({
-  name: "transition",
-  key: "transitions"
-});
-const getTransitionProperty = themeGetter({
-  name: "transitionProperty",
-  key: "transitionProperties"
-});
-const getTimingFunction = themeGetter({
-  name: "timingFunction",
-  key: "timingFunctions"
-});
-const transition = style({
-  prop: "transition",
-  themeGet: getTransition
-});
-const transitionProperty = style({
-  prop: "transitionProperty",
-  themeGet: getTransitionProperty
-});
-const transitionDuration = style({
-  prop: "transitionDuration",
-  themeGet: getDuration
-});
-const transitionTimingFunction = style({
-  prop: "transitionTimingFunction",
-  themeGet: getTimingFunction
-});
-const transitionDelay = style({
-  prop: "transitionDelay",
-  themeGet: getDuration
-});
-const transitions$1 = compose(transition, transitionProperty, transitionDuration, transitionTimingFunction, transitionDelay);
-
-const getFont = themeGetter({name: "font", key: "fonts"});
+const getFont = themeGetter({ name: "font", key: "fonts" });
 const getLineHeight = themeGetter({
   name: "lineHeight",
   key: "lineHeights",
-  transform: (value, {props}) => {
+  transform: (value, { props }) => {
     const rootFontSize = props?.theme?.settings?.rootFontSize ?? void 0;
-    return rpx(value, {rootFontSize});
+    return rpx(value, { rootFontSize });
   }
@@ -1247,3 +1315,3 @@ });
   key: "texts",
-  css: (value) => ({theme}) => all({...value, theme})
+  css: (value) => ({ theme }) => all({ ...value, theme })
 });
@@ -1366,3 +1434,3 @@ const typography = compose(all, text);
   }, {});
-  return {...colors, ...alphaColors};
+  return { ...colors, ...alphaColors };
 };
@@ -1680,3 +1748,3 @@ const defaultTones = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
 const texts = Object.keys(fontSizes).reduce((texts2, key) => {
-  texts2[key] = {fontSize: key, lineHeight: key};
+  texts2[key] = { fontSize: key, lineHeight: key };
   return texts2;
@@ -1858,124 +1926,120 @@ }, {});
 
-const createPreflight = ({
-  createGlobalStyle
-}) => {
-  return createGlobalStyle`
-    /*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
-    *,::after,::before{box-sizing:border-box}:root{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}hr{height:0;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}
+const getPreflightStyles = (theme) => `
+/*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
+*,::after,::before{box-sizing:border-box}:root{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}hr{height:0;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}
 
-    /* Role button pointer */
-    [role=button], button {
-      cursor: pointer;
-    }
+/* Role button pointer */
+[role=button], button {
+  cursor: pointer;
+}
 
-    /* Remove default margins */
-    blockquote,
-    dl,
-    dd,
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6,
-    hr,
-    figure,
-    p,
-    pre {
-      margin: 0;
-    }
+/* Remove default margins */
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
 
-    /* Remove headings styles */
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      font-size: inherit;
-      font-weight: inherit;
-    }
+/* Remove headings styles */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
 
-    /* Unstyle lists */
-    ol,
-    ul {
-      list-style: none;
-      margin: 0;
-      padding: 0;
-    }
+/* Unstyle lists */
+ol,
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
 
-    /* Image are block-level */
-    img,
-    svg,
-    video,
-    canvas,
-    audio,
-    iframe,
-    embed,
-    object {
-      display: block;
-      vertical-align: middle;
-    }
+/* Image are block-level */
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  vertical-align: middle;
+}
 
-    /* Reset border styles */
-    *,
-    ::before,
-    ::after {
-      border-width: 0;
-      border-style: solid;
-      border-color: ${th.color("default-border-color", "currentColor")};
-    }
+/* Reset border styles */
+*,
+::before,
+::after {
+  border-width: 0;
+  border-style: solid;
+  border-color: ${th.color("default-border-color", "currentColor")({ theme })};
+}
 
-    * {
-      --x-ring-color: ${th.color("default-ring-color", "rgba(59,130,246,0.5)")};
-    }
+* {
+  --x-ring-color: ${th.color("default-ring-color", "rgba(59,130,246,0.5)")({ theme })};
+}
 
-    /* Default outline on buttons */
-    button:focus {
-      outline: 1px dotted;
-      outline: 5px auto -webkit-focus-ring-color;
-    }
+/* Default outline on buttons */
+button:focus {
+  outline: 1px dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+}
 
-    // Animations
-    @keyframes x-spin {
-      from {
-        transform: rotate(0deg);
-      }
-      to {
-        transform: rotate(360deg);
-      }
-    }
+// Animations
+@keyframes x-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 
-    @keyframes x-ping {
-      0% {
-        transform: scale(1);
-        opacity: 1;
-      }
-      75%, 100% {
-        transform: scale(2);
-        opacity: 0;
-      }
-    }
+@keyframes x-ping {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
 
-    @keyframes x-pulse {
-      0%, 100% {
-        opacity: 1;
-      }
-      50% {
-        opacity: .5;
-      }
-    }
+@keyframes x-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: .5;
+  }
+}
 
-    @keyframes x-bounce {
-      0%, 100% {
-        transform: translateY(-25%);
-        animationTimingFunction: cubic-bezier(0.8, 0, 1, 1);
-      }
-      50% {
-        transform: translateY(0);
-        animationTimingFunction: cubic-bezier(0, 0, 0.2, 1);
-      }
-    }
-  `;
-};
+@keyframes x-bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animationTimingFunction: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: translateY(0);
+    animationTimingFunction: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+`;
 
@@ -1999,2 +2063,4 @@ Object.defineProperty(exports, 'ITheme', {
 exports.animation = animation;
+exports.animationDuration = animationDuration;
+exports.animationTimingFunction = animationTimingFunction;
 exports.animations = animations;
@@ -2040,3 +2106,2 @@ exports.appearance = appearance;
 exports.container = container;
-exports.createPreflight = createPreflight;
 exports.createStyleGenerator = createStyleGenerator;
@@ -2087,2 +2152,3 @@ exports.cursor = cursor;
 exports.getPercent = getPercent;
+exports.getPreflightStyles = getPreflightStyles;
 exports.getPx = getPx;
@@ -2131,2 +2197,3 @@ exports.getRadius = getRadius;
 exports.marginTop = marginTop;
+exports.maskSize = maskSize;
 exports.maxHeight = maxHeight;
@@ -2133,0 +2200,0 @@ exports.maxWidth = maxWidth;

package.json

 {
   "name": "@xstyled/system",
   "description": "xstyled system utilities.",
-  "version": "3.0.0-beta.0",
+  "version": "3.0.0-beta.1",
   "keywords": [
@@ -34,6 +34,6 @@ "emotion",
   "dependencies": {
-    "@xstyled/util": "^3.0.0-beta.0",
+    "@xstyled/util": "^3.0.0-beta.1",
     "csstype": "^3.0.8"
   },
-  "gitHead": "9ef8a37adac6d421956b2ae1c00c0651d3d6e835"
+  "gitHead": "2ca7c7411e73dad6574a283d8d924faff7879648"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This 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 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

Improved metrics

Total package byte prevSize

464238

increased by2.63%

Lines of code

5700

increased by2.85%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• Updated@xstyled/util@^3.0.0-beta.1