You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					238 lines
				
				5.9 KiB
			
		
		
			
		
	
	
					238 lines
				
				5.9 KiB
			| 
								 
											3 years ago
										 
									 | 
							
								"use strict";
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								exports.__esModule = true;
							 | 
						||
| 
								 | 
							
								exports.compose = exports.system = exports.createStyleFunction = exports.createParser = exports.get = exports.merge = void 0;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var _objectAssign = _interopRequireDefault(require("object-assign"));
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var merge = function merge(a, b) {
							 | 
						||
| 
								 | 
							
								  var result = (0, _objectAssign["default"])({}, a, b);
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  for (var key in a) {
							 | 
						||
| 
								 | 
							
								    var _assign;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    if (!a[key] || typeof b[key] !== 'object') continue;
							 | 
						||
| 
								 | 
							
								    (0, _objectAssign["default"])(result, (_assign = {}, _assign[key] = (0, _objectAssign["default"])(a[key], b[key]), _assign));
							 | 
						||
| 
								 | 
							
								  }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  return result;
							 | 
						||
| 
								 | 
							
								}; // sort object-value responsive styles
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								exports.merge = merge;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var sort = function sort(obj) {
							 | 
						||
| 
								 | 
							
								  var next = {};
							 | 
						||
| 
								 | 
							
								  Object.keys(obj).sort(function (a, b) {
							 | 
						||
| 
								 | 
							
								    return a.localeCompare(b, undefined, {
							 | 
						||
| 
								 | 
							
								      numeric: true,
							 | 
						||
| 
								 | 
							
								      sensitivity: 'base'
							 | 
						||
| 
								 | 
							
								    });
							 | 
						||
| 
								 | 
							
								  }).forEach(function (key) {
							 | 
						||
| 
								 | 
							
								    next[key] = obj[key];
							 | 
						||
| 
								 | 
							
								  });
							 | 
						||
| 
								 | 
							
								  return next;
							 | 
						||
| 
								 | 
							
								};
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var defaults = {
							 | 
						||
| 
								 | 
							
								  breakpoints: [40, 52, 64].map(function (n) {
							 | 
						||
| 
								 | 
							
								    return n + 'em';
							 | 
						||
| 
								 | 
							
								  })
							 | 
						||
| 
								 | 
							
								};
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var createMediaQuery = function createMediaQuery(n) {
							 | 
						||
| 
								 | 
							
								  return "@media screen and (min-width: " + n + ")";
							 | 
						||
| 
								 | 
							
								};
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var getValue = function getValue(n, scale) {
							 | 
						||
| 
								 | 
							
								  return get(scale, n, n);
							 | 
						||
| 
								 | 
							
								};
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var get = function get(obj, key, def, p, undef) {
							 | 
						||
| 
								 | 
							
								  key = key && key.split ? key.split('.') : [key];
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  for (p = 0; p < key.length; p++) {
							 | 
						||
| 
								 | 
							
								    obj = obj ? obj[key[p]] : undef;
							 | 
						||
| 
								 | 
							
								  }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  return obj === undef ? def : obj;
							 | 
						||
| 
								 | 
							
								};
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								exports.get = get;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var createParser = function createParser(config) {
							 | 
						||
| 
								 | 
							
								  var cache = {};
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  var parse = function parse(props) {
							 | 
						||
| 
								 | 
							
								    var styles = {};
							 | 
						||
| 
								 | 
							
								    var shouldSort = false;
							 | 
						||
| 
								 | 
							
								    var isCacheDisabled = props.theme && props.theme.disableStyledSystemCache;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    for (var key in props) {
							 | 
						||
| 
								 | 
							
								      if (!config[key]) continue;
							 | 
						||
| 
								 | 
							
								      var sx = config[key];
							 | 
						||
| 
								 | 
							
								      var raw = props[key];
							 | 
						||
| 
								 | 
							
								      var scale = get(props.theme, sx.scale, sx.defaults);
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								      if (typeof raw === 'object') {
							 | 
						||
| 
								 | 
							
								        cache.breakpoints = !isCacheDisabled && cache.breakpoints || get(props.theme, 'breakpoints', defaults.breakpoints);
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								        if (Array.isArray(raw)) {
							 | 
						||
| 
								 | 
							
								          cache.media = !isCacheDisabled && cache.media || [null].concat(cache.breakpoints.map(createMediaQuery));
							 | 
						||
| 
								 | 
							
								          styles = merge(styles, parseResponsiveStyle(cache.media, sx, scale, raw, props));
							 | 
						||
| 
								 | 
							
								          continue;
							 | 
						||
| 
								 | 
							
								        }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								        if (raw !== null) {
							 | 
						||
| 
								 | 
							
								          styles = merge(styles, parseResponsiveObject(cache.breakpoints, sx, scale, raw, props));
							 | 
						||
| 
								 | 
							
								          shouldSort = true;
							 | 
						||
| 
								 | 
							
								        }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								        continue;
							 | 
						||
| 
								 | 
							
								      }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								      (0, _objectAssign["default"])(styles, sx(raw, scale, props));
							 | 
						||
| 
								 | 
							
								    } // sort object-based responsive styles
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    if (shouldSort) {
							 | 
						||
| 
								 | 
							
								      styles = sort(styles);
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    return styles;
							 | 
						||
| 
								 | 
							
								  };
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  parse.config = config;
							 | 
						||
| 
								 | 
							
								  parse.propNames = Object.keys(config);
							 | 
						||
| 
								 | 
							
								  parse.cache = cache;
							 | 
						||
| 
								 | 
							
								  var keys = Object.keys(config).filter(function (k) {
							 | 
						||
| 
								 | 
							
								    return k !== 'config';
							 | 
						||
| 
								 | 
							
								  });
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  if (keys.length > 1) {
							 | 
						||
| 
								 | 
							
								    keys.forEach(function (key) {
							 | 
						||
| 
								 | 
							
								      var _createParser;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								      parse[key] = createParser((_createParser = {}, _createParser[key] = config[key], _createParser));
							 | 
						||
| 
								 | 
							
								    });
							 | 
						||
| 
								 | 
							
								  }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  return parse;
							 | 
						||
| 
								 | 
							
								};
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								exports.createParser = createParser;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var parseResponsiveStyle = function parseResponsiveStyle(mediaQueries, sx, scale, raw, _props) {
							 | 
						||
| 
								 | 
							
								  var styles = {};
							 | 
						||
| 
								 | 
							
								  raw.slice(0, mediaQueries.length).forEach(function (value, i) {
							 | 
						||
| 
								 | 
							
								    var media = mediaQueries[i];
							 | 
						||
| 
								 | 
							
								    var style = sx(value, scale, _props);
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    if (!media) {
							 | 
						||
| 
								 | 
							
								      (0, _objectAssign["default"])(styles, style);
							 | 
						||
| 
								 | 
							
								    } else {
							 | 
						||
| 
								 | 
							
								      var _assign2;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								      (0, _objectAssign["default"])(styles, (_assign2 = {}, _assign2[media] = (0, _objectAssign["default"])({}, styles[media], style), _assign2));
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								  });
							 | 
						||
| 
								 | 
							
								  return styles;
							 | 
						||
| 
								 | 
							
								};
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var parseResponsiveObject = function parseResponsiveObject(breakpoints, sx, scale, raw, _props) {
							 | 
						||
| 
								 | 
							
								  var styles = {};
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  for (var key in raw) {
							 | 
						||
| 
								 | 
							
								    var breakpoint = breakpoints[key];
							 | 
						||
| 
								 | 
							
								    var value = raw[key];
							 | 
						||
| 
								 | 
							
								    var style = sx(value, scale, _props);
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    if (!breakpoint) {
							 | 
						||
| 
								 | 
							
								      (0, _objectAssign["default"])(styles, style);
							 | 
						||
| 
								 | 
							
								    } else {
							 | 
						||
| 
								 | 
							
								      var _assign3;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								      var media = createMediaQuery(breakpoint);
							 | 
						||
| 
								 | 
							
								      (0, _objectAssign["default"])(styles, (_assign3 = {}, _assign3[media] = (0, _objectAssign["default"])({}, styles[media], style), _assign3));
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								  }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  return styles;
							 | 
						||
| 
								 | 
							
								};
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var createStyleFunction = function createStyleFunction(_ref) {
							 | 
						||
| 
								 | 
							
								  var properties = _ref.properties,
							 | 
						||
| 
								 | 
							
								      property = _ref.property,
							 | 
						||
| 
								 | 
							
								      scale = _ref.scale,
							 | 
						||
| 
								 | 
							
								      _ref$transform = _ref.transform,
							 | 
						||
| 
								 | 
							
								      transform = _ref$transform === void 0 ? getValue : _ref$transform,
							 | 
						||
| 
								 | 
							
								      defaultScale = _ref.defaultScale;
							 | 
						||
| 
								 | 
							
								  properties = properties || [property];
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  var sx = function sx(value, scale, _props) {
							 | 
						||
| 
								 | 
							
								    var result = {};
							 | 
						||
| 
								 | 
							
								    var n = transform(value, scale, _props);
							 | 
						||
| 
								 | 
							
								    if (n === null) return;
							 | 
						||
| 
								 | 
							
								    properties.forEach(function (prop) {
							 | 
						||
| 
								 | 
							
								      result[prop] = n;
							 | 
						||
| 
								 | 
							
								    });
							 | 
						||
| 
								 | 
							
								    return result;
							 | 
						||
| 
								 | 
							
								  };
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  sx.scale = scale;
							 | 
						||
| 
								 | 
							
								  sx.defaults = defaultScale;
							 | 
						||
| 
								 | 
							
								  return sx;
							 | 
						||
| 
								 | 
							
								}; // new v5 API
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								exports.createStyleFunction = createStyleFunction;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var system = function system(args) {
							 | 
						||
| 
								 | 
							
								  if (args === void 0) {
							 | 
						||
| 
								 | 
							
								    args = {};
							 | 
						||
| 
								 | 
							
								  }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  var config = {};
							 | 
						||
| 
								 | 
							
								  Object.keys(args).forEach(function (key) {
							 | 
						||
| 
								 | 
							
								    var conf = args[key];
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    if (conf === true) {
							 | 
						||
| 
								 | 
							
								      // shortcut definition
							 | 
						||
| 
								 | 
							
								      config[key] = createStyleFunction({
							 | 
						||
| 
								 | 
							
								        property: key,
							 | 
						||
| 
								 | 
							
								        scale: key
							 | 
						||
| 
								 | 
							
								      });
							 | 
						||
| 
								 | 
							
								      return;
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    if (typeof conf === 'function') {
							 | 
						||
| 
								 | 
							
								      config[key] = conf;
							 | 
						||
| 
								 | 
							
								      return;
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    config[key] = createStyleFunction(conf);
							 | 
						||
| 
								 | 
							
								  });
							 | 
						||
| 
								 | 
							
								  var parser = createParser(config);
							 | 
						||
| 
								 | 
							
								  return parser;
							 | 
						||
| 
								 | 
							
								};
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								exports.system = system;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var compose = function compose() {
							 | 
						||
| 
								 | 
							
								  var config = {};
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  for (var _len = arguments.length, parsers = new Array(_len), _key = 0; _key < _len; _key++) {
							 | 
						||
| 
								 | 
							
								    parsers[_key] = arguments[_key];
							 | 
						||
| 
								 | 
							
								  }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  parsers.forEach(function (parser) {
							 | 
						||
| 
								 | 
							
								    if (!parser || !parser.config) return;
							 | 
						||
| 
								 | 
							
								    (0, _objectAssign["default"])(config, parser.config);
							 | 
						||
| 
								 | 
							
								  });
							 | 
						||
| 
								 | 
							
								  var parser = createParser(config);
							 | 
						||
| 
								 | 
							
								  return parser;
							 | 
						||
| 
								 | 
							
								};
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								exports.compose = compose;
							 |