@theme-ui/css - npm Package Compare versions

Comparing version 0.15.7 to 0.16.0-develop.4

dist/declarations/src/index.d.ts

@@ -185,5 +185,5 @@ import type { CSSObject, ThemeUIStyleObject, Theme } from './types';
 };
-declare type CssPropsArgument = {
+type CssPropsArgument = {
     theme: Theme;
 } | Theme;
 export declare const css: (args?: ThemeUIStyleObject) => (props?: CssPropsArgument) => CSSObject;

dist/declarations/src/types.d.ts

 import * as CSS from 'csstype';
 import type { ThemeUIConfig } from './options';
 export type { CSSObject } from '@emotion/react';
-declare type StandardCSSProperties = CSS.Properties<number | string>;
+type StandardCSSProperties = CSS.Properties<number | string>;
 /**
  * Style properties with value of undefined, null or false are ignored.
  */
-export declare type ThemeUIEmpty = undefined | null | false;
+export type ThemeUIEmpty = undefined | null | false;
 /**
@@ -16,3 +16,3 @@ * The `css` function accepts arrays as values for mobile-first responsive styles.
  */
-export declare type ResponsiveStyleValue<T> = T | ThemeUIEmpty | Array<T | ThemeUIEmpty>;
+export type ResponsiveStyleValue<T> = T | ThemeUIEmpty | Array<T | ThemeUIEmpty>;
 /**
@@ -27,3 +27,3 @@ * All non-vendor-prefixed CSS properties. (Allow `number` to support CSS-in-JS libs,
  */
-export declare type CSSPseudoSelectorProps = {
+export type CSSPseudoSelectorProps = {
     [K in CSS.Pseudos]?: ThemeUIStyleObject;
@@ -419,5 +419,5 @@ };
 }
-declare type ThemeUIStyleValue<T> = ResponsiveStyleValue<T | ObjectWithDefault<T> | T[]>;
-export declare type StylePropertyValue<T> = ThemeUIStyleValue<Exclude<T, undefined>> | ((theme: Theme) => ThemeUIStyleValue<Exclude<T, undefined>> | undefined) | ThemeUIStyleObject | ThemeUIEmpty;
-export declare type ThemeUICSSProperties = {
+type ThemeUIStyleValue<T> = ResponsiveStyleValue<T | ObjectWithDefault<T> | T[]>;
+export type StylePropertyValue<T> = ThemeUIStyleValue<Exclude<T, undefined>> | ((theme: Theme) => ThemeUIStyleValue<Exclude<T, undefined>> | undefined) | ThemeUIStyleObject | ThemeUIEmpty;
+export type ThemeUICSSProperties = {
     [K in keyof ThemeUIExtendedCSSProperties]: StylePropertyValue<ThemeUIExtendedCSSProperties[K]>;
@@ -471,4 +471,4 @@ };
  */
-export declare type ThemeUIStyleObject = ThemeUICSSObject | ThemeDerivedStyles;
-export declare type TLengthStyledSystem = string | 0 | number;
+export type ThemeUIStyleObject = ThemeUICSSObject | ThemeDerivedStyles;
+export type TLengthStyledSystem = string | 0 | number;
 export interface ScaleDict<T> {
@@ -500,5 +500,5 @@ [K: string]: T | T[] | NestedScaleDict<T> | undefined;
  */
-export declare type Scale<T> = T[] | ScaleDict<T>;
-export declare type NestedScale<T> = T[] | NestedScaleDict<T>;
-export declare type ColorOrNestedColorScale = CSS.Property.Color | NestedScale<CSS.Property.Color>;
+export type Scale<T> = T[] | ScaleDict<T>;
+export type NestedScale<T> = T[] | NestedScaleDict<T>;
+export type ColorOrNestedColorScale = CSS.Property.Color | NestedScale<CSS.Property.Color>;
 /**
@@ -539,3 +539,3 @@ * Color modes can be used to create a user-configurable dark mode
 }
-export declare type ColorModesScale = ColorMode & {
+export type ColorModesScale = ColorMode & {
     /**
@@ -542,0 +542,0 @@ * Nested color modes can provide overrides when used in conjunction with

dist/theme-ui-css.cjs.d.ts

 export * from "./declarations/src/index";
+//# sourceMappingURL=theme-ui-css.cjs.d.ts.map

dist/theme-ui-css.cjs.dev.js

@@ -5,19 +5,2 @@ 'use strict';
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : 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);
-}
-
 /**
@@ -34,8 +17,7 @@ * Allows for nested scales with shorthand values
  */
-
-var THEME_UI_DEFAULT_KEY = '__default';
-
-var hasDefault = function hasDefault(x) {
+const THEME_UI_DEFAULT_KEY = '__default';
+const hasDefault = x => {
   return typeof x === 'object' && x !== null && THEME_UI_DEFAULT_KEY in x;
 };
+
 /**
@@ -50,25 +32,22 @@ * Extracts value under path from a deeply nested object.
  */
-
-
 function get(obj, path, fallback, p, undef) {
-  var pathArray = path && typeof path === 'string' ? path.split('.') : [path];
-
+  const pathArray = path && typeof path === 'string' ? path.split('.') : [path];
   for (p = 0; p < pathArray.length; p++) {
     obj = obj ? obj[pathArray[p]] : undef;
   }
-
   if (obj === undef) return fallback;
   return hasDefault(obj) ? obj[THEME_UI_DEFAULT_KEY] : obj;
 }
-var getObjectWithVariants = function getObjectWithVariants(obj, theme) {
+const getObjectWithVariants = (obj, theme) => {
   if (obj && obj['variant']) {
-    var result = {};
-
-    for (var key in obj) {
-      var x = obj[key];
-
+    let result = {};
+    for (const key in obj) {
+      const x = obj[key];
       if (key === 'variant') {
-        var val = typeof x === 'function' ? x(theme) : x;
-        var variant = getObjectWithVariants(get(theme, val), theme);
-        result = _extends({}, result, variant);
+        const val = typeof x === 'function' ? x(theme) : x;
+        const variant = getObjectWithVariants(get(theme, val), theme);
+        result = {
+          ...result,
+          ...variant
+        };
       } else {
@@ -78,16 +57,12 @@ result[key] = x;
     }
-
     return result;
   }
-
   return obj;
 };
-var defaultBreakpoints = [40, 52, 64].map(function (n) {
-  return n + 'em';
-});
-var defaultTheme = {
+const defaultBreakpoints = [40, 52, 64].map(n => n + 'em');
+const defaultTheme = {
   space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
   fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
 };
-var aliases = {
+const aliases = {
   bg: 'backgroundColor',
@@ -109,3 +84,3 @@ m: 'margin',
 };
-var multiples = {
+const multiples = {
   marginX: ['marginLeft', 'marginRight'],
@@ -121,3 +96,3 @@ marginY: ['marginTop', 'marginBottom'],
 };
-var scales = {
+const scales = {
   color: 'colors',
@@ -270,129 +245,94 @@ background: 'colors',
 };
-
-var positiveOrNegative = function positiveOrNegative(scale, value) {
+const positiveOrNegative = (scale, value) => {
   if (typeof value !== 'number' || value >= 0) {
     if (typeof value === 'string' && value.startsWith('-')) {
-      var valueWithoutMinus = value.substring(1);
-
-      var _n = get(scale, valueWithoutMinus, valueWithoutMinus);
-
-      if (typeof _n === 'number') {
-        return _n * -1;
+      const valueWithoutMinus = value.substring(1);
+      const n = get(scale, valueWithoutMinus, valueWithoutMinus);
+      if (typeof n === 'number') {
+        return n * -1;
       }
-
-      return "-" + _n;
+      return `-${n}`;
     }
-
     return get(scale, value, value);
   }
-
-  var absolute = Math.abs(value);
-  var n = get(scale, absolute, absolute);
+  const absolute = Math.abs(value);
+  const n = get(scale, absolute, absolute);
   if (typeof n === 'string') return '-' + n;
   return Number(n) * -1;
 };
-
-var transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginBlock', 'marginBlockEnd', 'marginBlockStart', 'marginInline', 'marginInlineEnd', 'marginInlineStart', 'top', 'bottom', 'left', 'right'].reduce(function (acc, curr) {
-  var _extends2;
-
-  return _extends({}, acc, (_extends2 = {}, _extends2[curr] = positiveOrNegative, _extends2));
-}, {});
-
-var responsive = function responsive(styles) {
-  return function (theme) {
-    var next = {};
-    var breakpoints = theme && theme.breakpoints || defaultBreakpoints;
-    var mediaQueries = [null].concat(breakpoints.map(function (n) {
-      return n.includes('@media') ? n : "@media screen and (min-width: " + n + ")";
-    }));
-
-    for (var k in styles) {
-      var key = k;
-      var value = styles[key];
-
-      if (typeof value === 'function') {
-        value = value(theme || {});
-      }
-
-      if (value === false || value == null) {
+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
+}), {});
+const responsive = styles => theme => {
+  const next = {};
+  const breakpoints = theme && theme.breakpoints || defaultBreakpoints;
+  const mediaQueries = [null, ...breakpoints.map(n => n.includes('@media') ? n : `@media screen and (min-width: ${n})`)];
+  for (const k in styles) {
+    const key = k;
+    let value = styles[key];
+    if (typeof value === 'function') {
+      value = value(theme || {});
+    }
+    if (value === false || value == null) {
+      continue;
+    }
+    if (!Array.isArray(value)) {
+      next[key] = value;
+      continue;
+    }
+    for (let i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
+      const media = mediaQueries[i];
+      if (!media) {
+        next[key] = value[i];
         continue;
       }
-
-      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;
-        }
-
-        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;
+};
+const css = (args = {}) => (props = {}) => {
+  const theme = {
+    ...defaultTheme,
+    ...('theme' in props ? props.theme : props)
   };
-};
+  // insert variant props before responsive styles, so they can be merged
+  // we need to maintain order of the style props, so if a variant is place in the middle
+  // of other props, it will extends its props at that same location order.
 
-var css = function css(args) {
-  if (args === void 0) {
-    args = {};
-  }
-
-  return function (props) {
-    if (props === void 0) {
-      props = {};
-    }
-
-    var theme = _extends({}, defaultTheme, 'theme' in props ? props.theme : props); // insert variant props before responsive styles, so they can be merged
-    // we need to maintain order of the style props, so if a variant is place in the middle
-    // of other props, it will extends its props at that same location order.
-
-
-    var obj = getObjectWithVariants(typeof args === 'function' ? args(theme) : args, theme);
-    var styles = responsive(obj)(theme);
-    var result = {};
-
-    for (var key in styles) {
-      var x = styles[key];
-      var val = typeof x === 'function' ? x(theme) : x;
-
-      if (val && typeof val === 'object') {
-        if (hasDefault(val)) {
-          result[key] = val[THEME_UI_DEFAULT_KEY];
-          continue;
-        } // On type level, val can also be an array here,
-        // but we transform all arrays in `responsive` function.
-
-
-        result[key] = css(val)(theme);
+  const obj = getObjectWithVariants(typeof args === 'function' ? args(theme) : args, theme);
+  const styles = responsive(obj)(theme);
+  let result = {};
+  for (const key in styles) {
+    const x = styles[key];
+    const val = typeof x === 'function' ? x(theme) : x;
+    if (val && typeof val === 'object') {
+      if (hasDefault(val)) {
+        result[key] = val[THEME_UI_DEFAULT_KEY];
         continue;
       }
 
-      var prop = key in aliases ? aliases[key] : key;
-      var scaleName = prop in scales ? scales[prop] : undefined;
-      var scale = scaleName ? theme == null ? void 0 : theme[scaleName] : get(theme, prop, {});
-      var transform = get(transforms, prop, get);
-      var value = transform(scale, val, val);
-
-      if (prop in multiples) {
-        var dirs = multiples[prop];
-
-        for (var i = 0; i < dirs.length; i++) {
-          result[dirs[i]] = value;
-        }
-      } else {
-        result[prop] = value;
+      // On type level, val can also be an array here,
+      // but we transform all arrays in `responsive` function.
+      result[key] = css(val)(theme);
+      continue;
+    }
+    const prop = key in aliases ? aliases[key] : key;
+    const scaleName = prop in scales ? scales[prop] : undefined;
+    const scale = scaleName ? theme == null ? void 0 : theme[scaleName] : get(theme, prop, {});
+    const transform = get(transforms, prop, get);
+    const value = transform(scale, val, val);
+    if (prop in multiples) {
+      const dirs = multiples[prop];
+      for (let i = 0; i < dirs.length; i++) {
+        result[dirs[i]] = value;
       }
+    } else {
+      result[prop] = value;
     }
-
-    return result;
-  };
+  }
+  return result;
 };
@@ -399,0 +339,0 @@

dist/theme-ui-css.cjs.prod.js

@@ -5,19 +5,2 @@ 'use strict';
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : 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);
-}
-
 /**
@@ -34,8 +17,7 @@ * Allows for nested scales with shorthand values
  */
-
-var THEME_UI_DEFAULT_KEY = '__default';
-
-var hasDefault = function hasDefault(x) {
+const THEME_UI_DEFAULT_KEY = '__default';
+const hasDefault = x => {
   return typeof x === 'object' && x !== null && THEME_UI_DEFAULT_KEY in x;
 };
+
 /**
@@ -50,25 +32,22 @@ * Extracts value under path from a deeply nested object.
  */
-
-
 function get(obj, path, fallback, p, undef) {
-  var pathArray = path && typeof path === 'string' ? path.split('.') : [path];
-
+  const pathArray = path && typeof path === 'string' ? path.split('.') : [path];
   for (p = 0; p < pathArray.length; p++) {
     obj = obj ? obj[pathArray[p]] : undef;
   }
-
   if (obj === undef) return fallback;
   return hasDefault(obj) ? obj[THEME_UI_DEFAULT_KEY] : obj;
 }
-var getObjectWithVariants = function getObjectWithVariants(obj, theme) {
+const getObjectWithVariants = (obj, theme) => {
   if (obj && obj['variant']) {
-    var result = {};
-
-    for (var key in obj) {
-      var x = obj[key];
-
+    let result = {};
+    for (const key in obj) {
+      const x = obj[key];
       if (key === 'variant') {
-        var val = typeof x === 'function' ? x(theme) : x;
-        var variant = getObjectWithVariants(get(theme, val), theme);
-        result = _extends({}, result, variant);
+        const val = typeof x === 'function' ? x(theme) : x;
+        const variant = getObjectWithVariants(get(theme, val), theme);
+        result = {
+          ...result,
+          ...variant
+        };
       } else {
@@ -78,16 +57,12 @@ result[key] = x;
     }
-
     return result;
   }
-
   return obj;
 };
-var defaultBreakpoints = [40, 52, 64].map(function (n) {
-  return n + 'em';
-});
-var defaultTheme = {
+const defaultBreakpoints = [40, 52, 64].map(n => n + 'em');
+const defaultTheme = {
   space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
   fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
 };
-var aliases = {
+const aliases = {
   bg: 'backgroundColor',
@@ -109,3 +84,3 @@ m: 'margin',
 };
-var multiples = {
+const multiples = {
   marginX: ['marginLeft', 'marginRight'],
@@ -121,3 +96,3 @@ marginY: ['marginTop', 'marginBottom'],
 };
-var scales = {
+const scales = {
   color: 'colors',
@@ -270,129 +245,94 @@ background: 'colors',
 };
-
-var positiveOrNegative = function positiveOrNegative(scale, value) {
+const positiveOrNegative = (scale, value) => {
   if (typeof value !== 'number' || value >= 0) {
     if (typeof value === 'string' && value.startsWith('-')) {
-      var valueWithoutMinus = value.substring(1);
-
-      var _n = get(scale, valueWithoutMinus, valueWithoutMinus);
-
-      if (typeof _n === 'number') {
-        return _n * -1;
+      const valueWithoutMinus = value.substring(1);
+      const n = get(scale, valueWithoutMinus, valueWithoutMinus);
+      if (typeof n === 'number') {
+        return n * -1;
       }
-
-      return "-" + _n;
+      return `-${n}`;
     }
-
     return get(scale, value, value);
   }
-
-  var absolute = Math.abs(value);
-  var n = get(scale, absolute, absolute);
+  const absolute = Math.abs(value);
+  const n = get(scale, absolute, absolute);
   if (typeof n === 'string') return '-' + n;
   return Number(n) * -1;
 };
-
-var transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginBlock', 'marginBlockEnd', 'marginBlockStart', 'marginInline', 'marginInlineEnd', 'marginInlineStart', 'top', 'bottom', 'left', 'right'].reduce(function (acc, curr) {
-  var _extends2;
-
-  return _extends({}, acc, (_extends2 = {}, _extends2[curr] = positiveOrNegative, _extends2));
-}, {});
-
-var responsive = function responsive(styles) {
-  return function (theme) {
-    var next = {};
-    var breakpoints = theme && theme.breakpoints || defaultBreakpoints;
-    var mediaQueries = [null].concat(breakpoints.map(function (n) {
-      return n.includes('@media') ? n : "@media screen and (min-width: " + n + ")";
-    }));
-
-    for (var k in styles) {
-      var key = k;
-      var value = styles[key];
-
-      if (typeof value === 'function') {
-        value = value(theme || {});
-      }
-
-      if (value === false || value == null) {
+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
+}), {});
+const responsive = styles => theme => {
+  const next = {};
+  const breakpoints = theme && theme.breakpoints || defaultBreakpoints;
+  const mediaQueries = [null, ...breakpoints.map(n => n.includes('@media') ? n : `@media screen and (min-width: ${n})`)];
+  for (const k in styles) {
+    const key = k;
+    let value = styles[key];
+    if (typeof value === 'function') {
+      value = value(theme || {});
+    }
+    if (value === false || value == null) {
+      continue;
+    }
+    if (!Array.isArray(value)) {
+      next[key] = value;
+      continue;
+    }
+    for (let i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
+      const media = mediaQueries[i];
+      if (!media) {
+        next[key] = value[i];
         continue;
       }
-
-      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;
-        }
-
-        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;
+};
+const css = (args = {}) => (props = {}) => {
+  const theme = {
+    ...defaultTheme,
+    ...('theme' in props ? props.theme : props)
   };
-};
+  // insert variant props before responsive styles, so they can be merged
+  // we need to maintain order of the style props, so if a variant is place in the middle
+  // of other props, it will extends its props at that same location order.
 
-var css = function css(args) {
-  if (args === void 0) {
-    args = {};
-  }
-
-  return function (props) {
-    if (props === void 0) {
-      props = {};
-    }
-
-    var theme = _extends({}, defaultTheme, 'theme' in props ? props.theme : props); // insert variant props before responsive styles, so they can be merged
-    // we need to maintain order of the style props, so if a variant is place in the middle
-    // of other props, it will extends its props at that same location order.
-
-
-    var obj = getObjectWithVariants(typeof args === 'function' ? args(theme) : args, theme);
-    var styles = responsive(obj)(theme);
-    var result = {};
-
-    for (var key in styles) {
-      var x = styles[key];
-      var val = typeof x === 'function' ? x(theme) : x;
-
-      if (val && typeof val === 'object') {
-        if (hasDefault(val)) {
-          result[key] = val[THEME_UI_DEFAULT_KEY];
-          continue;
-        } // On type level, val can also be an array here,
-        // but we transform all arrays in `responsive` function.
-
-
-        result[key] = css(val)(theme);
+  const obj = getObjectWithVariants(typeof args === 'function' ? args(theme) : args, theme);
+  const styles = responsive(obj)(theme);
+  let result = {};
+  for (const key in styles) {
+    const x = styles[key];
+    const val = typeof x === 'function' ? x(theme) : x;
+    if (val && typeof val === 'object') {
+      if (hasDefault(val)) {
+        result[key] = val[THEME_UI_DEFAULT_KEY];
         continue;
       }
 
-      var prop = key in aliases ? aliases[key] : key;
-      var scaleName = prop in scales ? scales[prop] : undefined;
-      var scale = scaleName ? theme == null ? void 0 : theme[scaleName] : get(theme, prop, {});
-      var transform = get(transforms, prop, get);
-      var value = transform(scale, val, val);
-
-      if (prop in multiples) {
-        var dirs = multiples[prop];
-
-        for (var i = 0; i < dirs.length; i++) {
-          result[dirs[i]] = value;
-        }
-      } else {
-        result[prop] = value;
+      // On type level, val can also be an array here,
+      // but we transform all arrays in `responsive` function.
+      result[key] = css(val)(theme);
+      continue;
+    }
+    const prop = key in aliases ? aliases[key] : key;
+    const scaleName = prop in scales ? scales[prop] : undefined;
+    const scale = scaleName ? theme == null ? void 0 : theme[scaleName] : get(theme, prop, {});
+    const transform = get(transforms, prop, get);
+    const value = transform(scale, val, val);
+    if (prop in multiples) {
+      const dirs = multiples[prop];
+      for (let i = 0; i < dirs.length; i++) {
+        result[dirs[i]] = value;
       }
+    } else {
+      result[prop] = value;
     }
-
-    return result;
-  };
+  }
+  return result;
 };
@@ -399,0 +339,0 @@

dist/theme-ui-css.esm.js

@@ -1,18 +0,1 @@
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : 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);
-}
-
 /**
@@ -29,8 +12,7 @@ * Allows for nested scales with shorthand values
  */
-
-var THEME_UI_DEFAULT_KEY = '__default';
-
-var hasDefault = function hasDefault(x) {
+const THEME_UI_DEFAULT_KEY = '__default';
+const hasDefault = x => {
   return typeof x === 'object' && x !== null && THEME_UI_DEFAULT_KEY in x;
 };
+
 /**
@@ -45,25 +27,22 @@ * Extracts value under path from a deeply nested object.
  */
-
-
 function get(obj, path, fallback, p, undef) {
-  var pathArray = path && typeof path === 'string' ? path.split('.') : [path];
-
+  const pathArray = path && typeof path === 'string' ? path.split('.') : [path];
   for (p = 0; p < pathArray.length; p++) {
     obj = obj ? obj[pathArray[p]] : undef;
   }
-
   if (obj === undef) return fallback;
   return hasDefault(obj) ? obj[THEME_UI_DEFAULT_KEY] : obj;
 }
-var getObjectWithVariants = function getObjectWithVariants(obj, theme) {
+const getObjectWithVariants = (obj, theme) => {
   if (obj && obj['variant']) {
-    var result = {};
-
-    for (var key in obj) {
-      var x = obj[key];
-
+    let result = {};
+    for (const key in obj) {
+      const x = obj[key];
       if (key === 'variant') {
-        var val = typeof x === 'function' ? x(theme) : x;
-        var variant = getObjectWithVariants(get(theme, val), theme);
-        result = _extends({}, result, variant);
+        const val = typeof x === 'function' ? x(theme) : x;
+        const variant = getObjectWithVariants(get(theme, val), theme);
+        result = {
+          ...result,
+          ...variant
+        };
       } else {
@@ -73,16 +52,12 @@ result[key] = x;
     }
-
     return result;
   }
-
   return obj;
 };
-var defaultBreakpoints = [40, 52, 64].map(function (n) {
-  return n + 'em';
-});
-var defaultTheme = {
+const defaultBreakpoints = [40, 52, 64].map(n => n + 'em');
+const defaultTheme = {
   space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
   fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
 };
-var aliases = {
+const aliases = {
   bg: 'backgroundColor',
@@ -104,3 +79,3 @@ m: 'margin',
 };
-var multiples = {
+const multiples = {
   marginX: ['marginLeft', 'marginRight'],
@@ -116,3 +91,3 @@ marginY: ['marginTop', 'marginBottom'],
 };
-var scales = {
+const scales = {
   color: 'colors',
@@ -265,131 +240,96 @@ background: 'colors',
 };
-
-var positiveOrNegative = function positiveOrNegative(scale, value) {
+const positiveOrNegative = (scale, value) => {
   if (typeof value !== 'number' || value >= 0) {
     if (typeof value === 'string' && value.startsWith('-')) {
-      var valueWithoutMinus = value.substring(1);
-
-      var _n = get(scale, valueWithoutMinus, valueWithoutMinus);
-
-      if (typeof _n === 'number') {
-        return _n * -1;
+      const valueWithoutMinus = value.substring(1);
+      const n = get(scale, valueWithoutMinus, valueWithoutMinus);
+      if (typeof n === 'number') {
+        return n * -1;
       }
-
-      return "-" + _n;
+      return `-${n}`;
     }
-
     return get(scale, value, value);
   }
-
-  var absolute = Math.abs(value);
-  var n = get(scale, absolute, absolute);
+  const absolute = Math.abs(value);
+  const n = get(scale, absolute, absolute);
   if (typeof n === 'string') return '-' + n;
   return Number(n) * -1;
 };
-
-var transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginBlock', 'marginBlockEnd', 'marginBlockStart', 'marginInline', 'marginInlineEnd', 'marginInlineStart', 'top', 'bottom', 'left', 'right'].reduce(function (acc, curr) {
-  var _extends2;
-
-  return _extends({}, acc, (_extends2 = {}, _extends2[curr] = positiveOrNegative, _extends2));
-}, {});
-
-var responsive = function responsive(styles) {
-  return function (theme) {
-    var next = {};
-    var breakpoints = theme && theme.breakpoints || defaultBreakpoints;
-    var mediaQueries = [null].concat(breakpoints.map(function (n) {
-      return n.includes('@media') ? n : "@media screen and (min-width: " + n + ")";
-    }));
-
-    for (var k in styles) {
-      var key = k;
-      var value = styles[key];
-
-      if (typeof value === 'function') {
-        value = value(theme || {});
-      }
-
-      if (value === false || value == null) {
+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
+}), {});
+const responsive = styles => theme => {
+  const next = {};
+  const breakpoints = theme && theme.breakpoints || defaultBreakpoints;
+  const mediaQueries = [null, ...breakpoints.map(n => n.includes('@media') ? n : `@media screen and (min-width: ${n})`)];
+  for (const k in styles) {
+    const key = k;
+    let value = styles[key];
+    if (typeof value === 'function') {
+      value = value(theme || {});
+    }
+    if (value === false || value == null) {
+      continue;
+    }
+    if (!Array.isArray(value)) {
+      next[key] = value;
+      continue;
+    }
+    for (let i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
+      const media = mediaQueries[i];
+      if (!media) {
+        next[key] = value[i];
         continue;
       }
-
-      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;
-        }
-
-        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;
+};
+const css = (args = {}) => (props = {}) => {
+  const theme = {
+    ...defaultTheme,
+    ...('theme' in props ? props.theme : props)
   };
-};
+  // insert variant props before responsive styles, so they can be merged
+  // we need to maintain order of the style props, so if a variant is place in the middle
+  // of other props, it will extends its props at that same location order.
 
-var css = function css(args) {
-  if (args === void 0) {
-    args = {};
-  }
-
-  return function (props) {
-    if (props === void 0) {
-      props = {};
-    }
-
-    var theme = _extends({}, defaultTheme, 'theme' in props ? props.theme : props); // insert variant props before responsive styles, so they can be merged
-    // we need to maintain order of the style props, so if a variant is place in the middle
-    // of other props, it will extends its props at that same location order.
-
-
-    var obj = getObjectWithVariants(typeof args === 'function' ? args(theme) : args, theme);
-    var styles = responsive(obj)(theme);
-    var result = {};
-
-    for (var key in styles) {
-      var x = styles[key];
-      var val = typeof x === 'function' ? x(theme) : x;
-
-      if (val && typeof val === 'object') {
-        if (hasDefault(val)) {
-          result[key] = val[THEME_UI_DEFAULT_KEY];
-          continue;
-        } // On type level, val can also be an array here,
-        // but we transform all arrays in `responsive` function.
-
-
-        result[key] = css(val)(theme);
+  const obj = getObjectWithVariants(typeof args === 'function' ? args(theme) : args, theme);
+  const styles = responsive(obj)(theme);
+  let result = {};
+  for (const key in styles) {
+    const x = styles[key];
+    const val = typeof x === 'function' ? x(theme) : x;
+    if (val && typeof val === 'object') {
+      if (hasDefault(val)) {
+        result[key] = val[THEME_UI_DEFAULT_KEY];
         continue;
       }
 
-      var prop = key in aliases ? aliases[key] : key;
-      var scaleName = prop in scales ? scales[prop] : undefined;
-      var scale = scaleName ? theme == null ? void 0 : theme[scaleName] : get(theme, prop, {});
-      var transform = get(transforms, prop, get);
-      var value = transform(scale, val, val);
-
-      if (prop in multiples) {
-        var dirs = multiples[prop];
-
-        for (var i = 0; i < dirs.length; i++) {
-          result[dirs[i]] = value;
-        }
-      } else {
-        result[prop] = value;
+      // On type level, val can also be an array here,
+      // but we transform all arrays in `responsive` function.
+      result[key] = css(val)(theme);
+      continue;
+    }
+    const prop = key in aliases ? aliases[key] : key;
+    const scaleName = prop in scales ? scales[prop] : undefined;
+    const scale = scaleName ? theme == null ? void 0 : theme[scaleName] : get(theme, prop, {});
+    const transform = get(transforms, prop, get);
+    const value = transform(scale, val, val);
+    if (prop in multiples) {
+      const dirs = multiples[prop];
+      for (let i = 0; i < dirs.length; i++) {
+        result[dirs[i]] = value;
       }
+    } else {
+      result[prop] = value;
     }
-
-    return result;
-  };
+  }
+  return result;
 };
 
 export { THEME_UI_DEFAULT_KEY, css, defaultBreakpoints, get, getObjectWithVariants, multiples, scales };

package.json

 {
   "name": "@theme-ui/css",
-  "version": "0.15.7",
+  "version": "0.16.0-develop.4",
   "source": "src/index.ts",
   "main": "dist/theme-ui-css.cjs.js",
   "module": "dist/theme-ui-css.esm.js",
+  "browser": {
+    "./dist/theme-ui-css.esm.js": "./dist/theme-ui-css.browser.esm.js"
+  },
+  "exports": {
+    ".": {
+      "module": {
+        "browser": "./dist/theme-ui-css.browser.esm.js",
+        "default": "./dist/theme-ui-css.esm.js"
+      },
+      "default": "./dist/theme-ui-css.cjs.js"
+    },
+    "./utils": {
+      "module": {
+        "browser": "./utils/dist/theme-ui-css-utils.browser.esm.js",
+        "default": "./utils/dist/theme-ui-css-utils.esm.js"
+      },
+      "default": "./utils/dist/theme-ui-css-utils.cjs.js"
+    },
+    "./package.json": "./package.json"
+  },
   "sideEffects": false,
@@ -18,8 +38,8 @@ "author": "Brent Jackson",
   "peerDependencies": {
-    "@emotion/react": "^11"
+    "@emotion/react": "^11.11.1"
   },
   "devDependencies": {
-    "@types/react": "^18",
-    "@babel/core": "^7",
-    "@theme-ui/test-utils": "^0.15.7"
+    "@emotion/react": "^11.11.1",
+    "@types/react": "^18.2.12",
+    "@theme-ui/test-utils": "^0.16.0-develop.4"
   },
@@ -30,3 +50,8 @@ "preconstruct": {
       "utils.ts"
-    ]
+    ],
+    "exports": {
+      "envConditions": [
+        "browser"
+      ]
+    }
   },
@@ -33,0 +58,0 @@ "gitHead": "621199460fa3bdb0100748441e62517b7529b8c8",

test/utils.ts

@@ -26,5 +26,7 @@ import { Theme } from '../src'
   it('is exposed from entrypoint /utils and validates Theme type', () => {
-    expecter('import { makeTheme } from "./packages/css/utils"')(
-      'const t = makeTheme("banana")'
-    ).toFail(/Type '"banana"' has no properties in common with type 'Theme'./)
+    expecter('import { makeTheme } from "./packages/css/utils"', {
+      jsx: false,
+    })('const t = makeTheme("banana")').toFail(
+      /Type '"banana"' has no properties in common with type 'Theme'./
+    )
   })
@@ -31,0 +33,0 @@ })

utils/dist/theme-ui-css-utils.cjs.d.ts

 export * from "../../dist/declarations/src/utils";
+//# sourceMappingURL=theme-ui-css-utils.cjs.d.ts.map

utils/dist/theme-ui-css-utils.cjs.dev.js

@@ -9,5 +9,4 @@ 'use strict';
  */
-var makeTheme = function makeTheme(theme) {
-  return theme;
-};
+const makeTheme = theme => theme;
+
 /**
@@ -17,12 +16,7 @@ * Constrained identity function used to create a styles dictionary
  */
+const makeStyles = styles => styles;
+const makeColorsScale = colors => colors;
 
-var makeStyles = function makeStyles(styles) {
-  return styles;
-};
-var makeColorsScale = function makeColorsScale(colors) {
-  return colors;
-};
-
 exports.makeColorsScale = makeColorsScale;
 exports.makeStyles = makeStyles;
 exports.makeTheme = makeTheme;

utils/dist/theme-ui-css-utils.cjs.prod.js

@@ -9,5 +9,4 @@ 'use strict';
  */
-var makeTheme = function makeTheme(theme) {
-  return theme;
-};
+const makeTheme = theme => theme;
+
 /**
@@ -17,12 +16,7 @@ * Constrained identity function used to create a styles dictionary
  */
+const makeStyles = styles => styles;
+const makeColorsScale = colors => colors;
 
-var makeStyles = function makeStyles(styles) {
-  return styles;
-};
-var makeColorsScale = function makeColorsScale(colors) {
-  return colors;
-};
-
 exports.makeColorsScale = makeColorsScale;
 exports.makeStyles = makeStyles;
 exports.makeTheme = makeTheme;

utils/dist/theme-ui-css-utils.esm.js

@@ -5,5 +5,4 @@ /**
  */
-var makeTheme = function makeTheme(theme) {
-  return theme;
-};
+const makeTheme = theme => theme;
+
 /**
@@ -13,10 +12,5 @@ * Constrained identity function used to create a styles dictionary
  */
+const makeStyles = styles => styles;
+const makeColorsScale = colors => colors;
 
-var makeStyles = function makeStyles(styles) {
-  return styles;
-};
-var makeColorsScale = function makeColorsScale(colors) {
-  return colors;
-};
-
 export { makeColorsScale, makeStyles, makeTheme };

utils/package.json

 {
   "main": "dist/theme-ui-css-utils.cjs.js",
-  "module": "dist/theme-ui-css-utils.esm.js"
+  "module": "dist/theme-ui-css-utils.esm.js",
+  "browser": {
+    "./dist/theme-ui-css-utils.esm.js": "./dist/theme-ui-css-utils.browser.esm.js"
+  }
 }

No alert changes

Improved metrics

Total package byte prevSize

168367

increased by5.5%

Number of package files

31

increased by14.81%

Lines of code

4550

increased by6.06%

No dependency changes