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.
		
		
		
		
		
			
		
			
				
					216 lines
				
				5.7 KiB
			
		
		
			
		
	
	
					216 lines
				
				5.7 KiB
			| 
											3 years ago
										 | function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } | ||
|  | 
 | ||
|  | // based on https://github.com/developit/dlv
 | ||
|  | export 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; | ||
|  | }; | ||
|  | var defaultBreakpoints = [40, 52, 64].map(function (n) { | ||
|  |   return n + 'em'; | ||
|  | }); | ||
|  | var defaultTheme = { | ||
|  |   space: [0, 4, 8, 16, 32, 64, 128, 256, 512], | ||
|  |   fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72] | ||
|  | }; | ||
|  | var aliases = { | ||
|  |   bg: 'backgroundColor', | ||
|  |   m: 'margin', | ||
|  |   mt: 'marginTop', | ||
|  |   mr: 'marginRight', | ||
|  |   mb: 'marginBottom', | ||
|  |   ml: 'marginLeft', | ||
|  |   mx: 'marginX', | ||
|  |   my: 'marginY', | ||
|  |   p: 'padding', | ||
|  |   pt: 'paddingTop', | ||
|  |   pr: 'paddingRight', | ||
|  |   pb: 'paddingBottom', | ||
|  |   pl: 'paddingLeft', | ||
|  |   px: 'paddingX', | ||
|  |   py: 'paddingY' | ||
|  | }; | ||
|  | var multiples = { | ||
|  |   marginX: ['marginLeft', 'marginRight'], | ||
|  |   marginY: ['marginTop', 'marginBottom'], | ||
|  |   paddingX: ['paddingLeft', 'paddingRight'], | ||
|  |   paddingY: ['paddingTop', 'paddingBottom'], | ||
|  |   size: ['width', 'height'] | ||
|  | }; | ||
|  | var scales = { | ||
|  |   color: 'colors', | ||
|  |   backgroundColor: 'colors', | ||
|  |   borderColor: 'colors', | ||
|  |   margin: 'space', | ||
|  |   marginTop: 'space', | ||
|  |   marginRight: 'space', | ||
|  |   marginBottom: 'space', | ||
|  |   marginLeft: 'space', | ||
|  |   marginX: 'space', | ||
|  |   marginY: 'space', | ||
|  |   padding: 'space', | ||
|  |   paddingTop: 'space', | ||
|  |   paddingRight: 'space', | ||
|  |   paddingBottom: 'space', | ||
|  |   paddingLeft: 'space', | ||
|  |   paddingX: 'space', | ||
|  |   paddingY: 'space', | ||
|  |   top: 'space', | ||
|  |   right: 'space', | ||
|  |   bottom: 'space', | ||
|  |   left: 'space', | ||
|  |   gridGap: 'space', | ||
|  |   gridColumnGap: 'space', | ||
|  |   gridRowGap: 'space', | ||
|  |   gap: 'space', | ||
|  |   columnGap: 'space', | ||
|  |   rowGap: 'space', | ||
|  |   fontFamily: 'fonts', | ||
|  |   fontSize: 'fontSizes', | ||
|  |   fontWeight: 'fontWeights', | ||
|  |   lineHeight: 'lineHeights', | ||
|  |   letterSpacing: 'letterSpacings', | ||
|  |   border: 'borders', | ||
|  |   borderTop: 'borders', | ||
|  |   borderRight: 'borders', | ||
|  |   borderBottom: 'borders', | ||
|  |   borderLeft: 'borders', | ||
|  |   borderWidth: 'borderWidths', | ||
|  |   borderStyle: 'borderStyles', | ||
|  |   borderRadius: 'radii', | ||
|  |   borderTopRightRadius: 'radii', | ||
|  |   borderTopLeftRadius: 'radii', | ||
|  |   borderBottomRightRadius: 'radii', | ||
|  |   borderBottomLeftRadius: 'radii', | ||
|  |   borderTopWidth: 'borderWidths', | ||
|  |   borderTopColor: 'colors', | ||
|  |   borderTopStyle: 'borderStyles', | ||
|  |   borderBottomWidth: 'borderWidths', | ||
|  |   borderBottomColor: 'colors', | ||
|  |   borderBottomStyle: 'borderStyles', | ||
|  |   borderLeftWidth: 'borderWidths', | ||
|  |   borderLeftColor: 'colors', | ||
|  |   borderLeftStyle: 'borderStyles', | ||
|  |   borderRightWidth: 'borderWidths', | ||
|  |   borderRightColor: 'colors', | ||
|  |   borderRightStyle: 'borderStyles', | ||
|  |   outlineColor: 'colors', | ||
|  |   boxShadow: 'shadows', | ||
|  |   textShadow: 'shadows', | ||
|  |   zIndex: 'zIndices', | ||
|  |   width: 'sizes', | ||
|  |   minWidth: 'sizes', | ||
|  |   maxWidth: 'sizes', | ||
|  |   height: 'sizes', | ||
|  |   minHeight: 'sizes', | ||
|  |   maxHeight: 'sizes', | ||
|  |   flexBasis: 'sizes', | ||
|  |   size: 'sizes', | ||
|  |   // svg
 | ||
|  |   fill: 'colors', | ||
|  |   stroke: 'colors' | ||
|  | }; | ||
|  | 
 | ||
