From bbcd25e709a62e4c8abfa14f3bf3d9f8eb86844d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Berg=C3=A9?= Date: Sun, 28 Apr 2019 18:41:31 +0200 Subject: [PATCH 1/5] Improve performances Following #444, I bring perf improvements from @smooth-ui/system into styled-system. The goal is to make this library the best one and the universal one. What have changed? - I switched to the core of @smooth-ui/system, more performant especially with multiple compose. Composition is now flat, it means you can compose 10 times and it will not be slower. We are probably in O(n), where "n" is the number of props. - I splitted the logic in several files to make it clearer - I switched to rollup in order to optimize build, provide umd and improve tree shaking What are the breaking changes? - We now rely on the order of props. ES2015 is here and we can rely on it, see this tweet for context: https://twitter.com/ianstormtaylor/status/1115680037875752963. - We are more strict in breakpoints, we don't accept a non-existing breakpoint - We don't export utilities like get, themeGet, etc... - PropTypes are no longer included, they can be generated from meta - We don't return array, just an object with all props merged - Properties that default to pixels unit (like margin, padding) no longer include it --- .npmignore | 17 +- babel.config.js | 41 +-- benchmarks/index.js | 40 ++ benchmarks/v4.1.0.js | 688 +++++++++++++++++++++++++++++++++++ package-lock.json | 324 ++++++++++++----- package.json | 22 +- rollup.config.js | 90 +++++ src/index.js | 511 +------------------------- src/media.js | 8 + src/style.js | 195 ++++++++++ src/styles/backgrounds.js | 36 ++ src/styles/basics.js | 14 + src/styles/borders.js | 99 +++++ src/styles/colors.js | 9 + src/styles/dimensions.js | 54 +++ src/styles/flexboxes.js | 65 ++++ src/styles/grids.js | 45 +++ src/styles/index.js | 33 ++ src/styles/index.test.js-nop | 432 ++++++++++++++++++++++ src/styles/positions.js | 40 ++ src/styles/space.js | 129 +++++++ src/styles/space.test.js-nop | 108 ++++++ src/styles/typography.js | 54 +++ src/unit.js | 23 ++ src/util.js | 33 ++ src/variant.js | 4 + src/variants.js | 5 + test/index.js | 263 ++++++------- test/styles.js | 124 ++++--- 29 files changed, 2683 insertions(+), 823 deletions(-) create mode 100644 benchmarks/index.js create mode 100644 benchmarks/v4.1.0.js create mode 100644 rollup.config.js create mode 100644 src/media.js create mode 100644 src/style.js create mode 100644 src/styles/backgrounds.js create mode 100644 src/styles/basics.js create mode 100644 src/styles/borders.js create mode 100644 src/styles/colors.js create mode 100644 src/styles/dimensions.js create mode 100644 src/styles/flexboxes.js create mode 100644 src/styles/grids.js create mode 100644 src/styles/index.js create mode 100644 src/styles/index.test.js-nop create mode 100644 src/styles/positions.js create mode 100644 src/styles/space.js create mode 100644 src/styles/space.test.js-nop create mode 100644 src/styles/typography.js create mode 100644 src/unit.js create mode 100644 src/util.js create mode 100644 src/variant.js create mode 100644 src/variants.js diff --git a/.npmignore b/.npmignore index 35d450777..b62fff18b 100644 --- a/.npmignore +++ b/.npmignore @@ -1,14 +1,3 @@ -.DS_Store -.prettierrc -.nyc_output -.travis.yml -coverage -coverage.lcov -bench -docs -src -examples -babel.config.js -test -CONTRIBUTING.md -CODE_OF_CONDUCT.md +/* +!/dist/**/*.js +!/props.js \ No newline at end of file diff --git a/babel.config.js b/babel.config.js index b98087bf5..ad4605be9 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,29 +1,16 @@ -module.exports = { - env: { - test: { - presets: [ - [ '@babel/env', { loose: true } ], - '@babel/react' - ], - plugins: [ - '@babel/transform-runtime' - ] - }, - cjs: { - presets: [ - [ '@babel/env', { loose: true } ] - ], - plugins: [ - '@babel/transform-runtime' - ] - }, - esm: { - presets: [ - [ '@babel/env', { loose: true, modules: false } ] - ], - plugins: [ - ['@babel/transform-runtime', { useESModules: true }] - ] - }, +module.exports = function getConfig(api) { + const isRollup = api.caller( + caller => caller && caller.name === 'rollup-plugin-babel' + ) + if (!isRollup) + return { + presets: [['@babel/preset-env', { loose: true }], '@babel/react'], + } + return { + presets: [['@babel/preset-env', { loose: true, modules: false }]], + plugins: [ + 'babel-plugin-annotate-pure-calls', + ['@babel/transform-runtime', { useESModules: true }], + ], } } diff --git a/benchmarks/index.js b/benchmarks/index.js new file mode 100644 index 000000000..f46ec7875 --- /dev/null +++ b/benchmarks/index.js @@ -0,0 +1,40 @@ +/* eslint-disable no-console, import/no-unresolved */ +const Benchmark = require('benchmark') + +const libs = [ + { + name: 'actual', + module: require('../dist/styled-system.cjs'), + }, + { + name: 'v4', + module: require('./v4.1.0'), + }, +].map(({ name, module: { compose, fontSize, space } }) => { + const system = compose( + fontSize, + space + ) + const run = () => system({ p: [10, 20], mt: 10, m: '20px', fontSize: 10 }) + return { name, run } +}) + +const suite = new Benchmark.Suite() + +console.log('Initial run...') + +libs.forEach(lib => { + console.log(lib.name, lib.run()) + suite.add(lib.name, lib.run) +}) + +console.log('Run suite...') + +suite + .on('cycle', event => { + console.log(String(event.target)) + }) + .on('complete', function onComplete() { + console.log(`Fastest is ${this.filter('fastest').map('name')}`) + }) + .run({ async: true }) diff --git a/benchmarks/v4.1.0.js b/benchmarks/v4.1.0.js new file mode 100644 index 000000000..114f91cea --- /dev/null +++ b/benchmarks/v4.1.0.js @@ -0,0 +1,688 @@ +"use strict"; + +var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); + +exports.__esModule = true; +exports.colorStyle = exports.textStyle = exports.buttonStyle = exports.left = exports.bottom = exports.right = exports.top = exports.zIndex = exports.position = exports.backgroundRepeat = exports.backgroundPosition = exports.backgroundSize = exports.backgroundImage = exports.background = exports.overflow = exports.opacity = exports.boxShadow = exports.borders = exports.borderRadius = exports.borderLeft = exports.borderBottom = exports.borderRight = exports.borderTop = exports.borderColor = exports.borderStyle = exports.borderWidth = exports.border = exports.gridArea = exports.gridTemplateAreas = exports.gridTemplateRows = exports.gridTemplateColumns = exports.gridAutoRows = exports.gridAutoColumns = exports.gridAutoFlow = exports.gridRow = exports.gridColumn = exports.gridRowGap = exports.gridColumnGap = exports.gridGap = exports.order = exports.alignSelf = exports.justifySelf = exports.flex = exports.flexDirection = exports.flexBasis = exports.flexWrap = exports.justifyContent = exports.justifyItems = exports.alignContent = exports.alignItems = exports.verticalAlign = exports.size = exports.minHeight = exports.maxHeight = exports.height = exports.minWidth = exports.maxWidth = exports.display = exports.letterSpacing = exports.fontStyle = exports.textAlign = exports.lineHeight = exports.fontWeight = exports.fontFamily = exports.fontSize = exports.getPx = exports.width = exports.getWidth = exports.color = exports.backgroundColor = exports.textColor = exports.space = exports.paddingRight = exports.paddingLeft = exports.paddingBottom = exports.paddingTop = exports.padding = exports.marginRight = exports.marginLeft = exports.marginBottom = exports.marginTop = exports.margin = exports.variant = exports.mapProps = exports.compose = exports.style = exports.createMediaQuery = exports.px = exports.num = exports.isObject = exports.is = exports.themeGet = exports.get = exports.cloneFunction = exports.propType = exports.defaultBreakpoints = void 0; + +var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); + +var _propTypes = _interopRequireDefault(require("prop-types")); + +var defaultBreakpoints = [40, 52, 64].map(function (n) { + return n + 'em'; +}); +exports.defaultBreakpoints = defaultBreakpoints; + +var propType = _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string, _propTypes.default.array, _propTypes.default.object]); + +exports.propType = propType; + +var cloneFunction = function cloneFunction(fn) { + return function () { + return fn.apply(void 0, arguments); + }; +}; + +exports.cloneFunction = cloneFunction; + +var get = function get(obj) { + for (var _len = arguments.length, paths = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { + paths[_key - 1] = arguments[_key]; + } + + var value = paths.reduce(function (a, path) { + if (is(a)) return a; + var keys = typeof path === 'string' ? path.split('.') : [path]; + return keys.reduce(function (a, key) { + return a && is(a[key]) ? a[key] : null; + }, obj); + }, null); + return is(value) ? value : paths[paths.length - 1]; +}; + +exports.get = get; + +var themeGet = function themeGet(path, fallback) { + if (fallback === void 0) { + fallback = null; + } + + return function (props) { + return get(props.theme, path, fallback); + }; +}; + +exports.themeGet = themeGet; + +var is = function is(n) { + return n !== undefined && n !== null; +}; + +exports.is = is; + +var isObject = function isObject(n) { + return typeof n === 'object' && n !== null; +}; + +exports.isObject = isObject; + +var num = function num(n) { + return typeof n === 'number' && !isNaN(n); +}; + +exports.num = num; + +var px = function px(n) { + return num(n) && n !== 0 ? n + 'px' : n; +}; + +exports.px = px; + +var createMediaQuery = function createMediaQuery(n) { + return "@media screen and (min-width: " + px(n) + ")"; +}; + +exports.createMediaQuery = createMediaQuery; + +var getValue = function getValue(n, scale) { + return get(scale, n); +}; + +var style = function style(_ref) { + var _func$propTypes; + + var prop = _ref.prop, + cssProperty = _ref.cssProperty, + alias = _ref.alias, + key = _ref.key, + _ref$transformValue = _ref.transformValue, + transformValue = _ref$transformValue === void 0 ? getValue : _ref$transformValue, + _ref$scale = _ref.scale, + defaultScale = _ref$scale === void 0 ? {} : _ref$scale; + var property = cssProperty || prop; + + var func = function func(props) { + var value = get(props, prop, alias, null); + if (!is(value)) return null; + var scale = get(props.theme, key, defaultScale); + + var createStyle = function createStyle(n) { + var _ref2; + + return is(n) ? (_ref2 = {}, _ref2[property] = transformValue(n, scale), _ref2) : null; + }; + + if (!isObject(value)) return createStyle(value); + var breakpoints = get(props.theme, 'breakpoints', defaultBreakpoints); + var styles = []; + + if (Array.isArray(value)) { + styles.push(createStyle(value[0])); + + for (var i = 1; i < value.slice(0, breakpoints.length + 1).length; i++) { + var rule = createStyle(value[i]); + + if (rule) { + var _styles$push; + + var media = createMediaQuery(breakpoints[i - 1]); + styles.push((_styles$push = {}, _styles$push[media] = rule, _styles$push)); + } + } + } else { + for (var _key2 in value) { + var breakpoint = breakpoints[_key2]; + + var _media = createMediaQuery(breakpoint); + + var _rule = createStyle(value[_key2]); + + if (!breakpoint) { + styles.unshift(_rule); + } else { + var _styles$push2; + + styles.push((_styles$push2 = {}, _styles$push2[_media] = _rule, _styles$push2)); + } + } + + styles.sort(); + } + + return styles; + }; + + func.propTypes = (_func$propTypes = {}, _func$propTypes[prop] = cloneFunction(propType), _func$propTypes); + func.propTypes[prop].meta = { + prop: prop, + themeKey: key + }; + + if (alias) { + func.propTypes[alias] = cloneFunction(propType); + func.propTypes[alias].meta = { + prop: alias, + themeKey: key + }; + } + + return func; +}; + +exports.style = style; + +var compose = function compose() { + for (var _len2 = arguments.length, funcs = new Array(_len2), _key3 = 0; _key3 < _len2; _key3++) { + funcs[_key3] = arguments[_key3]; + } + + var func = function func(props) { + var n = funcs.map(function (fn) { + return fn(props); + }).filter(Boolean); + return n; + }; + + func.propTypes = {}; + funcs.forEach(function (fn) { + func.propTypes = (0, _extends2.default)({}, func.propTypes, fn.propTypes); + }); + return func; +}; + +exports.compose = compose; + +var mapProps = function mapProps(mapper) { + return function (func) { + var next = function next(props) { + return func(mapper(props)); + }; + + for (var key in func) { + next[key] = func[key]; + } + + return next; + }; +}; + +exports.mapProps = mapProps; + +var variant = function variant(_ref3) { + var _fn$propTypes; + + var key = _ref3.key, + _ref3$prop = _ref3.prop, + prop = _ref3$prop === void 0 ? 'variant' : _ref3$prop; + + var fn = function fn(props) { + return get(props.theme, [key, props[prop]].join('.'), null); + }; + + fn.propTypes = (_fn$propTypes = {}, _fn$propTypes[prop] = _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]), _fn$propTypes); + return fn; +}; // space + + +exports.variant = variant; +var spaceScale = [0, 4, 8, 16, 32, 64, 128, 256, 512]; + +var getSpace = function getSpace(n, scale) { + if (!num(n)) { + return px(get(scale, n, n)); + } + + var isNegative = n < 0; + var absolute = Math.abs(n); + var value = get(scale, absolute); + + if (!num(value)) { + return isNegative ? '-' + value : value; + } + + return px(value * (isNegative ? -1 : 1)); +}; + +var margin = style({ + prop: 'margin', + alias: 'm', + key: 'space', + transformValue: getSpace, + scale: spaceScale +}); +exports.margin = margin; +var marginTop = style({ + prop: 'marginTop', + alias: 'mt', + key: 'space', + transformValue: getSpace, + scale: spaceScale +}); +exports.marginTop = marginTop; +var marginBottom = style({ + prop: 'marginBottom', + alias: 'mb', + key: 'space', + transformValue: getSpace, + scale: spaceScale +}); +exports.marginBottom = marginBottom; +var marginLeft = style({ + prop: 'marginLeft', + alias: 'ml', + key: 'space', + transformValue: getSpace, + scale: spaceScale +}); +exports.marginLeft = marginLeft; +var marginRight = style({ + prop: 'marginRight', + alias: 'mr', + key: 'space', + transformValue: getSpace, + scale: spaceScale +}); +exports.marginRight = marginRight; +var padding = style({ + prop: 'padding', + alias: 'p', + key: 'space', + transformValue: getSpace, + scale: spaceScale +}); +exports.padding = padding; +var paddingTop = style({ + prop: 'paddingTop', + alias: 'pt', + key: 'space', + transformValue: getSpace, + scale: spaceScale +}); +exports.paddingTop = paddingTop; +var paddingBottom = style({ + prop: 'paddingBottom', + alias: 'pb', + key: 'space', + transformValue: getSpace, + scale: spaceScale +}); +exports.paddingBottom = paddingBottom; +var paddingLeft = style({ + prop: 'paddingLeft', + alias: 'pl', + key: 'space', + transformValue: getSpace, + scale: spaceScale +}); +exports.paddingLeft = paddingLeft; +var paddingRight = style({ + prop: 'paddingRight', + alias: 'pr', + key: 'space', + transformValue: getSpace, + scale: spaceScale +}); +exports.paddingRight = paddingRight; +var space = mapProps(function (props) { + return (0, _extends2.default)({}, props, { + mt: is(props.my) ? props.my : props.mt, + mb: is(props.my) ? props.my : props.mb, + ml: is(props.mx) ? props.mx : props.ml, + mr: is(props.mx) ? props.mx : props.mr, + pt: is(props.py) ? props.py : props.pt, + pb: is(props.py) ? props.py : props.pb, + pl: is(props.px) ? props.px : props.pl, + pr: is(props.px) ? props.px : props.pr + }); +})(compose(margin, marginTop, marginBottom, marginLeft, marginRight, padding, paddingTop, paddingBottom, paddingLeft, paddingRight)); // color + +exports.space = space; +var textColor = style({ + prop: 'color', + key: 'colors' +}); +exports.textColor = textColor; +var backgroundColor = style({ + prop: 'backgroundColor', + alias: 'bg', + key: 'colors' +}); +exports.backgroundColor = backgroundColor; +var color = compose(textColor, backgroundColor); // width + +exports.color = color; + +var getWidth = function getWidth(n, scale) { + return !num(n) || n > 1 ? px(n) : n * 100 + '%'; +}; + +exports.getWidth = getWidth; +var width = style({ + prop: 'width', + key: 'widths', + transformValue: getWidth +}); // typography + +exports.width = width; + +var getPx = function getPx(n, scale) { + return px(get(scale, n)); +}; + +exports.getPx = getPx; +var fontSize = style({ + prop: 'fontSize', + key: 'fontSizes', + transformValue: getPx, + scale: [12, 14, 16, 20, 24, 32, 48, 64, 72] +}); +exports.fontSize = fontSize; +var fontFamily = style({ + prop: 'fontFamily', + key: 'fonts' +}); +exports.fontFamily = fontFamily; +var fontWeight = style({ + prop: 'fontWeight', + key: 'fontWeights' +}); +exports.fontWeight = fontWeight; +var lineHeight = style({ + prop: 'lineHeight', + key: 'lineHeights' +}); +exports.lineHeight = lineHeight; +var textAlign = style({ + prop: 'textAlign' +}); +exports.textAlign = textAlign; +var fontStyle = style({ + prop: 'fontStyle' +}); +exports.fontStyle = fontStyle; +var letterSpacing = style({ + prop: 'letterSpacing', + key: 'letterSpacings', + transformValue: getPx +}); // layout + +exports.letterSpacing = letterSpacing; +var display = style({ + prop: 'display' +}); +exports.display = display; +var maxWidth = style({ + prop: 'maxWidth', + key: 'maxWidths', + transformValue: getPx +}); +exports.maxWidth = maxWidth; +var minWidth = style({ + prop: 'minWidth', + key: 'minWidths', + transformValue: getPx +}); +exports.minWidth = minWidth; +var height = style({ + prop: 'height', + key: 'heights', + transformValue: getPx +}); +exports.height = height; +var maxHeight = style({ + prop: 'maxHeight', + key: 'maxHeights', + transformValue: getPx +}); +exports.maxHeight = maxHeight; +var minHeight = style({ + prop: 'minHeight', + key: 'minHeights', + transformValue: getPx +}); +exports.minHeight = minHeight; +var size = mapProps(function (props) { + return (0, _extends2.default)({}, props, { + width: props.size, + height: props.size + }); +})(compose(width, height)); +exports.size = size; +var verticalAlign = style({ + prop: 'verticalAlign' +}); // flexbox + +exports.verticalAlign = verticalAlign; +var alignItems = style({ + prop: 'alignItems' +}); +exports.alignItems = alignItems; +var alignContent = style({ + prop: 'alignContent' +}); +exports.alignContent = alignContent; +var justifyItems = style({ + prop: 'justifyItems' +}); +exports.justifyItems = justifyItems; +var justifyContent = style({ + prop: 'justifyContent' +}); +exports.justifyContent = justifyContent; +var flexWrap = style({ + prop: 'flexWrap' +}); +exports.flexWrap = flexWrap; +var flexBasis = style({ + prop: 'flexBasis', + transformValue: getWidth +}); +exports.flexBasis = flexBasis; +var flexDirection = style({ + prop: 'flexDirection' +}); +exports.flexDirection = flexDirection; +var flex = style({ + prop: 'flex' +}); +exports.flex = flex; +var justifySelf = style({ + prop: 'justifySelf' +}); +exports.justifySelf = justifySelf; +var alignSelf = style({ + prop: 'alignSelf' +}); +exports.alignSelf = alignSelf; +var order = style({ + prop: 'order' +}); // grid + +exports.order = order; +var gridGap = style({ + prop: 'gridGap', + key: 'space', + transformValue: getPx, + scale: spaceScale +}); +exports.gridGap = gridGap; +var gridColumnGap = style({ + prop: 'gridColumnGap', + key: 'space', + transformValue: getPx, + scale: spaceScale +}); +exports.gridColumnGap = gridColumnGap; +var gridRowGap = style({ + prop: 'gridRowGap', + key: 'space', + transformValue: getPx, + scale: spaceScale +}); +exports.gridRowGap = gridRowGap; +var gridColumn = style({ + prop: 'gridColumn' +}); +exports.gridColumn = gridColumn; +var gridRow = style({ + prop: 'gridRow' +}); +exports.gridRow = gridRow; +var gridAutoFlow = style({ + prop: 'gridAutoFlow' +}); +exports.gridAutoFlow = gridAutoFlow; +var gridAutoColumns = style({ + prop: 'gridAutoColumns' +}); +exports.gridAutoColumns = gridAutoColumns; +var gridAutoRows = style({ + prop: 'gridAutoRows' +}); +exports.gridAutoRows = gridAutoRows; +var gridTemplateColumns = style({ + prop: 'gridTemplateColumns' +}); +exports.gridTemplateColumns = gridTemplateColumns; +var gridTemplateRows = style({ + prop: 'gridTemplateRows' +}); +exports.gridTemplateRows = gridTemplateRows; +var gridTemplateAreas = style({ + prop: 'gridTemplateAreas' +}); +exports.gridTemplateAreas = gridTemplateAreas; +var gridArea = style({ + prop: 'gridArea' +}); // borders + +exports.gridArea = gridArea; +var border = style({ + prop: 'border', + key: 'borders' +}); +exports.border = border; +var borderWidth = style({ + prop: 'borderWidth', + key: 'borderWidths', + transformValue: getPx +}); +exports.borderWidth = borderWidth; +var borderStyle = style({ + prop: 'borderStyle', + key: 'borderStyles' +}); +exports.borderStyle = borderStyle; +var borderColor = style({ + prop: 'borderColor', + key: 'colors' +}); +exports.borderColor = borderColor; +var borderTop = style({ + prop: 'borderTop', + key: 'borders' +}); +exports.borderTop = borderTop; +var borderRight = style({ + prop: 'borderRight', + key: 'borders' +}); +exports.borderRight = borderRight; +var borderBottom = style({ + prop: 'borderBottom', + key: 'borders' +}); +exports.borderBottom = borderBottom; +var borderLeft = style({ + prop: 'borderLeft', + key: 'borders' +}); +exports.borderLeft = borderLeft; +var borderRadius = style({ + prop: 'borderRadius', + key: 'radii', + transformValue: getPx +}); +exports.borderRadius = borderRadius; +var borders = compose(border, borderTop, borderRight, borderBottom, borderLeft, borderWidth, borderStyle, borderColor, borderRadius); +exports.borders = borders; +var boxShadow = style({ + prop: 'boxShadow', + key: 'shadows' +}); +exports.boxShadow = boxShadow; +var opacity = style({ + prop: 'opacity' +}); +exports.opacity = opacity; +var overflow = style({ + prop: 'overflow' +}); // backgrounds + +exports.overflow = overflow; +var background = style({ + prop: 'background' +}); +exports.background = background; +var backgroundImage = style({ + prop: 'backgroundImage' +}); +exports.backgroundImage = backgroundImage; +var backgroundSize = style({ + prop: 'backgroundSize' +}); +exports.backgroundSize = backgroundSize; +var backgroundPosition = style({ + prop: 'backgroundPosition' +}); +exports.backgroundPosition = backgroundPosition; +var backgroundRepeat = style({ + prop: 'backgroundRepeat' +}); // position + +exports.backgroundRepeat = backgroundRepeat; +var position = style({ + prop: 'position' +}); +exports.position = position; +var zIndex = style({ + prop: 'zIndex', + key: 'zIndices' +}); +exports.zIndex = zIndex; +var top = style({ + prop: 'top', + transformValue: getPx +}); +exports.top = top; +var right = style({ + prop: 'right', + transformValue: getPx +}); +exports.right = right; +var bottom = style({ + prop: 'bottom', + transformValue: getPx +}); +exports.bottom = bottom; +var left = style({ + prop: 'left', + transformValue: getPx +}); // variants + +exports.left = left; +var buttonStyle = variant({ + key: 'buttons' +}); +exports.buttonStyle = buttonStyle; +var textStyle = variant({ + key: 'textStyles', + prop: 'textStyle' +}); +exports.textStyle = textStyle; +var colorStyle = variant({ + key: 'colorStyles', + prop: 'colors' +}); +exports.colorStyle = colorStyle; diff --git a/package-lock.json b/package-lock.json index 997d964ea..936a736c4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -46,24 +46,6 @@ "slide": "^1.1.5" } }, - "@babel/cli": { - "version": "7.2.3", - "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.2.3.tgz", - "integrity": "sha512-bfna97nmJV6nDJhXNPeEfxyMjWnt6+IjUAaDPiYRTBlm8L41n8nvw6UAqUCbvpFfU246gHPxW7sfWwqtF4FcYA==", - "dev": true, - "requires": { - "chokidar": "^2.0.3", - "commander": "^2.8.1", - "convert-source-map": "^1.1.0", - "fs-readdir-recursive": "^1.1.0", - "glob": "^7.0.0", - "lodash": "^4.17.10", - "mkdirp": "^0.5.1", - "output-file-sync": "^2.0.0", - "slash": "^2.0.0", - "source-map": "^0.5.0" - } - }, "@babel/code-frame": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0.tgz", @@ -1565,6 +1547,33 @@ "any-observable": "^0.3.0" } }, + "@types/estree": { + "version": "0.0.39", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz", + "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==", + "dev": true + }, + "@types/node": { + "version": "11.13.8", + "resolved": "https://registry.npmjs.org/@types/node/-/node-11.13.8.tgz", + "integrity": "sha512-szA3x/3miL90ZJxUCzx9haNbK5/zmPieGraZEe4WI+3srN0eGLiT22NXeMHmyhNEopn+IrxqMc7wdVwvPl8meg==", + "dev": true + }, + "@types/resolve": { + "version": "0.0.8", + "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz", + "integrity": "sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ==", + "dev": true, + "requires": { + "@types/node": "*" + } + }, + "acorn": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.1.1.tgz", + "integrity": "sha512-jPTiwtOxaHNaAPg/dmrJ/beuzLRnXtB0kQPQ8JpotKJgTB6rX6c8mlf315941pyjBSaPg8NHXS9fhP4u17DpGA==", + "dev": true + }, "ansi-align": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-2.0.0.tgz", @@ -1977,6 +1986,12 @@ } } }, + "babel-plugin-annotate-pure-calls": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/babel-plugin-annotate-pure-calls/-/babel-plugin-annotate-pure-calls-0.4.0.tgz", + "integrity": "sha512-oi4M/PWUJOU9ZyRGoPTfPMqdyMp06jbJAomd3RcyYuzUtBOddv98BqLm96Lucpi2QFoQHkdGQt0ACvw7VzVEQA==", + "dev": true + }, "babel-plugin-emotion": { "version": "10.0.9", "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.9.tgz", @@ -2099,6 +2114,16 @@ } } }, + "benchmark": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/benchmark/-/benchmark-2.1.4.tgz", + "integrity": "sha1-CfPeMckWQl1JjMLuVloOvzwqVik=", + "dev": true, + "requires": { + "lodash": "^4.17.4", + "platform": "^1.3.3" + } + }, "binary-extensions": { "version": "1.12.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.12.0.tgz", @@ -2293,28 +2318,6 @@ "supports-color": "^5.3.0" } }, - "chokidar": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.0.4.tgz", - "integrity": "sha512-z9n7yt9rOvIJrMhvDtDictKrkFHeihkNl6uWMmZlmL6tJtX9Cs+87oK+teBx+JIgzvbX3yZHT3eF8vpbDxHJXQ==", - "dev": true, - "optional": true, - "requires": { - "anymatch": "^2.0.0", - "async-each": "^1.0.0", - "braces": "^2.3.0", - "fsevents": "^1.2.2", - "glob-parent": "^3.1.0", - "inherits": "^2.0.1", - "is-binary-path": "^1.0.0", - "is-glob": "^4.0.0", - "lodash.debounce": "^4.0.8", - "normalize-path": "^2.1.1", - "path-is-absolute": "^1.0.0", - "readdirp": "^2.0.0", - "upath": "^1.0.5" - } - }, "chunkd": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/chunkd/-/chunkd-1.0.0.tgz", @@ -2715,6 +2718,11 @@ "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==", "dev": true }, + "deepmerge": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.2.0.tgz", + "integrity": "sha512-6+LuZGU7QCNUnAJyX8cIrlzoEgggTM6B7mm+znKOX4t5ltluT9KLjN6g61ECMS0LTsLW7yDpNoxhix5FZcrIow==" + }, "defaults": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz", @@ -2935,6 +2943,12 @@ "integrity": "sha1-De4/7TH81GlhjOc0IJn8GvoL2xM=", "dev": true }, + "estree-walker": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.0.tgz", + "integrity": "sha512-peq1RfVAVzr3PU/jL31RaOjUKLoZJpObQWJJ+LgfcxDUifyLZ1RjPQZTl0pzj2uJ45b7A7XpyppXvxdEqzo4rw==", + "dev": true + }, "esutils": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz", @@ -3192,12 +3206,6 @@ "map-cache": "^0.2.2" } }, - "fs-readdir-recursive": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz", - "integrity": "sha512-GNanXlVr2pf02+sPN40XN8HG+ePaNcvM0q5mZBd668Obwb0yD5GiUbZOFgwn8kGMY6I3mdyDJzieUy3PTYyTRA==", - "dev": true - }, "fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -3224,8 +3232,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -3246,14 +3253,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3268,20 +3273,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -3398,8 +3400,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -3411,7 +3412,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3426,7 +3426,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -3434,14 +3433,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3460,7 +3457,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -3541,8 +3537,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -3554,7 +3549,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -3640,8 +3634,7 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -3677,7 +3670,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3697,7 +3689,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3741,14 +3732,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, @@ -4383,6 +4372,12 @@ "is-path-inside": "^1.0.0" } }, + "is-module": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz", + "integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=", + "dev": true + }, "is-npm": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-1.0.0.tgz", @@ -4550,6 +4545,27 @@ "semver": "^5.5.0" } }, + "jest-worker": { + "version": "24.6.0", + "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-24.6.0.tgz", + "integrity": "sha512-jDwgW5W9qGNvpI1tNnvajh0a5IE/PuGLFmHk6aR/BZFz8tSgGw17GsDPXAJ6p91IvYDjOw8GpFbvvZGAK+DPQQ==", + "dev": true, + "requires": { + "merge-stream": "^1.0.1", + "supports-color": "^6.1.0" + }, + "dependencies": { + "supports-color": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", + "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + } + } + }, "js-levenshtein": { "version": "1.1.6", "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz", @@ -5048,6 +5064,15 @@ "yallist": "^2.1.2" } }, + "magic-string": { + "version": "0.25.2", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.2.tgz", + "integrity": "sha512-iLs9mPjh9IuTtRsqqhNGYcZXGei0Nh/A4xirrsqW7c+QhKVFL2vm7U09ru6cHRD22azaP/wMDgI+HCqbETMTtg==", + "dev": true, + "requires": { + "sourcemap-codec": "^1.4.4" + } + }, "make-dir": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz", @@ -5125,6 +5150,15 @@ "yargs-parser": "^10.0.0" } }, + "merge-stream": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-1.0.1.tgz", + "integrity": "sha1-QEEgLVCKNCugAXQAjfDCUbjBNeE=", + "dev": true, + "requires": { + "readable-stream": "^2.0.1" + } + }, "micromatch": { "version": "3.1.10", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz", @@ -6511,17 +6545,6 @@ "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", "dev": true }, - "output-file-sync": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/output-file-sync/-/output-file-sync-2.0.1.tgz", - "integrity": "sha512-mDho4qm7WgIXIGf4eYU1RHN2UU5tPfVYVSRwDJw0uTmj35DQUt/eNp19N7v6T3SrR0ESTEf2up2CGO73qI35zQ==", - "dev": true, - "requires": { - "graceful-fs": "^4.1.11", - "is-plain-obj": "^1.1.0", - "mkdirp": "^0.5.1" - } - }, "p-finally": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz", @@ -6808,6 +6831,12 @@ } } }, + "platform": { + "version": "1.3.5", + "resolved": "https://registry.npmjs.org/platform/-/platform-1.3.5.tgz", + "integrity": "sha512-TuvHS8AOIZNAlE77WUDiR4rySV/VMptyMfcfeoMgs4P8apaZM3JrnbzBiixKUv+XR6i+BXrQh8WAnjaSPFO65Q==", + "dev": true + }, "please-upgrade-node": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.1.1.tgz", @@ -7213,6 +7242,91 @@ "glob": "^7.1.3" } }, + "rollup": { + "version": "1.10.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-1.10.1.tgz", + "integrity": "sha512-pW353tmBE7QP622ITkGxtqF0d5gSRCVPD9xqM+fcPjudeZfoXMFW2sCzsTe2TU/zU1xamIjiS9xuFCPVT9fESw==", + "dev": true, + "requires": { + "@types/estree": "0.0.39", + "@types/node": "^11.13.5", + "acorn": "^6.1.1" + } + }, + "rollup-plugin-babel": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/rollup-plugin-babel/-/rollup-plugin-babel-4.3.2.tgz", + "integrity": "sha512-KfnizE258L/4enADKX61ozfwGHoqYauvoofghFJBhFnpH9Sb9dNPpWg8QHOaAfVASUYV8w0mCx430i9z0LJoJg==", + "dev": true, + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "rollup-pluginutils": "^2.3.0" + } + }, + "rollup-plugin-commonjs": { + "version": "9.3.4", + "resolved": "https://registry.npmjs.org/rollup-plugin-commonjs/-/rollup-plugin-commonjs-9.3.4.tgz", + "integrity": "sha512-DTZOvRoiVIHHLFBCL4pFxOaJt8pagxsVldEXBOn6wl3/V21wVaj17HFfyzTsQUuou3sZL3lEJZVWKPFblJfI6w==", + "dev": true, + "requires": { + "estree-walker": "^0.6.0", + "magic-string": "^0.25.2", + "resolve": "^1.10.0", + "rollup-pluginutils": "^2.6.0" + } + }, + "rollup-plugin-node-resolve": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-4.2.3.tgz", + "integrity": "sha512-r+WaesPzdGEynpLZLALFEDugA4ACa5zn7bc/+LVX4vAXQQ8IgDHv0xfsSvJ8tDXUtprfBtrDtRFg27ifKjcJTg==", + "dev": true, + "requires": { + "@types/resolve": "0.0.8", + "builtin-modules": "^3.1.0", + "is-module": "^1.0.0", + "resolve": "^1.10.0" + }, + "dependencies": { + "builtin-modules": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.1.0.tgz", + "integrity": "sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw==", + "dev": true + } + } + }, + "rollup-plugin-replace": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/rollup-plugin-replace/-/rollup-plugin-replace-2.2.0.tgz", + "integrity": "sha512-/5bxtUPkDHyBJAKketb4NfaeZjL5yLZdeUihSfbF2PQMz+rSTEb8ARKoOl3UBT4m7/X+QOXJo3sLTcq+yMMYTA==", + "dev": true, + "requires": { + "magic-string": "^0.25.2", + "rollup-pluginutils": "^2.6.0" + } + }, + "rollup-plugin-uglify": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/rollup-plugin-uglify/-/rollup-plugin-uglify-6.0.2.tgz", + "integrity": "sha512-qwz2Tryspn5QGtPUowq5oumKSxANKdrnfz7C0jm4lKxvRDsNe/hSGsB9FntUul7UeC4TsZEWKErVgE1qWSO0gw==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.0.0", + "jest-worker": "^24.0.0", + "serialize-javascript": "^1.6.1", + "uglify-js": "^3.4.9" + } + }, + "rollup-pluginutils": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.6.0.tgz", + "integrity": "sha512-aGQwspEF8oPKvg37u3p7h0cYNwmJR1sCBMZGZ5b9qy8HGtETknqjzcxrDRrcAnJNXN18lBH4Q9vZYth/p4n8jQ==", + "dev": true, + "requires": { + "estree-walker": "^0.6.0", + "micromatch": "^3.1.10" + } + }, "run-node": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/run-node/-/run-node-1.0.0.tgz", @@ -7280,6 +7394,12 @@ "integrity": "sha1-ULZ51WNc34Rme9yOWa9OW4HV9go=", "dev": true }, + "serialize-javascript": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-1.7.0.tgz", + "integrity": "sha512-ke8UG8ulpFOxO8f8gRYabHQe/ZntKlcig2Mp+8+URDP1D8vJZ0KUt7LYo07q25Z/+JVSgpr/cui9PIp5H6/+nA==", + "dev": true + }, "set-value": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.0.tgz", @@ -7521,6 +7641,12 @@ "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=", "dev": true }, + "sourcemap-codec": { + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.4.tgz", + "integrity": "sha512-CYAPYdBu34781kLHkaW3m6b/uUSyMOC2R61gcYMWooeuaGtjof86ZA/8T+qVPPt7np1085CR9hmMGrySwEc8Xg==", + "dev": true + }, "spdx-correct": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.0.2.tgz", @@ -7843,6 +7969,30 @@ "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==", "dev": true }, + "uglify-js": { + "version": "3.5.9", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.5.9.tgz", + "integrity": "sha512-WpT0RqsDtAWPNJK955DEnb6xjymR8Fn0OlK4TT4pS0ASYsVPqr5ELhgwOwLCP5J5vHeJ4xmMmz3DEgdqC10JeQ==", + "dev": true, + "requires": { + "commander": "~2.20.0", + "source-map": "~0.6.1" + }, + "dependencies": { + "commander": { + "version": "2.20.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.0.tgz", + "integrity": "sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==", + "dev": true + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, "uid2": { "version": "0.0.3", "resolved": "https://registry.npmjs.org/uid2/-/uid2-0.0.3.tgz", diff --git a/package.json b/package.json index eb86bdf94..f064b9299 100644 --- a/package.json +++ b/package.json @@ -2,22 +2,22 @@ "name": "styled-system", "version": "4.1.1", "description": "Responsive, theme-based style props for building design systems with React", - "main": "dist/index.cjs.js", - "module": "dist/index.esm.js", + "main": "dist/styled-system.cjs.js", + "module": "dist/styled-system.es.js", + "jsnext:main": "dist/styled-system.es.js", "sideEffects": false, "scripts": { - "prepare": "mkdirp dist && npm run build:cjs && npm run build:esm", + "prepare": "rollup -c", "prettier": "prettier \"{src,test,examples}/**/*.js\" --write", "clean": "rm -rf dist", - "build:cjs": "NODE_ENV=cjs babel src -o dist/index.cjs.js", - "build:esm": "NODE_ENV=esm babel src -o dist/index.esm.js", "logo": "npx repng docs/src/logo/index.js -d docs/static -f logo.png -w 512 -h 512", "logo-svg": "npx scrs docs/src/logo/index.js --svg > docs/static/logo.svg", "logo-white": "npx scrs docs/src/logo/white.js --svg > docs/static/logo-white.svg", "size": "npx bundlesize", "cover": "nyc report --reporter=html --reporter=lcov > coverage.lcov", "codecov": "nyc report --reporter=html --reporter=lcov > coverage.lcov && npx codecov", - "test": "nyc ava" + "test": "nyc ava", + "bench": "node benchmarks" }, "keywords": [ "react", @@ -28,7 +28,6 @@ "author": "Brent Jackson", "license": "MIT", "devDependencies": { - "@babel/cli": "^7.2.3", "@babel/core": "^7.4.0", "@babel/plugin-transform-runtime": "^7.4.0", "@babel/preset-env": "^7.4.2", @@ -37,12 +36,20 @@ "@emotion/core": "^10.0.9", "@emotion/styled": "^10.0.9", "ava": "^1.3.1", + "babel-plugin-annotate-pure-calls": "^0.4.0", + "benchmark": "^2.1.4", "husky": "^1.3.1", "lint-staged": "^8.1.5", "nyc": "^13.3.0", "prettier": "^1.16.4", "react": "^16.8.5", "react-test-renderer": "^16.8.5", + "rollup": "^1.10.1", + "rollup-plugin-babel": "^4.3.2", + "rollup-plugin-commonjs": "^9.3.4", + "rollup-plugin-node-resolve": "^4.2.3", + "rollup-plugin-replace": "^2.2.0", + "rollup-plugin-uglify": "^6.0.2", "styled-components": "^4.2.0" }, "ava": { @@ -71,6 +78,7 @@ }, "dependencies": { "@babel/runtime": "^7.4.2", + "deepmerge": "^3.2.0", "prop-types": "^15.7.2" }, "husky": { diff --git a/rollup.config.js b/rollup.config.js new file mode 100644 index 000000000..29dbe11ec --- /dev/null +++ b/rollup.config.js @@ -0,0 +1,90 @@ +/* eslint-disable import/no-extraneous-dependencies */ +import path from 'path' +import resolve from 'rollup-plugin-node-resolve' +import babel from 'rollup-plugin-babel' +import replace from 'rollup-plugin-replace' +import commonjs from 'rollup-plugin-commonjs' +import { uglify } from 'rollup-plugin-uglify' +import pkg from './package.json' + +function getConfig() { + const name = 'styledSystem' + const buildName = 'styled-system' + + const SOURCE_DIR = path.resolve(__dirname, 'src') + const DIST_DIR = path.resolve(__dirname, 'dist') + + const baseConfig = { + input: `${SOURCE_DIR}/index.js`, + plugins: [ + babel({ + runtimeHelpers: true, + exclude: 'node_modules/**', + configFile: path.join(__dirname, 'babel.config.js'), + }), + ], + } + + const esConfig = Object.assign({}, baseConfig, { + output: { + file: `${DIST_DIR}/${buildName}.es.js`, + format: 'es', + }, + external: [ + ...Object.keys(pkg.peerDependencies || {}), + ...Object.keys(pkg.dependencies || {}), + ], + plugins: [...baseConfig.plugins, resolve()], + }) + + const cjsConfig = Object.assign({}, esConfig, { + output: { + file: `${DIST_DIR}/${buildName}.cjs.js`, + format: 'cjs', + }, + }) + + const globals = { + deepmerge: 'deepmerge', + } + + const umdConfig = Object.assign({}, baseConfig, { + output: { + name, + file: `${DIST_DIR}/${buildName}.js`, + format: 'umd', + globals, + exports: 'named', + sourcemap: false, + }, + external: Object.keys(globals), + plugins: [...baseConfig.plugins, resolve({ browser: true }), commonjs()], + }) + + const minConfig = Object.assign({}, umdConfig, { + output: { + ...umdConfig.output, + file: `${DIST_DIR}/${buildName}.min.js`, + }, + plugins: [ + ...umdConfig.plugins, + replace({ 'process.env.NODE_ENV': JSON.stringify('production') }), + uglify({ + compress: { + pure_getters: true, + unsafe: true, + unsafe_comps: true, + warnings: false, + }, + }), + ], + }) + + if (process.env.WATCH_MODE) { + return [esConfig, cjsConfig] + } + + return [esConfig, cjsConfig, umdConfig, minConfig] +} + +export default getConfig() diff --git a/src/index.js b/src/index.js index c5435234f..876d7b920 100644 --- a/src/index.js +++ b/src/index.js @@ -1,508 +1,5 @@ -import PropTypes from 'prop-types' +export * from './style' +export * from './styles/index' -export const defaultBreakpoints = [40, 52, 64].map(n => n + 'em') - -export const propType = PropTypes.oneOfType([ - PropTypes.number, - PropTypes.string, - PropTypes.array, - PropTypes.object, -]) - -export const cloneFunction = fn => (...args) => fn(...args) - -export const get = (obj, ...paths) => { - const value = paths.reduce((a, path) => { - if (is(a)) return a - const keys = typeof path === 'string' ? path.split('.') : [path] - return keys.reduce((a, key) => (a && is(a[key]) ? a[key] : null), obj) - }, null) - return is(value) ? value : paths[paths.length - 1] -} - -export const themeGet = (path, fallback = null) => props => - get(props.theme, path, fallback) - -export const is = n => n !== undefined && n !== null - -export const isObject = n => typeof n === 'object' && n !== null - -export const num = n => typeof n === 'number' && !isNaN(n) - -export const px = n => (num(n) && n !== 0 ? n + 'px' : n) - -export const createMediaQuery = n => `@media screen and (min-width: ${px(n)})` - -const getValue = (n, scale) => get(scale, n) - -export const style = ({ - prop, - cssProperty, - alias, - key, - transformValue = getValue, - scale: defaultScale = {}, -}) => { - const property = cssProperty || prop - const func = props => { - const value = get(props, prop, alias, null) - if (!is(value)) return null - const scale = get(props.theme, key, defaultScale) - const createStyle = n => - is(n) - ? { - [property]: transformValue(n, scale), - } - : null - - if (!isObject(value)) return createStyle(value) - - const breakpoints = get(props.theme, 'breakpoints', defaultBreakpoints) - - const styles = [] - if (Array.isArray(value)) { - styles.push(createStyle(value[0])) - for (let i = 1; i < value.slice(0, breakpoints.length + 1).length; i++) { - const rule = createStyle(value[i]) - if (rule) { - const media = createMediaQuery(breakpoints[i - 1]) - styles.push({ [media]: rule }) - } - } - } else { - for (let key in value) { - const breakpoint = breakpoints[key] - const media = createMediaQuery(breakpoint) - const rule = createStyle(value[key]) - if (!breakpoint) { - styles.unshift(rule) - } else { - styles.push({ [media]: rule }) - } - } - styles.sort() - } - - return styles - } - - func.propTypes = { - [prop]: cloneFunction(propType), - } - func.propTypes[prop].meta = { - prop, - themeKey: key, - } - - if (alias) { - func.propTypes[alias] = cloneFunction(propType) - func.propTypes[alias].meta = { - prop: alias, - themeKey: key, - } - } - - return func -} - -export const compose = (...funcs) => { - const func = props => { - const n = funcs.map(fn => fn(props)).filter(Boolean) - return n - } - - func.propTypes = {} - funcs.forEach(fn => { - func.propTypes = { - ...func.propTypes, - ...fn.propTypes, - } - }) - - return func -} - -export const mapProps = mapper => func => { - const next = props => func(mapper(props)) - for (const key in func) { - next[key] = func[key] - } - return next -} - -export const variant = ({ key, prop = 'variant' }) => { - const fn = props => get(props.theme, [key, props[prop]].join('.'), null) - fn.propTypes = { - [prop]: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - } - return fn -} - -// space -const spaceScale = [0, 4, 8, 16, 32, 64, 128, 256, 512] - -const getSpace = (n, scale) => { - if (!num(n)) { - return px(get(scale, n, n)) - } - - const isNegative = n < 0 - const absolute = Math.abs(n) - const value = get(scale, absolute) - if (!num(value)) { - return isNegative ? '-' + value : value - } - return px(value * (isNegative ? -1 : 1)) -} - -export const margin = style({ - prop: 'margin', - alias: 'm', - key: 'space', - transformValue: getSpace, - scale: spaceScale, -}) - -export const marginTop = style({ - prop: 'marginTop', - alias: 'mt', - key: 'space', - transformValue: getSpace, - scale: spaceScale, -}) - -export const marginBottom = style({ - prop: 'marginBottom', - alias: 'mb', - key: 'space', - transformValue: getSpace, - scale: spaceScale, -}) - -export const marginLeft = style({ - prop: 'marginLeft', - alias: 'ml', - key: 'space', - transformValue: getSpace, - scale: spaceScale, -}) - -export const marginRight = style({ - prop: 'marginRight', - alias: 'mr', - key: 'space', - transformValue: getSpace, - scale: spaceScale, -}) - -export const padding = style({ - prop: 'padding', - alias: 'p', - key: 'space', - transformValue: getSpace, - scale: spaceScale, -}) - -export const paddingTop = style({ - prop: 'paddingTop', - alias: 'pt', - key: 'space', - transformValue: getSpace, - scale: spaceScale, -}) - -export const paddingBottom = style({ - prop: 'paddingBottom', - alias: 'pb', - key: 'space', - transformValue: getSpace, - scale: spaceScale, -}) - -export const paddingLeft = style({ - prop: 'paddingLeft', - alias: 'pl', - key: 'space', - transformValue: getSpace, - scale: spaceScale, -}) - -export const paddingRight = style({ - prop: 'paddingRight', - alias: 'pr', - key: 'space', - transformValue: getSpace, - scale: spaceScale, -}) - -export const space = mapProps(props => ({ - ...props, - mt: is(props.my) ? props.my : props.mt, - mb: is(props.my) ? props.my : props.mb, - ml: is(props.mx) ? props.mx : props.ml, - mr: is(props.mx) ? props.mx : props.mr, - pt: is(props.py) ? props.py : props.pt, - pb: is(props.py) ? props.py : props.pb, - pl: is(props.px) ? props.px : props.pl, - pr: is(props.px) ? props.px : props.pr, -}))( - compose( - margin, - marginTop, - marginBottom, - marginLeft, - marginRight, - padding, - paddingTop, - paddingBottom, - paddingLeft, - paddingRight - ) -) - -// color -export const textColor = style({ - prop: 'color', - key: 'colors', -}) - -export const backgroundColor = style({ - prop: 'backgroundColor', - alias: 'bg', - key: 'colors', -}) - -export const color = compose( - textColor, - backgroundColor -) - -// width -export const getWidth = (n, scale) => (!num(n) || n > 1 ? px(n) : n * 100 + '%') - -export const width = style({ - prop: 'width', - key: 'widths', - transformValue: getWidth, -}) - -// typography - -export const getPx = (n, scale) => px(get(scale, n)) - -export const fontSize = style({ - prop: 'fontSize', - key: 'fontSizes', - transformValue: getPx, - scale: [12, 14, 16, 20, 24, 32, 48, 64, 72], -}) - -export const fontFamily = style({ - prop: 'fontFamily', - key: 'fonts', -}) - -export const fontWeight = style({ - prop: 'fontWeight', - key: 'fontWeights', -}) - -export const lineHeight = style({ - prop: 'lineHeight', - key: 'lineHeights', -}) - -export const textAlign = style({ - prop: 'textAlign', -}) - -export const fontStyle = style({ - prop: 'fontStyle', -}) - -export const letterSpacing = style({ - prop: 'letterSpacing', - key: 'letterSpacings', - transformValue: getPx, -}) - -// layout -export const display = style({ - prop: 'display', -}) - -export const maxWidth = style({ - prop: 'maxWidth', - key: 'maxWidths', - transformValue: getPx, -}) - -export const minWidth = style({ - prop: 'minWidth', - key: 'minWidths', - transformValue: getPx, -}) - -export const height = style({ - prop: 'height', - key: 'heights', - transformValue: getPx, -}) - -export const maxHeight = style({ - prop: 'maxHeight', - key: 'maxHeights', - transformValue: getPx, -}) - -export const minHeight = style({ - prop: 'minHeight', - key: 'minHeights', - transformValue: getPx, -}) - -export const size = mapProps(props => ({ - ...props, - width: props.size, - height: props.size, -}))( - compose( - width, - height - ) -) - -export const verticalAlign = style({ prop: 'verticalAlign' }) - -// flexbox -export const alignItems = style({ prop: 'alignItems' }) -export const alignContent = style({ prop: 'alignContent' }) -export const justifyItems = style({ prop: 'justifyItems' }) -export const justifyContent = style({ prop: 'justifyContent' }) -export const flexWrap = style({ prop: 'flexWrap' }) -export const flexBasis = style({ prop: 'flexBasis', transformValue: getWidth }) -export const flexDirection = style({ prop: 'flexDirection' }) -export const flex = style({ prop: 'flex' }) -export const justifySelf = style({ prop: 'justifySelf' }) -export const alignSelf = style({ prop: 'alignSelf' }) -export const order = style({ prop: 'order' }) - -// grid -export const gridGap = style({ - prop: 'gridGap', - key: 'space', - transformValue: getPx, - scale: spaceScale, -}) - -export const gridColumnGap = style({ - prop: 'gridColumnGap', - key: 'space', - transformValue: getPx, - scale: spaceScale, -}) - -export const gridRowGap = style({ - prop: 'gridRowGap', - key: 'space', - transformValue: getPx, - scale: spaceScale, -}) - -export const gridColumn = style({ prop: 'gridColumn' }) -export const gridRow = style({ prop: 'gridRow' }) -export const gridAutoFlow = style({ prop: 'gridAutoFlow' }) -export const gridAutoColumns = style({ prop: 'gridAutoColumns' }) -export const gridAutoRows = style({ prop: 'gridAutoRows' }) -export const gridTemplateColumns = style({ prop: 'gridTemplateColumns' }) -export const gridTemplateRows = style({ prop: 'gridTemplateRows' }) -export const gridTemplateAreas = style({ prop: 'gridTemplateAreas' }) -export const gridArea = style({ prop: 'gridArea' }) - -// borders -export const border = style({ - prop: 'border', - key: 'borders', -}) - -export const borderWidth = style({ - prop: 'borderWidth', - key: 'borderWidths', - transformValue: getPx, -}) - -export const borderStyle = style({ - prop: 'borderStyle', - key: 'borderStyles', -}) - -export const borderColor = style({ - prop: 'borderColor', - key: 'colors', -}) - -export const borderTop = style({ - prop: 'borderTop', - key: 'borders', -}) - -export const borderRight = style({ - prop: 'borderRight', - key: 'borders', -}) - -export const borderBottom = style({ - prop: 'borderBottom', - key: 'borders', -}) - -export const borderLeft = style({ - prop: 'borderLeft', - key: 'borders', -}) - -export const borderRadius = style({ - prop: 'borderRadius', - key: 'radii', - transformValue: getPx, -}) - -export const borders = compose( - border, - borderTop, - borderRight, - borderBottom, - borderLeft, - borderWidth, - borderStyle, - borderColor, - borderRadius -) - -export const boxShadow = style({ - prop: 'boxShadow', - key: 'shadows', -}) - -export const opacity = style({ prop: 'opacity' }) -export const overflow = style({ prop: 'overflow' }) - -// backgrounds -export const background = style({ prop: 'background' }) -export const backgroundImage = style({ prop: 'backgroundImage' }) -export const backgroundSize = style({ prop: 'backgroundSize' }) -export const backgroundPosition = style({ prop: 'backgroundPosition' }) -export const backgroundRepeat = style({ prop: 'backgroundRepeat' }) - -// position -export const position = style({ prop: 'position' }) -export const zIndex = style({ prop: 'zIndex', key: 'zIndices' }) -export const top = style({ prop: 'top', transformValue: getPx }) -export const right = style({ prop: 'right', transformValue: getPx }) -export const bottom = style({ prop: 'bottom', transformValue: getPx }) -export const left = style({ prop: 'left', transformValue: getPx }) - -// variants -export const buttonStyle = variant({ key: 'buttons' }) -export const textStyle = variant({ key: 'textStyles', prop: 'textStyle' }) -export const colorStyle = variant({ key: 'colorStyles', prop: 'colors' }) +export * from './variant' +export * from './variants' diff --git a/src/media.js b/src/media.js new file mode 100644 index 000000000..13bec68b2 --- /dev/null +++ b/src/media.js @@ -0,0 +1,8 @@ +export const minBreakpoint = breakpoint => + breakpoint !== 0 ? breakpoint : null + +export const minWidth = value => `@media screen and (min-width: ${value})` + +export const DEFAULT_BREAKPOINTS = [0, 40, 52, 64].map(n => + n > 0 ? n + 'em' : n +) diff --git a/src/style.js b/src/style.js new file mode 100644 index 000000000..d5bbd6ce6 --- /dev/null +++ b/src/style.js @@ -0,0 +1,195 @@ +import { minBreakpoint, minWidth, DEFAULT_BREAKPOINTS } from './media' +import { is, num, string, obj, merge, get, func } from './util' + +function callOrReturn(fn, arg) { + if (!func(fn)) return fn + const next = fn(arg) + return callOrReturn(next, arg) +} + +function getThemeValue(theme, path, initial) { + if (!theme) return undefined + return callOrReturn(get(initial || theme, path), { theme }) +} + +function getValue(value, variants, theme) { + if (is(variants)) { + const valueFromVariants = getThemeValue(theme, value, variants) + if (is(valueFromVariants)) { + return valueFromVariants + } + } + return value +} + +function styleFromValue(cssProperties, value, theme, key, transformValue) { + const variants = getThemeValue(theme, key) + const computedValue = getValue(value, variants, theme) + if (string(computedValue) || num(computedValue)) { + const style = {} + for (let i = 0; i < cssProperties.length; i++) { + style[cssProperties[i]] = transformValue + ? transformValue(computedValue, { + rawValue: value, + variants, + }) + : computedValue + } + return style + } + return null +} + +function getBreakpoints(theme) { + const themeBreakpoints = getThemeValue(theme, 'breakpoints') + if (is(themeBreakpoints)) { + return themeBreakpoints + } + return DEFAULT_BREAKPOINTS +} + +function createStyleGenerator(getStyle, props, generators) { + const getStyles = props => { + const theme = props.theme || null + return getStyle(props, theme) + } + + getStyles.meta = { + props, + getStyle, + generators, + } + + return getStyles +} + +function styleFromBreakPoint(cssProperties, value, theme, key, transformValue) { + const breakpoints = getBreakpoints(theme) + const keys = Object.keys(value) + let allStyle = {} + for (let i = 0; i < keys.length; i++) { + const breakpoint = keys[i] + const style = styleFromValue( + cssProperties, + value[breakpoint], + theme, + key, + transformValue + ) + + if (style !== null) { + const breakpointValue = minBreakpoint(breakpoints[breakpoint]) + + if (breakpointValue === null) { + allStyle = merge(allStyle, style) + } else if (breakpointValue) { + allStyle = merge(allStyle, { + [minWidth(breakpointValue)]: style, + }) + } + } + } + return allStyle +} + +function getStyleFactory(prop, cssProperties, key, transformValue) { + return function getStyle(attrs, theme) { + const value = attrs[prop] + if (!is(value)) return null + + const style = styleFromValue( + cssProperties, + value, + theme, + key, + transformValue + ) + + if (style !== null) { + return style + } + + if (obj(value)) { + return styleFromBreakPoint( + cssProperties, + value, + theme, + key, + transformValue + ) + } + + return null + } +} + +export function style({ + prop, + cssProperties, + cssProperty, + alias, + key = null, + transformValue = null, +}) { + cssProperties = cssProperties || (cssProperty ? [cssProperty] : [prop]) + const getStyle = getStyleFactory(prop, cssProperties, key, transformValue) + const generator = createStyleGenerator(getStyle, [prop]) + + if (!alias) { + return generator + } + + return compose( + generator, + style({ prop: alias, cssProperties, key, transformValue }) + ) +} + +function indexGeneratorsByProp(styles) { + const index = {} + for (let i = 0; i < styles.length; i++) { + const style = styles[i] + if (style && style.meta) { + const propsKeys = Object.keys(style.meta.props) + for (let j = 0; j < propsKeys.length; j++) { + const prop = style.meta.props[propsKeys[j]] + index[prop] = style + } + } + } + return index +} + +export function compose(...generators) { + let flatGenerators = [] + generators.forEach(gen => { + if (gen.meta.generators) { + flatGenerators = [...flatGenerators, ...gen.meta.generators] + } else { + flatGenerators.push(gen) + } + }) + + const generatorsByProp = indexGeneratorsByProp(flatGenerators) + + function getStyle(attrs, theme) { + const propKeys = Object.keys(attrs) + const propCount = propKeys.length + let allStyle = {} + for (let i = 0; i < propCount; i++) { + const propKey = propKeys[i] + const generator = generatorsByProp[propKey] + if (generator) { + allStyle = merge(allStyle, generator.meta.getStyle(attrs, theme)) + } + } + return allStyle + } + + const props = flatGenerators.reduce( + (keys, generator) => [...keys, ...generator.meta.props], + [] + ) + + return createStyleGenerator(getStyle, props, generators) +} diff --git a/src/styles/backgrounds.js b/src/styles/backgrounds.js new file mode 100644 index 000000000..940b5a541 --- /dev/null +++ b/src/styles/backgrounds.js @@ -0,0 +1,36 @@ +import { style, compose } from '../style' + +export const background = style({ + prop: 'background', +}) + +export const backgroundColor = style({ + prop: 'backgroundColor', + alias: 'bg', + key: 'colors', +}) + +export const backgroundImage = style({ + prop: 'backgroundImage', +}) + +export const backgroundSize = style({ + prop: 'backgroundSize', +}) + +export const backgroundPosition = style({ + prop: 'backgroundPosition', +}) + +export const backgroundRepeat = style({ + prop: 'backgroundRepeat', +}) + +export const backgrounds = compose( + background, + backgroundColor, + backgroundImage, + backgroundSize, + backgroundPosition, + backgroundRepeat +) diff --git a/src/styles/basics.js b/src/styles/basics.js new file mode 100644 index 000000000..07d2f125c --- /dev/null +++ b/src/styles/basics.js @@ -0,0 +1,14 @@ +import { style, compose } from '../style' + +export const opacity = style({ + prop: 'opacity', +}) + +export const overflow = style({ + prop: 'overflow', +}) + +export const basics = compose( + opacity, + overflow, +) diff --git a/src/styles/borders.js b/src/styles/borders.js new file mode 100644 index 000000000..660aced02 --- /dev/null +++ b/src/styles/borders.js @@ -0,0 +1,99 @@ +import { style, compose } from '../style' +import { num } from '../util' +import { px } from '../unit' + +const getBorder = n => (num(n) && n > 0 ? `${n}px solid` : n) + +export const border = style({ + prop: 'border', + key: 'borders', + transformValue: getBorder, +}) + +export const borderWidth = style({ + prop: 'borderWidth', + key: 'borderWidths', + transformValue: px, +}) + +export const borderStyle = style({ + prop: 'borderStyle', + key: 'borderStyles', +}) + +export const borderColor = style({ + prop: 'borderColor', + key: 'colors', +}) + +export const borderRadius = style({ + prop: 'borderRadius', + key: 'radii', + transformValue: px, +}) + +export const borderTop = style({ + prop: 'borderTop', + key: 'borders', + transformValue: getBorder, +}) + +export const borderTopColor = style({ + prop: 'borderTopColor', + key: 'colors', +}) + +export const borderRight = style({ + prop: 'borderRight', + key: 'borders', + transformValue: getBorder, +}) + +export const borderRightColor = style({ + prop: 'borderRightColor', + key: 'colors', +}) + +export const borderBottom = style({ + prop: 'borderBottom', + key: 'borders', + transformValue: getBorder, +}) + +export const borderBottomColor = style({ + prop: 'borderBottomColor', + key: 'colors', +}) + +export const borderLeft = style({ + prop: 'borderLeft', + key: 'borders', + transformValue: getBorder, +}) + +export const borderLeftColor = style({ + prop: 'borderLeftColor', + key: 'colors', +}) + +export const boxShadow = style({ + prop: 'boxShadow', + key: 'shadows', +}) + +export const borders = compose( + border, + borderWidth, + borderStyle, + borderColor, + borderTop, + borderTopColor, + borderRight, + borderRightColor, + borderBottom, + borderBottomColor, + borderLeft, + borderLeftColor, + borderRadius, + boxShadow +) diff --git a/src/styles/colors.js b/src/styles/colors.js new file mode 100644 index 000000000..72ada39bd --- /dev/null +++ b/src/styles/colors.js @@ -0,0 +1,9 @@ +import { compose } from '../style' + +import { backgroundColor } from './backgrounds' +import { textColor } from './typography' + +export const color = compose( + backgroundColor, + textColor +) diff --git a/src/styles/dimensions.js b/src/styles/dimensions.js new file mode 100644 index 000000000..0ee39d7be --- /dev/null +++ b/src/styles/dimensions.js @@ -0,0 +1,54 @@ +import { style, compose } from '../style' +import { percent } from '../unit' + +export const width = style({ + prop: 'width', + transformValue: percent, + key: 'widths', +}) + +export const height = style({ + prop: 'height', + transformValue: percent, + key: 'heights', +}) + +export const size = style({ + prop: 'size', + cssProperties: ['width', 'height'], + transformValue: percent, + key: 'sizes', +}) + +export const maxWidth = style({ + prop: 'maxWidth', + transformValue: percent, + key: 'widths', +}) + +export const maxHeight = style({ + prop: 'maxHeight', + transformValue: percent, + key: 'heights', +}) + +export const minWidth = style({ + prop: 'minWidth', + transformValue: percent, + key: 'widths', +}) + +export const minHeight = style({ + prop: 'minHeight', + transformValue: percent, + key: 'heights', +}) + +export const dimensions = compose( + width, + height, + maxWidth, + maxHeight, + minWidth, + minHeight +) diff --git a/src/styles/flexboxes.js b/src/styles/flexboxes.js new file mode 100644 index 000000000..16f0f622b --- /dev/null +++ b/src/styles/flexboxes.js @@ -0,0 +1,65 @@ +import { style, compose } from '../style' +import { percent } from '../unit' + +export const display = style({ + prop: 'display', +}) + +export const alignItems = style({ + prop: 'alignItems', +}) + +export const alignContent = style({ + prop: 'alignContent', +}) + +export const justifyItems = style({ + prop: 'justifyItems', +}) + +export const justifyContent = style({ + prop: 'justifyContent', +}) + +export const flexWrap = style({ + prop: 'flexWrap', +}) + +export const flexBasis = style({ + prop: 'flexBasis', + transformValue: percent, +}) + +export const flexDirection = style({ + prop: 'flexDirection', +}) + +export const flex = style({ + prop: 'flex', +}) + +export const justifySelf = style({ + prop: 'justifySelf', +}) + +export const alignSelf = style({ + prop: 'alignSelf', +}) + +export const order = style({ + prop: 'order', +}) + +export const flexboxes = compose( + display, + alignItems, + alignContent, + justifyContent, + flexWrap, + flexBasis, + flexDirection, + flex, + justifySelf, + alignSelf, + order +) diff --git a/src/styles/grids.js b/src/styles/grids.js new file mode 100644 index 000000000..ffbc13522 --- /dev/null +++ b/src/styles/grids.js @@ -0,0 +1,45 @@ +import { style, compose } from '../style' +import { scale } from '../unit' + +export const gridGap = style({ + prop: 'gridGap', + key: 'space', + transformValue: scale(), +}) + +export const gridColumnGap = style({ + prop: 'gridColumnGap', + key: 'space', + transformValue: scale(), +}) + +export const gridRowGap = style({ + prop: 'gridRowGap', + key: 'space', + transformValue: scale(), +}) + +export const gridColumn = style({ prop: 'gridColumn' }) +export const gridRow = style({ prop: 'gridRow' }) +export const gridAutoFlow = style({ prop: 'gridAutoFlow' }) +export const gridAutoColumns = style({ prop: 'gridAutoColumns' }) +export const gridAutoRows = style({ prop: 'gridAutoRows' }) +export const gridTemplateColumns = style({ prop: 'gridTemplateColumns' }) +export const gridTemplateRows = style({ prop: 'gridTemplateRows' }) +export const gridTemplateAreas = style({ prop: 'gridTemplateAreas' }) +export const gridArea = style({ prop: 'gridArea' }) + +export const grids = compose( + gridGap, + gridColumnGap, + gridRowGap, + gridColumn, + gridRow, + gridAutoFlow, + gridAutoColumns, + gridAutoRows, + gridTemplateColumns, + gridTemplateRows, + gridTemplateAreas, + gridArea +) diff --git a/src/styles/index.js b/src/styles/index.js new file mode 100644 index 000000000..08e64fd66 --- /dev/null +++ b/src/styles/index.js @@ -0,0 +1,33 @@ +import { compose } from '../style' +import { backgrounds } from './backgrounds' +import { basics } from './basics' +import { borders } from './borders' +import { dimensions } from './dimensions' +import { flexboxes } from './flexboxes' +import { grids } from './grids' +import { positions } from './positions' +import { space } from './space' +import { typography } from './typography' + +export * from './backgrounds' +export * from './basics' +export * from './borders' +export * from './colors' +export * from './dimensions' +export * from './flexboxes' +export * from './grids' +export * from './positions' +export * from './space' +export * from './typography' + +export const system = compose( + backgrounds, + basics, + borders, + dimensions, + flexboxes, + grids, + positions, + space, + typography +) diff --git a/src/styles/index.test.js-nop b/src/styles/index.test.js-nop new file mode 100644 index 000000000..7f3bbad66 --- /dev/null +++ b/src/styles/index.test.js-nop @@ -0,0 +1,432 @@ +import React from 'react' +import { mount } from 'enzyme' +import styled from 'styled-components' +import * as styles from './index' + +describe('styles', () => { + describe.each([ + [ + 'fontFamily', + { + styleRule: 'font-family', + theme: { + fonts: { + primary: 'serif', + secondary: 'sans-serif', + }, + }, + expectations: [['arial', 'arial'], ['primary', 'serif']], + }, + ], + [ + 'fontSize', + { + styleRule: 'font-size', + theme: { + fontSizes: [10, 15, 40], + }, + expectations: [[0, '10px'], [1, '15px'], [20, '20px'], ['3em', '3em']], + }, + ], + [ + 'lineHeight', + { + styleRule: 'line-height', + theme: { + lineHeights: [1.2, 1.5, 2], + }, + expectations: [[0, 1.2], [1, 1.5], [3, 3], ['3em', '3em']], + }, + ], + [ + 'fontWeight', + { + styleRule: 'font-weight', + theme: { + fontWeights: [400, 500, 800], + }, + expectations: [[0, 400], [1, 500], [800, 800], ['medium', 'medium']], + }, + ], + [ + 'textAlign', + { + styleRule: 'text-align', + expectations: [['center', 'center'], ['justify', 'justify']], + }, + ], + [ + 'letterSpacing', + { + styleRule: 'letter-spacing', + theme: { + letterSpacings: [1.2, 2], + }, + expectations: [ + [0, '1.2px'], + [1, '2px'], + [1.1, '1.1px'], + ['2rem', '2rem'], + ], + }, + ], + [ + 'color', + { + styleRule: 'color', + theme: { + colors: { + primary: 'red', + }, + }, + expectations: [ + ['primary', 'red'], + ['#fff', '#fff'], + ['rgba(0,0,0,0)', 'rgba(0,0,0,0)'], + ], + }, + ], + [ + 'width', + { + styleRule: 'width', + theme: { + widths: { + large: 400, + }, + }, + expectations: [[0.5, '50%'], ['large', '400px'], [50, '50px']], + }, + ], + [ + 'height', + { + styleRule: 'height', + theme: { + heights: { + large: 400, + }, + }, + expectations: [[0.5, '50%'], ['large', '400px'], [50, '50px']], + }, + ], + [ + 'maxWidth', + { + styleRule: 'max-width', + theme: { + widths: { + large: 400, + }, + }, + expectations: [[0.5, '50%'], ['large', '400px'], [50, '50px']], + }, + ], + [ + 'maxHeight', + { + styleRule: 'max-height', + theme: { + heights: { + large: 400, + }, + }, + expectations: [[0.5, '50%'], ['large', '400px'], [50, '50px']], + }, + ], + [ + 'minWidth', + { + styleRule: 'min-width', + theme: { + widths: { + large: 400, + }, + }, + expectations: [[0.5, '50%'], ['large', '400px'], [50, '50px']], + }, + ], + [ + 'minHeight', + { + styleRule: 'min-height', + theme: { + heights: { + large: 400, + }, + }, + expectations: [[0.5, '50%'], ['large', '400px'], [50, '50px']], + }, + ], + [ + 'display', + { + styleRule: 'display', + expectations: [['flex', 'flex'], ['block', 'block']], + }, + ], + [ + 'alignItems', + { + styleRule: 'align-items', + expectations: [['flex-start', 'flex-start'], ['center', 'center']], + }, + ], + [ + 'alignContent', + { + styleRule: 'align-content', + expectations: [['flex-start', 'flex-start'], ['center', 'center']], + }, + ], + [ + 'justifyContent', + { + styleRule: 'justify-content', + expectations: [['flex-start', 'flex-start'], ['center', 'center']], + }, + ], + [ + 'flexWrap', + { + styleRule: 'flex-wrap', + expectations: [['wrap', 'wrap'], ['nowrap', 'nowrap']], + }, + ], + [ + 'flexBasis', + { + styleRule: 'flex-basis', + expectations: [[0.5, '50%'], [50, '50px']], + }, + ], + [ + 'flexDirection', + { + styleRule: 'flex-direction', + expectations: [['row', 'row'], ['column', 'column']], + }, + ], + [ + 'flex', + { + styleRule: 'flex', + expectations: [[1, '1'], ['1 0 auto', '1 0 auto']], + }, + ], + [ + 'justifySelf', + { + styleRule: 'justify-self', + expectations: [['flex-start', 'flex-start'], ['center', 'center']], + }, + ], + [ + 'alignSelf', + { + styleRule: 'align-self', + expectations: [['flex-start', 'flex-start'], ['center', 'center']], + }, + ], + [ + 'order', + { + styleRule: 'order', + expectations: [[1, '1'], [10, '10']], + }, + ], + [ + 'background', + { + styleRule: 'background', + expectations: [['red', 'red'], ['blue', 'blue']], + }, + ], + [ + 'backgroundColor', + { + theme: { + colors: { + primary: 'red', + }, + }, + styleRule: 'background-color', + expectations: [['primary', 'red'], ['blue', 'blue']], + }, + ], + [ + 'backgroundImage', + { + styleRule: 'background-image', + expectations: [['url(x.gif)', 'url(x.gif)']], + }, + ], + [ + 'backgroundSize', + { + styleRule: 'background-size', + expectations: [['cover', 'cover'], ['50%', '50%']], + }, + ], + [ + 'backgroundRepeat', + { + styleRule: 'background-repeat', + expectations: [['no-repeat', 'no-repeat'], ['repeat-y', 'repeat-y']], + }, + ], + [ + 'position', + { + styleRule: 'position', + expectations: [['absolute', 'absolute'], ['relative', 'relative']], + }, + ], + [ + 'zIndex', + { + theme: { + zIndexes: { + alert: 100, + }, + }, + styleRule: 'z-index', + expectations: [['alert', '100'], [20, '20']], + }, + ], + [ + 'top', + { + styleRule: 'top', + expectations: [[10, '10px'], ['10px', '10px'], ['4%', '4%']], + }, + ], + [ + 'right', + { + styleRule: 'right', + expectations: [[10, '10px'], ['10px', '10px'], ['4%', '4%']], + }, + ], + [ + 'bottom', + { + styleRule: 'bottom', + expectations: [[10, '10px'], ['10px', '10px'], ['4%', '4%']], + }, + ], + [ + 'left', + { + styleRule: 'left', + expectations: [[10, '10px'], ['10px', '10px'], ['4%', '4%']], + }, + ], + [ + 'border', + { + styleRule: 'border', + expectations: [[1, '1px solid'], ['1px solid red', '1px solid red']], + }, + ], + [ + 'borderTop', + { + styleRule: 'border-top', + expectations: [[1, '1px solid'], ['1px solid red', '1px solid red']], + }, + ], + [ + 'borderRight', + { + styleRule: 'border-right', + expectations: [[1, '1px solid'], ['1px solid red', '1px solid red']], + }, + ], + [ + 'borderBottom', + { + styleRule: 'border-bottom', + expectations: [[1, '1px solid'], ['1px solid red', '1px solid red']], + }, + ], + [ + 'borderLeft', + { + styleRule: 'border-left', + expectations: [[1, '1px solid'], ['1px solid red', '1px solid red']], + }, + ], + [ + 'borderColor', + { + theme: { + colors: { + primary: 'red', + }, + }, + styleRule: 'border-color', + expectations: [['primary', 'red'], ['blue', 'blue']], + }, + ], + [ + 'borderRadius', + { + theme: { + radii: { + round: '50%', + }, + }, + styleRule: 'border-radius', + expectations: [['round', '50%'], [10, '10px']], + }, + ], + [ + 'boxShadow', + { + theme: { + shadows: { + red: '10px 5px 5px red', + }, + }, + styleRule: 'box-shadow', + expectations: [ + ['red', '10px 5px 5px red'], + [ + '12px 12px 2px 1px rgba(0, 0, 255, .2)', + '12px 12px 2px 1px rgba(0,0,255,.2)', + ], + ], + }, + ], + [ + 'opacity', + { + styleRule: 'opacity', + expectations: [[1, '1'], [0.2, '0.2']], + }, + ], + ])('#%s', (name, config) => { + const Dummy = styled.div` + ${styles[name]}; + ` + + it('should support basic value', () => { + config.expectations.forEach(([value, expected]) => { + const props = { [name]: value } + const wrapper = mount() + expect(wrapper).toHaveStyleRule(config.styleRule, String(expected)) + }) + }) + + it('should support breakpoints value', () => { + config.expectations.forEach(([value, expected]) => { + const props = { [name]: { md: value } } + const wrapper = mount() + expect(wrapper).toHaveStyleRule(config.styleRule, String(expected), { + media: '(min-width:768px)', + }) + }) + }) + }) +}) diff --git a/src/styles/positions.js b/src/styles/positions.js new file mode 100644 index 000000000..7806fa01a --- /dev/null +++ b/src/styles/positions.js @@ -0,0 +1,40 @@ +import { style, compose } from '../style' +import { px } from '../unit' + +export const position = style({ + prop: 'position', +}) + +export const zIndex = style({ + prop: 'zIndex', + key: 'zIndices', +}) + +export const top = style({ + prop: 'top', + transformValue: px, +}) + +export const right = style({ + prop: 'right', + transformValue: px, +}) + +export const bottom = style({ + prop: 'bottom', + transformValue: px, +}) + +export const left = style({ + prop: 'left', + transformValue: px, +}) + +export const positions = compose( + position, + zIndex, + top, + right, + bottom, + left +) diff --git a/src/styles/space.js b/src/styles/space.js new file mode 100644 index 000000000..4654cf3ad --- /dev/null +++ b/src/styles/space.js @@ -0,0 +1,129 @@ +import { style, compose } from '../style' +import { scale } from '../unit' + +const key = 'space' + +export const margin = style({ + prop: 'margin', + alias: 'm', + cssProperties: ['margin'], + key, + transformValue: scale(), +}) + +export const marginTop = style({ + prop: 'marginTop', + alias: 'mt', + cssProperties: ['marginTop'], + key, + transformValue: scale(), +}) + +export const marginRight = style({ + prop: 'marginRight', + alias: 'mr', + cssProperties: ['marginRight'], + key, + transformValue: scale(), +}) + +export const marginBottom = style({ + prop: 'marginBottom', + alias: 'mb', + cssProperties: ['marginBottom'], + key, + transformValue: scale(), +}) + +export const marginLeft = style({ + prop: 'marginLeft', + alias: 'ml', + cssProperties: ['marginLeft'], + key, + transformValue: scale(), +}) + +export const mx = style({ + prop: 'mx', + cssProperties: ['marginRight', 'marginLeft'], + key, + transformValue: scale(), +}) + +export const my = style({ + prop: 'my', + cssProperties: ['marginTop', 'marginBottom'], + key, + transformValue: scale(), +}) + +export const padding = style({ + prop: 'padding', + alias: 'p', + cssProperties: ['padding'], + key, + transformValue: scale(), +}) + +export const paddingTop = style({ + prop: 'paddingTop', + alias: 'pt', + cssProperties: ['paddingTop'], + key, + transformValue: scale(), +}) + +export const paddingRight = style({ + prop: 'paddingRight', + alias: 'pr', + cssProperties: ['paddingRight'], + key, + transformValue: scale(), +}) + +export const paddingBottom = style({ + prop: 'paddingBottom', + alias: 'pb', + cssProperties: ['paddingBottom'], + key, + transformValue: scale(), +}) + +export const paddingLeft = style({ + prop: 'paddingLeft', + alias: 'pl', + cssProperties: ['paddingLeft'], + key, + transformValue: scale(), +}) + +export const px = style({ + prop: 'px', + cssProperties: ['paddingRight', 'paddingLeft'], + key, + transformValue: scale(), +}) + +export const py = style({ + prop: 'py', + cssProperties: ['paddingTop', 'paddingBottom'], + key, + transformValue: scale(), +}) + +export const space = compose( + margin, + marginTop, + marginRight, + marginBottom, + marginLeft, + mx, + my, + padding, + paddingTop, + paddingRight, + paddingBottom, + paddingLeft, + px, + py +) diff --git a/src/styles/space.test.js-nop b/src/styles/space.test.js-nop new file mode 100644 index 000000000..2f79ab728 --- /dev/null +++ b/src/styles/space.test.js-nop @@ -0,0 +1,108 @@ +import { space } from './space' + +describe('space', () => { + it('should support m', () => { + expect(space({ m: 1 })).toEqual({ margin: 8 }) + expect(space({ m: 2 })).toEqual({ margin: 16 }) + expect(space({ m: -2 })).toEqual({ margin: -16 }) + expect(space({ m: 10 })).toEqual({ margin: 10 }) + expect(space({ m: -10 })).toEqual({ margin: -10 }) + expect(space({ m: '50%' })).toEqual({ margin: '50%' }) + expect(space({ m: { md: '50%' } })).toEqual({ + '@media (min-width: 768px)': { margin: '50%' }, + }) + }) + + it('should support mx', () => { + expect(space({ mx: 10 })).toEqual({ + marginLeft: 10, + marginRight: 10, + }) + expect(space({ mx: '50%' })).toEqual({ + marginLeft: '50%', + marginRight: '50%', + }) + expect(space({ mx: { md: '50%' } })).toEqual({ + '@media (min-width: 768px)': { marginLeft: '50%', marginRight: '50%' }, + }) + }) + + it('should support mb, mt, ml, mr', () => { + expect(space({ mb: 10 })).toEqual({ marginBottom: 10 }) + expect(space({ mt: 10 })).toEqual({ marginTop: 10 }) + expect(space({ ml: 10 })).toEqual({ marginLeft: 10 }) + expect(space({ mr: 10 })).toEqual({ marginRight: 10 }) + }) + + it('should support p', () => { + expect(space({ p: 10 })).toEqual({ padding: 10 }) + expect(space({ p: '50%' })).toEqual({ padding: '50%' }) + expect(space({ p: { md: '50%' } })).toEqual({ + '@media (min-width: 768px)': { padding: '50%' }, + }) + }) + + it('should support px, py', () => { + expect(space({ px: 10 })).toEqual({ + paddingLeft: 10, + paddingRight: 10, + }) + expect(space({ px: '50%' })).toEqual({ + paddingLeft: '50%', + paddingRight: '50%', + }) + expect(space({ px: { md: '50%' } })).toEqual({ + '@media (min-width: 768px)': { paddingLeft: '50%', paddingRight: '50%' }, + }) + }) + + it('should support pb, pt, pl, pr', () => { + expect(space({ pb: 10 })).toEqual({ paddingBottom: 10 }) + expect(space({ pt: 10 })).toEqual({ paddingTop: 10 }) + expect(space({ pl: 10 })).toEqual({ paddingLeft: 10 }) + expect(space({ pr: 10 })).toEqual({ paddingRight: 10 }) + }) + + it('should merge everything', () => { + expect(space({ px: { md: '50%' }, mx: { md: 10 } })).toEqual({ + '@media (min-width: 768px)': { + paddingLeft: '50%', + paddingRight: '50%', + marginLeft: 10, + marginRight: 10, + }, + }) + }) + + it('should support variants spaces', () => { + expect( + space({ + m: 1, + p: 0, + theme: { spaces: [0, 8, 16] }, + }) + ).toEqual({ + margin: 8, + padding: 0, + }) + }) + + it('should expose meta', () => { + expect(space.meta).toEqual([ + 'm', + 'mt', + 'mr', + 'mb', + 'ml', + 'mx', + 'my', + 'p', + 'pt', + 'pr', + 'pb', + 'pl', + 'px', + 'py', + ]) + }) +}) diff --git a/src/styles/typography.js b/src/styles/typography.js new file mode 100644 index 000000000..a4a1ba69c --- /dev/null +++ b/src/styles/typography.js @@ -0,0 +1,54 @@ +import { px } from '../unit' +import { style, compose } from '../style' +import { scale } from '../unit' + +export const fontFamily = style({ + prop: 'fontFamily', + key: 'fonts', +}) + +export const fontSize = style({ + prop: 'fontSize', + key: 'fontSizes', + transformValue: scale([12, 14, 16, 20, 24, 32, 48, 64, 72]), +}) + +export const lineHeight = style({ + prop: 'lineHeight', + key: 'lineHeights', +}) + +export const fontWeight = style({ + prop: 'fontWeight', + key: 'fontWeights', +}) + +export const textAlign = style({ + prop: 'textAlign', +}) + +export const letterSpacing = style({ + prop: 'letterSpacing', + key: 'letterSpacings', + transformValue: px, +}) + +export const textColor = style({ + prop: 'color', + key: 'colors', +}) + +export const textTransform = style({ + prop: 'textTransform', +}) + +export const typography = compose( + fontFamily, + fontSize, + lineHeight, + fontWeight, + textAlign, + letterSpacing, + textColor, + textTransform +) diff --git a/src/unit.js b/src/unit.js new file mode 100644 index 000000000..9120bdcd8 --- /dev/null +++ b/src/unit.js @@ -0,0 +1,23 @@ +import { num, negative } from './util' + +const DEFAULT_SPACE = [0, 4, 8, 16, 32, 64, 128, 256, 512] + +export const unit = unit => value => (num(value) ? `${value}${unit}` : value) +export const px = unit('px') +export const percent = n => (!num(n) || n > 1 ? px(n) : `${n * 100}%`) + +export const scale = (defaultVariants = DEFAULT_SPACE) => ( + transformedValue, + { rawValue, variants = defaultVariants } +) => { + if (!num(rawValue)) { + return variants[rawValue] || rawValue + } + const abs = Math.abs(rawValue) + const neg = negative(rawValue) + const value = variants[abs] || abs + if (!num(value)) { + return neg ? `-${value}` : value + } + return value * (neg ? -1 : 1) +} diff --git a/src/util.js b/src/util.js new file mode 100644 index 000000000..2c2d90d59 --- /dev/null +++ b/src/util.js @@ -0,0 +1,33 @@ +import deepmerge from 'deepmerge' // < 1kb payload overhead when lodash/merge is > 3kb. + +export const is = n => n !== undefined && n !== null +export const num = n => typeof n === 'number' && !Number.isNaN(n) +export const string = n => typeof n === 'string' && n !== '' +export const obj = n => typeof n === 'object' && n !== null +export const func = n => typeof n === 'function' +export const negative = n => n < 0 + +export const get = (obj, path) => + String(path) + .split('.') + .reduce((a, b) => (a && is(a[b]) ? a[b] : undefined), obj) + +export function merge(acc, item) { + if (!item) { + return acc + } + + return deepmerge(acc, item, { + clone: false, // No need to clone deep, it's way faster. + }) +} + +export const assign = (target, source) => { + const keys = Object.keys(source || {}) + const totalKeys = keys.length + for (let i = 0; i < totalKeys; i += 1) { + const key = keys[i] + target[key] = source[key] + } + return target +} diff --git a/src/variant.js b/src/variant.js new file mode 100644 index 000000000..3371a05b7 --- /dev/null +++ b/src/variant.js @@ -0,0 +1,4 @@ +import { get } from './util' + +export const variant = ({ key, prop = 'variant' }) => props => + get(props.theme, [key, props[prop]].join('.')) || null diff --git a/src/variants.js b/src/variants.js new file mode 100644 index 000000000..02fd1abc1 --- /dev/null +++ b/src/variants.js @@ -0,0 +1,5 @@ +import { variant } from './variant' + +export const buttonStyle = variant({ key: 'buttons' }) +export const textStyle = variant({ key: 'textStyles', prop: 'textStyle' }) +export const colorStyle = variant({ key: 'colorStyles', prop: 'colors' }) diff --git a/test/index.js b/test/index.js index b5b6d5cdf..7790321db 100644 --- a/test/index.js +++ b/test/index.js @@ -1,16 +1,5 @@ import test from 'ava' -import { - style, - get, - themeGet, - is, - num, - px, - compose, - variant, - cloneFunction, - mapProps, -} from '../src' +import { style, compose, variant } from '../src/index2' const width = style({ prop: 'width', @@ -63,16 +52,18 @@ test('handles aliased props', t => { }) }) -test('long form prop trumps aliased props', t => { - const style = backgroundColor({ - theme, - backgroundColor: 'black', - bg: 'blue', - }) - t.deepEqual(style, { - backgroundColor: '#111', - }) -}) +// Impossible to ensure, due to perf issues + +// test('long form prop trumps aliased props', t => { +// const style = backgroundColor({ +// theme, +// backgroundColor: 'black', +// bg: 'blue', +// }) +// t.deepEqual(style, { +// backgroundColor: '#111', +// }) +// }) test('returns null', t => { const style = color({}) @@ -88,98 +79,116 @@ test('returns an array of responsive style objects', t => { const style = width({ width: ['100%', '50%'], }) - t.deepEqual(style, [ - { width: '100%' }, - { '@media screen and (min-width: 40em)': { width: '50%' } }, - ]) + t.deepEqual(style, { + width: '100%', + '@media screen and (min-width: 40em)': { width: '50%' }, + }) }) test('returns an array of responsive style objects for all breakpoints', t => { const style = width({ width: ['100%', '75%', '50%', '33%', '25%'], }) - t.deepEqual(style, [ - { width: '100%' }, - { '@media screen and (min-width: 40em)': { width: '75%' } }, - { '@media screen and (min-width: 52em)': { width: '50%' } }, - { '@media screen and (min-width: 64em)': { width: '33%' } }, - ]) + t.deepEqual(style, { + width: '100%', + '@media screen and (min-width: 40em)': { width: '75%' }, + '@media screen and (min-width: 52em)': { width: '50%' }, + '@media screen and (min-width: 64em)': { width: '33%' }, + }) }) test('skips undefined responsive values', t => { const style = width({ width: ['100%', , '50%'], }) - t.deepEqual(style, [ - { width: '100%' }, - { '@media screen and (min-width: 52em)': { width: '50%' } }, - ]) + t.deepEqual(style, { + width: '100%', + '@media screen and (min-width: 52em)': { width: '50%' }, + }) }) +// It is more strict now, see next test + +// test('parses object values', t => { +// const style = width({ +// width: { +// _: '100%', +// 2: '50%', +// }, +// }) +// t.deepEqual(style, { +// width: '100%', +// '@media screen and (min-width: 64em)': { width: '50%' }, +// }) +// }) + test('parses object values', t => { const style = width({ width: { _: '100%', - 2: '50%', + 1: '50%', }, }) - t.deepEqual(style, [ - { width: '100%' }, - { '@media screen and (min-width: 64em)': { width: '50%' } }, - ]) -}) - -test('get returns a value', t => { - const a = get({ blue: '#0cf' }, 'blue') - t.is(a, '#0cf') -}) - -test('get returns the last argument if no value is found', t => { - const a = get( - { - blue: '#0cf', - }, - 'green', - '#0f0' - ) - t.is(a, '#0f0') -}) - -test('get returns 0', t => { - const a = get({}, 0) - const b = get({ space: [0, 4] }, 0) - t.is(a, 0) - t.is(b, 0) -}) - -test('get returns deeply nested values', t => { - const a = get( - { - hi: { - hello: { - beep: 'boop', - }, - }, - }, - 'hi.hello.beep' - ) - t.is(a, 'boop') -}) - -test('themeGet returns values from the theme', t => { - const a = themeGet('colors.blue')({ theme }) - t.is(a, '#07c') + t.deepEqual(style, { + '@media screen and (min-width: 40em)': { width: '50%' }, + }) }) -test('themeGet does not throw when value doesnt exist', t => { - const a = themeGet('colors.blue.5')({ theme }) - t.is(a, null) -}) - -test('themeGet accepts a fallback', t => { - const a = themeGet('colors.lightblue', '#0cf')({ theme }) - t.is(a, '#0cf') -}) +// We will not export "get" anymore + +// test('get returns a value', t => { +// const a = get({ blue: '#0cf' }, 'blue') +// t.is(a, '#0cf') +// }) + +// test('get returns the last argument if no value is found', t => { +// const a = get( +// { +// blue: '#0cf', +// }, +// 'green', +// '#0f0' +// ) +// t.is(a, '#0f0') +// }) + +// test('get returns 0', t => { +// const a = get({}, 0) +// const b = get({ space: [0, 4] }, 0) +// t.is(a, 0) +// t.is(b, 0) +// }) + +// test('get returns deeply nested values', t => { +// const a = get( +// { +// hi: { +// hello: { +// beep: 'boop', +// }, +// }, +// }, +// 'hi.hello.beep' +// ) +// t.is(a, 'boop') +// }) + +// We will not export "themeGet" anymore + +// test('themeGet returns values from the theme', t => { +// const a = themeGet('colors.blue')({ theme }) +// t.is(a, '#07c') +// }) + +// test('themeGet does not throw when value doesnt exist', t => { +// const a = themeGet('colors.blue.5')({ theme }) +// t.is(a, null) +// }) + +// test('themeGet accepts a fallback', t => { +// const a = themeGet('colors.lightblue', '#0cf')({ theme }) +// t.is(a, '#0cf') +// }) test('compose combines style functions', t => { const colors = compose( @@ -191,37 +200,43 @@ test('compose combines style functions', t => { bg: 'black', }) t.is(typeof colors, 'function') - t.deepEqual(styles, [{ color: 'tomato' }, { backgroundColor: 'black' }]) + t.deepEqual(styles, { color: 'tomato', backgroundColor: 'black' }) }) -test('num returns true for numbers', t => { - const isNumber = num(0) - t.true(isNumber) -}) +// We will not export "num" anymore -test('num returns false for non-numbers', t => { - const isNumber = num(null) - t.false(isNumber) -}) +// test('num returns true for numbers', t => { +// const isNumber = num(0) +// t.true(isNumber) +// }) -test('is returns true for truthy values', t => { - const isValue = is(0) - t.true(isValue) -}) +// test('num returns false for non-numbers', t => { +// const isNumber = num(null) +// t.false(isNumber) +// }) -test('is returns false for falsey values', t => { - const a = is(null) - const b = is(undefined) - t.false(a) - t.false(b) -}) +// We will not export "is" anymore -test('cloneFunction creates a new function', t => { - const func = () => 'hi' - const b = cloneFunction(func) - t.false(func === b) - t.is(b(), 'hi') -}) +// test('is returns true for truthy values', t => { +// const isValue = is(0) +// t.true(isValue) +// }) + +// test('is returns false for falsey values', t => { +// const a = is(null) +// const b = is(undefined) +// t.false(a) +// t.false(b) +// }) + +// We will not export "cloneFunction" anymore + +// test('cloneFunction creates a new function', t => { +// const func = () => 'hi' +// const b = cloneFunction(func) +// t.false(func === b) +// t.is(b(), 'hi') +// }) test('variant returns style objects from theme', t => { const buttons = variant({ key: 'buttons' }) @@ -265,11 +280,13 @@ test('array values longer than breakpoints does not reset returned style object' const a = width({ width: ['100%', , , , , '50%', '25%'], }) - t.deepEqual(a, [{ width: '100%' }]) + t.deepEqual(a, { width: '100%' }) }) -test('mapProps copies propTypes', t => { - const margin = style({ prop: 'margin' }) - const func = mapProps(props => props)(margin) - t.is(typeof func.propTypes, 'object') -}) +// No longer relevant + +// test('mapProps copies propTypes', t => { +// const margin = style({ prop: 'margin' }) +// const func = mapProps(props => props)(margin) +// t.is(typeof func.propTypes, 'object') +// }) diff --git a/test/styles.js b/test/styles.js index d90129bd7..6e39397c0 100644 --- a/test/styles.js +++ b/test/styles.js @@ -11,7 +11,7 @@ import { textStyle, colorStyle, borders, -} from '../src' +} from '../src/index2' const theme = { colors: { @@ -22,7 +22,7 @@ const theme = { test('returns color values from theme', t => { const a = color({ theme, color: 'blue', bg: 'black' }) - t.deepEqual(a, [{ color: '#07c' }, { backgroundColor: '#111' }]) + t.deepEqual(a, { color: '#07c', backgroundColor: '#111' }) }) test('returns raw color values', t => { @@ -31,25 +31,29 @@ test('returns raw color values', t => { color: 'inherit', bg: 'tomato', }) - t.deepEqual(a, [{ color: 'inherit' }, { backgroundColor: 'tomato' }]) + t.deepEqual(a, { color: 'inherit', backgroundColor: 'tomato' }) }) -test('backgroundColor prop overrides bg prop', t => { - const a = color({ - backgroundColor: 'tomato', - bg: 'blue', - }) - t.deepEqual(a, [{ backgroundColor: 'tomato' }]) -}) +// Impossible to ensure, due to perf issues -test('returns a pixel font-size', t => { - const a = fontSize({ fontSize: 48 }) - t.deepEqual(a, { fontSize: '48px' }) -}) +// test('backgroundColor prop overrides bg prop', t => { +// const a = color({ +// backgroundColor: 'tomato', +// bg: 'blue', +// }) +// t.deepEqual(a, [{ backgroundColor: 'tomato' }]) +// }) + +// Useless, font-size default to pixels + +// test('returns a pixel font-size', t => { +// const a = fontSize({ fontSize: 48 }) +// t.deepEqual(a, { fontSize: '48px' }) +// }) test('uses a default font-size scale', t => { const a = fontSize({ fontSize: 2 }) - t.deepEqual(a, { fontSize: '16px' }) + t.deepEqual(a, { fontSize: 16 }) }) test('returns a string font-size', t => { @@ -76,22 +80,22 @@ test('returns an array of style objects', t => { const styles = space({ m: '4px', }) - t.deepEqual(styles, [{ margin: '4px' }]) + t.deepEqual(styles, { margin: '4px' }) }) test('returns 0 values', t => { const styles = space({ m: 0 }) - t.deepEqual(styles, [{ margin: 0 }]) + t.deepEqual(styles, { margin: 0 }) }) test('returns negative pixel values', t => { const styles = space({ m: -2 }) - t.deepEqual(styles, [{ margin: '-8px' }]) + t.deepEqual(styles, { margin: -8 }) }) test('returns negative em values', t => { const styles = space({ m: '-16em' }) - t.deepEqual(styles, [{ margin: '-16em' }]) + t.deepEqual(styles, { margin: '-16em' }) }) test('returns negative theme values', t => { @@ -101,7 +105,7 @@ test('returns negative theme values', t => { }, m: -2, }) - t.deepEqual(styles, [{ margin: '-8px' }]) + t.deepEqual(styles, { margin: -8 }) }) test('returns positive theme values', t => { @@ -111,27 +115,25 @@ test('returns positive theme values', t => { }, m: 2, }) - t.deepEqual(styles, [{ margin: '2em' }]) + t.deepEqual(styles, { margin: '2em' }) }) test('returns responsive values', t => { const styles = space({ m: [0, 2, 3], }) - t.deepEqual(styles, [ - [ - { margin: 0 }, - { '@media screen and (min-width: 40em)': { margin: '8px' } }, - { '@media screen and (min-width: 52em)': { margin: '16px' } }, - ], - ]) + t.deepEqual(styles, { + margin: 0, + '@media screen and (min-width: 40em)': { margin: 8 }, + '@media screen and (min-width: 52em)': { margin: 16 }, + }) }) test('returns aliased values', t => { const styles = space({ px: 2, }) - t.deepEqual(styles, [{ paddingLeft: '8px' }, { paddingRight: '8px' }]) + t.deepEqual(styles, { paddingLeft: 8, paddingRight: 8 }) }) test('returns string values from theme', t => { @@ -141,7 +143,7 @@ test('returns string values from theme', t => { }, padding: 1, }) - t.deepEqual(styles, [{ padding: '1em' }]) + t.deepEqual(styles, { padding: '1em' }) }) test('returns negative string values from theme', t => { @@ -151,7 +153,7 @@ test('returns negative string values from theme', t => { }, margin: -1, }) - t.deepEqual(styles, [{ margin: '-1em' }]) + t.deepEqual(styles, { margin: '-1em' }) }) test('returns values from theme object', t => { @@ -162,73 +164,79 @@ test('returns values from theme object', t => { margin: 'sm', }) - t.deepEqual(styles, [{ margin: '1px' }]) + t.deepEqual(styles, { margin: 1 }) }) test('pl prop sets paddingLeft', t => { const styles = space({ pl: 2 }) - t.deepEqual(styles, [{ paddingLeft: '8px' }]) + t.deepEqual(styles, { paddingLeft: 8 }) }) test('pl prop sets paddingLeft 0', t => { const styles = space({ pl: 0 }) - t.deepEqual(styles, [{ paddingLeft: 0 }]) + t.deepEqual(styles, { paddingLeft: 0 }) }) +// The order of props matter test('px prop overrides pl prop', t => { const styles = space({ pl: 1, px: 2, }) - t.deepEqual(styles, [{ paddingLeft: '8px' }, { paddingRight: '8px' }]) + t.deepEqual(styles, { paddingLeft: 8, paddingRight: 8 }) }) +// The order of props matter test('py prop overrides pb prop', t => { const styles = space({ pb: 1, py: 2, }) - t.deepEqual(styles, [{ paddingTop: '8px' }, { paddingBottom: '8px' }]) + t.deepEqual(styles, { paddingTop: 8, paddingBottom: 8 }) }) +// The order of props matter test('mx prop overrides mr prop', t => { const styles = space({ mr: 1, mx: 2, }) - t.deepEqual(styles, [{ marginLeft: '8px' }, { marginRight: '8px' }]) + t.deepEqual(styles, { marginLeft: 8, marginRight: 8 }) }) +// The order of props matter test('my prop overrides mt prop', t => { const styles = space({ mt: 1, my: 2, }) - t.deepEqual(styles, [{ marginTop: '8px' }, { marginBottom: '8px' }]) + t.deepEqual(styles, { marginTop: 8, marginBottom: 8 }) }) +// The order of props matter test('margin overrides m prop', t => { const styles = space({ m: 1, margin: 2, }) - t.deepEqual(styles, [{ margin: '8px' }]) + t.deepEqual(styles, { margin: 8 }) }) -test('space includes propTypes', t => { - const { propTypes } = space - t.is(typeof propTypes, 'object') - t.is(typeof propTypes.m, 'function') -}) +// PropTypes are no longer included +// test('space includes propTypes', t => { +// const { propTypes } = space +// t.is(typeof propTypes, 'object') +// t.is(typeof propTypes.m, 'function') +// }) test('size returns width and height', t => { const styles = size({ size: 4, }) - t.deepEqual(styles, [{ width: '4px' }, { height: '4px' }]) + t.deepEqual(styles, { width: '4px', height: '4px' }) }) -// grid +// // grid test('gridGap returns a scalar style', t => { const a = gridGap({ theme: { @@ -237,7 +245,7 @@ test('gridGap returns a scalar style', t => { gridGap: 3, }) - t.deepEqual(a, { gridGap: '8px' }) + t.deepEqual(a, { gridGap: 8 }) }) test('gridGap uses the default scale', t => { @@ -246,7 +254,7 @@ test('gridGap uses the default scale', t => { gridGap: 2, }) - t.deepEqual(a, { gridGap: '8px' }) + t.deepEqual(a, { gridGap: 8 }) }) test('gridRowGap returns a scalar style', t => { @@ -257,7 +265,7 @@ test('gridRowGap returns a scalar style', t => { gridRowGap: 3, }) - t.deepEqual(a, { gridRowGap: '8px' }) + t.deepEqual(a, { gridRowGap: 8 }) }) test('gridRowGap uses the default scale', t => { @@ -266,7 +274,7 @@ test('gridRowGap uses the default scale', t => { gridRowGap: 2, }) - t.deepEqual(a, { gridRowGap: '8px' }) + t.deepEqual(a, { gridRowGap: 8 }) }) test('gridColumnGap returns a scalar style', t => { @@ -277,7 +285,7 @@ test('gridColumnGap returns a scalar style', t => { gridColumnGap: 3, }) - t.deepEqual(a, { gridColumnGap: '8px' }) + t.deepEqual(a, { gridColumnGap: 8 }) }) test('gridColumnGap uses the default scale', t => { @@ -286,7 +294,7 @@ test('gridColumnGap uses the default scale', t => { gridColumnGap: 2, }) - t.deepEqual(a, { gridColumnGap: '8px' }) + t.deepEqual(a, { gridColumnGap: 8 }) }) test('textStyle prop returns theme.textStyles object', t => { @@ -332,10 +340,10 @@ test('borders prop returns correct sequence', t => { borderStyle: 'dashed', borderColor: 'red', }) - t.deepEqual(a, [ - { borderBottom: '1px solid' }, - { borderWidth: '2px' }, - { borderStyle: 'dashed' }, - { borderColor: 'red' }, - ]) + t.deepEqual(a, { + borderBottom: '1px solid', + borderWidth: '2px', + borderStyle: 'dashed', + borderColor: 'red', + }) }) From 32f3e1fb45cde568c1c014c71f7c73ff9a1abb7c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Berg=C3=A9?= Date: Sun, 28 Apr 2019 20:39:05 +0200 Subject: [PATCH 2/5] Optimize rollup config --- package-lock.json | 53 +++++++++++++++++++++-------------------------- package.json | 5 ++--- rollup.config.js | 24 ++++++--------------- 3 files changed, 32 insertions(+), 50 deletions(-) diff --git a/package-lock.json b/package-lock.json index 936a736c4..74ca5ef55 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7305,16 +7305,16 @@ "rollup-pluginutils": "^2.6.0" } }, - "rollup-plugin-uglify": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/rollup-plugin-uglify/-/rollup-plugin-uglify-6.0.2.tgz", - "integrity": "sha512-qwz2Tryspn5QGtPUowq5oumKSxANKdrnfz7C0jm4lKxvRDsNe/hSGsB9FntUul7UeC4TsZEWKErVgE1qWSO0gw==", + "rollup-plugin-terser": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-4.0.4.tgz", + "integrity": "sha512-wPANT5XKVJJ8RDUN0+wIr7UPd0lIXBo4UdJ59VmlPCtlFsE20AM+14pe+tk7YunCsWEiuzkDBY3QIkSCjtrPXg==", "dev": true, "requires": { "@babel/code-frame": "^7.0.0", "jest-worker": "^24.0.0", "serialize-javascript": "^1.6.1", - "uglify-js": "^3.4.9" + "terser": "^3.14.1" } }, "rollup-pluginutils": { @@ -7879,6 +7879,25 @@ "execa": "^0.7.0" } }, + "terser": { + "version": "3.17.0", + "resolved": "https://registry.npmjs.org/terser/-/terser-3.17.0.tgz", + "integrity": "sha512-/FQzzPJmCpjAH9Xvk2paiWrFq+5M6aVOf+2KRbwhByISDX/EujxsK+BAvrhb6H+2rtrLCHK9N01wO014vrIwVQ==", + "dev": true, + "requires": { + "commander": "^2.19.0", + "source-map": "~0.6.1", + "source-map-support": "~0.5.10" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, "time-zone": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/time-zone/-/time-zone-1.0.0.tgz", @@ -7969,30 +7988,6 @@ "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==", "dev": true }, - "uglify-js": { - "version": "3.5.9", - "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.5.9.tgz", - "integrity": "sha512-WpT0RqsDtAWPNJK955DEnb6xjymR8Fn0OlK4TT4pS0ASYsVPqr5ELhgwOwLCP5J5vHeJ4xmMmz3DEgdqC10JeQ==", - "dev": true, - "requires": { - "commander": "~2.20.0", - "source-map": "~0.6.1" - }, - "dependencies": { - "commander": { - "version": "2.20.0", - "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.0.tgz", - "integrity": "sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==", - "dev": true - }, - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true - } - } - }, "uid2": { "version": "0.0.3", "resolved": "https://registry.npmjs.org/uid2/-/uid2-0.0.3.tgz", diff --git a/package.json b/package.json index f064b9299..1cc2b28af 100644 --- a/package.json +++ b/package.json @@ -3,8 +3,7 @@ "version": "4.1.1", "description": "Responsive, theme-based style props for building design systems with React", "main": "dist/styled-system.cjs.js", - "module": "dist/styled-system.es.js", - "jsnext:main": "dist/styled-system.es.js", + "module": "dist/styled-system.esm.js", "sideEffects": false, "scripts": { "prepare": "rollup -c", @@ -49,7 +48,7 @@ "rollup-plugin-commonjs": "^9.3.4", "rollup-plugin-node-resolve": "^4.2.3", "rollup-plugin-replace": "^2.2.0", - "rollup-plugin-uglify": "^6.0.2", + "rollup-plugin-terser": "^4.0.4", "styled-components": "^4.2.0" }, "ava": { diff --git a/rollup.config.js b/rollup.config.js index 29dbe11ec..12740b15c 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -4,7 +4,7 @@ import resolve from 'rollup-plugin-node-resolve' import babel from 'rollup-plugin-babel' import replace from 'rollup-plugin-replace' import commonjs from 'rollup-plugin-commonjs' -import { uglify } from 'rollup-plugin-uglify' +import { terser } from 'rollup-plugin-terser' import pkg from './package.json' function getConfig() { @@ -27,13 +27,10 @@ function getConfig() { const esConfig = Object.assign({}, baseConfig, { output: { - file: `${DIST_DIR}/${buildName}.es.js`, - format: 'es', + file: `${DIST_DIR}/${buildName}.esm.js`, + format: 'esm', }, - external: [ - ...Object.keys(pkg.peerDependencies || {}), - ...Object.keys(pkg.dependencies || {}), - ], + external: id => !id.startsWith('.') && !id.startsWith('/'), plugins: [...baseConfig.plugins, resolve()], }) @@ -44,9 +41,7 @@ function getConfig() { }, }) - const globals = { - deepmerge: 'deepmerge', - } + const globals = {} const umdConfig = Object.assign({}, baseConfig, { output: { @@ -69,14 +64,7 @@ function getConfig() { plugins: [ ...umdConfig.plugins, replace({ 'process.env.NODE_ENV': JSON.stringify('production') }), - uglify({ - compress: { - pure_getters: true, - unsafe: true, - unsafe_comps: true, - warnings: false, - }, - }), + terser(), ], }) From fab84590d45567e33a6491c31b6b3ca3ab90dbee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Berg=C3=A9?= Date: Sun, 28 Apr 2019 23:36:58 +0200 Subject: [PATCH 3/5] Refactor rollup config --- .size-snapshot.json | 21 + babel.config.js | 19 +- package-lock.json | 1526 +++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + rollup.config.js | 112 ++-- 5 files changed, 1599 insertions(+), 80 deletions(-) create mode 100644 .size-snapshot.json diff --git a/.size-snapshot.json b/.size-snapshot.json new file mode 100644 index 000000000..6acac8107 --- /dev/null +++ b/.size-snapshot.json @@ -0,0 +1,21 @@ +{ + "dist/styled-system.cjs.js": { + "bundled": 20373, + "minified": 12731, + "gzipped": 3351 + }, + "dist/styled-system.esm.js": { + "bundled": 18178, + "minified": 10777, + "gzipped": 2888, + "treeshaked": { + "rollup": { + "code": 18, + "import_statements": 18 + }, + "webpack": { + "code": 1002 + } + } + } +} diff --git a/babel.config.js b/babel.config.js index ad4605be9..3eaf5273f 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,16 +1,7 @@ -module.exports = function getConfig(api) { - const isRollup = api.caller( - caller => caller && caller.name === 'rollup-plugin-babel' - ) - if (!isRollup) - return { +module.exports = { + env: { + test: { presets: [['@babel/preset-env', { loose: true }], '@babel/react'], - } - return { - presets: [['@babel/preset-env', { loose: true, modules: false }]], - plugins: [ - 'babel-plugin-annotate-pure-calls', - ['@babel/transform-runtime', { useESModules: true }], - ], - } + }, + }, } diff --git a/package-lock.json b/package-lock.json index 74ca5ef55..8597e2322 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1568,12 +1568,230 @@ "@types/node": "*" } }, + "@webassemblyjs/ast": { + "version": "1.8.5", + "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz", + "integrity": "sha512-aJMfngIZ65+t71C3y2nBBg5FFG0Okt9m0XEgWZ7Ywgn1oMAT8cNwx00Uv1cQyHtidq0Xn94R4TAywO+LCQ+ZAQ==", + "dev": true, + "requires": { + "@webassemblyjs/helper-module-context": "1.8.5", + "@webassemblyjs/helper-wasm-bytecode": "1.8.5", + "@webassemblyjs/wast-parser": "1.8.5" + } + }, + "@webassemblyjs/floating-point-hex-parser": { + "version": "1.8.5", + "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.8.5.tgz", + "integrity": "sha512-9p+79WHru1oqBh9ewP9zW95E3XAo+90oth7S5Re3eQnECGq59ly1Ri5tsIipKGpiStHsUYmY3zMLqtk3gTcOtQ==", + "dev": true + }, + "@webassemblyjs/helper-api-error": { + "version": "1.8.5", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.8.5.tgz", + "integrity": "sha512-Za/tnzsvnqdaSPOUXHyKJ2XI7PDX64kWtURyGiJJZKVEdFOsdKUCPTNEVFZq3zJ2R0G5wc2PZ5gvdTRFgm81zA==", + "dev": true + }, + "@webassemblyjs/helper-buffer": { + "version": "1.8.5", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.8.5.tgz", + "integrity": "sha512-Ri2R8nOS0U6G49Q86goFIPNgjyl6+oE1abW1pS84BuhP1Qcr5JqMwRFT3Ah3ADDDYGEgGs1iyb1DGX+kAi/c/Q==", + "dev": true + }, + "@webassemblyjs/helper-code-frame": { + "version": "1.8.5", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.8.5.tgz", + "integrity": "sha512-VQAadSubZIhNpH46IR3yWO4kZZjMxN1opDrzePLdVKAZ+DFjkGD/rf4v1jap744uPVU6yjL/smZbRIIJTOUnKQ==", + "dev": true, + "requires": { + "@webassemblyjs/wast-printer": "1.8.5" + } + }, + "@webassemblyjs/helper-fsm": { + "version": "1.8.5", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-fsm/-/helper-fsm-1.8.5.tgz", + "integrity": "sha512-kRuX/saORcg8se/ft6Q2UbRpZwP4y7YrWsLXPbbmtepKr22i8Z4O3V5QE9DbZK908dh5Xya4Un57SDIKwB9eow==", + "dev": true + }, + "@webassemblyjs/helper-module-context": { + "version": "1.8.5", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-module-context/-/helper-module-context-1.8.5.tgz", + "integrity": "sha512-/O1B236mN7UNEU4t9X7Pj38i4VoU8CcMHyy3l2cV/kIF4U5KoHXDVqcDuOs1ltkac90IM4vZdHc52t1x8Yfs3g==", + "dev": true, + "requires": { + "@webassemblyjs/ast": "1.8.5", + "mamacro": "^0.0.3" + } + }, + "@webassemblyjs/helper-wasm-bytecode": { + "version": "1.8.5", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.8.5.tgz", + "integrity": "sha512-Cu4YMYG3Ddl72CbmpjU/wbP6SACcOPVbHN1dI4VJNJVgFwaKf1ppeFJrwydOG3NDHxVGuCfPlLZNyEdIYlQ6QQ==", + "dev": true + }, + "@webassemblyjs/helper-wasm-section": { + "version": "1.8.5", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.8.5.tgz", + "integrity": "sha512-VV083zwR+VTrIWWtgIUpqfvVdK4ff38loRmrdDBgBT8ADXYsEZ5mPQ4Nde90N3UYatHdYoDIFb7oHzMncI02tA==", + "dev": true, + "requires": { + "@webassemblyjs/ast": "1.8.5", + "@webassemblyjs/helper-buffer": "1.8.5", + "@webassemblyjs/helper-wasm-bytecode": "1.8.5", + "@webassemblyjs/wasm-gen": "1.8.5" + } + }, + "@webassemblyjs/ieee754": { + "version": "1.8.5", + "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.8.5.tgz", + "integrity": "sha512-aaCvQYrvKbY/n6wKHb/ylAJr27GglahUO89CcGXMItrOBqRarUMxWLJgxm9PJNuKULwN5n1csT9bYoMeZOGF3g==", + "dev": true, + "requires": { + "@xtuc/ieee754": "^1.2.0" + } + }, + "@webassemblyjs/leb128": { + "version": "1.8.5", + "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.8.5.tgz", + "integrity": "sha512-plYUuUwleLIziknvlP8VpTgO4kqNaH57Y3JnNa6DLpu/sGcP6hbVdfdX5aHAV716pQBKrfuU26BJK29qY37J7A==", + "dev": true, + "requires": { + "@xtuc/long": "4.2.2" + } + }, + "@webassemblyjs/utf8": { + "version": "1.8.5", + "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.8.5.tgz", + "integrity": "sha512-U7zgftmQriw37tfD934UNInokz6yTmn29inT2cAetAsaU9YeVCveWEwhKL1Mg4yS7q//NGdzy79nlXh3bT8Kjw==", + "dev": true + }, + "@webassemblyjs/wasm-edit": { + "version": "1.8.5", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.8.5.tgz", + "integrity": "sha512-A41EMy8MWw5yvqj7MQzkDjU29K7UJq1VrX2vWLzfpRHt3ISftOXqrtojn7nlPsZ9Ijhp5NwuODuycSvfAO/26Q==", + "dev": true, + "requires": { + "@webassemblyjs/ast": "1.8.5", + "@webassemblyjs/helper-buffer": "1.8.5", + "@webassemblyjs/helper-wasm-bytecode": "1.8.5", + "@webassemblyjs/helper-wasm-section": "1.8.5", + "@webassemblyjs/wasm-gen": "1.8.5", + "@webassemblyjs/wasm-opt": "1.8.5", + "@webassemblyjs/wasm-parser": "1.8.5", + "@webassemblyjs/wast-printer": "1.8.5" + } + }, + "@webassemblyjs/wasm-gen": { + "version": "1.8.5", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.8.5.tgz", + "integrity": "sha512-BCZBT0LURC0CXDzj5FXSc2FPTsxwp3nWcqXQdOZE4U7h7i8FqtFK5Egia6f9raQLpEKT1VL7zr4r3+QX6zArWg==", + "dev": true, + "requires": { + "@webassemblyjs/ast": "1.8.5", + "@webassemblyjs/helper-wasm-bytecode": "1.8.5", + "@webassemblyjs/ieee754": "1.8.5", + "@webassemblyjs/leb128": "1.8.5", + "@webassemblyjs/utf8": "1.8.5" + } + }, + "@webassemblyjs/wasm-opt": { + "version": "1.8.5", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.8.5.tgz", + "integrity": "sha512-HKo2mO/Uh9A6ojzu7cjslGaHaUU14LdLbGEKqTR7PBKwT6LdPtLLh9fPY33rmr5wcOMrsWDbbdCHq4hQUdd37Q==", + "dev": true, + "requires": { + "@webassemblyjs/ast": "1.8.5", + "@webassemblyjs/helper-buffer": "1.8.5", + "@webassemblyjs/wasm-gen": "1.8.5", + "@webassemblyjs/wasm-parser": "1.8.5" + } + }, + "@webassemblyjs/wasm-parser": { + "version": "1.8.5", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.8.5.tgz", + "integrity": "sha512-pi0SYE9T6tfcMkthwcgCpL0cM9nRYr6/6fjgDtL6q/ZqKHdMWvxitRi5JcZ7RI4SNJJYnYNaWy5UUrHQy998lw==", + "dev": true, + "requires": { + "@webassemblyjs/ast": "1.8.5", + "@webassemblyjs/helper-api-error": "1.8.5", + "@webassemblyjs/helper-wasm-bytecode": "1.8.5", + "@webassemblyjs/ieee754": "1.8.5", + "@webassemblyjs/leb128": "1.8.5", + "@webassemblyjs/utf8": "1.8.5" + } + }, + "@webassemblyjs/wast-parser": { + "version": "1.8.5", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-parser/-/wast-parser-1.8.5.tgz", + "integrity": "sha512-daXC1FyKWHF1i11obK086QRlsMsY4+tIOKgBqI1lxAnkp9xe9YMcgOxm9kLe+ttjs5aWV2KKE1TWJCN57/Btsg==", + "dev": true, + "requires": { + "@webassemblyjs/ast": "1.8.5", + "@webassemblyjs/floating-point-hex-parser": "1.8.5", + "@webassemblyjs/helper-api-error": "1.8.5", + "@webassemblyjs/helper-code-frame": "1.8.5", + "@webassemblyjs/helper-fsm": "1.8.5", + "@xtuc/long": "4.2.2" + } + }, + "@webassemblyjs/wast-printer": { + "version": "1.8.5", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.8.5.tgz", + "integrity": "sha512-w0U0pD4EhlnvRyeJzBqaVSJAo9w/ce7/WPogeXLzGkO6hzhr4GnQIZ4W4uUt5b9ooAaXPtnXlj0gzsXEOUNYMg==", + "dev": true, + "requires": { + "@webassemblyjs/ast": "1.8.5", + "@webassemblyjs/wast-parser": "1.8.5", + "@xtuc/long": "4.2.2" + } + }, + "@xtuc/ieee754": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz", + "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==", + "dev": true + }, + "@xtuc/long": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz", + "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==", + "dev": true + }, "acorn": { "version": "6.1.1", "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.1.1.tgz", "integrity": "sha512-jPTiwtOxaHNaAPg/dmrJ/beuzLRnXtB0kQPQ8JpotKJgTB6rX6c8mlf315941pyjBSaPg8NHXS9fhP4u17DpGA==", "dev": true }, + "acorn-dynamic-import": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz", + "integrity": "sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw==", + "dev": true + }, + "ajv": { + "version": "6.10.0", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.0.tgz", + "integrity": "sha512-nffhOpkymDECQyR0mnsUtoCE8RlX38G0rYP+wgLWFyZuUyuuojSSvi/+euOiQBIn63whYwYVIIH1TvE3tu4OEg==", + "dev": true, + "requires": { + "fast-deep-equal": "^2.0.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + } + }, + "ajv-errors": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz", + "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==", + "dev": true + }, + "ajv-keywords": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.4.0.tgz", + "integrity": "sha512-aUjdRFISbuFOl0EIZc+9e4FfZp0bDZgAdOOf30bJmw8VM9v84SHyVyxDfbWxpGYbdZD/9XoKxfHVNmxPkhwyGw==", + "dev": true + }, "ansi-align": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-2.0.0.tgz", @@ -1620,6 +1838,12 @@ "normalize-path": "^2.1.1" } }, + "aproba": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz", + "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==", + "dev": true + }, "argparse": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", @@ -1694,6 +1918,43 @@ "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=", "dev": true }, + "asn1.js": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-4.10.1.tgz", + "integrity": "sha512-p32cOF5q0Zqs9uBiONKYLm6BClCoBCM5O9JfeUSlnQLBTxYdTK+pW+nXflm8UkKd2UYlEbYz5qEi0JuZR9ckSw==", + "dev": true, + "requires": { + "bn.js": "^4.0.0", + "inherits": "^2.0.1", + "minimalistic-assert": "^1.0.0" + } + }, + "assert": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/assert/-/assert-1.4.1.tgz", + "integrity": "sha1-mZEtWRg2tab1s0XA8H7vwI/GXZE=", + "dev": true, + "requires": { + "util": "0.10.3" + }, + "dependencies": { + "inherits": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz", + "integrity": "sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE=", + "dev": true + }, + "util": { + "version": "0.10.3", + "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz", + "integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=", + "dev": true, + "requires": { + "inherits": "2.0.1" + } + } + } + }, "assign-symbols": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz", @@ -2114,6 +2375,12 @@ } } }, + "base64-js": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.0.tgz", + "integrity": "sha512-ccav/yGvoa80BQDljCxsmmQ3Xvx60/UpBIij5QN21W3wBi/hhIC9OoO+KLpu9IJTS9j4DRVJ3aDDF9cMSoa2lw==", + "dev": true + }, "benchmark": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/benchmark/-/benchmark-2.1.4.tgz", @@ -2124,6 +2391,12 @@ "platform": "^1.3.3" } }, + "big.js": { + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz", + "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==", + "dev": true + }, "binary-extensions": { "version": "1.12.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.12.0.tgz", @@ -2136,6 +2409,12 @@ "integrity": "sha512-/qKPUQlaW1OyR51WeCPBvRnAlnZFUJkCSG5HzGnuIqhgyJtF+T94lFnn33eiazjRm2LAHVy2guNnaq48X9SJuw==", "dev": true }, + "bn.js": { + "version": "4.11.8", + "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.8.tgz", + "integrity": "sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==", + "dev": true + }, "boxen": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/boxen/-/boxen-1.3.0.tgz", @@ -2190,6 +2469,83 @@ } } }, + "brorand": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz", + "integrity": "sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=", + "dev": true + }, + "browserify-aes": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz", + "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==", + "dev": true, + "requires": { + "buffer-xor": "^1.0.3", + "cipher-base": "^1.0.0", + "create-hash": "^1.1.0", + "evp_bytestokey": "^1.0.3", + "inherits": "^2.0.1", + "safe-buffer": "^5.0.1" + } + }, + "browserify-cipher": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/browserify-cipher/-/browserify-cipher-1.0.1.tgz", + "integrity": "sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==", + "dev": true, + "requires": { + "browserify-aes": "^1.0.4", + "browserify-des": "^1.0.0", + "evp_bytestokey": "^1.0.0" + } + }, + "browserify-des": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/browserify-des/-/browserify-des-1.0.2.tgz", + "integrity": "sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A==", + "dev": true, + "requires": { + "cipher-base": "^1.0.1", + "des.js": "^1.0.0", + "inherits": "^2.0.1", + "safe-buffer": "^5.1.2" + } + }, + "browserify-rsa": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz", + "integrity": "sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=", + "dev": true, + "requires": { + "bn.js": "^4.1.0", + "randombytes": "^2.0.1" + } + }, + "browserify-sign": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/browserify-sign/-/browserify-sign-4.0.4.tgz", + "integrity": "sha1-qk62jl17ZYuqa/alfmMMvXqT0pg=", + "dev": true, + "requires": { + "bn.js": "^4.1.1", + "browserify-rsa": "^4.0.0", + "create-hash": "^1.1.0", + "create-hmac": "^1.1.2", + "elliptic": "^6.0.0", + "inherits": "^2.0.1", + "parse-asn1": "^5.0.0" + } + }, + "browserify-zlib": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.2.0.tgz", + "integrity": "sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==", + "dev": true, + "requires": { + "pako": "~1.0.5" + } + }, "browserslist": { "version": "4.5.2", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.5.2.tgz", @@ -2201,18 +2557,92 @@ "node-releases": "^1.1.11" } }, + "buffer": { + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz", + "integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=", + "dev": true, + "requires": { + "base64-js": "^1.0.2", + "ieee754": "^1.1.4", + "isarray": "^1.0.0" + } + }, "buffer-from": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz", "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==", "dev": true }, + "buffer-xor": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz", + "integrity": "sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=", + "dev": true + }, "builtin-modules": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz", "integrity": "sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=", "dev": true }, + "builtin-status-codes": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz", + "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=", + "dev": true + }, + "bytes": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz", + "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==", + "dev": true + }, + "cacache": { + "version": "11.3.2", + "resolved": "https://registry.npmjs.org/cacache/-/cacache-11.3.2.tgz", + "integrity": "sha512-E0zP4EPGDOaT2chM08Als91eYnf8Z+eH1awwwVsngUmgppfM5jjJ8l3z5vO5p5w/I3LsiXawb1sW0VY65pQABg==", + "dev": true, + "requires": { + "bluebird": "^3.5.3", + "chownr": "^1.1.1", + "figgy-pudding": "^3.5.1", + "glob": "^7.1.3", + "graceful-fs": "^4.1.15", + "lru-cache": "^5.1.1", + "mississippi": "^3.0.0", + "mkdirp": "^0.5.1", + "move-concurrently": "^1.0.1", + "promise-inflight": "^1.0.1", + "rimraf": "^2.6.2", + "ssri": "^6.0.1", + "unique-filename": "^1.1.1", + "y18n": "^4.0.0" + }, + "dependencies": { + "graceful-fs": { + "version": "4.1.15", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.15.tgz", + "integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==", + "dev": true + }, + "lru-cache": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", + "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==", + "dev": true, + "requires": { + "yallist": "^3.0.2" + } + }, + "yallist": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz", + "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", + "dev": true + } + } + }, "cache-base": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz", @@ -2318,6 +2748,55 @@ "supports-color": "^5.3.0" } }, + "chokidar": { + "version": "2.1.5", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.5.tgz", + "integrity": "sha512-i0TprVWp+Kj4WRPtInjexJ8Q+BqTE909VpH8xVhXrJkoc5QC8VO9TryGOqTr+2hljzc1sC62t22h5tZePodM/A==", + "dev": true, + "requires": { + "anymatch": "^2.0.0", + "async-each": "^1.0.1", + "braces": "^2.3.2", + "fsevents": "^1.2.7", + "glob-parent": "^3.1.0", + "inherits": "^2.0.3", + "is-binary-path": "^1.0.0", + "is-glob": "^4.0.0", + "normalize-path": "^3.0.0", + "path-is-absolute": "^1.0.0", + "readdirp": "^2.2.1", + "upath": "^1.1.1" + }, + "dependencies": { + "normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "dev": true + }, + "upath": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/upath/-/upath-1.1.2.tgz", + "integrity": "sha512-kXpym8nmDmlCBr7nKdIx8P2jNBa+pBpIUFRnKJ4dr8htyYGJFokkr2ZvERRtUN+9SY+JqXouNgUPtv6JQva/2Q==", + "dev": true + } + } + }, + "chownr": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.1.tgz", + "integrity": "sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==", + "dev": true + }, + "chrome-trace-event": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.0.tgz", + "integrity": "sha512-xDbVgyfDTT2piup/h8dK/y4QZfJRSa73bw1WZ8b4XM1o7fsFubUVGYcE+1ANtOzJJELGpYoG2961z0Z6OAld9A==", + "dev": true, + "requires": { + "tslib": "^1.9.0" + } + }, "chunkd": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/chunkd/-/chunkd-1.0.0.tgz", @@ -2336,6 +2815,16 @@ "integrity": "sha512-u6dx20FBXm+apMi+5x7UVm6EH7BL1gc4XrcnQewjcB7HWRcor/V5qWc3RG2HwpgDJ26gIi2DSEu3B7sXynAw/g==", "dev": true }, + "cipher-base": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.4.tgz", + "integrity": "sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==", + "dev": true, + "requires": { + "inherits": "^2.0.1", + "safe-buffer": "^5.0.1" + } + }, "class-utils": { "version": "0.3.6", "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz", @@ -2478,6 +2967,18 @@ "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", "dev": true }, + "concat-stream": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz", + "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==", + "dev": true, + "requires": { + "buffer-from": "^1.0.0", + "inherits": "^2.0.3", + "readable-stream": "^2.2.2", + "typedarray": "^0.0.6" + } + }, "concordance": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/concordance/-/concordance-4.0.0.tgz", @@ -2511,6 +3012,21 @@ "xdg-basedir": "^3.0.0" } }, + "console-browserify": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.1.0.tgz", + "integrity": "sha1-8CQcRXMKn8YyOyBtvzjtx0HQuxA=", + "dev": true, + "requires": { + "date-now": "^0.1.4" + } + }, + "constants-browserify": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz", + "integrity": "sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=", + "dev": true + }, "convert-source-map": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.6.0.tgz", @@ -2526,6 +3042,20 @@ "integrity": "sha1-fj5Iu+bZl7FBfdyihoIEtNPYVxU=", "dev": true }, + "copy-concurrently": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz", + "integrity": "sha512-f2domd9fsVDFtaFcbaRZuYXwtdmnzqbADSwhSWYxYB/Q8zsdUUFMXVRwXGDMWmbEzAn1kdRrtI1T/KTFOL4X2A==", + "dev": true, + "requires": { + "aproba": "^1.1.1", + "fs-write-stream-atomic": "^1.0.8", + "iferr": "^0.1.5", + "mkdirp": "^0.5.1", + "rimraf": "^2.5.4", + "run-queue": "^1.0.0" + } + }, "copy-descriptor": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz", @@ -2588,6 +3118,16 @@ "parse-json": "^4.0.0" } }, + "create-ecdh": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.3.tgz", + "integrity": "sha512-GbEHQPMOswGpKXM9kCWVrremUcBmjteUaQ01T9rkKCPDXfUHX0IoP9LpHYo2NPFampa4e+/pFDc3jQdxrxQLaw==", + "dev": true, + "requires": { + "bn.js": "^4.1.0", + "elliptic": "^6.0.0" + } + }, "create-error-class": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/create-error-class/-/create-error-class-3.0.2.tgz", @@ -2597,6 +3137,33 @@ "capture-stack-trace": "^1.0.0" } }, + "create-hash": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz", + "integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==", + "dev": true, + "requires": { + "cipher-base": "^1.0.1", + "inherits": "^2.0.1", + "md5.js": "^1.3.4", + "ripemd160": "^2.0.1", + "sha.js": "^2.4.0" + } + }, + "create-hmac": { + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz", + "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==", + "dev": true, + "requires": { + "cipher-base": "^1.0.3", + "create-hash": "^1.1.0", + "inherits": "^2.0.1", + "ripemd160": "^2.0.0", + "safe-buffer": "^5.0.1", + "sha.js": "^2.4.8" + } + }, "cross-spawn": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz", @@ -2608,6 +3175,25 @@ "which": "^1.2.9" } }, + "crypto-browserify": { + "version": "3.12.0", + "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz", + "integrity": "sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==", + "dev": true, + "requires": { + "browserify-cipher": "^1.0.0", + "browserify-sign": "^4.0.0", + "create-ecdh": "^4.0.0", + "create-hash": "^1.1.0", + "create-hmac": "^1.1.0", + "diffie-hellman": "^5.0.0", + "inherits": "^2.0.1", + "pbkdf2": "^3.0.3", + "public-encrypt": "^4.0.0", + "randombytes": "^2.0.0", + "randomfill": "^1.0.3" + } + }, "crypto-random-string": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-1.0.0.tgz", @@ -2646,12 +3232,24 @@ "array-find-index": "^1.0.1" } }, + "cyclist": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-0.2.2.tgz", + "integrity": "sha1-GzN5LhHpFKL9bW7WRHRkRE5fpkA=", + "dev": true + }, "date-fns": { "version": "1.30.1", "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz", "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==", "dev": true }, + "date-now": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz", + "integrity": "sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=", + "dev": true + }, "date-time": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/date-time/-/date-time-2.1.0.tgz", @@ -2816,6 +3414,33 @@ } } }, + "des.js": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.0.tgz", + "integrity": "sha1-wHTS4qpqipoH29YfmhXCzYPsjsw=", + "dev": true, + "requires": { + "inherits": "^2.0.1", + "minimalistic-assert": "^1.0.0" + } + }, + "diff": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz", + "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==", + "dev": true + }, + "diffie-hellman": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz", + "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==", + "dev": true, + "requires": { + "bn.js": "^4.1.0", + "miller-rabin": "^4.0.0", + "randombytes": "^2.0.0" + } + }, "dir-glob": { "version": "2.2.2", "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-2.2.2.tgz", @@ -2825,6 +3450,12 @@ "path-type": "^3.0.0" } }, + "domain-browser": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz", + "integrity": "sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==", + "dev": true + }, "dot-prop": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.0.tgz", @@ -2834,12 +3465,30 @@ "is-obj": "^1.0.0" } }, + "duplexer": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz", + "integrity": "sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=", + "dev": true + }, "duplexer3": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz", "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=", "dev": true }, + "duplexify": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz", + "integrity": "sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==", + "dev": true, + "requires": { + "end-of-stream": "^1.0.0", + "inherits": "^2.0.1", + "readable-stream": "^2.0.0", + "stream-shift": "^1.0.0" + } + }, "electron-to-chromium": { "version": "1.3.119", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.119.tgz", @@ -2852,12 +3501,33 @@ "integrity": "sha1-2wQ1IcldfjA/2PNFvtwzSc+wcp4=", "dev": true }, + "elliptic": { + "version": "6.4.1", + "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.4.1.tgz", + "integrity": "sha512-BsXLz5sqX8OHcsh7CqBMztyXARmGQ3LWPtGjJi6DiJHq5C/qvi9P3OqgswKSDftbu8+IoI/QDTAm2fFnQ9SZSQ==", + "dev": true, + "requires": { + "bn.js": "^4.4.0", + "brorand": "^1.0.1", + "hash.js": "^1.0.0", + "hmac-drbg": "^1.0.0", + "inherits": "^2.0.1", + "minimalistic-assert": "^1.0.0", + "minimalistic-crypto-utils": "^1.0.0" + } + }, "emittery": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.4.1.tgz", "integrity": "sha512-r4eRSeStEGf6M5SKdrQhhLK5bOwOBxQhIE3YSTnZE3GpKiLfnnhE+tPtrJE79+eDJgm39BM6LSoI8SCx4HbwlQ==", "dev": true }, + "emojis-list": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz", + "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=", + "dev": true + }, "empower-core": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/empower-core/-/empower-core-1.2.0.tgz", @@ -2877,12 +3547,32 @@ "once": "^1.4.0" } }, + "enhanced-resolve": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.1.0.tgz", + "integrity": "sha512-F/7vkyTtyc/llOIn8oWclcB25KdRaiPBpZYDgJHgh/UHtpgT2p2eldQgtQnLtUvfMKPKxbRaQM/hHkvLHt1Vng==", + "dev": true, + "requires": { + "graceful-fs": "^4.1.2", + "memory-fs": "^0.4.0", + "tapable": "^1.0.0" + } + }, "equal-length": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/equal-length/-/equal-length-1.0.1.tgz", "integrity": "sha1-IcoRLUirJLTh5//A5TOdMf38J0w=", "dev": true }, + "errno": { + "version": "0.1.7", + "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz", + "integrity": "sha512-MfrRBDWzIWifgq6tJj60gkAwtLNb6sQPlcFrSOflcP1aFmmruKQ2wRnze/8V6kgyz7H3FF8Npzv78mZ7XLLflg==", + "dev": true, + "requires": { + "prr": "~1.0.1" + } + }, "error-ex": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", @@ -2904,6 +3594,16 @@ "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", "dev": true }, + "eslint-scope": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz", + "integrity": "sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==", + "dev": true, + "requires": { + "esrecurse": "^4.1.0", + "estraverse": "^4.1.1" + } + }, "esm": { "version": "3.2.14", "resolved": "https://registry.npmjs.org/esm/-/esm-3.2.14.tgz", @@ -2937,6 +3637,15 @@ "core-js": "^2.0.0" } }, + "esrecurse": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.2.1.tgz", + "integrity": "sha512-64RBB++fIOAXPw3P9cy89qfMlvZEXZkqqJkjqqXIvzP5ezRZjW+lPWjw35UX/3EhUPFYbg5ER4JYgDw4007/DQ==", + "dev": true, + "requires": { + "estraverse": "^4.1.0" + } + }, "estraverse": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.2.0.tgz", @@ -2955,6 +3664,22 @@ "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=", "dev": true }, + "events": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/events/-/events-3.0.0.tgz", + "integrity": "sha512-Dc381HFWJzEOhQ+d8pkNon++bk9h6cdAoAj4iE6Q4y6xgTzySWXlKn05/TVNpjnfRqi/X0EpJEJohPjNI3zpVA==", + "dev": true + }, + "evp_bytestokey": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz", + "integrity": "sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==", + "dev": true, + "requires": { + "md5.js": "^1.3.4", + "safe-buffer": "^5.1.1" + } + }, "execa": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz", @@ -3091,12 +3816,30 @@ } } }, + "fast-deep-equal": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz", + "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=", + "dev": true + }, "fast-diff": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz", "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==", "dev": true }, + "fast-json-stable-stringify": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz", + "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=", + "dev": true + }, + "figgy-pudding": { + "version": "3.5.1", + "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz", + "integrity": "sha512-vNKxJHTEKNThjfrdJwHc7brvM6eVevuO5nTj6ez8ZQ1qbXTvGthucRF7S4vf2cr71QVnT70V34v0S1DyQsti0w==", + "dev": true + }, "figures": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz", @@ -3185,6 +3928,16 @@ "locate-path": "^2.0.0" } }, + "flush-write-stream": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz", + "integrity": "sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w==", + "dev": true, + "requires": { + "inherits": "^2.0.3", + "readable-stream": "^2.3.6" + } + }, "fn-name": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/fn-name/-/fn-name-2.0.1.tgz", @@ -3206,6 +3959,28 @@ "map-cache": "^0.2.2" } }, + "from2": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz", + "integrity": "sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=", + "dev": true, + "requires": { + "inherits": "^2.0.1", + "readable-stream": "^2.0.0" + } + }, + "fs-write-stream-atomic": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz", + "integrity": "sha1-tH31NJPvkR33VzHnCp3tAYnbQMk=", + "dev": true, + "requires": { + "graceful-fs": "^4.1.2", + "iferr": "^0.1.5", + "imurmurhash": "^0.1.4", + "readable-stream": "1 || 2" + } + }, "fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -3879,6 +4654,24 @@ "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=", "dev": true }, + "gzip-size": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.0.tgz", + "integrity": "sha512-wfSnvypBDRW94v5W3ckvvz/zFUNdJ81VgOP6tE4bPpRUcc0wGqU+y0eZjJEvKxwubJFix6P84sE8M51YWLT7rQ==", + "dev": true, + "requires": { + "duplexer": "^0.1.1", + "pify": "^4.0.1" + }, + "dependencies": { + "pify": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", + "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==", + "dev": true + } + } + }, "has-ansi": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz", @@ -3934,6 +4727,26 @@ } } }, + "hash-base": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/hash-base/-/hash-base-3.0.4.tgz", + "integrity": "sha1-X8hoaEfs1zSZQDMZprCj8/auSRg=", + "dev": true, + "requires": { + "inherits": "^2.0.1", + "safe-buffer": "^5.0.1" + } + }, + "hash.js": { + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz", + "integrity": "sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==", + "dev": true, + "requires": { + "inherits": "^2.0.3", + "minimalistic-assert": "^1.0.1" + } + }, "hasha": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/hasha/-/hasha-3.0.0.tgz", @@ -3943,12 +4756,29 @@ "is-stream": "^1.0.1" } }, + "hmac-drbg": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", + "integrity": "sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=", + "dev": true, + "requires": { + "hash.js": "^1.0.3", + "minimalistic-assert": "^1.0.0", + "minimalistic-crypto-utils": "^1.0.1" + } + }, "hosted-git-info": { "version": "2.7.1", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.7.1.tgz", "integrity": "sha512-7T/BxH19zbcCTa8XkMlbK5lTo1WtgkFi3GvdWEyNuc4Vex7/9Dqbnpsf4JMydcfj9HCg4zUWFTL3Za6lapg5/w==", "dev": true }, + "https-browserify": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz", + "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=", + "dev": true + }, "husky": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/husky/-/husky-1.3.1.tgz", @@ -4084,6 +4914,18 @@ } } }, + "ieee754": { + "version": "1.1.13", + "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz", + "integrity": "sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==", + "dev": true + }, + "iferr": { + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/iferr/-/iferr-0.1.5.tgz", + "integrity": "sha1-xg7taebY/bazEEofy8ocGS3FtQE=", + "dev": true + }, "ignore": { "version": "3.3.10", "resolved": "https://registry.npmjs.org/ignore/-/ignore-3.3.10.tgz", @@ -4188,6 +5030,12 @@ "integrity": "sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=", "dev": true }, + "indexof": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz", + "integrity": "sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=", + "dev": true + }, "inflight": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", @@ -4545,6 +5393,24 @@ "semver": "^5.5.0" } }, + "jest-diff": { + "version": "23.6.0", + "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-23.6.0.tgz", + "integrity": "sha512-Gz9l5Ov+X3aL5L37IT+8hoCUsof1CVYBb2QEkOupK64XyRR3h+uRpYIm97K7sY8diFxowR8pIGEdyfMKTixo3g==", + "dev": true, + "requires": { + "chalk": "^2.0.1", + "diff": "^3.2.0", + "jest-get-type": "^22.1.0", + "pretty-format": "^23.6.0" + } + }, + "jest-get-type": { + "version": "22.4.3", + "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-22.4.3.tgz", + "integrity": "sha512-/jsz0Y+V29w1chdXVygEKSz2nBoHoYqNShPe+QgxSNjAuP1i8+k4LbQNrfoliKej0P45sivkSCh7yiD6ubHS3w==", + "dev": true + }, "jest-worker": { "version": "24.6.0", "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-24.6.0.tgz", @@ -4605,6 +5471,12 @@ "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==", "dev": true }, + "json-schema-traverse": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "dev": true + }, "json5": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.0.tgz", @@ -4940,6 +5812,40 @@ "strip-bom": "^3.0.0" } }, + "loader-runner": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz", + "integrity": "sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==", + "dev": true + }, + "loader-utils": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz", + "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==", + "dev": true, + "requires": { + "big.js": "^5.2.2", + "emojis-list": "^2.0.0", + "json5": "^1.0.1" + }, + "dependencies": { + "json5": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", + "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==", + "dev": true, + "requires": { + "minimist": "^1.2.0" + } + }, + "minimist": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", + "dev": true + } + } + }, "locate-path": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz", @@ -5082,6 +5988,12 @@ "pify": "^3.0.0" } }, + "mamacro": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/mamacro/-/mamacro-0.0.3.tgz", + "integrity": "sha512-qMEwh+UujcQ+kbz3T6V+wAmO2U8veoq2w+3wY8MquqwVA3jChfwY+Tk52GZKDfACEPjuZ7r2oJLejwpt8jtwTA==", + "dev": true + }, "map-cache": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz", @@ -5127,12 +6039,33 @@ "integrity": "sha1-givM1l4RfFFPqxdrJZRdVBAKA8M=", "dev": true }, + "md5.js": { + "version": "1.3.5", + "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz", + "integrity": "sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==", + "dev": true, + "requires": { + "hash-base": "^3.0.0", + "inherits": "^2.0.1", + "safe-buffer": "^5.1.2" + } + }, "memoize-one": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.0.0.tgz", "integrity": "sha512-7g0+ejkOaI9w5x6LvQwmj68kUj6rxROywPSCqmclG/HBacmFnZqhVscQ8kovkn9FBCNJmOz6SY42+jnvZzDWdw==", "dev": true }, + "memory-fs": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz", + "integrity": "sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=", + "dev": true, + "requires": { + "errno": "^0.1.3", + "readable-stream": "^2.0.1" + } + }, "meow": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/meow/-/meow-5.0.0.tgz", @@ -5180,12 +6113,34 @@ "to-regex": "^3.0.2" } }, + "miller-rabin": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz", + "integrity": "sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==", + "dev": true, + "requires": { + "bn.js": "^4.0.0", + "brorand": "^1.0.1" + } + }, "mimic-fn": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz", "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==", "dev": true }, + "minimalistic-assert": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz", + "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==", + "dev": true + }, + "minimalistic-crypto-utils": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz", + "integrity": "sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=", + "dev": true + }, "minimatch": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", @@ -5211,6 +6166,24 @@ "is-plain-obj": "^1.1.0" } }, + "mississippi": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz", + "integrity": "sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==", + "dev": true, + "requires": { + "concat-stream": "^1.5.0", + "duplexify": "^3.4.2", + "end-of-stream": "^1.1.0", + "flush-write-stream": "^1.0.0", + "from2": "^2.1.0", + "parallel-transform": "^1.1.0", + "pump": "^3.0.0", + "pumpify": "^1.3.3", + "stream-each": "^1.1.0", + "through2": "^2.0.0" + } + }, "mixin-deep": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.1.tgz", @@ -5241,6 +6214,20 @@ "minimist": "0.0.8" } }, + "move-concurrently": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", + "integrity": "sha1-viwAX9oy4LKa8fBdfEszIUxwH5I=", + "dev": true, + "requires": { + "aproba": "^1.1.1", + "copy-concurrently": "^1.0.0", + "fs-write-stream-atomic": "^1.0.8", + "mkdirp": "^0.5.1", + "rimraf": "^2.5.4", + "run-queue": "^1.0.3" + } + }, "ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", @@ -5285,12 +6272,57 @@ "to-regex": "^3.0.1" } }, + "neo-async": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.0.tgz", + "integrity": "sha512-MFh0d/Wa7vkKO3Y3LlacqAEeHK0mckVqzDieUKTT+KGxi+zIpeVsFxymkIiRpbpDziHc290Xr9A1O4Om7otoRA==", + "dev": true + }, "nice-try": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==", "dev": true }, + "node-libs-browser": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/node-libs-browser/-/node-libs-browser-2.2.0.tgz", + "integrity": "sha512-5MQunG/oyOaBdttrL40dA7bUfPORLRWMUJLQtMg7nluxUvk5XwnLdL9twQHFAjRx/y7mIMkLKT9++qPbbk6BZA==", + "dev": true, + "requires": { + "assert": "^1.1.1", + "browserify-zlib": "^0.2.0", + "buffer": "^4.3.0", + "console-browserify": "^1.1.0", + "constants-browserify": "^1.0.0", + "crypto-browserify": "^3.11.0", + "domain-browser": "^1.1.1", + "events": "^3.0.0", + "https-browserify": "^1.0.0", + "os-browserify": "^0.3.0", + "path-browserify": "0.0.0", + "process": "^0.11.10", + "punycode": "^1.2.4", + "querystring-es3": "^0.2.0", + "readable-stream": "^2.3.3", + "stream-browserify": "^2.0.1", + "stream-http": "^2.7.2", + "string_decoder": "^1.0.0", + "timers-browserify": "^2.0.4", + "tty-browserify": "0.0.0", + "url": "^0.11.0", + "util": "^0.11.0", + "vm-browserify": "0.0.4" + }, + "dependencies": { + "punycode": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz", + "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=", + "dev": true + } + } + }, "node-modules-regexp": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz", @@ -6539,6 +7571,12 @@ } } }, + "os-browserify": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz", + "integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=", + "dev": true + }, "os-tmpdir": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", @@ -6613,6 +7651,37 @@ "semver": "^5.1.0" } }, + "pako": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.10.tgz", + "integrity": "sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw==", + "dev": true + }, + "parallel-transform": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/parallel-transform/-/parallel-transform-1.1.0.tgz", + "integrity": "sha1-1BDwZbBdojCB/NEPKIVMKb2jOwY=", + "dev": true, + "requires": { + "cyclist": "~0.2.2", + "inherits": "^2.0.3", + "readable-stream": "^2.1.5" + } + }, + "parse-asn1": { + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.4.tgz", + "integrity": "sha512-Qs5duJcuvNExRfFZ99HDD3z4mAi3r9Wl/FOjEOijlxwCZs7E7mW2vjTpgQ4J8LpTF8x5v+1Vn5UQFejmWT11aw==", + "dev": true, + "requires": { + "asn1.js": "^4.0.0", + "browserify-aes": "^1.0.0", + "create-hash": "^1.1.0", + "evp_bytestokey": "^1.0.0", + "pbkdf2": "^3.0.3", + "safe-buffer": "^5.1.1" + } + }, "parse-json": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz", @@ -6635,6 +7704,12 @@ "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=", "dev": true }, + "path-browserify": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.0.tgz", + "integrity": "sha1-oLhwcpquIUAFt9UDLsLLuw+0RRo=", + "dev": true + }, "path-dirname": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz", @@ -6680,6 +7755,19 @@ "pify": "^3.0.0" } }, + "pbkdf2": { + "version": "3.0.17", + "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.0.17.tgz", + "integrity": "sha512-U/il5MsrZp7mGg3mSQfn742na2T+1/vHDCG5/iTI3X9MKUuYUZVLQhyRsg06mCgDBTd57TxzgZt7P+fYfjRLtA==", + "dev": true, + "requires": { + "create-hash": "^1.1.2", + "create-hmac": "^1.1.4", + "ripemd160": "^2.0.1", + "safe-buffer": "^5.0.1", + "sha.js": "^2.4.8" + } + }, "pify": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", @@ -6879,6 +7967,16 @@ "integrity": "sha512-ZzWuos7TI5CKUeQAtFd6Zhm2s6EpAD/ZLApIhsF9pRvRtM1RFo61dM/4MSRUA0SuLugA/zgrZD8m0BaY46Og7g==", "dev": true }, + "pretty-format": { + "version": "23.6.0", + "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-23.6.0.tgz", + "integrity": "sha512-zf9NV1NSlDLDjycnwm6hpFATCGl/K1lt0R/GdkAK2O5LN/rwJoB+Mh93gGJjut4YbmecbfgLWVGSTCr0Ewvvbw==", + "dev": true, + "requires": { + "ansi-regex": "^3.0.0", + "ansi-styles": "^3.2.0" + } + }, "pretty-ms": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/pretty-ms/-/pretty-ms-4.0.0.tgz", @@ -6894,12 +7992,24 @@ "integrity": "sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==", "dev": true }, + "process": { + "version": "0.11.10", + "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", + "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=", + "dev": true + }, "process-nextick-args": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz", "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==", "dev": true }, + "promise-inflight": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz", + "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=", + "dev": true + }, "prop-types": { "version": "15.7.2", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", @@ -6923,12 +8033,32 @@ "integrity": "sha512-CGuc0VUTGthpJXL36ydB6jnbyOf/rAHFvmVrJlH+Rg0DqqLFQGAP6hIaxD/G0OAmBJPhXDHuEJigrp0e0wFV6g==", "dev": true }, + "prr": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz", + "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=", + "dev": true + }, "pseudomap": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz", "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=", "dev": true }, + "public-encrypt": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz", + "integrity": "sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==", + "dev": true, + "requires": { + "bn.js": "^4.1.0", + "browserify-rsa": "^4.0.0", + "create-hash": "^1.1.0", + "parse-asn1": "^5.0.0", + "randombytes": "^2.0.1", + "safe-buffer": "^5.1.2" + } + }, "pump": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz", @@ -6939,12 +8069,72 @@ "once": "^1.3.1" } }, + "pumpify": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/pumpify/-/pumpify-1.5.1.tgz", + "integrity": "sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==", + "dev": true, + "requires": { + "duplexify": "^3.6.0", + "inherits": "^2.0.3", + "pump": "^2.0.0" + }, + "dependencies": { + "pump": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz", + "integrity": "sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==", + "dev": true, + "requires": { + "end-of-stream": "^1.1.0", + "once": "^1.3.1" + } + } + } + }, + "punycode": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz", + "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==", + "dev": true + }, + "querystring": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz", + "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=", + "dev": true + }, + "querystring-es3": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz", + "integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=", + "dev": true + }, "quick-lru": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-1.1.0.tgz", "integrity": "sha1-Q2CxfGETatOAeDl/8RQW4Ybc+7g=", "dev": true }, + "randombytes": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", + "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==", + "dev": true, + "requires": { + "safe-buffer": "^5.1.0" + } + }, + "randomfill": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/randomfill/-/randomfill-1.0.4.tgz", + "integrity": "sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==", + "dev": true, + "requires": { + "randombytes": "^2.0.5", + "safe-buffer": "^5.1.0" + } + }, "rc": { "version": "1.2.8", "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz", @@ -7242,6 +8432,16 @@ "glob": "^7.1.3" } }, + "ripemd160": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz", + "integrity": "sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==", + "dev": true, + "requires": { + "hash-base": "^3.0.0", + "inherits": "^2.0.1" + } + }, "rollup": { "version": "1.10.1", "resolved": "https://registry.npmjs.org/rollup/-/rollup-1.10.1.tgz", @@ -7305,6 +8505,36 @@ "rollup-pluginutils": "^2.6.0" } }, + "rollup-plugin-size-snapshot": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/rollup-plugin-size-snapshot/-/rollup-plugin-size-snapshot-0.8.0.tgz", + "integrity": "sha512-Hb1u15UY5diVjpY2hItjhBjtAQv3O5s24FpyGMLlsxztxqT3mTwz1ArWI0YNxZMUGa1YTr9lrf11YQXC/BeVQQ==", + "dev": true, + "requires": { + "acorn": "^6.0.5", + "bytes": "^3.0.0", + "chalk": "^2.4.2", + "gzip-size": "^5.0.0", + "jest-diff": "^23.6.0", + "memory-fs": "^0.4.1", + "rollup-plugin-replace": "^2.1.0", + "terser": "^3.14.1", + "webpack": "^4.28.4" + }, + "dependencies": { + "chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + } + } + }, "rollup-plugin-terser": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-4.0.4.tgz", @@ -7333,6 +8563,15 @@ "integrity": "sha512-kc120TBlQ3mih1LSzdAJXo4xn/GWS2ec0l3S+syHDXP9uRr0JAT8Qd3mdMuyjqCzeZktgP3try92cEgf9Nks8A==", "dev": true }, + "run-queue": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/run-queue/-/run-queue-1.0.3.tgz", + "integrity": "sha1-6Eg5bwV9Ij8kOGkkYY4laUFh7Ec=", + "dev": true, + "requires": { + "aproba": "^1.1.1" + } + }, "rxjs": { "version": "6.4.0", "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.4.0.tgz", @@ -7367,6 +8606,17 @@ "object-assign": "^4.1.1" } }, + "schema-utils": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz", + "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==", + "dev": true, + "requires": { + "ajv": "^6.1.0", + "ajv-errors": "^1.0.0", + "ajv-keywords": "^3.1.0" + } + }, "semver": { "version": "5.5.1", "resolved": "https://registry.npmjs.org/semver/-/semver-5.5.1.tgz", @@ -7423,6 +8673,22 @@ } } }, + "setimmediate": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", + "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=", + "dev": true + }, + "sha.js": { + "version": "2.4.11", + "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz", + "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==", + "dev": true, + "requires": { + "inherits": "^2.0.1", + "safe-buffer": "^5.0.1" + } + }, "shebang-command": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", @@ -7598,6 +8864,12 @@ } } }, + "source-list-map": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz", + "integrity": "sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==", + "dev": true + }, "source-map": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", @@ -7694,6 +8966,15 @@ "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=", "dev": true }, + "ssri": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz", + "integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==", + "dev": true, + "requires": { + "figgy-pudding": "^3.5.1" + } + }, "stack-utils": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-1.0.2.tgz", @@ -7727,6 +9008,45 @@ } } }, + "stream-browserify": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz", + "integrity": "sha512-nX6hmklHs/gr2FuxYDltq8fJA1GDlxKQCz8O/IM4atRqBH8OORmBNgfvW5gG10GT/qQ9u0CzIvr2X5Pkt6ntqg==", + "dev": true, + "requires": { + "inherits": "~2.0.1", + "readable-stream": "^2.0.2" + } + }, + "stream-each": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/stream-each/-/stream-each-1.2.3.tgz", + "integrity": "sha512-vlMC2f8I2u/bZGqkdfLQW/13Zihpej/7PmSiMQsbYddxuTsJp8vRe2x2FvVExZg7FaOds43ROAuFJwPR4MTZLw==", + "dev": true, + "requires": { + "end-of-stream": "^1.1.0", + "stream-shift": "^1.0.0" + } + }, + "stream-http": { + "version": "2.8.3", + "resolved": "https://registry.npmjs.org/stream-http/-/stream-http-2.8.3.tgz", + "integrity": "sha512-+TSkfINHDo4J+ZobQLWiMouQYB+UVYFttRA94FpEzzJ7ZdqcL4uUUQ7WkdkI4DSozGmgBUE/a47L+38PenXhUw==", + "dev": true, + "requires": { + "builtin-status-codes": "^3.0.0", + "inherits": "^2.0.1", + "readable-stream": "^2.3.6", + "to-arraybuffer": "^1.0.0", + "xtend": "^4.0.0" + } + }, + "stream-shift": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.0.tgz", + "integrity": "sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI=", + "dev": true + }, "string-argv": { "version": "0.0.2", "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.0.2.tgz", @@ -7870,6 +9190,12 @@ "integrity": "sha512-TyOuWLwkmtPL49LHCX1caIwHjRzcVd62+GF6h8W/jHOeZUFHpnd2XJDVuUlaTaLPH1nuu2M69mfHr5XbQJnf/g==", "dev": true }, + "tapable": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz", + "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==", + "dev": true + }, "term-size": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/term-size/-/term-size-1.2.0.tgz", @@ -7898,6 +9224,40 @@ } } }, + "terser-webpack-plugin": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.2.3.tgz", + "integrity": "sha512-GOK7q85oAb/5kE12fMuLdn2btOS9OBZn4VsecpHDywoUC/jLhSAKOiYo0ezx7ss2EXPMzyEWFoE0s1WLE+4+oA==", + "dev": true, + "requires": { + "cacache": "^11.0.2", + "find-cache-dir": "^2.0.0", + "schema-utils": "^1.0.0", + "serialize-javascript": "^1.4.0", + "source-map": "^0.6.1", + "terser": "^3.16.1", + "webpack-sources": "^1.1.0", + "worker-farm": "^1.5.2" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, + "through2": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz", + "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==", + "dev": true, + "requires": { + "readable-stream": "~2.3.6", + "xtend": "~4.0.1" + } + }, "time-zone": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/time-zone/-/time-zone-1.0.0.tgz", @@ -7910,6 +9270,21 @@ "integrity": "sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8=", "dev": true }, + "timers-browserify": { + "version": "2.0.10", + "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.10.tgz", + "integrity": "sha512-YvC1SV1XdOUaL6gx5CoGroT3Gu49pK9+TZ38ErPldOWW4j49GI1HKs9DV+KGq/w6y+LZ72W1c8cKz2vzY+qpzg==", + "dev": true, + "requires": { + "setimmediate": "^1.0.4" + } + }, + "to-arraybuffer": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz", + "integrity": "sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=", + "dev": true + }, "to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", @@ -7988,6 +9363,18 @@ "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==", "dev": true }, + "tty-browserify": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz", + "integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=", + "dev": true + }, + "typedarray": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", + "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=", + "dev": true + }, "uid2": { "version": "0.0.3", "resolved": "https://registry.npmjs.org/uid2/-/uid2-0.0.3.tgz", @@ -8057,6 +9444,24 @@ } } }, + "unique-filename": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz", + "integrity": "sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==", + "dev": true, + "requires": { + "unique-slug": "^2.0.0" + } + }, + "unique-slug": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-2.0.1.tgz", + "integrity": "sha512-n9cU6+gITaVu7VGj1Z8feKMmfAjEAQGhwD9fE3zvpRRa0wEIx8ODYkVGfSc94M2OX00tUFV8wH3zYbm1I8mxFg==", + "dev": true, + "requires": { + "imurmurhash": "^0.1.4" + } + }, "unique-string": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-1.0.0.tgz", @@ -8147,12 +9552,39 @@ "xdg-basedir": "^3.0.0" } }, + "uri-js": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz", + "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==", + "dev": true, + "requires": { + "punycode": "^2.1.0" + } + }, "urix": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz", "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=", "dev": true }, + "url": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz", + "integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=", + "dev": true, + "requires": { + "punycode": "1.3.2", + "querystring": "0.2.0" + }, + "dependencies": { + "punycode": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz", + "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=", + "dev": true + } + } + }, "url-parse-lax": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-1.0.0.tgz", @@ -8168,6 +9600,15 @@ "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==", "dev": true }, + "util": { + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz", + "integrity": "sha512-HShAsny+zS2TZfaXxD9tYj4HQGlBezXZMZuM/S5PKLLoZkShZiGk9o5CzukI1LVHZvjdvZ2Sj1aW/Ndn2NB/HQ==", + "dev": true, + "requires": { + "inherits": "2.0.3" + } + }, "util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -8184,6 +9625,26 @@ "spdx-expression-parse": "^3.0.0" } }, + "vm-browserify": { + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz", + "integrity": "sha1-XX6kW7755Kb/ZflUOOCofDV9WnM=", + "dev": true, + "requires": { + "indexof": "0.0.1" + } + }, + "watchpack": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz", + "integrity": "sha512-i6dHe3EyLjMmDlU1/bGQpEw25XSjkJULPuAVKCbNRefQVq48yXKUpwg538F7AZTf9kyr57zj++pQFltUa5H7yA==", + "dev": true, + "requires": { + "chokidar": "^2.0.2", + "graceful-fs": "^4.1.2", + "neo-async": "^2.5.0" + } + }, "wcwidth": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz", @@ -8193,6 +9654,56 @@ "defaults": "^1.0.3" } }, + "webpack": { + "version": "4.30.0", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.30.0.tgz", + "integrity": "sha512-4hgvO2YbAFUhyTdlR4FNyt2+YaYBYHavyzjCMbZzgglo02rlKi/pcsEzwCuCpsn1ryzIl1cq/u8ArIKu8JBYMg==", + "dev": true, + "requires": { + "@webassemblyjs/ast": "1.8.5", + "@webassemblyjs/helper-module-context": "1.8.5", + "@webassemblyjs/wasm-edit": "1.8.5", + "@webassemblyjs/wasm-parser": "1.8.5", + "acorn": "^6.0.5", + "acorn-dynamic-import": "^4.0.0", + "ajv": "^6.1.0", + "ajv-keywords": "^3.1.0", + "chrome-trace-event": "^1.0.0", + "enhanced-resolve": "^4.1.0", + "eslint-scope": "^4.0.0", + "json-parse-better-errors": "^1.0.2", + "loader-runner": "^2.3.0", + "loader-utils": "^1.1.0", + "memory-fs": "~0.4.1", + "micromatch": "^3.1.8", + "mkdirp": "~0.5.0", + "neo-async": "^2.5.0", + "node-libs-browser": "^2.0.0", + "schema-utils": "^1.0.0", + "tapable": "^1.1.0", + "terser-webpack-plugin": "^1.1.0", + "watchpack": "^1.5.0", + "webpack-sources": "^1.3.0" + } + }, + "webpack-sources": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.3.0.tgz", + "integrity": "sha512-OiVgSrbGu7NEnEvQJJgdSFPl2qWKkWq5lHMhgiToIiN9w34EBnjYzSYs+VbL5KoYiLNtFFa7BZIKxRED3I32pA==", + "dev": true, + "requires": { + "source-list-map": "^2.0.0", + "source-map": "~0.6.1" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, "well-known-symbols": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/well-known-symbols/-/well-known-symbols-2.0.0.tgz", @@ -8217,6 +9728,15 @@ "string-width": "^2.1.1" } }, + "worker-farm": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.6.0.tgz", + "integrity": "sha512-6w+3tHbM87WnSWnENBUvA2pxJPLhQUg5LKwUQHq3r+XPhIM+Gh2R5ycbwPCyuGbNg+lPgdcnQUhuC02kJCvffQ==", + "dev": true, + "requires": { + "errno": "~0.1.7" + } + }, "wrap-ansi": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-3.0.1.tgz", @@ -8256,6 +9776,12 @@ "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68=", "dev": true }, + "y18n": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz", + "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==", + "dev": true + }, "yallist": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz", diff --git a/package.json b/package.json index 1cc2b28af..8c9b401eb 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "rollup-plugin-commonjs": "^9.3.4", "rollup-plugin-node-resolve": "^4.2.3", "rollup-plugin-replace": "^2.2.0", + "rollup-plugin-size-snapshot": "^0.8.0", "rollup-plugin-terser": "^4.0.4", "styled-components": "^4.2.0" }, diff --git a/rollup.config.js b/rollup.config.js index 12740b15c..4ac531f33 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,78 +1,58 @@ -/* eslint-disable import/no-extraneous-dependencies */ -import path from 'path' -import resolve from 'rollup-plugin-node-resolve' +import nodeResolve from 'rollup-plugin-node-resolve' import babel from 'rollup-plugin-babel' import replace from 'rollup-plugin-replace' import commonjs from 'rollup-plugin-commonjs' import { terser } from 'rollup-plugin-terser' +import { sizeSnapshot } from 'rollup-plugin-size-snapshot' import pkg from './package.json' -function getConfig() { - const name = 'styledSystem' - const buildName = 'styled-system' - - const SOURCE_DIR = path.resolve(__dirname, 'src') - const DIST_DIR = path.resolve(__dirname, 'dist') - - const baseConfig = { - input: `${SOURCE_DIR}/index.js`, +const input = 'src/index.js' +const name = 'styledSystem' + +const external = id => !id.startsWith('.') && !id.startsWith('/') + +const getBabelOptions = ({ useESModules }) => ({ + exclude: '**/node_modules/**', + runtimeHelpers: true, + presets: [['@babel/preset-env', { loose: true, modules: false }]], + plugins: [ + 'babel-plugin-annotate-pure-calls', + ['@babel/plugin-transform-runtime', { useESModules }], + ], +}) + +export default [ + { + input, + output: { file: `dist/styled-system.umd.js`, format: 'umd', name }, plugins: [ - babel({ - runtimeHelpers: true, - exclude: 'node_modules/**', - configFile: path.join(__dirname, 'babel.config.js'), - }), + nodeResolve(), + commonjs(), + babel(getBabelOptions({ useESModules: true })), + replace({ 'process.env.NODE_ENV': JSON.stringify('development') }), ], - } - - const esConfig = Object.assign({}, baseConfig, { - output: { - file: `${DIST_DIR}/${buildName}.esm.js`, - format: 'esm', - }, - external: id => !id.startsWith('.') && !id.startsWith('/'), - plugins: [...baseConfig.plugins, resolve()], - }) - - const cjsConfig = Object.assign({}, esConfig, { - output: { - file: `${DIST_DIR}/${buildName}.cjs.js`, - format: 'cjs', - }, - }) - - const globals = {} - - const umdConfig = Object.assign({}, baseConfig, { - output: { - name, - file: `${DIST_DIR}/${buildName}.js`, - format: 'umd', - globals, - exports: 'named', - sourcemap: false, - }, - external: Object.keys(globals), - plugins: [...baseConfig.plugins, resolve({ browser: true }), commonjs()], - }) - - const minConfig = Object.assign({}, umdConfig, { - output: { - ...umdConfig.output, - file: `${DIST_DIR}/${buildName}.min.js`, - }, + }, + { + input, + output: { file: 'dist/styled-system.min.js', format: 'umd', name }, plugins: [ - ...umdConfig.plugins, + nodeResolve(), + commonjs(), + babel(getBabelOptions({ useESModules: true })), replace({ 'process.env.NODE_ENV': JSON.stringify('production') }), terser(), ], - }) - - if (process.env.WATCH_MODE) { - return [esConfig, cjsConfig] - } - - return [esConfig, cjsConfig, umdConfig, minConfig] -} - -export default getConfig() + }, + { + input, + output: { file: pkg.main, format: 'cjs' }, + external, + plugins: [babel(getBabelOptions({ useESModules: false })), sizeSnapshot()], + }, + { + input, + output: { file: pkg.module, format: 'esm' }, + external, + plugins: [babel(getBabelOptions({ useESModules: true })), sizeSnapshot()], + }, +] From fe76d3ed15f3921a9fd22edddc8fd23d924cdb97 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Berg=C3=A9?= Date: Sun, 28 Apr 2019 23:46:26 +0200 Subject: [PATCH 4/5] Fix tests --- test/index.js | 2 +- test/styles.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/test/index.js b/test/index.js index 7790321db..8e0873614 100644 --- a/test/index.js +++ b/test/index.js @@ -1,5 +1,5 @@ import test from 'ava' -import { style, compose, variant } from '../src/index2' +import { style, compose, variant } from '../src/index' const width = style({ prop: 'width', diff --git a/test/styles.js b/test/styles.js index 6e39397c0..18bf6a4d8 100644 --- a/test/styles.js +++ b/test/styles.js @@ -11,7 +11,7 @@ import { textStyle, colorStyle, borders, -} from '../src/index2' +} from '../src/index' const theme = { colors: { From 31a3bfa7637ce6e384cc69df4bdb14669606448a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Berg=C3=A9?= Date: Sat, 4 May 2019 15:03:59 +0200 Subject: [PATCH 5/5] Refactor code - Put all in a single file: `src/index.js` - Remove all breaking changes --- .size-snapshot.json | 18 +- rollup.config.js | 1 - src/index.js | 639 ++++++++++++++++++++++++++++++++++- src/media.js | 8 - src/style.js | 195 ----------- src/styles/backgrounds.js | 36 -- src/styles/basics.js | 14 - src/styles/borders.js | 99 ------ src/styles/colors.js | 9 - src/styles/dimensions.js | 54 --- src/styles/flexboxes.js | 65 ---- src/styles/grids.js | 45 --- src/styles/index.js | 33 -- src/styles/index.test.js-nop | 432 ----------------------- src/styles/positions.js | 40 --- src/styles/space.js | 129 ------- src/styles/space.test.js-nop | 108 ------ src/styles/typography.js | 54 --- src/unit.js | 23 -- src/util.js | 33 -- src/variant.js | 4 - src/variants.js | 5 - test/index.js | 185 +++++----- test/styles.js | 72 ++-- 24 files changed, 770 insertions(+), 1531 deletions(-) delete mode 100644 src/media.js delete mode 100644 src/style.js delete mode 100644 src/styles/backgrounds.js delete mode 100644 src/styles/basics.js delete mode 100644 src/styles/borders.js delete mode 100644 src/styles/colors.js delete mode 100644 src/styles/dimensions.js delete mode 100644 src/styles/flexboxes.js delete mode 100644 src/styles/grids.js delete mode 100644 src/styles/index.js delete mode 100644 src/styles/index.test.js-nop delete mode 100644 src/styles/positions.js delete mode 100644 src/styles/space.js delete mode 100644 src/styles/space.test.js-nop delete mode 100644 src/styles/typography.js delete mode 100644 src/unit.js delete mode 100644 src/util.js delete mode 100644 src/variant.js delete mode 100644 src/variants.js diff --git a/.size-snapshot.json b/.size-snapshot.json index 6acac8107..bb9641472 100644 --- a/.size-snapshot.json +++ b/.size-snapshot.json @@ -1,20 +1,20 @@ { "dist/styled-system.cjs.js": { - "bundled": 20373, - "minified": 12731, - "gzipped": 3351 + "bundled": 18770, + "minified": 11412, + "gzipped": 3166 }, "dist/styled-system.esm.js": { - "bundled": 18178, - "minified": 10777, - "gzipped": 2888, + "bundled": 16584, + "minified": 9464, + "gzipped": 2771, "treeshaked": { "rollup": { - "code": 18, - "import_statements": 18 + "code": 79, + "import_statements": 44 }, "webpack": { - "code": 1002 + "code": 1112 } } } diff --git a/rollup.config.js b/rollup.config.js index 4ac531f33..26ddcea7d 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -14,7 +14,6 @@ const external = id => !id.startsWith('.') && !id.startsWith('/') const getBabelOptions = ({ useESModules }) => ({ exclude: '**/node_modules/**', runtimeHelpers: true, - presets: [['@babel/preset-env', { loose: true, modules: false }]], plugins: [ 'babel-plugin-annotate-pure-calls', ['@babel/plugin-transform-runtime', { useESModules }], diff --git a/src/index.js b/src/index.js index 876d7b920..f6597ab70 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,636 @@ -export * from './style' -export * from './styles/index' +import PropTypes from 'prop-types' +import deepmerge from 'deepmerge' // < 1kb payload overhead when lodash/merge is > 3kb. -export * from './variant' -export * from './variants' +// PropTypes +export const propType = PropTypes.oneOfType([ + PropTypes.number, + PropTypes.string, + PropTypes.array, + PropTypes.object, +]) + +// Utils +export const cloneFunction = fn => (...args) => fn(...args) +export const is = n => n !== undefined && n !== null +export const isObject = n => typeof n === 'object' && n !== null +export const num = n => typeof n === 'number' && !Number.isNaN(n) +const string = n => typeof n === 'string' && n !== '' +const func = n => typeof n === 'function' +const negative = n => n < 0 + +// Media +const getBreakpoint = (breakpoints, breakpoint) => { + console.log(breakpoints, breakpoint) + const value = breakpoints[breakpoint] + if (value === undefined) return false + return value !== 0 ? value : null +} +export const createMediaQuery = value => + `@media screen and (min-width: ${value})` +export const defaultBreakpoints = [40, 52, 64].map(n => `${n}em`) + +export const get = (obj, ...paths) => { + const value = paths.reduce((a, path) => { + if (is(a)) return a + const keys = typeof path === 'string' ? path.split('.') : [path] + return keys.reduce((a, key) => (a && is(a[key]) ? a[key] : null), obj) + }, null) + return is(value) ? value : paths[paths.length - 1] +} + +export const themeGet = (path, fallback = null) => props => + get(props.theme, path, fallback) + +function merge(acc, item) { + if (!item) { + return acc + } + + return deepmerge(acc, item, { + clone: false, // No need to clone deep, it's way faster. + }) +} + +// Style +function callOrReturn(fn, arg) { + if (!func(fn)) return fn + const next = fn(arg) + return callOrReturn(next, arg) +} + +function getThemeValue(theme, path, initial) { + if (!theme) return undefined + return callOrReturn(get(initial || theme, path, undefined), { theme }) +} + +function getValue(value, variants, theme) { + if (is(variants)) { + const valueFromVariants = getThemeValue(theme, value, variants) + if (is(valueFromVariants)) { + return valueFromVariants + } + } + return value +} + +function styleFromValue(cssProperties, value, theme, key, transformValue) { + const variants = getThemeValue(theme, key) + const computedValue = getValue(value, variants, theme) + if (string(computedValue) || num(computedValue)) { + const style = {} + for (let i = 0; i < cssProperties.length; i++) { + style[cssProperties[i]] = transformValue + ? transformValue(computedValue, { + rawValue: value, + variants, + }) + : computedValue + } + return style + } + return null +} + +function getBreakpoints(theme) { + const themeBreakpoints = getThemeValue(theme, 'breakpoints') + const breakpoints = is(themeBreakpoints) + ? themeBreakpoints + : defaultBreakpoints + // TODO deprecate in v5 + if (Array.isArray(breakpoints)) { + const clonedBreakpoints = merge([], breakpoints) + clonedBreakpoints.unshift(0) + return clonedBreakpoints + } + return breakpoints +} + +function createStyleGenerator(getStyle, props, generators) { + const getStyles = props => { + const theme = props.theme || null + return getStyle(props, theme) + } + + getStyles.meta = { + props, + getStyle, + generators, + } + + getStyles.propTypes = props.reduce((obj, prop) => { + obj[prop] = propType + return obj + }, {}) + + return getStyles +} + +function styleFromBreakPoint(cssProperties, value, theme, key, transformValue) { + const breakpoints = getBreakpoints(theme) + const keys = Object.keys(value) + let allStyle = {} + for (let i = 0; i < keys.length; i++) { + const breakpoint = keys[i] + const style = styleFromValue( + cssProperties, + value[breakpoint], + theme, + key, + transformValue + ) + + if (style !== null) { + const breakpointValue = getBreakpoint(breakpoints, breakpoint) + if (breakpointValue === false) { + continue + } else if (breakpointValue === null) { + allStyle = merge(allStyle, style) + } else if (breakpointValue) { + allStyle = merge(allStyle, { + [createMediaQuery(breakpointValue)]: style, + }) + } + } + } + return allStyle +} + +function getStyleFactory(prop, cssProperties, key, transformValue) { + return function getStyle(attrs, theme) { + const value = attrs[prop] + if (!is(value)) return null + + const style = styleFromValue( + cssProperties, + value, + theme, + key, + transformValue + ) + + if (style !== null) { + return style + } + + if (isObject(value)) { + return styleFromBreakPoint( + cssProperties, + value, + theme, + key, + transformValue + ) + } + + return null + } +} + +export function style({ + prop, + cssProperties, + cssProperty, + alias, + key = null, + transformValue = null, +}) { + cssProperties = cssProperties || (cssProperty ? [cssProperty] : [prop]) + const getStyle = getStyleFactory(prop, cssProperties, key, transformValue) + const generator = createStyleGenerator(getStyle, [prop]) + + if (!alias) { + return generator + } + + return compose( + generator, + style({ prop: alias, cssProperties, key, transformValue }) + ) +} + +function indexGeneratorsByProp(styles) { + const index = {} + for (let i = 0; i < styles.length; i++) { + const style = styles[i] + if (style && style.meta) { + const propsKeys = Object.keys(style.meta.props) + for (let j = 0; j < propsKeys.length; j++) { + const prop = style.meta.props[propsKeys[j]] + index[prop] = style + } + } + } + return index +} + +export function compose(...generators) { + let flatGenerators = [] + generators.forEach(gen => { + if (gen.meta.generators) { + flatGenerators = [...flatGenerators, ...gen.meta.generators] + } else { + flatGenerators.push(gen) + } + }) + + const generatorsByProp = indexGeneratorsByProp(flatGenerators) + + function getStyle(attrs, theme) { + const propKeys = Object.keys(attrs) + const propCount = propKeys.length + let allStyle = {} + for (let i = 0; i < propCount; i++) { + const propKey = propKeys[i] + const generator = generatorsByProp[propKey] + if (generator) { + allStyle = merge(allStyle, generator.meta.getStyle(attrs, theme)) + } + } + return allStyle + } + + const props = flatGenerators.reduce( + (keys, generator) => [...keys, ...generator.meta.props], + [] + ) + + return createStyleGenerator(getStyle, props, generators) +} + +export const mapProps = mapper => func => { + const next = props => func(mapper(props)) + for (const key in func) { + next[key] = func[key] + } + return next +} + +// Variant +export const variant = ({ key, prop = 'variant' }) => props => + get(props.theme, [key, props[prop]].join('.')) || null + +// Units +export const px = value => (num(value) && value !== 0 ? `${value}px` : value) +export const getPx = px +export const getWidth = n => (!num(n) || n > 1 ? px(n) : `${n * 100}%`) + +// Scale +const DEFAULT_SPACE = [0, 4, 8, 16, 32, 64, 128, 256, 512] + +const scale = (defaultVariants = DEFAULT_SPACE) => ( + transformedValue, + { rawValue, variants = defaultVariants } +) => { + if (!num(rawValue)) { + return px(variants[rawValue] || rawValue) + } + const abs = Math.abs(rawValue) + const neg = negative(rawValue) + const value = variants[abs] || abs + if (!num(value)) { + return neg ? `-${value}` : value + } + return px(value * (neg ? -1 : 1)) +} + +// Space +export const margin = style({ + prop: 'margin', + alias: 'm', + cssProperties: ['margin'], + key: 'space', + transformValue: scale(), +}) + +export const marginTop = style({ + prop: 'marginTop', + alias: 'mt', + cssProperties: ['marginTop'], + key: 'space', + transformValue: scale(), +}) + +export const marginRight = style({ + prop: 'marginRight', + alias: 'mr', + cssProperties: ['marginRight'], + key: 'space', + transformValue: scale(), +}) + +export const marginBottom = style({ + prop: 'marginBottom', + alias: 'mb', + cssProperties: ['marginBottom'], + key: 'space', + transformValue: scale(), +}) + +export const marginLeft = style({ + prop: 'marginLeft', + alias: 'ml', + cssProperties: ['marginLeft'], + key: 'space', + transformValue: scale(), +}) + +export const padding = style({ + prop: 'padding', + alias: 'p', + cssProperties: ['padding'], + key: 'space', + transformValue: scale(), +}) + +export const paddingTop = style({ + prop: 'paddingTop', + alias: 'pt', + cssProperties: ['paddingTop'], + key: 'space', + transformValue: scale(), +}) + +export const paddingRight = style({ + prop: 'paddingRight', + alias: 'pr', + cssProperties: ['paddingRight'], + key: 'space', + transformValue: scale(), +}) + +export const paddingBottom = style({ + prop: 'paddingBottom', + alias: 'pb', + cssProperties: ['paddingBottom'], + key: 'space', + transformValue: scale(), +}) + +export const paddingLeft = style({ + prop: 'paddingLeft', + alias: 'pl', + cssProperties: ['paddingLeft'], + key: 'space', + transformValue: scale(), +}) + +export const space = mapProps(props => ({ + ...props, + mt: is(props.my) ? props.my : props.mt, + mb: is(props.my) ? props.my : props.mb, + ml: is(props.mx) ? props.mx : props.ml, + mr: is(props.mx) ? props.mx : props.mr, + pt: is(props.py) ? props.py : props.pt, + pb: is(props.py) ? props.py : props.pb, + pl: is(props.px) ? props.px : props.pl, + pr: is(props.px) ? props.px : props.pr, +}))( + compose( + margin, + marginTop, + marginBottom, + marginLeft, + marginRight, + padding, + paddingTop, + paddingBottom, + paddingLeft, + paddingRight + ) +) + +// Typography +export const fontSize = style({ + prop: 'fontSize', + key: 'fontSizes', + transformValue: scale([12, 14, 16, 20, 24, 32, 48, 64, 72]), +}) + +export const fontFamily = style({ + prop: 'fontFamily', + key: 'fonts', +}) + +export const fontWeight = style({ + prop: 'fontWeight', + key: 'fontWeights', +}) + +export const lineHeight = style({ + prop: 'lineHeight', + key: 'lineHeights', +}) + +export const textAlign = style({ prop: 'textAlign' }) +export const fontStyle = style({ prop: 'fontStyle' }) + +export const letterSpacing = style({ + prop: 'letterSpacing', + key: 'letterSpacings', + transformValue: px, +}) + +export const textColor = style({ + prop: 'color', + key: 'colors', +}) + +// Layout +export const display = style({ prop: 'display' }) + +export const width = style({ + prop: 'width', + key: 'widths', + transformValue: getWidth, +}) + +export const maxWidth = style({ + prop: 'maxWidth', + key: 'maxWidths', + transformValue: getWidth, +}) + +export const minWidth = style({ + prop: 'minWidth', + key: 'minWidths', + transformValue: getWidth, +}) + +export const height = style({ + prop: 'height', + key: 'heights', + transformValue: getWidth, +}) + +export const maxHeight = style({ + prop: 'maxHeight', + key: 'maxHeights', + transformValue: getWidth, +}) + +export const minHeight = style({ + prop: 'minHeight', + key: 'minHeights', + transformValue: getWidth, +}) + +export const size = mapProps(props => ({ + ...props, + width: props.size, + height: props.size, +}))( + compose( + width, + height + ) +) + +export const verticalAlign = style({ prop: 'verticalAlign' }) + +// Flexboxes +export const alignItems = style({ prop: 'alignItems' }) +export const alignContent = style({ prop: 'alignContent' }) +export const justifyItems = style({ prop: 'justifyItems' }) +export const justifyContent = style({ prop: 'justifyContent' }) +export const flexWrap = style({ prop: 'flexWrap' }) +export const flexBasis = style({ + prop: 'flexBasis', + transformValue: getWidth, +}) +export const flexDirection = style({ prop: 'flexDirection' }) +export const flex = style({ prop: 'flex' }) +export const justifySelf = style({ prop: 'justifySelf' }) +export const alignSelf = style({ prop: 'alignSelf' }) +export const order = style({ prop: 'order' }) + +// Grid +export const gridGap = style({ + prop: 'gridGap', + key: 'space', + transformValue: scale(), +}) + +export const gridColumnGap = style({ + prop: 'gridColumnGap', + key: 'space', + transformValue: scale(), +}) + +export const gridRowGap = style({ + prop: 'gridRowGap', + key: 'space', + transformValue: scale(), +}) + +export const gridColumn = style({ prop: 'gridColumn' }) +export const gridRow = style({ prop: 'gridRow' }) +export const gridAutoFlow = style({ prop: 'gridAutoFlow' }) +export const gridAutoColumns = style({ prop: 'gridAutoColumns' }) +export const gridAutoRows = style({ prop: 'gridAutoRows' }) +export const gridTemplateColumns = style({ prop: 'gridTemplateColumns' }) +export const gridTemplateRows = style({ prop: 'gridTemplateRows' }) +export const gridTemplateAreas = style({ prop: 'gridTemplateAreas' }) +export const gridArea = style({ prop: 'gridArea' }) + +// Backgrounds +export const background = style({ prop: 'background' }) + +export const backgroundColor = style({ + prop: 'backgroundColor', + alias: 'bg', + key: 'colors', +}) + +export const backgroundImage = style({ prop: 'backgroundImage' }) +export const backgroundSize = style({ prop: 'backgroundSize' }) +export const backgroundPosition = style({ prop: 'backgroundPosition' }) +export const backgroundRepeat = style({ prop: 'backgroundRepeat' }) + +// Borders + +export const border = style({ + prop: 'border', + key: 'borders', +}) + +export const borderWidth = style({ + prop: 'borderWidth', + key: 'borderWidths', + transformValue: px, +}) + +export const borderStyle = style({ + prop: 'borderStyle', + key: 'borderStyles', +}) + +export const borderColor = style({ + prop: 'borderColor', + key: 'colors', +}) + +export const borderTop = style({ + prop: 'borderTop', + key: 'borders', +}) + +export const borderRight = style({ + prop: 'borderRight', + key: 'borders', +}) + +export const borderBottom = style({ + prop: 'borderBottom', + key: 'borders', +}) + +export const borderLeft = style({ + prop: 'borderLeft', + key: 'borders', +}) + +export const borderRadius = style({ + prop: 'borderRadius', + key: 'radii', + transformValue: px, +}) + +export const borders = compose( + border, + borderTop, + borderRight, + borderBottom, + borderLeft, + borderWidth, + borderStyle, + borderColor, + borderRadius +) + +// Color +export const color = compose( + backgroundColor, + textColor +) + +// Position +export const position = style({ prop: 'position' }) +export const zIndex = style({ prop: 'zIndex', key: 'zIndices' }) +export const top = style({ prop: 'top', transformValue: px }) +export const right = style({ prop: 'right', transformValue: px }) +export const bottom = style({ prop: 'bottom', transformValue: px }) +export const left = style({ prop: 'left', transformValue: px }) + +// Misc +export const opacity = style({ prop: 'opacity' }) +export const overflow = style({ prop: 'overflow' }) + +export const boxShadow = style({ + prop: 'boxShadow', + key: 'shadows', +}) + +// Variants +export const buttonStyle = variant({ key: 'buttons' }) +export const textStyle = variant({ key: 'textStyles', prop: 'textStyle' }) +export const colorStyle = variant({ key: 'colorStyles', prop: 'colors' }) diff --git a/src/media.js b/src/media.js deleted file mode 100644 index 13bec68b2..000000000 --- a/src/media.js +++ /dev/null @@ -1,8 +0,0 @@ -export const minBreakpoint = breakpoint => - breakpoint !== 0 ? breakpoint : null - -export const minWidth = value => `@media screen and (min-width: ${value})` - -export const DEFAULT_BREAKPOINTS = [0, 40, 52, 64].map(n => - n > 0 ? n + 'em' : n -) diff --git a/src/style.js b/src/style.js deleted file mode 100644 index d5bbd6ce6..000000000 --- a/src/style.js +++ /dev/null @@ -1,195 +0,0 @@ -import { minBreakpoint, minWidth, DEFAULT_BREAKPOINTS } from './media' -import { is, num, string, obj, merge, get, func } from './util' - -function callOrReturn(fn, arg) { - if (!func(fn)) return fn - const next = fn(arg) - return callOrReturn(next, arg) -} - -function getThemeValue(theme, path, initial) { - if (!theme) return undefined - return callOrReturn(get(initial || theme, path), { theme }) -} - -function getValue(value, variants, theme) { - if (is(variants)) { - const valueFromVariants = getThemeValue(theme, value, variants) - if (is(valueFromVariants)) { - return valueFromVariants - } - } - return value -} - -function styleFromValue(cssProperties, value, theme, key, transformValue) { - const variants = getThemeValue(theme, key) - const computedValue = getValue(value, variants, theme) - if (string(computedValue) || num(computedValue)) { - const style = {} - for (let i = 0; i < cssProperties.length; i++) { - style[cssProperties[i]] = transformValue - ? transformValue(computedValue, { - rawValue: value, - variants, - }) - : computedValue - } - return style - } - return null -} - -function getBreakpoints(theme) { - const themeBreakpoints = getThemeValue(theme, 'breakpoints') - if (is(themeBreakpoints)) { - return themeBreakpoints - } - return DEFAULT_BREAKPOINTS -} - -function createStyleGenerator(getStyle, props, generators) { - const getStyles = props => { - const theme = props.theme || null - return getStyle(props, theme) - } - - getStyles.meta = { - props, - getStyle, - generators, - } - - return getStyles -} - -function styleFromBreakPoint(cssProperties, value, theme, key, transformValue) { - const breakpoints = getBreakpoints(theme) - const keys = Object.keys(value) - let allStyle = {} - for (let i = 0; i < keys.length; i++) { - const breakpoint = keys[i] - const style = styleFromValue( - cssProperties, - value[breakpoint], - theme, - key, - transformValue - ) - - if (style !== null) { - const breakpointValue = minBreakpoint(breakpoints[breakpoint]) - - if (breakpointValue === null) { - allStyle = merge(allStyle, style) - } else if (breakpointValue) { - allStyle = merge(allStyle, { - [minWidth(breakpointValue)]: style, - }) - } - } - } - return allStyle -} - -function getStyleFactory(prop, cssProperties, key, transformValue) { - return function getStyle(attrs, theme) { - const value = attrs[prop] - if (!is(value)) return null - - const style = styleFromValue( - cssProperties, - value, - theme, - key, - transformValue - ) - - if (style !== null) { - return style - } - - if (obj(value)) { - return styleFromBreakPoint( - cssProperties, - value, - theme, - key, - transformValue - ) - } - - return null - } -} - -export function style({ - prop, - cssProperties, - cssProperty, - alias, - key = null, - transformValue = null, -}) { - cssProperties = cssProperties || (cssProperty ? [cssProperty] : [prop]) - const getStyle = getStyleFactory(prop, cssProperties, key, transformValue) - const generator = createStyleGenerator(getStyle, [prop]) - - if (!alias) { - return generator - } - - return compose( - generator, - style({ prop: alias, cssProperties, key, transformValue }) - ) -} - -function indexGeneratorsByProp(styles) { - const index = {} - for (let i = 0; i < styles.length; i++) { - const style = styles[i] - if (style && style.meta) { - const propsKeys = Object.keys(style.meta.props) - for (let j = 0; j < propsKeys.length; j++) { - const prop = style.meta.props[propsKeys[j]] - index[prop] = style - } - } - } - return index -} - -export function compose(...generators) { - let flatGenerators = [] - generators.forEach(gen => { - if (gen.meta.generators) { - flatGenerators = [...flatGenerators, ...gen.meta.generators] - } else { - flatGenerators.push(gen) - } - }) - - const generatorsByProp = indexGeneratorsByProp(flatGenerators) - - function getStyle(attrs, theme) { - const propKeys = Object.keys(attrs) - const propCount = propKeys.length - let allStyle = {} - for (let i = 0; i < propCount; i++) { - const propKey = propKeys[i] - const generator = generatorsByProp[propKey] - if (generator) { - allStyle = merge(allStyle, generator.meta.getStyle(attrs, theme)) - } - } - return allStyle - } - - const props = flatGenerators.reduce( - (keys, generator) => [...keys, ...generator.meta.props], - [] - ) - - return createStyleGenerator(getStyle, props, generators) -} diff --git a/src/styles/backgrounds.js b/src/styles/backgrounds.js deleted file mode 100644 index 940b5a541..000000000 --- a/src/styles/backgrounds.js +++ /dev/null @@ -1,36 +0,0 @@ -import { style, compose } from '../style' - -export const background = style({ - prop: 'background', -}) - -export const backgroundColor = style({ - prop: 'backgroundColor', - alias: 'bg', - key: 'colors', -}) - -export const backgroundImage = style({ - prop: 'backgroundImage', -}) - -export const backgroundSize = style({ - prop: 'backgroundSize', -}) - -export const backgroundPosition = style({ - prop: 'backgroundPosition', -}) - -export const backgroundRepeat = style({ - prop: 'backgroundRepeat', -}) - -export const backgrounds = compose( - background, - backgroundColor, - backgroundImage, - backgroundSize, - backgroundPosition, - backgroundRepeat -) diff --git a/src/styles/basics.js b/src/styles/basics.js deleted file mode 100644 index 07d2f125c..000000000 --- a/src/styles/basics.js +++ /dev/null @@ -1,14 +0,0 @@ -import { style, compose } from '../style' - -export const opacity = style({ - prop: 'opacity', -}) - -export const overflow = style({ - prop: 'overflow', -}) - -export const basics = compose( - opacity, - overflow, -) diff --git a/src/styles/borders.js b/src/styles/borders.js deleted file mode 100644 index 660aced02..000000000 --- a/src/styles/borders.js +++ /dev/null @@ -1,99 +0,0 @@ -import { style, compose } from '../style' -import { num } from '../util' -import { px } from '../unit' - -const getBorder = n => (num(n) && n > 0 ? `${n}px solid` : n) - -export const border = style({ - prop: 'border', - key: 'borders', - transformValue: getBorder, -}) - -export const borderWidth = style({ - prop: 'borderWidth', - key: 'borderWidths', - transformValue: px, -}) - -export const borderStyle = style({ - prop: 'borderStyle', - key: 'borderStyles', -}) - -export const borderColor = style({ - prop: 'borderColor', - key: 'colors', -}) - -export const borderRadius = style({ - prop: 'borderRadius', - key: 'radii', - transformValue: px, -}) - -export const borderTop = style({ - prop: 'borderTop', - key: 'borders', - transformValue: getBorder, -}) - -export const borderTopColor = style({ - prop: 'borderTopColor', - key: 'colors', -}) - -export const borderRight = style({ - prop: 'borderRight', - key: 'borders', - transformValue: getBorder, -}) - -export const borderRightColor = style({ - prop: 'borderRightColor', - key: 'colors', -}) - -export const borderBottom = style({ - prop: 'borderBottom', - key: 'borders', - transformValue: getBorder, -}) - -export const borderBottomColor = style({ - prop: 'borderBottomColor', - key: 'colors', -}) - -export const borderLeft = style({ - prop: 'borderLeft', - key: 'borders', - transformValue: getBorder, -}) - -export const borderLeftColor = style({ - prop: 'borderLeftColor', - key: 'colors', -}) - -export const boxShadow = style({ - prop: 'boxShadow', - key: 'shadows', -}) - -export const borders = compose( - border, - borderWidth, - borderStyle, - borderColor, - borderTop, - borderTopColor, - borderRight, - borderRightColor, - borderBottom, - borderBottomColor, - borderLeft, - borderLeftColor, - borderRadius, - boxShadow -) diff --git a/src/styles/colors.js b/src/styles/colors.js deleted file mode 100644 index 72ada39bd..000000000 --- a/src/styles/colors.js +++ /dev/null @@ -1,9 +0,0 @@ -import { compose } from '../style' - -import { backgroundColor } from './backgrounds' -import { textColor } from './typography' - -export const color = compose( - backgroundColor, - textColor -) diff --git a/src/styles/dimensions.js b/src/styles/dimensions.js deleted file mode 100644 index 0ee39d7be..000000000 --- a/src/styles/dimensions.js +++ /dev/null @@ -1,54 +0,0 @@ -import { style, compose } from '../style' -import { percent } from '../unit' - -export const width = style({ - prop: 'width', - transformValue: percent, - key: 'widths', -}) - -export const height = style({ - prop: 'height', - transformValue: percent, - key: 'heights', -}) - -export const size = style({ - prop: 'size', - cssProperties: ['width', 'height'], - transformValue: percent, - key: 'sizes', -}) - -export const maxWidth = style({ - prop: 'maxWidth', - transformValue: percent, - key: 'widths', -}) - -export const maxHeight = style({ - prop: 'maxHeight', - transformValue: percent, - key: 'heights', -}) - -export const minWidth = style({ - prop: 'minWidth', - transformValue: percent, - key: 'widths', -}) - -export const minHeight = style({ - prop: 'minHeight', - transformValue: percent, - key: 'heights', -}) - -export const dimensions = compose( - width, - height, - maxWidth, - maxHeight, - minWidth, - minHeight -) diff --git a/src/styles/flexboxes.js b/src/styles/flexboxes.js deleted file mode 100644 index 16f0f622b..000000000 --- a/src/styles/flexboxes.js +++ /dev/null @@ -1,65 +0,0 @@ -import { style, compose } from '../style' -import { percent } from '../unit' - -export const display = style({ - prop: 'display', -}) - -export const alignItems = style({ - prop: 'alignItems', -}) - -export const alignContent = style({ - prop: 'alignContent', -}) - -export const justifyItems = style({ - prop: 'justifyItems', -}) - -export const justifyContent = style({ - prop: 'justifyContent', -}) - -export const flexWrap = style({ - prop: 'flexWrap', -}) - -export const flexBasis = style({ - prop: 'flexBasis', - transformValue: percent, -}) - -export const flexDirection = style({ - prop: 'flexDirection', -}) - -export const flex = style({ - prop: 'flex', -}) - -export const justifySelf = style({ - prop: 'justifySelf', -}) - -export const alignSelf = style({ - prop: 'alignSelf', -}) - -export const order = style({ - prop: 'order', -}) - -export const flexboxes = compose( - display, - alignItems, - alignContent, - justifyContent, - flexWrap, - flexBasis, - flexDirection, - flex, - justifySelf, - alignSelf, - order -) diff --git a/src/styles/grids.js b/src/styles/grids.js deleted file mode 100644 index ffbc13522..000000000 --- a/src/styles/grids.js +++ /dev/null @@ -1,45 +0,0 @@ -import { style, compose } from '../style' -import { scale } from '../unit' - -export const gridGap = style({ - prop: 'gridGap', - key: 'space', - transformValue: scale(), -}) - -export const gridColumnGap = style({ - prop: 'gridColumnGap', - key: 'space', - transformValue: scale(), -}) - -export const gridRowGap = style({ - prop: 'gridRowGap', - key: 'space', - transformValue: scale(), -}) - -export const gridColumn = style({ prop: 'gridColumn' }) -export const gridRow = style({ prop: 'gridRow' }) -export const gridAutoFlow = style({ prop: 'gridAutoFlow' }) -export const gridAutoColumns = style({ prop: 'gridAutoColumns' }) -export const gridAutoRows = style({ prop: 'gridAutoRows' }) -export const gridTemplateColumns = style({ prop: 'gridTemplateColumns' }) -export const gridTemplateRows = style({ prop: 'gridTemplateRows' }) -export const gridTemplateAreas = style({ prop: 'gridTemplateAreas' }) -export const gridArea = style({ prop: 'gridArea' }) - -export const grids = compose( - gridGap, - gridColumnGap, - gridRowGap, - gridColumn, - gridRow, - gridAutoFlow, - gridAutoColumns, - gridAutoRows, - gridTemplateColumns, - gridTemplateRows, - gridTemplateAreas, - gridArea -) diff --git a/src/styles/index.js b/src/styles/index.js deleted file mode 100644 index 08e64fd66..000000000 --- a/src/styles/index.js +++ /dev/null @@ -1,33 +0,0 @@ -import { compose } from '../style' -import { backgrounds } from './backgrounds' -import { basics } from './basics' -import { borders } from './borders' -import { dimensions } from './dimensions' -import { flexboxes } from './flexboxes' -import { grids } from './grids' -import { positions } from './positions' -import { space } from './space' -import { typography } from './typography' - -export * from './backgrounds' -export * from './basics' -export * from './borders' -export * from './colors' -export * from './dimensions' -export * from './flexboxes' -export * from './grids' -export * from './positions' -export * from './space' -export * from './typography' - -export const system = compose( - backgrounds, - basics, - borders, - dimensions, - flexboxes, - grids, - positions, - space, - typography -) diff --git a/src/styles/index.test.js-nop b/src/styles/index.test.js-nop deleted file mode 100644 index 7f3bbad66..000000000 --- a/src/styles/index.test.js-nop +++ /dev/null @@ -1,432 +0,0 @@ -import React from 'react' -import { mount } from 'enzyme' -import styled from 'styled-components' -import * as styles from './index' - -describe('styles', () => { - describe.each([ - [ - 'fontFamily', - { - styleRule: 'font-family', - theme: { - fonts: { - primary: 'serif', - secondary: 'sans-serif', - }, - }, - expectations: [['arial', 'arial'], ['primary', 'serif']], - }, - ], - [ - 'fontSize', - { - styleRule: 'font-size', - theme: { - fontSizes: [10, 15, 40], - }, - expectations: [[0, '10px'], [1, '15px'], [20, '20px'], ['3em', '3em']], - }, - ], - [ - 'lineHeight', - { - styleRule: 'line-height', - theme: { - lineHeights: [1.2, 1.5, 2], - }, - expectations: [[0, 1.2], [1, 1.5], [3, 3], ['3em', '3em']], - }, - ], - [ - 'fontWeight', - { - styleRule: 'font-weight', - theme: { - fontWeights: [400, 500, 800], - }, - expectations: [[0, 400], [1, 500], [800, 800], ['medium', 'medium']], - }, - ], - [ - 'textAlign', - { - styleRule: 'text-align', - expectations: [['center', 'center'], ['justify', 'justify']], - }, - ], - [ - 'letterSpacing', - { - styleRule: 'letter-spacing', - theme: { - letterSpacings: [1.2, 2], - }, - expectations: [ - [0, '1.2px'], - [1, '2px'], - [1.1, '1.1px'], - ['2rem', '2rem'], - ], - }, - ], - [ - 'color', - { - styleRule: 'color', - theme: { - colors: { - primary: 'red', - }, - }, - expectations: [ - ['primary', 'red'], - ['#fff', '#fff'], - ['rgba(0,0,0,0)', 'rgba(0,0,0,0)'], - ], - }, - ], - [ - 'width', - { - styleRule: 'width', - theme: { - widths: { - large: 400, - }, - }, - expectations: [[0.5, '50%'], ['large', '400px'], [50, '50px']], - }, - ], - [ - 'height', - { - styleRule: 'height', - theme: { - heights: { - large: 400, - }, - }, - expectations: [[0.5, '50%'], ['large', '400px'], [50, '50px']], - }, - ], - [ - 'maxWidth', - { - styleRule: 'max-width', - theme: { - widths: { - large: 400, - }, - }, - expectations: [[0.5, '50%'], ['large', '400px'], [50, '50px']], - }, - ], - [ - 'maxHeight', - { - styleRule: 'max-height', - theme: { - heights: { - large: 400, - }, - }, - expectations: [[0.5, '50%'], ['large', '400px'], [50, '50px']], - }, - ], - [ - 'minWidth', - { - styleRule: 'min-width', - theme: { - widths: { - large: 400, - }, - }, - expectations: [[0.5, '50%'], ['large', '400px'], [50, '50px']], - }, - ], - [ - 'minHeight', - { - styleRule: 'min-height', - theme: { - heights: { - large: 400, - }, - }, - expectations: [[0.5, '50%'], ['large', '400px'], [50, '50px']], - }, - ], - [ - 'display', - { - styleRule: 'display', - expectations: [['flex', 'flex'], ['block', 'block']], - }, - ], - [ - 'alignItems', - { - styleRule: 'align-items', - expectations: [['flex-start', 'flex-start'], ['center', 'center']], - }, - ], - [ - 'alignContent', - { - styleRule: 'align-content', - expectations: [['flex-start', 'flex-start'], ['center', 'center']], - }, - ], - [ - 'justifyContent', - { - styleRule: 'justify-content', - expectations: [['flex-start', 'flex-start'], ['center', 'center']], - }, - ], - [ - 'flexWrap', - { - styleRule: 'flex-wrap', - expectations: [['wrap', 'wrap'], ['nowrap', 'nowrap']], - }, - ], - [ - 'flexBasis', - { - styleRule: 'flex-basis', - expectations: [[0.5, '50%'], [50, '50px']], - }, - ], - [ - 'flexDirection', - { - styleRule: 'flex-direction', - expectations: [['row', 'row'], ['column', 'column']], - }, - ], - [ - 'flex', - { - styleRule: 'flex', - expectations: [[1, '1'], ['1 0 auto', '1 0 auto']], - }, - ], - [ - 'justifySelf', - { - styleRule: 'justify-self', - expectations: [['flex-start', 'flex-start'], ['center', 'center']], - }, - ], - [ - 'alignSelf', - { - styleRule: 'align-self', - expectations: [['flex-start', 'flex-start'], ['center', 'center']], - }, - ], - [ - 'order', - { - styleRule: 'order', - expectations: [[1, '1'], [10, '10']], - }, - ], - [ - 'background', - { - styleRule: 'background', - expectations: [['red', 'red'], ['blue', 'blue']], - }, - ], - [ - 'backgroundColor', - { - theme: { - colors: { - primary: 'red', - }, - }, - styleRule: 'background-color', - expectations: [['primary', 'red'], ['blue', 'blue']], - }, - ], - [ - 'backgroundImage', - { - styleRule: 'background-image', - expectations: [['url(x.gif)', 'url(x.gif)']], - }, - ], - [ - 'backgroundSize', - { - styleRule: 'background-size', - expectations: [['cover', 'cover'], ['50%', '50%']], - }, - ], - [ - 'backgroundRepeat', - { - styleRule: 'background-repeat', - expectations: [['no-repeat', 'no-repeat'], ['repeat-y', 'repeat-y']], - }, - ], - [ - 'position', - { - styleRule: 'position', - expectations: [['absolute', 'absolute'], ['relative', 'relative']], - }, - ], - [ - 'zIndex', - { - theme: { - zIndexes: { - alert: 100, - }, - }, - styleRule: 'z-index', - expectations: [['alert', '100'], [20, '20']], - }, - ], - [ - 'top', - { - styleRule: 'top', - expectations: [[10, '10px'], ['10px', '10px'], ['4%', '4%']], - }, - ], - [ - 'right', - { - styleRule: 'right', - expectations: [[10, '10px'], ['10px', '10px'], ['4%', '4%']], - }, - ], - [ - 'bottom', - { - styleRule: 'bottom', - expectations: [[10, '10px'], ['10px', '10px'], ['4%', '4%']], - }, - ], - [ - 'left', - { - styleRule: 'left', - expectations: [[10, '10px'], ['10px', '10px'], ['4%', '4%']], - }, - ], - [ - 'border', - { - styleRule: 'border', - expectations: [[1, '1px solid'], ['1px solid red', '1px solid red']], - }, - ], - [ - 'borderTop', - { - styleRule: 'border-top', - expectations: [[1, '1px solid'], ['1px solid red', '1px solid red']], - }, - ], - [ - 'borderRight', - { - styleRule: 'border-right', - expectations: [[1, '1px solid'], ['1px solid red', '1px solid red']], - }, - ], - [ - 'borderBottom', - { - styleRule: 'border-bottom', - expectations: [[1, '1px solid'], ['1px solid red', '1px solid red']], - }, - ], - [ - 'borderLeft', - { - styleRule: 'border-left', - expectations: [[1, '1px solid'], ['1px solid red', '1px solid red']], - }, - ], - [ - 'borderColor', - { - theme: { - colors: { - primary: 'red', - }, - }, - styleRule: 'border-color', - expectations: [['primary', 'red'], ['blue', 'blue']], - }, - ], - [ - 'borderRadius', - { - theme: { - radii: { - round: '50%', - }, - }, - styleRule: 'border-radius', - expectations: [['round', '50%'], [10, '10px']], - }, - ], - [ - 'boxShadow', - { - theme: { - shadows: { - red: '10px 5px 5px red', - }, - }, - styleRule: 'box-shadow', - expectations: [ - ['red', '10px 5px 5px red'], - [ - '12px 12px 2px 1px rgba(0, 0, 255, .2)', - '12px 12px 2px 1px rgba(0,0,255,.2)', - ], - ], - }, - ], - [ - 'opacity', - { - styleRule: 'opacity', - expectations: [[1, '1'], [0.2, '0.2']], - }, - ], - ])('#%s', (name, config) => { - const Dummy = styled.div` - ${styles[name]}; - ` - - it('should support basic value', () => { - config.expectations.forEach(([value, expected]) => { - const props = { [name]: value } - const wrapper = mount() - expect(wrapper).toHaveStyleRule(config.styleRule, String(expected)) - }) - }) - - it('should support breakpoints value', () => { - config.expectations.forEach(([value, expected]) => { - const props = { [name]: { md: value } } - const wrapper = mount() - expect(wrapper).toHaveStyleRule(config.styleRule, String(expected), { - media: '(min-width:768px)', - }) - }) - }) - }) -}) diff --git a/src/styles/positions.js b/src/styles/positions.js deleted file mode 100644 index 7806fa01a..000000000 --- a/src/styles/positions.js +++ /dev/null @@ -1,40 +0,0 @@ -import { style, compose } from '../style' -import { px } from '../unit' - -export const position = style({ - prop: 'position', -}) - -export const zIndex = style({ - prop: 'zIndex', - key: 'zIndices', -}) - -export const top = style({ - prop: 'top', - transformValue: px, -}) - -export const right = style({ - prop: 'right', - transformValue: px, -}) - -export const bottom = style({ - prop: 'bottom', - transformValue: px, -}) - -export const left = style({ - prop: 'left', - transformValue: px, -}) - -export const positions = compose( - position, - zIndex, - top, - right, - bottom, - left -) diff --git a/src/styles/space.js b/src/styles/space.js deleted file mode 100644 index 4654cf3ad..000000000 --- a/src/styles/space.js +++ /dev/null @@ -1,129 +0,0 @@ -import { style, compose } from '../style' -import { scale } from '../unit' - -const key = 'space' - -export const margin = style({ - prop: 'margin', - alias: 'm', - cssProperties: ['margin'], - key, - transformValue: scale(), -}) - -export const marginTop = style({ - prop: 'marginTop', - alias: 'mt', - cssProperties: ['marginTop'], - key, - transformValue: scale(), -}) - -export const marginRight = style({ - prop: 'marginRight', - alias: 'mr', - cssProperties: ['marginRight'], - key, - transformValue: scale(), -}) - -export const marginBottom = style({ - prop: 'marginBottom', - alias: 'mb', - cssProperties: ['marginBottom'], - key, - transformValue: scale(), -}) - -export const marginLeft = style({ - prop: 'marginLeft', - alias: 'ml', - cssProperties: ['marginLeft'], - key, - transformValue: scale(), -}) - -export const mx = style({ - prop: 'mx', - cssProperties: ['marginRight', 'marginLeft'], - key, - transformValue: scale(), -}) - -export const my = style({ - prop: 'my', - cssProperties: ['marginTop', 'marginBottom'], - key, - transformValue: scale(), -}) - -export const padding = style({ - prop: 'padding', - alias: 'p', - cssProperties: ['padding'], - key, - transformValue: scale(), -}) - -export const paddingTop = style({ - prop: 'paddingTop', - alias: 'pt', - cssProperties: ['paddingTop'], - key, - transformValue: scale(), -}) - -export const paddingRight = style({ - prop: 'paddingRight', - alias: 'pr', - cssProperties: ['paddingRight'], - key, - transformValue: scale(), -}) - -export const paddingBottom = style({ - prop: 'paddingBottom', - alias: 'pb', - cssProperties: ['paddingBottom'], - key, - transformValue: scale(), -}) - -export const paddingLeft = style({ - prop: 'paddingLeft', - alias: 'pl', - cssProperties: ['paddingLeft'], - key, - transformValue: scale(), -}) - -export const px = style({ - prop: 'px', - cssProperties: ['paddingRight', 'paddingLeft'], - key, - transformValue: scale(), -}) - -export const py = style({ - prop: 'py', - cssProperties: ['paddingTop', 'paddingBottom'], - key, - transformValue: scale(), -}) - -export const space = compose( - margin, - marginTop, - marginRight, - marginBottom, - marginLeft, - mx, - my, - padding, - paddingTop, - paddingRight, - paddingBottom, - paddingLeft, - px, - py -) diff --git a/src/styles/space.test.js-nop b/src/styles/space.test.js-nop deleted file mode 100644 index 2f79ab728..000000000 --- a/src/styles/space.test.js-nop +++ /dev/null @@ -1,108 +0,0 @@ -import { space } from './space' - -describe('space', () => { - it('should support m', () => { - expect(space({ m: 1 })).toEqual({ margin: 8 }) - expect(space({ m: 2 })).toEqual({ margin: 16 }) - expect(space({ m: -2 })).toEqual({ margin: -16 }) - expect(space({ m: 10 })).toEqual({ margin: 10 }) - expect(space({ m: -10 })).toEqual({ margin: -10 }) - expect(space({ m: '50%' })).toEqual({ margin: '50%' }) - expect(space({ m: { md: '50%' } })).toEqual({ - '@media (min-width: 768px)': { margin: '50%' }, - }) - }) - - it('should support mx', () => { - expect(space({ mx: 10 })).toEqual({ - marginLeft: 10, - marginRight: 10, - }) - expect(space({ mx: '50%' })).toEqual({ - marginLeft: '50%', - marginRight: '50%', - }) - expect(space({ mx: { md: '50%' } })).toEqual({ - '@media (min-width: 768px)': { marginLeft: '50%', marginRight: '50%' }, - }) - }) - - it('should support mb, mt, ml, mr', () => { - expect(space({ mb: 10 })).toEqual({ marginBottom: 10 }) - expect(space({ mt: 10 })).toEqual({ marginTop: 10 }) - expect(space({ ml: 10 })).toEqual({ marginLeft: 10 }) - expect(space({ mr: 10 })).toEqual({ marginRight: 10 }) - }) - - it('should support p', () => { - expect(space({ p: 10 })).toEqual({ padding: 10 }) - expect(space({ p: '50%' })).toEqual({ padding: '50%' }) - expect(space({ p: { md: '50%' } })).toEqual({ - '@media (min-width: 768px)': { padding: '50%' }, - }) - }) - - it('should support px, py', () => { - expect(space({ px: 10 })).toEqual({ - paddingLeft: 10, - paddingRight: 10, - }) - expect(space({ px: '50%' })).toEqual({ - paddingLeft: '50%', - paddingRight: '50%', - }) - expect(space({ px: { md: '50%' } })).toEqual({ - '@media (min-width: 768px)': { paddingLeft: '50%', paddingRight: '50%' }, - }) - }) - - it('should support pb, pt, pl, pr', () => { - expect(space({ pb: 10 })).toEqual({ paddingBottom: 10 }) - expect(space({ pt: 10 })).toEqual({ paddingTop: 10 }) - expect(space({ pl: 10 })).toEqual({ paddingLeft: 10 }) - expect(space({ pr: 10 })).toEqual({ paddingRight: 10 }) - }) - - it('should merge everything', () => { - expect(space({ px: { md: '50%' }, mx: { md: 10 } })).toEqual({ - '@media (min-width: 768px)': { - paddingLeft: '50%', - paddingRight: '50%', - marginLeft: 10, - marginRight: 10, - }, - }) - }) - - it('should support variants spaces', () => { - expect( - space({ - m: 1, - p: 0, - theme: { spaces: [0, 8, 16] }, - }) - ).toEqual({ - margin: 8, - padding: 0, - }) - }) - - it('should expose meta', () => { - expect(space.meta).toEqual([ - 'm', - 'mt', - 'mr', - 'mb', - 'ml', - 'mx', - 'my', - 'p', - 'pt', - 'pr', - 'pb', - 'pl', - 'px', - 'py', - ]) - }) -}) diff --git a/src/styles/typography.js b/src/styles/typography.js deleted file mode 100644 index a4a1ba69c..000000000 --- a/src/styles/typography.js +++ /dev/null @@ -1,54 +0,0 @@ -import { px } from '../unit' -import { style, compose } from '../style' -import { scale } from '../unit' - -export const fontFamily = style({ - prop: 'fontFamily', - key: 'fonts', -}) - -export const fontSize = style({ - prop: 'fontSize', - key: 'fontSizes', - transformValue: scale([12, 14, 16, 20, 24, 32, 48, 64, 72]), -}) - -export const lineHeight = style({ - prop: 'lineHeight', - key: 'lineHeights', -}) - -export const fontWeight = style({ - prop: 'fontWeight', - key: 'fontWeights', -}) - -export const textAlign = style({ - prop: 'textAlign', -}) - -export const letterSpacing = style({ - prop: 'letterSpacing', - key: 'letterSpacings', - transformValue: px, -}) - -export const textColor = style({ - prop: 'color', - key: 'colors', -}) - -export const textTransform = style({ - prop: 'textTransform', -}) - -export const typography = compose( - fontFamily, - fontSize, - lineHeight, - fontWeight, - textAlign, - letterSpacing, - textColor, - textTransform -) diff --git a/src/unit.js b/src/unit.js deleted file mode 100644 index 9120bdcd8..000000000 --- a/src/unit.js +++ /dev/null @@ -1,23 +0,0 @@ -import { num, negative } from './util' - -const DEFAULT_SPACE = [0, 4, 8, 16, 32, 64, 128, 256, 512] - -export const unit = unit => value => (num(value) ? `${value}${unit}` : value) -export const px = unit('px') -export const percent = n => (!num(n) || n > 1 ? px(n) : `${n * 100}%`) - -export const scale = (defaultVariants = DEFAULT_SPACE) => ( - transformedValue, - { rawValue, variants = defaultVariants } -) => { - if (!num(rawValue)) { - return variants[rawValue] || rawValue - } - const abs = Math.abs(rawValue) - const neg = negative(rawValue) - const value = variants[abs] || abs - if (!num(value)) { - return neg ? `-${value}` : value - } - return value * (neg ? -1 : 1) -} diff --git a/src/util.js b/src/util.js deleted file mode 100644 index 2c2d90d59..000000000 --- a/src/util.js +++ /dev/null @@ -1,33 +0,0 @@ -import deepmerge from 'deepmerge' // < 1kb payload overhead when lodash/merge is > 3kb. - -export const is = n => n !== undefined && n !== null -export const num = n => typeof n === 'number' && !Number.isNaN(n) -export const string = n => typeof n === 'string' && n !== '' -export const obj = n => typeof n === 'object' && n !== null -export const func = n => typeof n === 'function' -export const negative = n => n < 0 - -export const get = (obj, path) => - String(path) - .split('.') - .reduce((a, b) => (a && is(a[b]) ? a[b] : undefined), obj) - -export function merge(acc, item) { - if (!item) { - return acc - } - - return deepmerge(acc, item, { - clone: false, // No need to clone deep, it's way faster. - }) -} - -export const assign = (target, source) => { - const keys = Object.keys(source || {}) - const totalKeys = keys.length - for (let i = 0; i < totalKeys; i += 1) { - const key = keys[i] - target[key] = source[key] - } - return target -} diff --git a/src/variant.js b/src/variant.js deleted file mode 100644 index 3371a05b7..000000000 --- a/src/variant.js +++ /dev/null @@ -1,4 +0,0 @@ -import { get } from './util' - -export const variant = ({ key, prop = 'variant' }) => props => - get(props.theme, [key, props[prop]].join('.')) || null diff --git a/src/variants.js b/src/variants.js deleted file mode 100644 index 02fd1abc1..000000000 --- a/src/variants.js +++ /dev/null @@ -1,5 +0,0 @@ -import { variant } from './variant' - -export const buttonStyle = variant({ key: 'buttons' }) -export const textStyle = variant({ key: 'textStyles', prop: 'textStyle' }) -export const colorStyle = variant({ key: 'colorStyles', prop: 'colors' }) diff --git a/test/index.js b/test/index.js index 8e0873614..2206a7572 100644 --- a/test/index.js +++ b/test/index.js @@ -1,5 +1,15 @@ import test from 'ava' -import { style, compose, variant } from '../src/index' +import { + style, + compose, + variant, + get, + themeGet, + is, + num, + cloneFunction, + mapProps, +} from '../src/index' const width = style({ prop: 'width', @@ -53,7 +63,6 @@ test('handles aliased props', t => { }) // Impossible to ensure, due to perf issues - // test('long form prop trumps aliased props', t => { // const style = backgroundColor({ // theme, @@ -75,7 +84,7 @@ test('returns 0', t => { t.deepEqual(style, { width: 0 }) }) -test('returns an array of responsive style objects', t => { +test('returns merged object of responsive styles', t => { const style = width({ width: ['100%', '50%'], }) @@ -85,7 +94,7 @@ test('returns an array of responsive style objects', t => { }) }) -test('returns an array of responsive style objects for all breakpoints', t => { +test('returns merged object of responsive styles for all breakpoints', t => { const style = width({ width: ['100%', '75%', '50%', '33%', '25%'], }) @@ -107,8 +116,7 @@ test('skips undefined responsive values', t => { }) }) -// It is more strict now, see next test - +// Previous object parsing test // test('parses object values', t => { // const style = width({ // width: { @@ -122,73 +130,72 @@ test('skips undefined responsive values', t => { // }) // }) +// Object parsing work as expected... +// Previous behaviour was kind of buggy for me test('parses object values', t => { const style = width({ width: { - _: '100%', + 0: '100%', 1: '50%', }, }) t.deepEqual(style, { + width: '100%', '@media screen and (min-width: 40em)': { width: '50%' }, }) }) -// We will not export "get" anymore - -// test('get returns a value', t => { -// const a = get({ blue: '#0cf' }, 'blue') -// t.is(a, '#0cf') -// }) - -// test('get returns the last argument if no value is found', t => { -// const a = get( -// { -// blue: '#0cf', -// }, -// 'green', -// '#0f0' -// ) -// t.is(a, '#0f0') -// }) +test('get returns a value', t => { + const a = get({ blue: '#0cf' }, 'blue') + t.is(a, '#0cf') +}) -// test('get returns 0', t => { -// const a = get({}, 0) -// const b = get({ space: [0, 4] }, 0) -// t.is(a, 0) -// t.is(b, 0) -// }) +test('get returns the last argument if no value is found', t => { + const a = get( + { + blue: '#0cf', + }, + 'green', + '#0f0' + ) + t.is(a, '#0f0') +}) -// test('get returns deeply nested values', t => { -// const a = get( -// { -// hi: { -// hello: { -// beep: 'boop', -// }, -// }, -// }, -// 'hi.hello.beep' -// ) -// t.is(a, 'boop') -// }) +test('get returns 0', t => { + const a = get({}, 0) + const b = get({ space: [0, 4] }, 0) + t.is(a, 0) + t.is(b, 0) +}) -// We will not export "themeGet" anymore +test('get returns deeply nested values', t => { + const a = get( + { + hi: { + hello: { + beep: 'boop', + }, + }, + }, + 'hi.hello.beep' + ) + t.is(a, 'boop') +}) -// test('themeGet returns values from the theme', t => { -// const a = themeGet('colors.blue')({ theme }) -// t.is(a, '#07c') -// }) +test('themeGet returns values from the theme', t => { + const a = themeGet('colors.blue')({ theme }) + t.is(a, '#07c') +}) -// test('themeGet does not throw when value doesnt exist', t => { -// const a = themeGet('colors.blue.5')({ theme }) -// t.is(a, null) -// }) +test('themeGet does not throw when value doesnt exist', t => { + const a = themeGet('colors.blue.5')({ theme }) + t.is(a, null) +}) -// test('themeGet accepts a fallback', t => { -// const a = themeGet('colors.lightblue', '#0cf')({ theme }) -// t.is(a, '#0cf') -// }) +test('themeGet accepts a fallback', t => { + const a = themeGet('colors.lightblue', '#0cf')({ theme }) + t.is(a, '#0cf') +}) test('compose combines style functions', t => { const colors = compose( @@ -203,40 +210,34 @@ test('compose combines style functions', t => { t.deepEqual(styles, { color: 'tomato', backgroundColor: 'black' }) }) -// We will not export "num" anymore - -// test('num returns true for numbers', t => { -// const isNumber = num(0) -// t.true(isNumber) -// }) - -// test('num returns false for non-numbers', t => { -// const isNumber = num(null) -// t.false(isNumber) -// }) - -// We will not export "is" anymore +test('num returns true for numbers', t => { + const isNumber = num(0) + t.true(isNumber) +}) -// test('is returns true for truthy values', t => { -// const isValue = is(0) -// t.true(isValue) -// }) +test('num returns false for non-numbers', t => { + const isNumber = num(null) + t.false(isNumber) +}) -// test('is returns false for falsey values', t => { -// const a = is(null) -// const b = is(undefined) -// t.false(a) -// t.false(b) -// }) +test('is returns true for truthy values', t => { + const isValue = is(0) + t.true(isValue) +}) -// We will not export "cloneFunction" anymore +test('is returns false for falsey values', t => { + const a = is(null) + const b = is(undefined) + t.false(a) + t.false(b) +}) -// test('cloneFunction creates a new function', t => { -// const func = () => 'hi' -// const b = cloneFunction(func) -// t.false(func === b) -// t.is(b(), 'hi') -// }) +test('cloneFunction creates a new function', t => { + const func = () => 'hi' + const b = cloneFunction(func) + t.false(func === b) + t.is(b(), 'hi') +}) test('variant returns style objects from theme', t => { const buttons = variant({ key: 'buttons' }) @@ -283,10 +284,8 @@ test('array values longer than breakpoints does not reset returned style object' t.deepEqual(a, { width: '100%' }) }) -// No longer relevant - -// test('mapProps copies propTypes', t => { -// const margin = style({ prop: 'margin' }) -// const func = mapProps(props => props)(margin) -// t.is(typeof func.propTypes, 'object') -// }) +test('mapProps copies propTypes', t => { + const margin = style({ prop: 'margin' }) + const func = mapProps(props => props)(margin) + t.is(typeof func.propTypes, 'object') +}) diff --git a/test/styles.js b/test/styles.js index 18bf6a4d8..57b160706 100644 --- a/test/styles.js +++ b/test/styles.js @@ -35,7 +35,6 @@ test('returns raw color values', t => { }) // Impossible to ensure, due to perf issues - // test('backgroundColor prop overrides bg prop', t => { // const a = color({ // backgroundColor: 'tomato', @@ -44,16 +43,14 @@ test('returns raw color values', t => { // t.deepEqual(a, [{ backgroundColor: 'tomato' }]) // }) -// Useless, font-size default to pixels - -// test('returns a pixel font-size', t => { -// const a = fontSize({ fontSize: 48 }) -// t.deepEqual(a, { fontSize: '48px' }) -// }) +test('returns a pixel font-size', t => { + const a = fontSize({ fontSize: 48 }) + t.deepEqual(a, { fontSize: '48px' }) +}) test('uses a default font-size scale', t => { const a = fontSize({ fontSize: 2 }) - t.deepEqual(a, { fontSize: 16 }) + t.deepEqual(a, { fontSize: '16px' }) }) test('returns a string font-size', t => { @@ -90,7 +87,7 @@ test('returns 0 values', t => { test('returns negative pixel values', t => { const styles = space({ m: -2 }) - t.deepEqual(styles, { margin: -8 }) + t.deepEqual(styles, { margin: '-8px' }) }) test('returns negative em values', t => { @@ -105,7 +102,7 @@ test('returns negative theme values', t => { }, m: -2, }) - t.deepEqual(styles, { margin: -8 }) + t.deepEqual(styles, { margin: '-8px' }) }) test('returns positive theme values', t => { @@ -124,8 +121,8 @@ test('returns responsive values', t => { }) t.deepEqual(styles, { margin: 0, - '@media screen and (min-width: 40em)': { margin: 8 }, - '@media screen and (min-width: 52em)': { margin: 16 }, + '@media screen and (min-width: 40em)': { margin: '8px' }, + '@media screen and (min-width: 52em)': { margin: '16px' }, }) }) @@ -133,7 +130,7 @@ test('returns aliased values', t => { const styles = space({ px: 2, }) - t.deepEqual(styles, { paddingLeft: 8, paddingRight: 8 }) + t.deepEqual(styles, { paddingLeft: '8px', paddingRight: '8px' }) }) test('returns string values from theme', t => { @@ -164,12 +161,12 @@ test('returns values from theme object', t => { margin: 'sm', }) - t.deepEqual(styles, { margin: 1 }) + t.deepEqual(styles, { margin: '1px' }) }) test('pl prop sets paddingLeft', t => { const styles = space({ pl: 2 }) - t.deepEqual(styles, { paddingLeft: 8 }) + t.deepEqual(styles, { paddingLeft: '8px' }) }) test('pl prop sets paddingLeft 0', t => { @@ -177,57 +174,56 @@ test('pl prop sets paddingLeft 0', t => { t.deepEqual(styles, { paddingLeft: 0 }) }) -// The order of props matter +// The order of props matters test('px prop overrides pl prop', t => { const styles = space({ pl: 1, px: 2, }) - t.deepEqual(styles, { paddingLeft: 8, paddingRight: 8 }) + t.deepEqual(styles, { paddingLeft: '8px', paddingRight: '8px' }) }) -// The order of props matter +// The order of props matters test('py prop overrides pb prop', t => { const styles = space({ pb: 1, py: 2, }) - t.deepEqual(styles, { paddingTop: 8, paddingBottom: 8 }) + t.deepEqual(styles, { paddingTop: '8px', paddingBottom: '8px' }) }) -// The order of props matter +// The order of props matters test('mx prop overrides mr prop', t => { const styles = space({ mr: 1, mx: 2, }) - t.deepEqual(styles, { marginLeft: 8, marginRight: 8 }) + t.deepEqual(styles, { marginLeft: '8px', marginRight: '8px' }) }) -// The order of props matter +// The order of props matters test('my prop overrides mt prop', t => { const styles = space({ mt: 1, my: 2, }) - t.deepEqual(styles, { marginTop: 8, marginBottom: 8 }) + t.deepEqual(styles, { marginTop: '8px', marginBottom: '8px' }) }) -// The order of props matter +// The order of props matters test('margin overrides m prop', t => { const styles = space({ m: 1, margin: 2, }) - t.deepEqual(styles, { margin: 8 }) + t.deepEqual(styles, { margin: '8px' }) }) -// PropTypes are no longer included -// test('space includes propTypes', t => { -// const { propTypes } = space -// t.is(typeof propTypes, 'object') -// t.is(typeof propTypes.m, 'function') -// }) +test('space includes propTypes', t => { + const { propTypes } = space + t.is(typeof propTypes, 'object') + t.is(typeof propTypes.m, 'function') +}) test('size returns width and height', t => { const styles = size({ @@ -236,7 +232,7 @@ test('size returns width and height', t => { t.deepEqual(styles, { width: '4px', height: '4px' }) }) -// // grid +// grid test('gridGap returns a scalar style', t => { const a = gridGap({ theme: { @@ -245,7 +241,7 @@ test('gridGap returns a scalar style', t => { gridGap: 3, }) - t.deepEqual(a, { gridGap: 8 }) + t.deepEqual(a, { gridGap: '8px' }) }) test('gridGap uses the default scale', t => { @@ -254,7 +250,7 @@ test('gridGap uses the default scale', t => { gridGap: 2, }) - t.deepEqual(a, { gridGap: 8 }) + t.deepEqual(a, { gridGap: '8px' }) }) test('gridRowGap returns a scalar style', t => { @@ -265,7 +261,7 @@ test('gridRowGap returns a scalar style', t => { gridRowGap: 3, }) - t.deepEqual(a, { gridRowGap: 8 }) + t.deepEqual(a, { gridRowGap: '8px' }) }) test('gridRowGap uses the default scale', t => { @@ -274,7 +270,7 @@ test('gridRowGap uses the default scale', t => { gridRowGap: 2, }) - t.deepEqual(a, { gridRowGap: 8 }) + t.deepEqual(a, { gridRowGap: '8px' }) }) test('gridColumnGap returns a scalar style', t => { @@ -285,7 +281,7 @@ test('gridColumnGap returns a scalar style', t => { gridColumnGap: 3, }) - t.deepEqual(a, { gridColumnGap: 8 }) + t.deepEqual(a, { gridColumnGap: '8px' }) }) test('gridColumnGap uses the default scale', t => { @@ -294,7 +290,7 @@ test('gridColumnGap uses the default scale', t => { gridColumnGap: 2, }) - t.deepEqual(a, { gridColumnGap: 8 }) + t.deepEqual(a, { gridColumnGap: '8px' }) }) test('textStyle prop returns theme.textStyles object', t => {