@theme-ui/mdx - npm Package Compare versions

Comparing version 0.4.0-rc.1 to 0.4.0-rc.3

dist/index.esm.js

@@ -1,8 +0,360 @@
-import { jsx } from '@theme-ui/core';
-import { css, get } from '@theme-ui/css';
-import 'react';
-import '@emotion/core';
+import { jsx as jsx$1 } from '@emotion/core';
+import { createContext } from 'react';
+import { version } from '@emotion/core/package.json';
+import '@theme-ui/css/dist/types';
 import styled from '@emotion/styled';
-import { MDXProvider, useMDXComponents } from '@mdx-js/react';
+import { useMDXComponents, MDXProvider as MDXProvider$1 } from '@mdx-js/react';
 
+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);
+}
+
+function _extends$1() {
+  _extends$1 = 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$1.apply(this, arguments);
+}
+
+function get(obj, key, def, p, undef) {
+  var path = key && typeof key === 'string' ? key.split('.') : [key];
+
+  for (p = 0; p < path.length; p++) {
+    obj = obj ? obj[path[p]] : undef;
+  }
+
+  return obj === undef ? def : obj;
+}
+
+var defaultBreakpoints = [40, 52, 64].map(function (n) {
+  return n + 'em';
+});
+var defaultTheme = {
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
+};
+var aliases = {
+  bg: 'backgroundColor',
+  m: 'margin',
+  mt: 'marginTop',
+  mr: 'marginRight',
+  mb: 'marginBottom',
+  ml: 'marginLeft',
+  mx: 'marginX',
+  my: 'marginY',
+  p: 'padding',
+  pt: 'paddingTop',
+  pr: 'paddingRight',
+  pb: 'paddingBottom',
+  pl: 'paddingLeft',
+  px: 'paddingX',
+  py: 'paddingY'
+};
+var multiples = {
+  marginX: ['marginLeft', 'marginRight'],
+  marginY: ['marginTop', 'marginBottom'],
+  paddingX: ['paddingLeft', 'paddingRight'],
+  paddingY: ['paddingTop', 'paddingBottom'],
+  size: ['width', 'height']
+};
+var scales = {
+  color: 'colors',
+  backgroundColor: 'colors',
+  borderColor: 'colors',
+  caretColor: 'colors',
+  columnRuleColor: 'colors',
+  opacity: 'opacities',
+  margin: 'space',
+  marginTop: 'space',
+  marginRight: 'space',
+  marginBottom: 'space',
+  marginLeft: 'space',
+  marginX: 'space',
+  marginY: 'space',
+  marginBlock: 'space',
+  marginBlockEnd: 'space',
+  marginBlockStart: 'space',
+  marginInline: 'space',
+  marginInlineEnd: 'space',
+  marginInlineStart: 'space',
+  padding: 'space',
+  paddingTop: 'space',
+  paddingRight: 'space',
+  paddingBottom: 'space',
+  paddingLeft: 'space',
+  paddingX: 'space',
+  paddingY: 'space',
+  paddingBlock: 'space',
+  paddingBlockEnd: 'space',
+  paddingBlockStart: 'space',
+  paddingInline: 'space',
+  paddingInlineEnd: 'space',
+  paddingInlineStart: 'space',
+  inset: 'space',
+  insetBlock: 'space',
+  insetBlockEnd: 'space',
+  insetBlockStart: 'space',
+  insetInline: 'space',
+  insetInlineEnd: 'space',
+  insetInlineStart: 'space',
+  top: 'space',
+  right: 'space',
+  bottom: 'space',
+  left: 'space',
+  gridGap: 'space',
+  gridColumnGap: 'space',
+  gridRowGap: 'space',
+  gap: 'space',
+  columnGap: 'space',
+  rowGap: 'space',
+  fontFamily: 'fonts',
+  fontSize: 'fontSizes',
+  fontWeight: 'fontWeights',
+  lineHeight: 'lineHeights',
+  letterSpacing: 'letterSpacings',
+  border: 'borders',
+  borderTop: 'borders',
+  borderRight: 'borders',
+  borderBottom: 'borders',
+  borderLeft: 'borders',
+  borderWidth: 'borderWidths',
+  borderStyle: 'borderStyles',
+  borderRadius: 'radii',
+  borderTopRightRadius: 'radii',
+  borderTopLeftRadius: 'radii',
+  borderBottomRightRadius: 'radii',
+  borderBottomLeftRadius: 'radii',
+  borderTopWidth: 'borderWidths',
+  borderTopColor: 'colors',
+  borderTopStyle: 'borderStyles',
+  borderBottomWidth: 'borderWidths',
+  borderBottomColor: 'colors',
+  borderBottomStyle: 'borderStyles',
+  borderLeftWidth: 'borderWidths',
+  borderLeftColor: 'colors',
+  borderLeftStyle: 'borderStyles',
+  borderRightWidth: 'borderWidths',
+  borderRightColor: 'colors',
+  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',
+  boxShadow: 'shadows',
+  textShadow: 'shadows',
+  zIndex: 'zIndices',
+  width: 'sizes',
+  minWidth: 'sizes',
+  maxWidth: 'sizes',
+  height: 'sizes',
+  minHeight: 'sizes',
+  maxHeight: 'sizes',
+  flexBasis: 'sizes',
+  size: 'sizes',
+  blockSize: 'sizes',
+  inlineSize: 'sizes',
+  maxBlockSize: 'sizes',
+  maxInlineSize: 'sizes',
+  minBlockSize: 'sizes',
+  minInlineSize: 'sizes',
+  // svg
+  fill: 'colors',
+  stroke: 'colors'
+};
+
+var positiveOrNegative = function 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);
+
+      return "-" + _n;
+    }
+
+    return get(scale, value, value);
+  }
+
+  var absolute = Math.abs(value);
+  var 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$1({}, 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 "@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 == null) 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];
+      }
+    }
+
+    return next;
+  };
+};
+
+var css = function css(args) {
+  if (args === void 0) {
+    args = {};
+  }
+
+  return function (props) {
+    if (props === void 0) {
+      props = {};
+    }
+
+    var theme = _extends$1({}, defaultTheme, 'theme' in props ? props.theme : props);
+
+    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;
+
+      if (key === 'variant') {
+        var variant = css(get(theme, val))(theme);
+        result = _extends$1({}, result, variant);
+        continue;
+      }
+
+      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);
+        continue;
+      }
+
+      var prop = key in aliases ? aliases[key] : key;
+      var scaleName = prop in scales ? scales[prop] : undefined;
+      var scale = get(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;
+      }
+    }
+
+    return result;
+  };
+};
+
+var getCSS = function getCSS(props) {
+  if (!props.sx && !props.css) return undefined;
+  return function (theme) {
+    var styles = css(props.sx)(theme);
+    var raw = typeof props.css === 'function' ? props.css(theme) : props.css;
+    return [styles, raw];
+  };
+};
+
+var parseProps = function parseProps(props) {
+  if (!props) return null;
+  var next = {};
+
+  for (var key in props) {
+    if (key === 'sx') continue;
+    next[key] = props[key];
+  }
+
+  var css = getCSS(props);
+  if (css) next.css = css;
+  return next;
+};
+
+var jsx = function jsx(type, props) {
+  return jsx$1.apply(undefined, [type, parseProps(props)].concat([].slice.call(arguments, 2)));
+};
+
+var Context = createContext({
+  __EMOTION_VERSION__: version,
+  theme: {}
+});
+
 var tags = ['p', 'b', 'i', 'a', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'img', 'pre', 'code', 'ol', 'ul', 'li', 'blockquote', 'hr', 'em', 'table', 'tr', 'th', 'td', 'em', 'strong', 'del', // mdx
@@ -12,3 +364,3 @@ 'inlineCode', 'thematicBreak', // other
 'root'];
