@theme-ui/css - npm Package Compare versions

Comparing version 0.3.2-alpha.10 to 0.3.2

dist/index.d.ts

@@ -10,2 +10,4 @@ import { CSSObject, ThemeUIStyleObject, Theme } from './types';
     paddingY: string[];
+    scrollPaddingX: string[];
+    scrollPaddingY: string[];
     size: string[];
@@ -46,2 +48,9 @@ };
     readonly paddingInlineStart: "space";
+    readonly scrollPadding: "space";
+    readonly scrollPaddingTop: "space";
+    readonly scrollPaddingRight: "space";
+    readonly scrollPaddingBottom: "space";
+    readonly scrollPaddingLeft: "space";
+    readonly scrollPaddingX: "space";
+    readonly scrollPaddingY: "space";
     readonly inset: "space";
@@ -48,0 +57,0 @@ readonly insetBlock: "space";

dist/index.esm.js

@@ -1,20 +0,2 @@
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-var get = function get(obj, key, def, p, undef) {
+var get = function (obj, key, def, p, undef) {
   key = key && key.split ? key.split('.') : [key];
@@ -28,5 +10,3 @@
 };
-var defaultBreakpoints = [40, 52, 64].map(function (n) {
-  return n + 'em';
-});
+var defaultBreakpoints = [40, 52, 64].map(function (n) { return n + 'em'; });
 var defaultTheme = {
@@ -136,3 +116,3 @@ space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
 
-var positiveOrNegative = function positiveOrNegative(scale, value) {
+var positiveOrNegative = function (scale, value) {
   if (typeof value !== 'number' || value >= 0) {
@@ -144,3 +124,3 @@ return get(scale, value, value);
   var n = get(scale, absolute, absolute);
-  if (typeof n === 'string') return '-' + n;
+  if (typeof n === 'string') { return '-' + n; }
   return n * -1;
@@ -150,91 +130,85 @@ };
 var transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'top', 'bottom', 'left', 'right'].reduce(function (acc, curr) {
-  var _extends2;
+  var obj;
 
-  return _extends({}, acc, (_extends2 = {}, _extends2[curr] = positiveOrNegative, _extends2));
+  return (Object.assign({}, acc,
+  ( obj = {}, obj[curr] = positiveOrNegative, obj )));
 }, {});
 
-var responsive = function responsive(styles) {
-  return function (theme) {
-    var next = {};
-    var breakpoints = get(theme, 'breakpoints', defaultBreakpoints);
-    var mediaQueries = [null].concat(breakpoints.map(function (n) {
-      return "@media screen and (min-width: " + n + ")";
-    }));
+var responsive = function (styles) { return function (theme) {
+  var next = {};
+  var breakpoints = get(theme, 'breakpoints', defaultBreakpoints);
+  var mediaQueries = [null ].concat( breakpoints.map(function (n) { return ("@media screen and (min-width: " + n + ")"); }));
 
-    for (var key in styles) {
-      var value = typeof styles[key] === 'function' ? styles[key](theme) : styles[key];
-      if (value == null) continue;
+  for (var key in styles) {
+    var value = typeof styles[key] === 'function' ? styles[key](theme) : styles[key];
+    if (value == null) { continue; }
 
-      if (!Array.isArray(value)) {
-        next[key] = value;
+    if (!Array.isArray(value)) {
+      next[key] = value;
+      continue;
+    }
+
+    for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
+      var media = mediaQueries[i];
+
+      if (!media) {
+        next[key] = value[i];
         continue;
       }
 
-      for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
-        var media = mediaQueries[i];
-
-        if (!media) {
-          next[key] = value[i];
-          continue;
-        }
-
-        next[media] = next[media] || {};
-        if (value[i] == null) continue;
-        next[media][key] = value[i];
-      }
+      next[media] = next[media] || {};
+      if (value[i] == null) { continue; }
+      next[media][key] = value[i];
     }
+  }
 
-    return next;
-  };
-};
+  return next;
+}; };
 
-var css = function css(args) {
-  return function (props) {
-    if (props === void 0) {
-      props = {};
-    }
+var css = function (args) { return function (props) {
+  if ( props === void 0 ) props = {};
 
-    var theme = _extends({}, defaultTheme, props.theme || props);
+  var theme = Object.assign({}, defaultTheme,
+    (props.theme || props));
+  var result = {};
+  var obj = typeof args === 'function' ? args(theme) : args;
+  var styles = responsive(obj)(theme);
 
-    var result = {};
-    var obj = typeof args === 'function' ? args(theme) : args;
-    var styles = responsive(obj)(theme);
+  for (var key in styles) {
+    var x = styles[key];
+    var val = typeof x === 'function' ? x(theme) : x;
 
-    for (var key in styles) {
-      var x = styles[key];
-      var val = typeof x === 'function' ? x(theme) : x;
+    if (key === 'variant') {
+      var variant = css(get(theme, val))(theme);
+      result = Object.assign({}, result,
+        variant);
+      continue;
+    }
 
-      if (key === 'variant') {
-        var variant = css(get(theme, val))(theme);
-        result = _extends({}, result, variant);
-        continue;
-      }
+    if (val && typeof val === 'object') {
+      result[key] = css(val)(theme);
+      continue;
+    }
 
-      if (val && typeof val === 'object') {
-        result[key] = css(val)(theme);
-        continue;
-      }
+    var prop = get(aliases, key, key);
+    var scaleName = get(scales, prop);
+    var scale = get(theme, scaleName, get(theme, prop, {}));
+    var transform = get(transforms, prop, get);
+    var value = transform(scale, val, val);
 
-      var prop = get(aliases, key, key);
-      var scaleName = get(scales, prop);
-      var scale = get(theme, scaleName, get(theme, prop, {}));
-      var transform = get(transforms, prop, get);
-      var value = transform(scale, val, val);
+    if (multiples[prop]) {
+      var dirs = multiples[prop];
 
-      if (multiples[prop]) {
-        var dirs = multiples[prop];
-
-        for (var i = 0; i < dirs.length; i++) {
-          result[dirs[i]] = value;
-        }
-      } else {
-        result[prop] = value;
+      for (var i = 0; i < dirs.length; i++) {
+        result[dirs[i]] = value;
       }
+    } else {
+      result[prop] = value;
     }
+  }
 
-    return result;
-  };
-};
+  return result;
+}; };
 
-export { css, get };
+export { get, css };
 //# sourceMappingURL=index.esm.js.map

dist/index.js

@@ -1,20 +0,2 @@
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-var get = function get(obj, key, def, p, undef) {
+var get = function (obj, key, def, p, undef) {
   key = key && key.split ? key.split('.') : [key];
@@ -28,5 +10,3 @@
 };
-var defaultBreakpoints = [40, 52, 64].map(function (n) {
-  return n + 'em';
-});
+var defaultBreakpoints = [40, 52, 64].map(function (n) { return n + 'em'; });
 var defaultTheme = {
@@ -136,3 +116,3 @@ space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
 
-var positiveOrNegative = function positiveOrNegative(scale, value) {
+var positiveOrNegative = function (scale, value) {
   if (typeof value !== 'number' || value >= 0) {
@@ -144,3 +124,3 @@ return get(scale, value, value);
   var n = get(scale, absolute, absolute);
-  if (typeof n === 'string') return '-' + n;
+  if (typeof n === 'string') { return '-' + n; }
   return n * -1;
@@ -150,92 +130,86 @@ };
 var transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'top', 'bottom', 'left', 'right'].reduce(function (acc, curr) {
-  var _extends2;
+  var obj;
 
-  return _extends({}, acc, (_extends2 = {}, _extends2[curr] = positiveOrNegative, _extends2));
+  return (Object.assign({}, acc,
+  ( obj = {}, obj[curr] = positiveOrNegative, obj )));
 }, {});
 
-var responsive = function responsive(styles) {
-  return function (theme) {
-    var next = {};
-    var breakpoints = get(theme, 'breakpoints', defaultBreakpoints);
-    var mediaQueries = [null].concat(breakpoints.map(function (n) {
-      return "@media screen and (min-width: " + n + ")";
-    }));
+var responsive = function (styles) { return function (theme) {
+  var next = {};
+  var breakpoints = get(theme, 'breakpoints', defaultBreakpoints);
+  var mediaQueries = [null ].concat( breakpoints.map(function (n) { return ("@media screen and (min-width: " + n + ")"); }));
 
-    for (var key in styles) {
-      var value = typeof styles[key] === 'function' ? styles[key](theme) : styles[key];
-      if (value == null) continue;
+  for (var key in styles) {
+    var value = typeof styles[key] === 'function' ? styles[key](theme) : styles[key];
+    if (value == null) { continue; }
 
-      if (!Array.isArray(value)) {
-        next[key] = value;
+    if (!Array.isArray(value)) {
+      next[key] = value;
+      continue;
+    }
+
+    for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
+      var media = mediaQueries[i];
+
+      if (!media) {
+        next[key] = value[i];
         continue;
       }
 
-      for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
-        var media = mediaQueries[i];
-
-        if (!media) {
-          next[key] = value[i];
-          continue;
-        }
-
-        next[media] = next[media] || {};
-        if (value[i] == null) continue;
-        next[media][key] = value[i];
-      }
+      next[media] = next[media] || {};
+      if (value[i] == null) { continue; }
+      next[media][key] = value[i];
     }
+  }
 
-    return next;
-  };
-};
+  return next;
+}; };
 
-var css = function css(args) {
-  return function (props) {
-    if (props === void 0) {
-      props = {};
-    }
+var css = function (args) { return function (props) {
+  if ( props === void 0 ) props = {};
 
-    var theme = _extends({}, defaultTheme, props.theme || props);
+  var theme = Object.assign({}, defaultTheme,
+    (props.theme || props));
+  var result = {};
+  var obj = typeof args === 'function' ? args(theme) : args;
+  var styles = responsive(obj)(theme);
 
-    var result = {};
-    var obj = typeof args === 'function' ? args(theme) : args;
-    var styles = responsive(obj)(theme);
+  for (var key in styles) {
+    var x = styles[key];
+    var val = typeof x === 'function' ? x(theme) : x;
 
-    for (var key in styles) {
-      var x = styles[key];
-      var val = typeof x === 'function' ? x(theme) : x;
+    if (key === 'variant') {
+      var variant = css(get(theme, val))(theme);
+      result = Object.assign({}, result,
+        variant);
+      continue;
+    }
 
-      if (key === 'variant') {
-        var variant = css(get(theme, val))(theme);
-        result = _extends({}, result, variant);
-        continue;
-      }
+    if (val && typeof val === 'object') {
+      result[key] = css(val)(theme);
+      continue;
+    }
 
-      if (val && typeof val === 'object') {
-        result[key] = css(val)(theme);
-        continue;
-      }
+    var prop = get(aliases, key, key);
+    var scaleName = get(scales, prop);
+    var scale = get(theme, scaleName, get(theme, prop, {}));
+    var transform = get(transforms, prop, get);
+    var value = transform(scale, val, val);
 
-      var prop = get(aliases, key, key);
-      var scaleName = get(scales, prop);
-      var scale = get(theme, scaleName, get(theme, prop, {}));
-      var transform = get(transforms, prop, get);
-      var value = transform(scale, val, val);
+    if (multiples[prop]) {
+      var dirs = multiples[prop];
 
-      if (multiples[prop]) {
-        var dirs = multiples[prop];
-
-        for (var i = 0; i < dirs.length; i++) {
-          result[dirs[i]] = value;
-        }
-      } else {
-        result[prop] = value;
+      for (var i = 0; i < dirs.length; i++) {
+        result[dirs[i]] = value;
       }
+    } else {
+      result[prop] = value;
     }
+  }
 
-    return result;
-  };
-};
+  return result;
+}; };
 
+exports.get = get;
 exports.css = css;
-exports.get = get;
 //# sourceMappingURL=index.js.map

dist/index.modern.js

@@ -1,28 +0,10 @@
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+function get(obj, key, def, p, undef) {
+  const path = key && typeof key === 'string' ? key.split('.') : [key];
 
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-const get = (obj, key, def, p, undef) => {
-  key = key && key.split ? key.split('.') : [key];
-
-  for (p = 0; p < key.length; p++) {
-    obj = obj ? obj[key[p]] : undef;
+  for (p = 0; p < path.length; p++) {
+    obj = obj ? obj[path[p]] : undef;
   }
 
   return obj === undef ? def : obj;
-};
+}
 const defaultBreakpoints = [40, 52, 64].map(n => n + 'em');
@@ -55,2 +37,4 @@ const defaultTheme = {
   paddingY: ['paddingTop', 'paddingBottom'],
+  scrollPaddingX: ['scrollPaddingLeft', 'scrollPaddingRight'],
+  scrollPaddingY: ['scrollPaddingTop', 'scrollPaddingBottom'],
   size: ['width', 'height']
@@ -64,2 +48,3 @@ };
   columnRuleColor: 'colors',
+  opacity: 'opacities',
   margin: 'space',
@@ -72,2 +57,8 @@ marginTop: 'space',
   marginY: 'space',
+  marginBlock: 'space',
+  marginBlockEnd: 'space',
+  marginBlockStart: 'space',
+  marginInline: 'space',
+  marginInlineEnd: 'space',
+  marginInlineStart: 'space',
   padding: 'space',
@@ -80,2 +71,22 @@ paddingTop: 'space',
   paddingY: 'space',
+  paddingBlock: 'space',
+  paddingBlockEnd: 'space',
+  paddingBlockStart: 'space',
+  paddingInline: 'space',
+  paddingInlineEnd: 'space',
+  paddingInlineStart: 'space',
+  scrollPadding: 'space',
+  scrollPaddingTop: 'space',
+  scrollPaddingRight: 'space',
+  scrollPaddingBottom: 'space',
+  scrollPaddingLeft: 'space',
+  scrollPaddingX: 'space',
+  scrollPaddingY: 'space',
+  inset: 'space',
+  insetBlock: 'space',
+  insetBlockEnd: 'space',
+  insetBlockStart: 'space',
+  insetInline: 'space',
+  insetInlineEnd: 'space',
+  insetInlineStart: 'space',
   top: 'space',
@@ -120,2 +131,24 @@ right: 'space',
   borderRightStyle: 'borderStyles',
+  borderBlock: 'borders',
+  borderBlockEnd: 'borders',
+  borderBlockEndStyle: 'borderStyles',
+  borderBlockEndWidth: 'borderWidths',
+  borderBlockStart: 'borders',
+  borderBlockStartStyle: 'borderStyles',
+  borderBlockStartWidth: 'borderWidths',
+  borderBlockStyle: 'borderStyles',
+  borderBlockWidth: 'borderWidths',
+  borderEndEndRadius: 'radii',
+  borderEndStartRadius: 'radii',
+  borderInline: 'borders',
+  borderInlineEnd: 'borders',
+  borderInlineEndStyle: 'borderStyles',
+  borderInlineEndWidth: 'borderWidths',
+  borderInlineStart: 'borders',
+  borderInlineStartStyle: 'borderStyles',
+  borderInlineStartWidth: 'borderWidths',
+  borderInlineStyle: 'borderStyles',
+  borderInlineWidth: 'borderWidths',
+  borderStartEndRadius: 'radii',
+  borderStartStartRadius: 'radii',
   outlineColor: 'colors',
@@ -133,2 +166,8 @@ boxShadow: 'shadows',
   size: 'sizes',
+  blockSize: 'sizes',
+  inlineSize: 'sizes',
+  maxBlockSize: 'sizes',
+  maxInlineSize: 'sizes',
+  minBlockSize: 'sizes',
+  minInlineSize: 'sizes',
   // svg
@@ -141,2 +180,10 @@ fill: 'colors',
   if (typeof value !== 'number' || value >= 0) {
+    if (typeof value === 'string' && value.startsWith('-')) {
+      const valueWithoutMinus = value.substring(1);
+
+      const _n = get(scale, valueWithoutMinus, valueWithoutMinus);
+
+      return `-${_n}`;
+    }
+
     return get(scale, value, value);
@@ -148,6 +195,6 @@ }
   if (typeof n === 'string') return '-' + n;
-  return n * -1;
+  return Number(n) * -1;
 };
 
-const transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'top', 'bottom', 'left', 'right'].reduce((acc, curr) => _extends({}, acc, {
+const transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginBlock', 'marginBlockEnd', 'marginBlockStart', 'marginInline', 'marginInlineEnd', 'marginInlineStart', 'top', 'bottom', 'left', 'right'].reduce((acc, curr) => ({ ...acc,
   [curr]: positiveOrNegative
@@ -158,7 +205,13 @@ }), {});
   const next = {};
-  const breakpoints = get(theme, 'breakpoints', defaultBreakpoints);
+  const breakpoints = theme && theme.breakpoints || defaultBreakpoints;
   const mediaQueries = [null, ...breakpoints.map(n => `@media screen and (min-width: ${n})`)];
 
-  for (const key in styles) {
-    const value = typeof styles[key] === 'function' ? styles[key](theme) : styles[key];
+  for (const k in styles) {
+    const key = k;
+    let value = styles[key];
+
+    if (typeof value === 'function') {
+      value = value(theme || {});
+    }
+
     if (value == null) continue;
@@ -188,5 +241,6 @@
 
-const css = args => (props = {}) => {
-  const theme = _extends({}, defaultTheme, props.theme || props);
-
+const css = (args = {}) => (props = {}) => {
+  const theme = { ...defaultTheme,
+    ...('theme' in props ? props.theme : props)
+  };
   let result = {};
@@ -202,3 +256,5 @@ const obj = typeof args === 'function' ? args(theme) : args;
       const variant = css(get(theme, val))(theme);
-      result = _extends({}, result, variant);
+      result = { ...result,
+        ...variant
+      };
       continue;
@@ -208,2 +264,3 @@ }
     if (val && typeof val === 'object') {
+      // TODO: val can also be an array here. Is this a bug? Can it be reproduced?
       result[key] = css(val)(theme);
@@ -213,4 +270,4 @@ continue;
 
-    const prop = get(aliases, key, key);
-    const scaleName = get(scales, prop);
+    const prop = key in aliases ? aliases[key] : key;
+    const scaleName = prop in scales ? scales[prop] : undefined;
     const scale = get(theme, scaleName, get(theme, prop, {}));
@@ -220,3 +277,3 @@ const transform = get(transforms, prop, get);
 
-    if (multiples[prop]) {
+    if (prop in multiples) {
       const dirs = multiples[prop];
@@ -235,3 +292,3 @@
 
-export { css, get };
+export { css, defaultBreakpoints, get, multiples, scales };
 //# sourceMappingURL=index.modern.js.map

dist/index.umd.js

 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
   typeof define === 'function' && define.amd ? define(['exports'], factory) :
-  (global = global || self, factory(global.css = {}));
+  (factory((global.css = {})));
 }(this, (function (exports) {
-  function _extends() {
-    _extends = Object.assign || function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
-        }
-      }
-
-      return target;
-    };
-
-    return _extends.apply(this, arguments);
-  }
-
-  var get = function get(obj, key, def, p, undef) {
+  var get = function (obj, key, def, p, undef) {
     key = key && key.split ? key.split('.') : [key];
@@ -33,5 +15,3 @@
   };
-  var defaultBreakpoints = [40, 52, 64].map(function (n) {
-    return n + 'em';
-  });
+  var defaultBreakpoints = [40, 52, 64].map(function (n) { return n + 'em'; });
   var defaultTheme = {
@@ -141,3 +121,3 @@ space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
 
-  var positiveOrNegative = function positiveOrNegative(scale, value) {
+  var positiveOrNegative = function (scale, value) {
     if (typeof value !== 'number' || value >= 0) {
@@ -149,3 +129,3 @@ return get(scale, value, value);
     var n = get(scale, absolute, absolute);
-    if (typeof n === 'string') return '-' + n;
+    if (typeof n === 'string') { return '-' + n; }
     return n * -1;
@@ -155,94 +135,88 @@ };
   var transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'top', 'bottom', 'left', 'right'].reduce(function (acc, curr) {
-    var _extends2;
+    var obj;
 
-    return _extends({}, acc, (_extends2 = {}, _extends2[curr] = positiveOrNegative, _extends2));
+    return (Object.assign({}, acc,
+    ( obj = {}, obj[curr] = positiveOrNegative, obj )));
   }, {});
 
-  var responsive = function responsive(styles) {
-    return function (theme) {
-      var next = {};
-      var breakpoints = get(theme, 'breakpoints', defaultBreakpoints);
-      var mediaQueries = [null].concat(breakpoints.map(function (n) {
-        return "@media screen and (min-width: " + n + ")";
-      }));
+  var responsive = function (styles) { return function (theme) {
+    var next = {};
+    var breakpoints = get(theme, 'breakpoints', defaultBreakpoints);
+    var mediaQueries = [null ].concat( breakpoints.map(function (n) { return ("@media screen and (min-width: " + n + ")"); }));
 
-      for (var key in styles) {
-        var value = typeof styles[key] === 'function' ? styles[key](theme) : styles[key];
-        if (value == null) continue;
+    for (var key in styles) {
+      var value = typeof styles[key] === 'function' ? styles[key](theme) : styles[key];
+      if (value == null) { continue; }
 
-        if (!Array.isArray(value)) {
-          next[key] = value;
+      if (!Array.isArray(value)) {
+        next[key] = value;
+        continue;
+      }
+
+      for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
+        var media = mediaQueries[i];
+
+        if (!media) {
+          next[key] = value[i];
           continue;
         }
 
-        for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
-          var media = mediaQueries[i];
-
-          if (!media) {
-            next[key] = value[i];
-            continue;
-          }
-
-          next[media] = next[media] || {};
-          if (value[i] == null) continue;
-          next[media][key] = value[i];
-        }
+        next[media] = next[media] || {};
+        if (value[i] == null) { continue; }
+        next[media][key] = value[i];
       }
+    }
 
-      return next;
-    };
-  };
+    return next;
+  }; };
 
-  var css = function css(args) {
-    return function (props) {
-      if (props === void 0) {
-        props = {};
-      }
+  var css = function (args) { return function (props) {
+    if ( props === void 0 ) props = {};
 
-      var theme = _extends({}, defaultTheme, props.theme || props);
+    var theme = Object.assign({}, defaultTheme,
+      (props.theme || props));
+    var result = {};
+    var obj = typeof args === 'function' ? args(theme) : args;
+    var styles = responsive(obj)(theme);
 
-      var result = {};
-      var obj = typeof args === 'function' ? args(theme) : args;
-      var styles = responsive(obj)(theme);
+    for (var key in styles) {
+      var x = styles[key];
+      var val = typeof x === 'function' ? x(theme) : x;
 
-      for (var key in styles) {
-        var x = styles[key];
-        var val = typeof x === 'function' ? x(theme) : x;
+      if (key === 'variant') {
+        var variant = css(get(theme, val))(theme);
+        result = Object.assign({}, result,
+          variant);
+        continue;
+      }
 
-        if (key === 'variant') {
-          var variant = css(get(theme, val))(theme);
-          result = _extends({}, result, variant);
-          continue;
-        }
+      if (val && typeof val === 'object') {
+        result[key] = css(val)(theme);
+        continue;
+      }
 
-        if (val && typeof val === 'object') {
-          result[key] = css(val)(theme);
-          continue;
-        }
+      var prop = get(aliases, key, key);
+      var scaleName = get(scales, prop);
+      var scale = get(theme, scaleName, get(theme, prop, {}));
+      var transform = get(transforms, prop, get);
+      var value = transform(scale, val, val);
 
-        var prop = get(aliases, key, key);
-        var scaleName = get(scales, prop);
-        var scale = get(theme, scaleName, get(theme, prop, {}));
-        var transform = get(transforms, prop, get);
-        var value = transform(scale, val, val);
+      if (multiples[prop]) {
+        var dirs = multiples[prop];
 
-        if (multiples[prop]) {
-          var dirs = multiples[prop];
-
-          for (var i = 0; i < dirs.length; i++) {
-            result[dirs[i]] = value;
-          }
-        } else {
-          result[prop] = value;
+        for (var i = 0; i < dirs.length; i++) {
+          result[dirs[i]] = value;
         }
+      } else {
+        result[prop] = value;
       }
+    }
 
-      return result;
-    };
-  };
+    return result;
+  }; };
 
+  exports.get = get;
   exports.css = css;
-  exports.get = get;
 
 })));
 //# sourceMappingURL=index.umd.js.map

dist/types.d.ts

@@ -291,2 +291,16 @@ import * as CSS from 'csstype';
      */
+    /**
+    * The **`scrollPaddingX`** is shorthand property for CSS properties **`scroll-padding-left`** and **`scroll-padding-right`**. They set the width of the scroll padding area on the left and right side of an element.
+    *
+    * @see https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-left
+    * @see https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-right
+    */
+    scrollPaddingX?: StandardCSSProperties['scrollPaddingLeft'];
+    /**
+       * The **`scrollPaddingY`** is shorthand property for CSS properties **`scroll-padding-top`** and **`scroll-padding-bottom`**. They set the width of the scroll padding area on the top and bottom side of an element.
+       *
+       * @see https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top
+       * @see https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-bottom
+       */
+    scrollPaddingY?: StandardCSSProperties['scrollPaddingTop'];
     size?: StandardCSSProperties['width'];
@@ -293,0 +307,0 @@ }

package.json

 {
   "name": "@theme-ui/css",
-  "version": "0.3.2-alpha.10+80ad9af6",
+  "version": "0.3.2",
   "main": "dist/index.js",
@@ -16,3 +16,3 @@ "module": "dist/index.esm.js",
   },
-  "gitHead": "80ad9af6483a680fb703d5ebd7b8564d06e7d6c7"
+  "gitHead": "3f78f13ae0c62105fb81bdb7792c6e28cf3521b5"
 }

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

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

195011

increased by2.5%

Lines of code

3680

increased by0.49%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes