markdown-to-jsx 5.3.2 → 5.4.2

package/{index.es5.js → index.cjs.js}

@@ -34,7 +34,7 @@ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in ob
 
 function _toArray(arr) { return Array.isArray(arr) ? arr : Array.from(arr); }
 
-var BLOCK_ELEMENT_TAGS = ['article', 'header', 'aside', 'hgroup', 'blockquote', 'hr', 'iframe', 'body', 'li', 'map', 'button', 'object', 'canvas', 'ol', 'caption', 'output', 'col', 'p', 'colgroup', 'pre', 'dd', 'progress', 'div', 'section', 'dl', 'table', 'td', 'dt', 'tbody', 'embed', 'textarea', 'fieldset', 'tfoot', 'figcaption', 'th', 'figure', 'thead', 'footer', 'tr', 'form', 'ul', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'video', 'script', 'style'];
+var BLOCK_ELEMENT_TAGS = ['article', 'aside', 'blockquote', 'body', 'button', 'canvas', 'caption', 'col', 'colgroup', 'dd', 'details', 'div', 'dl', 'dt', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'hgroup', 'hr', 'iframe', 'li', 'map', 'object', 'ol', 'output', 'p', 'pre', 'progress', 'script', 'section', 'style', 'summary', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'tr', 'ul', 'video'];
 var BLOCK_ELEMENT_REGEX = new RegExp('^<(' + BLOCK_ELEMENT_TAGS.join('|') + ')', 'i');
 
 // [0] === tag, [...] = attribute pairs
