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
						
					
					
				| "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; |