|  | var positiveOrNegative = function positiveOrNegative(scale, value) { | ||
|  |   if (typeof value !== 'number' || value >= 0) { | ||
|  |     return get(scale, value, value); | ||
|  |   } | ||
|  | 
 | ||
|  |   var absolute = Math.abs(value); | ||
|  |   var n = get(scale, absolute, absolute); | ||
|  |   if (typeof n === 'string') return '-' + n; | ||
|  |   return n * -1; | ||
|  | }; | ||
|  | 
 | ||
|  | var transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'top', 'bottom', 'left', 'right'].reduce(function (acc, curr) { | ||
|  |   var _extends2; | ||
|  | 
 | ||
|  |   return _extends({}, acc, (_extends2 = {}, _extends2[curr] = positiveOrNegative, _extends2)); | ||
|  | }, {}); | ||
|  | export var responsive = function responsive(styles) { | ||
|  |   return function (theme) { | ||
|  |     var next = {}; | ||
|  |     var breakpoints = get(theme, 'breakpoints', defaultBreakpoints); | ||
|  |     var mediaQueries = [null].concat(breakpoints.map(function (n) { | ||
|  |       return "@media screen and (min-width: " + n + ")"; | ||
|  |     })); | ||
|  | 
 | ||
|  |     for (var key in styles) { | ||
|  |       var value = typeof styles[key] === 'function' ? styles[key](theme) : styles[key]; | ||
|  |       if (value == null) continue; | ||
|  | 
 | ||
|  |       if (!Array.isArray(value)) { | ||
|  |         next[key] = value; | ||
|  |         continue; | ||
|  |       } | ||
|  | 
 | ||
|  |       for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) { | ||
|  |         var media = mediaQueries[i]; | ||
|  | 
 | ||
|  |         if (!media) { | ||
|  |           next[key] = value[i]; | ||
|  |           continue; | ||
|  |         } | ||
|  | 
 | ||
|  |         next[media] = next[media] || {}; | ||
|  |         if (value[i] == null) continue; | ||
|  |         next[media][key] = value[i]; | ||
|  |       } | ||
|  |     } | ||
|  | 
 | ||
|  |     return next; | ||
|  |   }; | ||
|  | }; | ||
|  | export var css = function css(args) { | ||
|  |   return function (props) { | ||
|  |     if (props === void 0) { | ||
|  |       props = {}; | ||
|  |     } | ||
|  | 
 | ||
|  |     var theme = _extends({}, defaultTheme, {}, props.theme || props); | ||
|  | 
 | ||
|  |     var result = {}; | ||
|  |     var obj = typeof args === 'function' ? args(theme) : args; | ||
|  |     var styles = responsive(obj)(theme); | ||
|  | 
 | ||
|  |     for (var key in styles) { | ||
|  |       var x = styles[key]; | ||
|  |       var val = typeof x === 'function' ? x(theme) : x; | ||
|  | 
 | ||
|  |       if (key === 'variant') { | ||
|  |         var variant = css(get(theme, val))(theme); | ||
|  |         result = _extends({}, result, {}, variant); | ||
|  |         continue; | ||
|  |       } | ||
|  | 
 | ||
|  |       if (val && typeof val === 'object') { | ||
|  |         result[key] = css(val)(theme); | ||
|  |         continue; | ||
|  |       } | ||
|  | 
 | ||
|  |       var prop = get(aliases, key, key); | ||
|  |       var scaleName = get(scales, prop); | ||
|  |       var scale = get(theme, scaleName, get(theme, prop, {})); | ||
|  |       var transform = get(transforms, prop, get); | ||
|  |       var value = transform(scale, val, val); | ||
|  | 
 | ||
|  |       if (multiples[prop]) { | ||
|  |         var dirs = multiples[prop]; | ||
|  | 
 | ||
|  |         for (var i = 0; i < dirs.length; i++) { | ||
|  |           result[dirs[i]] = value; | ||
|  |         } | ||
|  |       } else { | ||
|  |         result[prop] = value; | ||
|  |       } | ||
|  |     } | ||
|  | 
 | ||
|  |     return result; | ||
|  |   }; | ||
|  | }; | ||
|  | export default css; |