|
| 1 | +/* eslint-disable */ |
| 2 | + |
| 3 | +// based on https://github.com/developit/dlv |
| 4 | +export var get = function get(obj, key, def, p, undef) { |
| 5 | + key = key && key.split ? key.split('.') : [key]; |
| 6 | + |
| 7 | + for (p = 0; p < key.length; p++) { |
| 8 | + obj = obj ? obj[key[p]] : undef; |
| 9 | + } |
| 10 | + |
| 11 | + return obj === undef ? def : obj; |
| 12 | +}; |
| 13 | +const defaultBreakpoints = [40, 52, 64].map(function(n) { |
| 14 | + return n + 'em'; |
| 15 | +}); |
| 16 | +const aliases = { |
| 17 | + bg: 'backgroundColor', |
| 18 | + m: 'margin', |
| 19 | + mt: 'marginTop', |
| 20 | + mr: 'marginRight', |
| 21 | + mb: 'marginBottom', |
| 22 | + ml: 'marginLeft', |
| 23 | + mx: 'marginX', |
| 24 | + my: 'marginY', |
| 25 | + p: 'padding', |
| 26 | + pt: 'paddingTop', |
| 27 | + pr: 'paddingRight', |
| 28 | + pb: 'paddingBottom', |
| 29 | + pl: 'paddingLeft', |
| 30 | + px: 'paddingX', |
| 31 | + py: 'paddingY', |
| 32 | +}; |
| 33 | +const multiples = { |
| 34 | + marginX: ['marginLeft', 'marginRight'], |
| 35 | + marginY: ['marginTop', 'marginBottom'], |
| 36 | + paddingX: ['paddingLeft', 'paddingRight'], |
| 37 | + paddingY: ['paddingTop', 'paddingBottom'], |
| 38 | + size: ['width', 'height'], |
| 39 | +}; |
| 40 | +const scales = { |
| 41 | + color: 'colors', |
| 42 | + backgroundColor: 'colors', |
| 43 | + borderColor: 'colors', |
| 44 | + margin: 'space', |
| 45 | + marginTop: 'space', |
| 46 | + marginRight: 'space', |
| 47 | + marginBottom: 'space', |
| 48 | + marginLeft: 'space', |
| 49 | + marginX: 'space', |
| 50 | + marginY: 'space', |
| 51 | + padding: 'space', |
| 52 | + paddingTop: 'space', |
| 53 | + paddingRight: 'space', |
| 54 | + paddingBottom: 'space', |
| 55 | + paddingLeft: 'space', |
| 56 | + paddingX: 'space', |
| 57 | + paddingY: 'space', |
| 58 | + top: 'space', |
| 59 | + right: 'space', |
| 60 | + bottom: 'space', |
| 61 | + left: 'space', |
| 62 | + gridGap: 'space', |
| 63 | + gridColumnGap: 'space', |
| 64 | + gridRowGap: 'space', |
| 65 | + gap: 'space', |
| 66 | + columnGap: 'space', |
| 67 | + rowGap: 'space', |
| 68 | + fontFamily: 'fonts', |
| 69 | + fontSize: 'fontSizes', |
| 70 | + fontWeight: 'fontWeights', |
| 71 | + lineHeight: 'lineHeights', |
| 72 | + letterSpacing: 'letterSpacings', |
| 73 | + border: 'borders', |
| 74 | + borderTop: 'borders', |
| 75 | + borderRight: 'borders', |
| 76 | + borderBottom: 'borders', |
| 77 | + borderLeft: 'borders', |
| 78 | + borderWidth: 'borderWidths', |
| 79 | + borderStyle: 'borderStyles', |
| 80 | + borderRadius: 'radii', |
| 81 | + borderTopRightRadius: 'radii', |
| 82 | + borderTopLeftRadius: 'radii', |
| 83 | + borderBottomRightRadius: 'radii', |
| 84 | + borderBottomLeftRadius: 'radii', |
| 85 | + borderTopWidth: 'borderWidths', |
| 86 | + borderTopColor: 'colors', |
| 87 | + borderTopStyle: 'borderStyles', |
| 88 | + borderBottomWidth: 'borderWidths', |
| 89 | + borderBottomColor: 'colors', |
| 90 | + borderBottomStyle: 'borderStyles', |
| 91 | + borderLeftWidth: 'borderWidths', |
| 92 | + borderLeftColor: 'colors', |
| 93 | + borderLeftStyle: 'borderStyles', |
| 94 | + borderRightWidth: 'borderWidths', |
| 95 | + borderRightColor: 'colors', |
| 96 | + borderRightStyle: 'borderStyles', |
| 97 | + outlineColor: 'colors', |
| 98 | + boxShadow: 'shadows', |
| 99 | + textShadow: 'shadows', |
| 100 | + zIndex: 'zIndices', |
| 101 | + width: 'sizes', |
| 102 | + minWidth: 'sizes', |
| 103 | + maxWidth: 'sizes', |
| 104 | + height: 'sizes', |
| 105 | + minHeight: 'sizes', |
| 106 | + maxHeight: 'sizes', |
| 107 | + flexBasis: 'sizes', |
| 108 | + size: 'sizes', |
| 109 | + // svg |
| 110 | + fill: 'colors', |
| 111 | + stroke: 'colors', |
| 112 | +}; |
| 113 | + |
| 114 | +const positiveOrNegative = function positiveOrNegative(scale, value) { |
| 115 | + if (typeof value !== 'number' || value >= 0) { |
| 116 | + return get(scale, value, value); |
| 117 | + } |
| 118 | + |
| 119 | + const absolute = Math.abs(value); |
| 120 | + const n = get(scale, absolute, absolute); |
| 121 | + if (typeof n === 'string') return '-' + n; |
| 122 | + return n * -1; |
| 123 | +}; |
| 124 | + |
| 125 | +const transforms = [ |
| 126 | + 'margin', |
| 127 | + 'marginTop', |
| 128 | + 'marginRight', |
| 129 | + 'marginBottom', |
| 130 | + 'marginLeft', |
| 131 | + 'marginX', |
| 132 | + 'marginY', |
| 133 | + 'top', |
| 134 | + 'bottom', |
| 135 | + 'left', |
| 136 | + 'right', |
| 137 | +].reduce(function(acc, curr) { |
| 138 | + let _extends2; |
| 139 | + |
| 140 | + return { |
| 141 | + ...acc, |
| 142 | + ...((_extends2 = {}), (_extends2[curr] = positiveOrNegative), _extends2), |
| 143 | + }; |
| 144 | +}, {}); |
| 145 | +export var responsive = function responsive(styles) { |
| 146 | + return function(theme) { |
| 147 | + const next = {}; |
| 148 | + const breakpoints = get(theme, 'breakpoints', defaultBreakpoints); |
| 149 | + const mediaQueries = [null].concat( |
| 150 | + breakpoints.map(function(n) { |
| 151 | + return '@media screen and (min-width: ' + n + ')'; |
| 152 | + }) |
| 153 | + ); |
| 154 | + |
| 155 | + for (const key in styles) { |
| 156 | + const value = |
| 157 | + typeof styles[key] === 'function' ? styles[key](theme) : styles[key]; |
| 158 | + if (value == null) continue; |
| 159 | + |
| 160 | + if (!Array.isArray(value)) { |
| 161 | + next[key] = value; |
| 162 | + continue; |
| 163 | + } |
| 164 | + |
| 165 | + for (let i = 0; i < value.slice(0, mediaQueries.length).length; i++) { |
| 166 | + const media = mediaQueries[i]; |
| 167 | + |
| 168 | + if (!media) { |
| 169 | + next[key] = value[i]; |
| 170 | + continue; |
| 171 | + } |
| 172 | + |
| 173 | + next[media] = next[media] || {}; |
| 174 | + if (value[i] == null) continue; |
| 175 | + next[media][key] = value[i]; |
| 176 | + } |
| 177 | + } |
| 178 | + |
| 179 | + return next; |
| 180 | + }; |
| 181 | +}; |
| 182 | +export var css = function css(args) { |
| 183 | + return function(props) { |
| 184 | + if (props === void 0) { |
| 185 | + props = {}; |
| 186 | + } |
| 187 | + |
| 188 | + const theme = props.theme || props; |
| 189 | + |
| 190 | + let result = {}; |
| 191 | + const obj = typeof args === 'function' ? args(theme) : args; |
| 192 | + const styles = responsive(obj)(theme); |
| 193 | + |
| 194 | + for (const key in styles) { |
| 195 | + const x = styles[key]; |
| 196 | + const val = typeof x === 'function' ? x(theme) : x; |
| 197 | + |
| 198 | + if (key === 'variant') { |
| 199 | + const variant = css(get(theme, val))(theme); |
| 200 | + result = { ...result, ...variant }; |
| 201 | + continue; |
| 202 | + } |
| 203 | + |
| 204 | + if (val && typeof val === 'object') { |
| 205 | + result[key] = css(val)(theme); |
| 206 | + continue; |
| 207 | + } |
| 208 | + |
| 209 | + const prop = get(aliases, key, key); |
| 210 | + const scaleName = get(scales, prop); |
| 211 | + const scale = get(theme, scaleName, get(theme, prop, {})); |
| 212 | + const transform = get(transforms, prop, get); |
| 213 | + const value = transform(scale, val, val); |
| 214 | + |
| 215 | + if (multiples[prop]) { |
| 216 | + const dirs = multiples[prop]; |
| 217 | + |
| 218 | + for (let i = 0; i < dirs.length; i++) { |
| 219 | + result[dirs[i]] = value; |
| 220 | + } |
| 221 | + } else { |
| 222 | + result[prop] = value; |
| 223 | + } |
| 224 | + } |
| 225 | + |
| 226 | + return result; |
| 227 | + }; |
| 228 | +}; |
| 229 | +export default css; |
0 commit comments