@@ -289,6 +289,9 @@ function coalesceInlineHTML(ast) {
         if (node.type === 'html') {
             if (!isCoalesceableHTML(node.value)) {
                 return;
+            } else if (node.value.indexOf('<!--') !== -1) {
+                // throw out HTML comments
+                siblings.splice(index, 1);
             }
 
             // are there more html nodes directly after? if so, fold them into the current node

package/index.esm.js

@@ -0,0 +1,553 @@
+var _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; };
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _toArray(arr) { return Array.isArray(arr) ? arr : Array.from(arr); }
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import get from 'lodash.get';
+import unified from 'unified';
+import parser from 'remark-parse';
+
+var BLOCK_ELEMENT_TAGS = ['article', 'aside', 'blockquote', 'body', 'button', 'canvas', 'caption', 'col', 'colgroup', 'dd', 'details', 'div', 'dl', 'dt', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'hgroup', 'hr', 'iframe', 'li', 'map', 'object', 'ol', 'output', 'p', 'pre', 'progress', 'script', 'section', 'style', 'summary', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'tr', 'ul', 'video'];
+var BLOCK_ELEMENT_REGEX = new RegExp('^<(' + BLOCK_ELEMENT_TAGS.join('|') + ')', 'i');
+
+// [0] === tag, [...] = attribute pairs
+var HTML_EXTRACTOR_REGEX = /([-A-Za-z0-9_]+)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g;
+var SELF_CLOSING_ELEMENT_TAGS = ['area', 'base', 'br', 'col', 'command', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
+var SELF_CLOSING_ELEMENT_REGEX = new RegExp('^<(' + SELF_CLOSING_ELEMENT_TAGS.join('|') + ')', 'i');
+var TEXT_AST_TYPES = ['text', 'textNode'];
+
+var ATTRIBUTE_TO_JSX_PROP_MAP = {
+    'accept-charset': 'acceptCharset',
+    'accesskey': 'accessKey',
+    'allowfullscreen': 'allowFullScreen',
+    'allowtransparency': 'allowTransparency',
+    'autocomplete': 'autoComplete',
+    'autofocus': 'autoFocus',
+    'autoplay': 'autoPlay',
+    'cellpadding': 'cellPadding',
+    'cellspacing': 'cellSpacing',
+    'charset': 'charSet',
+    'class': 'className',
+    'classid': 'classId',
+    'colspan': 'colSpan',
+    'contenteditable': 'contentEditable',
+    'contextmenu': 'contextMenu',
+    'crossorigin': 'crossOrigin',
+    'enctype': 'encType',
+    'for': 'htmlFor',
+    'formaction': 'formAction',
+    'formenctype': 'formEncType',
+    'formmethod': 'formMethod',
+    'formnovalidate': 'formNoValidate',
+    'formtarget': 'formTarget',
+    'frameborder': 'frameBorder',
+    'hreflang': 'hrefLang',
+    'http-equiv': 'httpEquiv',
+    'inputmode': 'inputMode',
+    'keyparams': 'keyParams',
+    'keytype': 'keyType',
+    'marginheight': 'marginHeight',
+    'marginwidth': 'marginWidth',
+    'maxlength': 'maxLength',
+    'mediagroup': 'mediaGroup',
+    'minlength': 'minLength',
+    'novalidate': 'noValidate',
+    'radiogroup': 'radioGroup',
+    'readonly': 'readOnly',
+    'rowspan': 'rowSpan',
+    'spellcheck': 'spellCheck',
+    'srcdoc': 'srcDoc',
+    'srclang': 'srcLang',
+    'srcset': 'srcSet',
+    'tabindex': 'tabIndex',
+    'usemap': 'useMap'
+};
+
+var getType = Object.prototype.toString;
+
+function extractDefinitionsFromASTTree(ast, parser) {
+    function reducer(aggregator, node) {
+        if (node.type === 'definition' || node.type === 'footnoteDefinition') {
+            aggregator.definitions[node.identifier] = node;
+
+            if (node.type === 'footnoteDefinition') {
+                if (node.children && node.children.length === 1 && node.children[0].type === 'paragraph') {
+                    node.children[0].children.unshift({
+                        type: 'textNode',
+                        value: '[' + node.identifier + ']: '
+                    });
+                } /* package the prefix inside the first child */
+
+                aggregator.footnotes.push(React.createElement(
+                    'div',
+                    { key: node.identifier, id: node.identifier },
+                    node.value || node.children.map(parser)
+                ));
+            }
+        }
+
+        return Array.isArray(node.children) ? node.children.reduce(reducer, aggregator) : aggregator;
+    };
+
+    return [ast].reduce(reducer, {
+        definitions: {},
+        footnotes: []
+    });
+}
+
+function formExtraPropsForHTMLNodeType() {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var ast = arguments[1];
+    var definitions = arguments[2];
+
+    switch (ast.type) {
+        case 'footnoteReference':
+            return _extends({}, props, {
+                href: '#' + ast.identifier
+            });
+
+        case 'image':
+            return _extends({}, props, {
+                title: ast.title,
+                alt: ast.alt,
+                src: ast.url
+            });
+
+        case 'imageReference':
+            return _extends({}, props, {
+                title: get(definitions, '[\'' + ast.identifier + '\'].title'),
+                alt: ast.alt,
+                src: get(definitions, '[\'' + ast.identifier + '\'].url')
+            });
+
+        case 'link':
+            return _extends({}, props, {
+                title: ast.title,
+                href: ast.url
+            });
+
+        case 'linkReference':
+            return _extends({}, props, {
+                title: get(definitions, '[\'' + ast.identifier + '\'].title'),
+                href: get(definitions, '[\'' + ast.identifier + '\'].url')
+            });
+
+        case 'list':
+            return _extends({}, props, {
+                start: ast.start
+            });
+
+        case 'tableCell':
+        case 'th':
+            return _extends({}, props, {
+                style: { textAlign: ast.align }
+            });
+    }
+
+    return props;
+}
+
+function getHTMLNodeTypeFromASTNodeType(node) {
+    switch (node.type) {
+        case 'break':
+            return 'br';
+
+        case 'delete':
+            return 'del';
+
+        case 'emphasis':
+            return 'em';
+
+        case 'footnoteReference':
+            return 'a';
+
+        case 'heading':
+            return 'h' + node.depth;
+
+        case 'image':
+        case 'imageReference':
+            return 'img';
+
+        case 'inlineCode':
+            return 'code';
+
+        case 'link':
+        case 'linkReference':
+            return 'a';
+
+        case 'list':
+            return node.ordered ? 'ol' : 'ul';
+
+        case 'listItem':
+            return 'li';
+
+        case 'paragraph':
+            return 'p';
+
+        case 'root':
+            return 'div';
+
+        case 'tableHeader':
+            return 'thead';
+
+        case 'tableRow':
+            return 'tr';
+
+        case 'tableCell':
+            return 'td';
+
+        case 'thematicBreak':
+            return 'hr';
+
+        case 'definition':
+        case 'footnoteDefinition':
+        case 'yaml':
+            return null;
+
+        default:
+            return node.type;
+    }
+}
+
+function seekCellsAndAlignThemIfNecessary(root, alignmentValues) {
+    var mapper = function mapper(child, index) {
+        if (child.type === 'tableCell') {
+            return _extends({}, child, {
+                align: alignmentValues[index]
+            });
+        } else if (Array.isArray(child.children) && child.children.length) {
+            return child.children.map(mapper);
+        }
+
+        return child;
+    };
+
+    if (Array.isArray(root.children) && root.children.length) {
+        root.children = root.children.map(mapper);
+    }
+
+    return root;
+}
+
+function attributeValueToJSXPropValue(key, value) {
+    if (key === 'style') {
+        return value.split(/;\s?/).reduce(function (styles, kvPair) {
+
+            var key = kvPair.slice(0, kvPair.indexOf(':'));
+
+            // snake-case to camelCase
+            // also handles PascalCasing vendor prefixes
+            var camelCasedKey = key.replace(/(\-[a-z])/g, function (substr) {
+                return substr[1].toUpperCase();
+            });
+
+            // key.length + 1 to skip over the colon
+            styles[camelCasedKey] = kvPair.slice(key.length + 1).trim();
+
+            return styles;
+        }, {});
+    }
+
+    return value;
+}
+
+function isCoalesceableHTML(html) {
+    // ignore block-level elements
+    // ignore self-closing or non-content-bearing elements
+    return html.match(BLOCK_ELEMENT_REGEX) || html.match(SELF_CLOSING_ELEMENT_REGEX) ? false : true;
+}
+
+function coalesceInlineHTML(ast) {
+    function coalescer(node, index, siblings) {
+        if (node.type === 'html') {
+            if (!isCoalesceableHTML(node.value)) {
+                return;
+            } else if (node.value.indexOf('<!--') !== -1) {
+                // throw out HTML comments
+                siblings.splice(index, 1);
+            }
+
+            // are there more html nodes directly after? if so, fold them into the current node
+            if (index < siblings.length - 1 && siblings[index + 1].type === 'html') {
+                // create a new coalescer context
+                coalescer(siblings[index + 1], index + 1, siblings);
+            }
+
+            var i = index + 1;
+            var end = void 0;
+
+            // where's the end tag?
+            while (end === undefined && i < siblings.length) {
+                if (siblings[i].type !== 'html' || siblings[i].type === 'html' && !isCoalesceableHTML(siblings[i].value)) {
+                    i += 1;
+                    continue;
+                }
+
+                end = siblings[i];
+            }
+
+            /* all interim elements now become children of the current node, and we splice them (including end tag)
+               out of the sibling array so they will not be iterated-over by forEach */
+
+            node.children = siblings.slice(index + 1, i);
+            siblings.splice(index + 1, i - index);
+
+            var _node$value$match = node.value.match(HTML_EXTRACTOR_REGEX),
+                _node$value$match2 = _toArray(_node$value$match),
+                tag = _node$value$match2[0],
+                attributePairs = _node$value$match2.slice(1);
+
+            // reassign the current node to whatever its tag is
+
+
+            node.type = tag.toLowerCase();
+
+            // make a best-effort conversion to JSX props
+            node.props = attributePairs.reduce(function (props, kvPair) {
+                var valueIndex = kvPair.indexOf('=');
+                var key = kvPair.slice(0, valueIndex === -1 ? undefined : valueIndex);
+
+                // ignoring inline event handlers at this time - they pose enough of a security risk that they're
+                // not worth preserving; there's a reason React calls it "dangerouslySetInnerHTML"!
+
+                if (key.indexOf('on') !== 0) {
+                    var value = kvPair.slice(key.length + 1);
+
+                    // strip the outermost single/double quote if it exists
+                    if (value[0] === '"' || value[0] === '\'') {
+                        value = value.slice(1, value.length - 1);
+                    }
+
+                    props[ATTRIBUTE_TO_JSX_PROP_MAP[key] || key] = attributeValueToJSXPropValue(key, value) || true;
+                }
+
+                return props;
+            }, {});
+
+            // null out .value or astToJSX() will set it as the child
+            node.value = null;
+        }
+
+        if (node.children) {
+            node.children.forEach(coalescer);
+        }
+    };
+
+    ast.children.forEach(coalescer);
+}
+
+export function compiler(markdown) {
+    var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+        _ref$overrides = _ref.overrides,
+        overrides = _ref$overrides === undefined ? {} : _ref$overrides;
+
+    var definitions = void 0;
+    var footnotes = void 0;
+
+    function astToJSX(ast, index) {
+        /* `this` is the dictionary of definitions */
+        if (TEXT_AST_TYPES.indexOf(ast.type) !== -1) {
+            return ast.value;
+        }
+
+        var key = index || '0';
+
+        if (ast.type === 'code' && ast.value) {
+            var preProps = _extends({}, get(overrides, 'pre.props', {}), {
+                key: key
+            });
+
+            var langClassName = 'lang-' + ast.lang;
+            var codeBaseProps = get(overrides, 'code.props', {});
+            var codeProps = _extends({}, codeBaseProps, {
+                className: codeBaseProps.className ? codeBaseProps.className + ' ' + langClassName : langClassName
+            });
+
+            return React.createElement(get(overrides, 'pre.component', 'pre'), preProps, React.createElement(get(overrides, 'code.component', 'code'), codeProps, ast.value));
+        } /* Refers to fenced blocks, need to create a pre:code nested structure */
+
+        if (ast.type === 'list' && ast.loose === false) {
+            ast.children = ast.children.map(function (item) {
+                if (item.children.length === 1 && item.children[0].type === 'paragraph') {
+                    return _extends({}, item, {
+                        children: item.children[0].children
+                    });
+                }
+
+                return item;
+            });
+        } /* tight list, remove the paragraph wrapper just inside the listItem */
+
+        if (ast.type === 'listItem') {
+            if (ast.checked === true || ast.checked === false) {
+                var liProps = _extends({}, get(overrides, 'li.props', {}), {
+                    key: key
+                });
+
+                var inputProps = _extends({}, get(overrides, 'input.props', {}), {
+                    key: 'checkbox',
+                    type: 'checkbox',
+                    checked: ast.checked,
+                    readOnly: true
+                });
+
+                return React.createElement(get(overrides, 'li.component', 'li'), liProps, [React.createElement(get(overrides, 'input.component', 'input'), inputProps), ast.children.map(astToJSX)]);
+            } /* gfm task list, need to add a checkbox */
+        }
+
+        if (ast.type === 'html') {
+            return React.createElement('div', { key: key, dangerouslySetInnerHTML: { __html: ast.value } });
+        } /* arbitrary HTML, do the gross thing for now */
+
+        if (ast.type === 'table') {
+            var tbody = { type: 'tbody', children: [] };
+
+            ast.children = ast.children.reduce(function (children, child, index) {
+                if (index === 0) {
+                    /* manually marking the first row as tableHeader since that was removed in remark@4.x; it's important semantically. */
+                    child.type = 'tableHeader';
+                    children.unshift(seekCellsAndAlignThemIfNecessary(child, ast.align));
+                } else if (child.type === 'tableRow') {
+                    tbody.children.push(seekCellsAndAlignThemIfNecessary(child, ast.align));
+                } else if (child.type === 'tableFooter') {
+                    children.push(seekCellsAndAlignThemIfNecessary(child, ast.align));
+                }
+
+                return children;
+            }, [tbody]);
+        } /* React yells if things aren't in the proper structure, so need to
+            delve into the immediate children and wrap tablerow(s) in a tbody */
+
+        if (ast.type === 'tableFooter') {
+            ast.children = [{
+                type: 'tr',
+                children: ast.children
+            }];
+        } /* React yells if things aren't in the proper structure, so need to
+            delve into the immediate children and wrap the cells in a tablerow */
+
+        if (ast.type === 'tableHeader') {
+            ast.children = [{
+                type: 'tr',
+                children: ast.children.map(function (child) {
+                    if (child.type === 'tableCell') {
+                        child.type = 'th';
+                    } /* et voila, a proper table header */
+
+                    return child;
+                })
+            }];
+        } /* React yells if things aren't in the proper structure, so need to
+            delve into the immediate children and wrap the cells in a tablerow */
+
+        if (ast.type === 'footnoteReference') {
+            ast.children = [{ type: 'sup', value: ast.identifier }];
+        } /* place the identifier inside a superscript tag for the link */
+
+        var htmlNodeType = getHTMLNodeTypeFromASTNodeType(ast);
+        if (htmlNodeType === null) {
+            return null;
+        } /* bail out, not convertable to any HTML representation */
+
+        var props = _extends({ key: key }, ast.props);
+
+        if (Array.isArray(ast.children) && ast.children.length === 1 && ast.children[0].type === 'html') {
+            props.dangerouslySetInnerHTML = { __html: ast.children[0].value };
+            ast.children = null;
+        }
+
+        var override = overrides[htmlNodeType];
+        if (override) {
+            if (override.component) {
+                htmlNodeType = override.component;
+            } /* sub out the normal html tag name for the JSX / ReactFactory
+                 passed in by the caller */
+
+            if (override.props) {
+                props = _extends({}, override.props, props);
+            } /* apply the prop overrides beneath the minimal set that are necessary
+                 to have the markdown conversion work as expected */
+        }
+
+        /* their props + our props, with any duplicate keys overwritten by us
+           (necessary evil, file an issue if something comes up that needs
+           extra attention, only props specified in `formExtraPropsForHTMLNodeType`
+           will be overwritten on a key collision) */
+        var finalProps = formExtraPropsForHTMLNodeType(props, ast, definitions);
+
+        if (ast.children && ast.children.length === 1) {
+            if (TEXT_AST_TYPES.indexOf(ast.children[0].type) !== -1) {
+                ast.children = ast.children[0].value;
+            }
+        } /* solitary text children don't need full parsing or React will add a wrapper */
+
+        var children = Array.isArray(ast.children) ? ast.children.map(astToJSX) : ast.children;
+
+        return React.createElement(htmlNodeType, finalProps, ast.value || children);
+    }
+
+    if (typeof markdown !== 'string') {
+        throw new Error('markdown-to-jsx: the first argument must be\n                         a string');
+    }
+
+    if (getType.call(overrides) !== '[object Object]') {
+        throw new Error('markdown-to-jsx: options.overrides (second argument property) must be\n                         undefined or an object literal with shape:\n                         {\n                            htmltagname: {\n                                component: string|ReactComponent(optional),\n                                props: object(optional)\n                            }\n                         }');
+    }
+
+    var remarkAST = unified().data('settings', {
+        footnotes: true,
+        gfm: true,
+        position: false
+    }).use(parser).parse(markdown);
+
+    var extracted = extractDefinitionsFromASTTree(remarkAST, astToJSX);
+
+    definitions = extracted.definitions;
+    footnotes = extracted.footnotes;
+
+    coalesceInlineHTML(remarkAST);
+
+    var jsx = astToJSX(remarkAST);
+
+    // discard the root <div> node if there is only one valid initial child
+    if (jsx.props.children && jsx.props.children.length === 1) {
+        jsx = jsx.props.children[0];
+    }
+
+    if (footnotes.length) {
+        jsx.props.children.push(React.createElement(
+            'footer',
+            { key: 'footnotes' },
+            footnotes
+        ));
+    }
+
+    return jsx;
+};
+
+/**
+ * A simple HOC for easy React use. Feed the markdown content as a direct child
+ * and the rest is taken care of automatically.
+ *
+ * @param  {String}   options.children   must be a string
+ * @param  {Object}   options.options    markdown-to-jsx options (arg 2 of the compiler)
+ *
+ * @return {ReactElement} the compiled JSX
+ */
+var Component = function Component(_ref2) {
+    var children = _ref2.children,
+        options = _ref2.options,
+        props = _objectWithoutProperties(_ref2, ['children', 'options']);
+
+    return compiler(children, options);
+};
+
+Component.propTypes = {
+    children: PropTypes.string.isRequired,
+    options: PropTypes.object
+};
+
+export default Component;

package/index.js

@@ -6,55 +6,57 @@ import parser from 'remark-parse';
 
 const BLOCK_ELEMENT_TAGS = [
     'article',
-    'header',
     'aside',
-    'hgroup',
     'blockquote',
-    'hr',
-    'iframe',
     'body',
-    'li',
-    'map',
     'button',
-    'object',
     'canvas',
-    'ol',
     'caption',
-    'output',
     'col',
-    'p',
     'colgroup',
-    'pre',
     'dd',
-    'progress',
+    'details',
     'div',
-    'section',
     'dl',
-    'table',
-    'td',
     'dt',
-    'tbody',
     'embed',
-    'textarea',
     'fieldset',
-    'tfoot',
     'figcaption',
-    'th',
     'figure',
-    'thead',
     'footer',
-    'tr',
     'form',
-    'ul',
     'h1',
     'h2',
     'h3',
     'h4',
     'h5',
     'h6',
-    'video',
+    'header',
+    'hgroup',
+    'hr',
+    'iframe',
+    'li',
+    'map',
+    'object',
+    'ol',
+    'output',
+    'p',
+    'pre',
+    'progress',
     'script',
+    'section',
     'style',
+    'summary',
+    'table',
+    'tbody',
+    'td',
+    'textarea',
+    'tfoot',
+    'th',
+    'thead',
+    'tr',
+    'ul',
+    'video',
 ];
 const BLOCK_ELEMENT_REGEX = new RegExp(`^<(${BLOCK_ELEMENT_TAGS.join('|')})`, 'i');
 
@@ -334,6 +336,9 @@ function coalesceInlineHTML(ast) {
         if (node.type === 'html') {
             if (!isCoalesceableHTML(node.value)) {
                 return;
+            } else if (node.value.indexOf('<!--') !== -1) {
+                // throw out HTML comments
+                siblings.splice(index, 1);
             }
 
             // are there more html nodes directly after? if so, fold them into the current node

package/package.json

@@ -3,7 +3,7 @@
   "description": "Interprets markdown text and outputs a JSX equivalent.",
   "homepage": "http://probablyup.github.io/markdown-to-jsx",
   "license": "MIT",
-  "version": "5.3.2",
+  "version": "5.4.2",
   "engines": {
     "node": ">= 4"
   },
@@ -18,38 +18,41 @@
   "bugs": "https://github.com/probablyup/markdown-to-jsx/issues",
   "files": [
     "index.js",
-    "index.es5.js",
+    "index.cjs.js",
+    "index.esm.js",
     "LICENSE",
     "README.md"
   ],
-  "main": "index.es5.js",
-  "jsnext:main": "index.js",
-  "module": "index.js",
+  "main": "index.cjs.js",
+  "jsnext:main": "index.esm.js",
+  "module": "index.esm.js",
   "devDependencies": {
-    "autoprefixer-stylus": "^0.13.0",
     "babel-cli": "^6.14.0",
-    "babel-jest": "^19.0.0",
+    "babel-jest": "^20.0.3",
+    "babel-loader": "^7.1.1",
+    "babel-plugin-styled-components": "^1.1.7",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.6",
     "babel-preset-es2015": "^6.14.0",
     "babel-preset-react": "^6.11.1",
     "babel-preset-stage-2": "^6.13.0",
-    "babelify": "^7.3.0",
-    "browserify": "^14.1.0",
-    "budo": "^9.2.0",
-    "bundle-collapser": "^1.2.1",
     "codecov": "^2.1.0",
     "in-publish": "^2.0.0",
-    "jest-cli": "^19.0.2",
-    "react": "^15.5.4",
-    "react-dom": "^15.5.4",
-    "stylus": "^0.54.5",
+    "jest": "^20.0.4",
+    "polished": "^1.3.0",
+    "preact": "^8.2.1",
+    "preact-compat": "^3.16.0",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "styled-components": "^2.1.1",
     "uglify-js": "^2.7.3",
-    "watchify": "^3.7.0"
+    "webpack": "^3.4.1",
+    "webpack-dev-server": "^2.6.1"
   },
   "dependencies": {
     "lodash.get": "^4.4.2",
-    "prop-types": "^15.5.8",
-    "remark-parse": "^3.0.0",
-    "unified": "^6.1.2"
+    "prop-types": "^15.5.10",
+    "remark-parse": "^4.0.0",
+    "unified": "^6.1.5"
   },
   "peerDependencies": {
     "react": ">= 0.14.0"
@@ -62,16 +65,10 @@
     ]
   },
   "scripts": {
-    "prepublish": "in-publish && npm run es5 || not-in-publish",
-    "es5": "babel index.js --out-file index.es5.js",
-    "site:css": "stylus -u autoprefixer-stylus site.styl -o docs/css/style.css",
-    "site:css:release": "npm run site:css -- -c",
-    "site:css:watch": "npm run site:css -- -w -m -l --sourcemap-inline",
-    "site:js": "browserify site.js -t babelify -p bundle-collapser/plugin",
-    "site:js:release": "NODE_ENV=production npm run -s site:js | uglifyjs -mc drop_console --screw-ie8 -o docs/js/bundle.js",
-    "site:js:watch": "budo site.js:js/bundle.js -d docs -H 0.0.0.0 --colors --live --open --pushstate --iw -- -t babelify",
-    "site:release": "npm run site:css:release && npm run site:js:release",
-    "start": "sh scripts/parallelize.sh \"npm run site:css:watch\" \"npm run site:js:watch\"",
+    "prepublish": "in-publish && npm run build || not-in-publish",
+    "build": "babel index.js --out-file index.cjs.js && BABEL_ENV=esm babel index.js --out-file index.esm.js",
+    "release": "webpack --config ./webpack.release.config.babel.js -p --display-optimization-bailout",
+    "start": "webpack-dev-server --hot --inline --open",
     "test": "jest --verbose"
   }
 }