-var aliases = {
+var aliases$1 = {
   inlineCode: 'code',
@@ -19,8 +371,19 @@ thematicBreak: 'hr',
 
-var alias = function (n) { return aliases[n] || n; };
+var isAlias = function isAlias(x) {
+  return x in aliases$1;
+};
 
-var themed = function (key) { return function (props) { return css(get(props.theme, ("styles." + key)))(props.theme); }; };
+var alias = function alias(n) {
+  return isAlias(n) ? aliases$1[n] : n;
+};
+
+var themed = function themed(key) {
+  return function (props) {
+    return css(get(props.theme, "styles." + key))(props.theme);
+  };
+};
 var Styled = styled('div')(themed('div'));
 var components = {};
 tags.forEach(function (tag) {
+  // fixme?
   components[tag] = styled(alias(tag))(themed(tag));
@@ -30,5 +393,7 @@ Styled[tag] = components[tag];
 
-var createComponents = function (comps) {
-  var next = Object.assign({}, components);
-  Object.keys(comps).forEach(function (key) {
+var createComponents = function createComponents(comps) {
+  var next = _extends({}, components);
+
+  var componentKeys = Object.keys(comps);
+  componentKeys.forEach(function (key) {
     next[key] = styled(comps[key])(themed(key));
@@ -39,10 +404,8 @@ });
 
-var MDXProvider$1 = function (ref) {
-  var components = ref.components;
-  var children = ref.children;
-
+var MDXProvider = function MDXProvider(_ref) {
+  var components = _ref.components,
+      children = _ref.children;
   var outer = useMDXComponents();
-  return jsx(MDXProvider, {
-    components: createComponents(Object.assign({}, outer,
-      components)),
+  return jsx(MDXProvider$1, {
+    components: createComponents(_extends({}, outer, components)),
     children: children
@@ -52,3 +415,3 @@ });
 
-export { themed, Styled, components, MDXProvider$1 as MDXProvider };
+export { MDXProvider, Styled, components, themed };
 //# sourceMappingURL=index.esm.js.map

dist/index.js

 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var core = require('@theme-ui/core');
-var css = require('@theme-ui/css');
-require('react');
-require('@emotion/core');
+var core = require('@emotion/core');
+var react = require('react');
+var package_json = require('@emotion/core/package.json');
+require('@theme-ui/css/dist/types');
 var styled = _interopDefault(require('@emotion/styled'));
 var react$1 = require('@mdx-js/react');
 
+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);
+}
+
+function _extends$1() {
+  _extends$1 = 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$1.apply(this, arguments);
+}
+
+function get(obj, key, def, p, undef) {
+  var path = key && typeof key === 'string' ? key.split('.') : [key];
+
+  for (p = 0; p < path.length; p++) {
+    obj = obj ? obj[path[p]] : undef;
+  }
+
+  return obj === undef ? def : obj;
+}
+
+var defaultBreakpoints = [40, 52, 64].map(function (n) {
+  return n + 'em';
+});
+var defaultTheme = {
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
+};
+var aliases = {
+  bg: 'backgroundColor',
+  m: 'margin',
+  mt: 'marginTop',
+  mr: 'marginRight',
+  mb: 'marginBottom',
+  ml: 'marginLeft',
+  mx: 'marginX',
+  my: 'marginY',
+  p: 'padding',
+  pt: 'paddingTop',
+  pr: 'paddingRight',
+  pb: 'paddingBottom',
+  pl: 'paddingLeft',
+  px: 'paddingX',
+  py: 'paddingY'
+};
+var multiples = {
+  marginX: ['marginLeft', 'marginRight'],
+  marginY: ['marginTop', 'marginBottom'],
+  paddingX: ['paddingLeft', 'paddingRight'],
+  paddingY: ['paddingTop', 'paddingBottom'],
+  size: ['width', 'height']
+};
+var scales = {
+  color: 'colors',
+  backgroundColor: 'colors',
+  borderColor: 'colors',
+  caretColor: 'colors',
+  columnRuleColor: 'colors',
+  opacity: 'opacities',
+  margin: 'space',
+  marginTop: 'space',
+  marginRight: 'space',
+  marginBottom: 'space',
+  marginLeft: 'space',
+  marginX: 'space',
+  marginY: 'space',
+  marginBlock: 'space',
+  marginBlockEnd: 'space',
+  marginBlockStart: 'space',
+  marginInline: 'space',
+  marginInlineEnd: 'space',
+  marginInlineStart: 'space',
+  padding: 'space',
+  paddingTop: 'space',
+  paddingRight: 'space',
+  paddingBottom: 'space',
+  paddingLeft: 'space',
+  paddingX: 'space',
+  paddingY: 'space',
+  paddingBlock: 'space',
+  paddingBlockEnd: 'space',
+  paddingBlockStart: 'space',
+  paddingInline: 'space',
+  paddingInlineEnd: 'space',
+  paddingInlineStart: 'space',
+  inset: 'space',
+  insetBlock: 'space',
+  insetBlockEnd: 'space',
+  insetBlockStart: 'space',
+  insetInline: 'space',
+  insetInlineEnd: 'space',
+  insetInlineStart: 'space',
+  top: 'space',
+  right: 'space',
+  bottom: 'space',
+  left: 'space',
+  gridGap: 'space',
+  gridColumnGap: 'space',
+  gridRowGap: 'space',
+  gap: 'space',
+  columnGap: 'space',
+  rowGap: 'space',
+  fontFamily: 'fonts',
+  fontSize: 'fontSizes',
+  fontWeight: 'fontWeights',
+  lineHeight: 'lineHeights',
+  letterSpacing: 'letterSpacings',
+  border: 'borders',
+  borderTop: 'borders',
+  borderRight: 'borders',
+  borderBottom: 'borders',
+  borderLeft: 'borders',
+  borderWidth: 'borderWidths',
+  borderStyle: 'borderStyles',
+  borderRadius: 'radii',
+  borderTopRightRadius: 'radii',
+  borderTopLeftRadius: 'radii',
+  borderBottomRightRadius: 'radii',
+  borderBottomLeftRadius: 'radii',
+  borderTopWidth: 'borderWidths',
+  borderTopColor: 'colors',
+  borderTopStyle: 'borderStyles',
+  borderBottomWidth: 'borderWidths',
+  borderBottomColor: 'colors',
+  borderBottomStyle: 'borderStyles',
+  borderLeftWidth: 'borderWidths',
+  borderLeftColor: 'colors',
+  borderLeftStyle: 'borderStyles',
+  borderRightWidth: 'borderWidths',
+  borderRightColor: 'colors',
+  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',
+  boxShadow: 'shadows',
+  textShadow: 'shadows',
+  zIndex: 'zIndices',
+  width: 'sizes',
+  minWidth: 'sizes',
+  maxWidth: 'sizes',
+  height: 'sizes',
+  minHeight: 'sizes',
+  maxHeight: 'sizes',
+  flexBasis: 'sizes',
+  size: 'sizes',
+  blockSize: 'sizes',
+  inlineSize: 'sizes',
+  maxBlockSize: 'sizes',
+  maxInlineSize: 'sizes',
+  minBlockSize: 'sizes',
+  minInlineSize: 'sizes',
+  // svg
+  fill: 'colors',
+  stroke: 'colors'
+};
+
+var positiveOrNegative = function 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);
+
+      return "-" + _n;
+    }
+
+    return get(scale, value, value);
+  }
+
+  var absolute = Math.abs(value);
+  var 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$1({}, 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 "@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 == null) 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];
+      }
+    }
+
+    return next;
+  };
+};
+
+var css = function css(args) {
+  if (args === void 0) {
+    args = {};
+  }
+
+  return function (props) {
+    if (props === void 0) {
+      props = {};
+    }
+
+    var theme = _extends$1({}, defaultTheme, 'theme' in props ? props.theme : props);
+
+    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;
+
+      if (key === 'variant') {
+        var variant = css(get(theme, val))(theme);
+        result = _extends$1({}, result, variant);
+        continue;
+      }
+
+      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);
+        continue;
+      }
+
+      var prop = key in aliases ? aliases[key] : key;
+      var scaleName = prop in scales ? scales[prop] : undefined;
+      var scale = get(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;
+      }
+    }
+
+    return result;
+  };
+};
+
+var getCSS = function getCSS(props) {
+  if (!props.sx && !props.css) return undefined;
+  return function (theme) {
+    var styles = css(props.sx)(theme);
+    var raw = typeof props.css === 'function' ? props.css(theme) : props.css;
+    return [styles, raw];
+  };
+};
+
+var parseProps = function parseProps(props) {
+  if (!props) return null;
+  var next = {};
+
+  for (var key in props) {
+    if (key === 'sx') continue;
+    next[key] = props[key];
+  }
+
+  var css = getCSS(props);
+  if (css) next.css = css;
+  return next;
+};
+
+var jsx = function jsx(type, props) {
+  return core.jsx.apply(undefined, [type, parseProps(props)].concat([].slice.call(arguments, 2)));
+};
+
+var Context = react.createContext({
+  __EMOTION_VERSION__: package_json.version,
+  theme: {}
+});
+
 var tags = ['p', 'b', 'i', 'a', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'img', 'pre', 'code', 'ol', 'ul', 'li', 'blockquote', 'hr', 'em', 'table', 'tr', 'th', 'td', 'em', 'strong', 'del', // mdx
@@ -14,3 +366,3 @@ 'inlineCode', 'thematicBreak', // other
 'root'];
-var aliases = {
+var aliases$1 = {
   inlineCode: 'code',
@@ -21,8 +373,19 @@ thematicBreak: 'hr',
 
-var alias = function (n) { return aliases[n] || n; };
+var isAlias = function isAlias(x) {
+  return x in aliases$1;
+};
 
-var themed = function (key) { return function (props) { return css.css(css.get(props.theme, ("styles." + key)))(props.theme); }; };
+var alias = function alias(n) {
+  return isAlias(n) ? aliases$1[n] : n;
+};
+
+var themed = function themed(key) {
+  return function (props) {
+    return css(get(props.theme, "styles." + key))(props.theme);
+  };
+};
 var Styled = styled('div')(themed('div'));
 var components = {};
 tags.forEach(function (tag) {
+  // fixme?
   components[tag] = styled(alias(tag))(themed(tag));
@@ -32,5 +395,7 @@ Styled[tag] = components[tag];
 
-var createComponents = function (comps) {
-  var next = Object.assign({}, components);
-  Object.keys(comps).forEach(function (key) {
+var createComponents = function createComponents(comps) {
+  var next = _extends({}, components);
+
+  var componentKeys = Object.keys(comps);
+  componentKeys.forEach(function (key) {
     next[key] = styled(comps[key])(themed(key));
@@ -41,10 +406,8 @@ });
 
-var MDXProvider = function (ref) {
-  var components = ref.components;
-  var children = ref.children;
-
+var MDXProvider = function MDXProvider(_ref) {
+  var components = _ref.components,
+      children = _ref.children;
   var outer = react$1.useMDXComponents();
-  return core.jsx(react$1.MDXProvider, {
-    components: createComponents(Object.assign({}, outer,
-      components)),
+  return jsx(react$1.MDXProvider, {
+    components: createComponents(_extends({}, outer, components)),
     children: children
@@ -54,6 +417,6 @@ });
 
-exports.themed = themed;
+exports.MDXProvider = MDXProvider;
 exports.Styled = Styled;
 exports.components = components;
-exports.MDXProvider = MDXProvider;
+exports.themed = themed;
 //# sourceMappingURL=index.js.map

dist/index.umd.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@theme-ui/core'), require('@theme-ui/css'), require('react'), require('@emotion/core'), require('@emotion/styled'), require('@mdx-js/react')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@theme-ui/core', '@theme-ui/css', 'react', '@emotion/core', '@emotion/styled', '@mdx-js/react'], factory) :
-  (factory((global.mdx = {}),global.core,global.css,global.react,global.core$1,global.styled,global.react$1));
-}(this, (function (exports,core,css,react,core$1,styled,react$1) {
-  react = react && react.hasOwnProperty('default') ? react['default'] : react;
-  styled = styled && styled.hasOwnProperty('default') ? styled['default'] : styled;
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@emotion/core'), require('react'), require('@emotion/core/package.json'), require('@theme-ui/css/dist/types'), require('@emotion/styled'), require('@mdx-js/react')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@emotion/core', 'react', '@emotion/core/package.json', '@theme-ui/css/dist/types', '@emotion/styled', '@mdx-js/react'], factory) :
+  (global = global || self, factory(global.mdx = {}, global.core, global.react, global.package_json, global.types, global.styled, global.react$1));
+}(this, (function (exports, core, react, package_json, types, styled, react$1) {
+  styled = styled && Object.prototype.hasOwnProperty.call(styled, 'default') ? styled['default'] : styled;
 
+  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);
+  }
+
+  function _extends$1() {
+    _extends$1 = 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$1.apply(this, arguments);
+  }
+
+  function get(obj, key, def, p, undef) {
+    var path = key && typeof key === 'string' ? key.split('.') : [key];
+
+    for (p = 0; p < path.length; p++) {
+      obj = obj ? obj[path[p]] : undef;
+    }
+
+    return obj === undef ? def : obj;
+  }
+
+  var defaultBreakpoints = [40, 52, 64].map(function (n) {
+    return n + 'em';
+  });
+  var defaultTheme = {
+    space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+    fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
+  };
+  var aliases = {
+    bg: 'backgroundColor',
+    m: 'margin',
+    mt: 'marginTop',
+    mr: 'marginRight',
+    mb: 'marginBottom',
+    ml: 'marginLeft',
+    mx: 'marginX',
+    my: 'marginY',
+    p: 'padding',
+    pt: 'paddingTop',
+    pr: 'paddingRight',
+    pb: 'paddingBottom',
+    pl: 'paddingLeft',
+    px: 'paddingX',
+    py: 'paddingY'
+  };
+  var multiples = {
+    marginX: ['marginLeft', 'marginRight'],
+    marginY: ['marginTop', 'marginBottom'],
+    paddingX: ['paddingLeft', 'paddingRight'],
+    paddingY: ['paddingTop', 'paddingBottom'],
+    size: ['width', 'height']
+  };
+  var scales = {
+    color: 'colors',
+    backgroundColor: 'colors',
+    borderColor: 'colors',
+    caretColor: 'colors',
+    columnRuleColor: 'colors',
+    opacity: 'opacities',
+    margin: 'space',
+    marginTop: 'space',
+    marginRight: 'space',
+    marginBottom: 'space',
+    marginLeft: 'space',
+    marginX: 'space',
+    marginY: 'space',
+    marginBlock: 'space',
+    marginBlockEnd: 'space',
+    marginBlockStart: 'space',
+    marginInline: 'space',
+    marginInlineEnd: 'space',
+    marginInlineStart: 'space',
+    padding: 'space',
+    paddingTop: 'space',
+    paddingRight: 'space',
+    paddingBottom: 'space',
+    paddingLeft: 'space',
+    paddingX: 'space',
+    paddingY: 'space',
+    paddingBlock: 'space',
+    paddingBlockEnd: 'space',
+    paddingBlockStart: 'space',
+    paddingInline: 'space',
+    paddingInlineEnd: 'space',
+    paddingInlineStart: 'space',
+    inset: 'space',
+    insetBlock: 'space',
+    insetBlockEnd: 'space',
+    insetBlockStart: 'space',
+    insetInline: 'space',
+    insetInlineEnd: 'space',
+    insetInlineStart: 'space',
+    top: 'space',
+    right: 'space',
+    bottom: 'space',
+    left: 'space',
+    gridGap: 'space',
+    gridColumnGap: 'space',
+    gridRowGap: 'space',
+    gap: 'space',
+    columnGap: 'space',
+    rowGap: 'space',
+    fontFamily: 'fonts',
+    fontSize: 'fontSizes',
+    fontWeight: 'fontWeights',
+    lineHeight: 'lineHeights',
+    letterSpacing: 'letterSpacings',
+    border: 'borders',
+    borderTop: 'borders',
+    borderRight: 'borders',
+    borderBottom: 'borders',
+    borderLeft: 'borders',
+    borderWidth: 'borderWidths',
+    borderStyle: 'borderStyles',
+    borderRadius: 'radii',
+    borderTopRightRadius: 'radii',
+    borderTopLeftRadius: 'radii',
+    borderBottomRightRadius: 'radii',
+    borderBottomLeftRadius: 'radii',
+    borderTopWidth: 'borderWidths',
+    borderTopColor: 'colors',
+    borderTopStyle: 'borderStyles',
+    borderBottomWidth: 'borderWidths',
+    borderBottomColor: 'colors',
+    borderBottomStyle: 'borderStyles',
+    borderLeftWidth: 'borderWidths',
+    borderLeftColor: 'colors',
+    borderLeftStyle: 'borderStyles',
+    borderRightWidth: 'borderWidths',
+    borderRightColor: 'colors',
+    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',
+    boxShadow: 'shadows',
+    textShadow: 'shadows',
+    zIndex: 'zIndices',
+    width: 'sizes',
+    minWidth: 'sizes',
+    maxWidth: 'sizes',
+    height: 'sizes',
+    minHeight: 'sizes',
+    maxHeight: 'sizes',
+    flexBasis: 'sizes',
+    size: 'sizes',
+    blockSize: 'sizes',
+    inlineSize: 'sizes',
+    maxBlockSize: 'sizes',
+    maxInlineSize: 'sizes',
+    minBlockSize: 'sizes',
+    minInlineSize: 'sizes',
+    // svg
+    fill: 'colors',
+    stroke: 'colors'
+  };
+
+  var positiveOrNegative = function 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);
+
+        return "-" + _n;
+      }
+
+      return get(scale, value, value);
+    }
+
+    var absolute = Math.abs(value);
+    var 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$1({}, 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 "@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 == null) 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];
+        }
+      }
+
+      return next;
+    };
+  };
+
+  var css = function css(args) {
+    if (args === void 0) {
+      args = {};
+    }
+
+    return function (props) {
+      if (props === void 0) {
+        props = {};
+      }
+
+      var theme = _extends$1({}, defaultTheme, 'theme' in props ? props.theme : props);
+
+      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;
+
+        if (key === 'variant') {
+          var variant = css(get(theme, val))(theme);
+          result = _extends$1({}, result, variant);
+          continue;
+        }
+
+        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);
+          continue;
+        }
+
+        var prop = key in aliases ? aliases[key] : key;
+        var scaleName = prop in scales ? scales[prop] : undefined;
+        var scale = get(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;
+        }
+      }
+
+      return result;
+    };
+  };
+
+  var getCSS = function getCSS(props) {
+    if (!props.sx && !props.css) return undefined;
+    return function (theme) {
+      var styles = css(props.sx)(theme);
+      var raw = typeof props.css === 'function' ? props.css(theme) : props.css;
+      return [styles, raw];
+    };
+  };
+
+  var parseProps = function parseProps(props) {
+    if (!props) return null;
+    var next = {};
+
+    for (var key in props) {
+      if (key === 'sx') continue;
+      next[key] = props[key];
+    }
+
+    var css = getCSS(props);
+    if (css) next.css = css;
+    return next;
+  };
+
+  var jsx = function jsx(type, props) {
+    return core.jsx.apply(undefined, [type, parseProps(props)].concat([].slice.call(arguments, 2)));
+  };
+
+  var Context = react.createContext({
+    __EMOTION_VERSION__: package_json.version,
+    theme: {}
+  });
+
   var tags = ['p', 'b', 'i', 'a', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'img', 'pre', 'code', 'ol', 'ul', 'li', 'blockquote', 'hr', 'em', 'table', 'tr', 'th', 'td', 'em', 'strong', 'del', // mdx
@@ -13,3 +364,3 @@ 'inlineCode', 'thematicBreak', // other
   'root'];
-  var aliases = {
+  var aliases$1 = {
     inlineCode: 'code',
@@ -20,8 +371,19 @@ thematicBreak: 'hr',
 
-  var alias = function (n) { return aliases[n] || n; };
+  var isAlias = function isAlias(x) {
+    return x in aliases$1;
+  };
 
-  var themed = function (key) { return function (props) { return css.css(css.get(props.theme, ("styles." + key)))(props.theme); }; };
+  var alias = function alias(n) {
+    return isAlias(n) ? aliases$1[n] : n;
+  };
+
+  var themed = function themed(key) {
+    return function (props) {
+      return css(get(props.theme, "styles." + key))(props.theme);
+    };
+  };
   var Styled = styled('div')(themed('div'));
   var components = {};
   tags.forEach(function (tag) {
+    // fixme?
     components[tag] = styled(alias(tag))(themed(tag));
@@ -31,5 +393,7 @@ Styled[tag] = components[tag];
 
-  var createComponents = function (comps) {
-    var next = Object.assign({}, components);
-    Object.keys(comps).forEach(function (key) {
+  var createComponents = function createComponents(comps) {
+    var next = _extends({}, components);
+
+    var componentKeys = Object.keys(comps);
+    componentKeys.forEach(function (key) {
       next[key] = styled(comps[key])(themed(key));
@@ -40,10 +404,8 @@ });
 
-  var MDXProvider = function (ref) {
-    var components = ref.components;
-    var children = ref.children;
-
+  var MDXProvider = function MDXProvider(_ref) {
+    var components = _ref.components,
+        children = _ref.children;
     var outer = react$1.useMDXComponents();
-    return core.jsx(react$1.MDXProvider, {
-      components: createComponents(Object.assign({}, outer,
-        components)),
+    return jsx(react$1.MDXProvider, {
+      components: createComponents(_extends({}, outer, components)),
       children: children
@@ -53,8 +415,8 @@ });
 
-  exports.themed = themed;
+  exports.MDXProvider = MDXProvider;
   exports.Styled = Styled;
   exports.components = components;
-  exports.MDXProvider = MDXProvider;
+  exports.themed = themed;
 
 })));
 //# sourceMappingURL=index.umd.js.map

package.json

 {
   "name": "@theme-ui/mdx",
-  "version": "0.4.0-rc.1",
+  "version": "0.4.0-rc.3",
+  "source": "src/index.ts",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
   "sideEffects": false,
   "scripts": {
-    "prepare": "microbundle --no-compress",
-    "watch": "microbundle watch --no-compress"
+    "prepare": "microbundle --no-compress --tsconfig tsconfig.json",
+    "watch": "microbundle watch --no-compress --tsconfig tsconfig.json",
+    "typecheck": "tsc --noEmit"
   },
@@ -16,5 +19,7 @@ "dependencies": {
   },
+  "devDependencies": {
+    "@theme-ui/core": "^0.4.0-rc.3",
+    "@theme-ui/css": "^0.4.0-rc.3"
+  },
   "peerDependencies": {
-    "@theme-ui/core": "*",
-    "@theme-ui/css": "*",
     "react": "^16.11.0"
@@ -28,3 +33,3 @@ },
   },
-  "gitHead": "66281f5681031ae26f80fbaef007e0b28ba07142"
+  "gitHead": "2c3fea31b3e8fd892968bef49bd6407d8999a848"
 }

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

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

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

Improved metrics

Total package byte prevSize

175863

increased by752.21%

Dependency count

4

decreased by-33.33%

Number of package files

15

increased by36.36%

Lines of code

1716

increased by506.36%

Worsened metrics

Dev dependency count

2

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes