@theme-ui/css
Advanced tools
@theme-ui/css - npm Package Compare versions
Comparing version 0.15.0--canary.2215.ff6a38fe74fc9efa00cc1961a6061e030a67fce5.0 to 0.15.0--canary.2250.a5dfac6ee7342fb74c68b915d82541eea905f5a7.0
@@ -5,2 +5,20 @@ 'use strict'; | ||
| 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); | ||
| } | ||
| /** | ||
@@ -18,5 +36,5 @@ * Allows for nested scales with shorthand values | ||
| const THEME_UI_DEFAULT_KEY = '__default'; | ||
| var THEME_UI_DEFAULT_KEY = '__default'; | ||
| const hasDefault = x => { | ||
| var hasDefault = function hasDefault(x) { | ||
| return typeof x === 'object' && x !== null && THEME_UI_DEFAULT_KEY in x; | ||
@@ -36,3 +54,3 @@ }; | ||
| function get(obj, path, fallback, p, undef) { | ||
| const pathArray = path && typeof path === 'string' ? path.split('.') : [path]; | ||
| var pathArray = path && typeof path === 'string' ? path.split('.') : [path]; | ||
@@ -46,15 +64,13 @@ for (p = 0; p < pathArray.length; p++) { | ||
| } | ||
| const getObjectWithVariants = (obj, theme) => { | ||
| var getObjectWithVariants = function getObjectWithVariants(obj, theme) { | ||
| if (obj && obj['variant']) { | ||
| let result = {}; | ||
| var result = {}; | ||
| for (const key in obj) { | ||
| const x = obj[key]; | ||
| for (var key in obj) { | ||
| var x = obj[key]; | ||
| if (key === 'variant') { | ||
| const val = typeof x === 'function' ? x(theme) : x; | ||
| const variant = getObjectWithVariants(get(theme, val), theme); | ||
| result = { ...result, | ||
| ...variant | ||
| }; | ||
| var val = typeof x === 'function' ? x(theme) : x; | ||
| var variant = getObjectWithVariants(get(theme, val), theme); | ||
| result = _extends({}, result, variant); | ||
| } else { | ||
@@ -70,8 +86,10 @@ result[key] = x; | ||
| }; | ||
| const defaultBreakpoints = [40, 52, 64].map(n => n + 'em'); | ||
| const defaultTheme = { | ||
| 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] | ||
| }; | ||
| const aliases = { | ||
| var aliases = { | ||
| bg: 'backgroundColor', | ||
@@ -93,3 +111,3 @@ m: 'margin', | ||
| }; | ||
| const multiples = { | ||
| var multiples = { | ||
| marginX: ['marginLeft', 'marginRight'], | ||
@@ -105,3 +123,3 @@ marginY: ['marginTop', 'marginBottom'], | ||
| }; | ||
| const scales = { | ||
| var scales = { | ||
| color: 'colors', | ||
@@ -255,13 +273,14 @@ background: 'colors', | ||
| const positiveOrNegative = (scale, value) => { | ||
| var positiveOrNegative = function positiveOrNegative(scale, value) { | ||
| if (typeof value !== 'number' || value >= 0) { | ||
| if (typeof value === 'string' && value.startsWith('-')) { | ||
| const valueWithoutMinus = value.substring(1); | ||
| const n = get(scale, valueWithoutMinus, valueWithoutMinus); | ||
| var valueWithoutMinus = value.substring(1); | ||
| if (typeof n === 'number') { | ||
| return n * -1; | ||
| var _n = get(scale, valueWithoutMinus, valueWithoutMinus); | ||
| if (typeof _n === 'number') { | ||
| return _n * -1; | ||
| } | ||
| return `-${n}`; | ||
| return "-" + _n; | ||
| } | ||
@@ -272,4 +291,4 @@ | ||
| const absolute = Math.abs(value); | ||
| const n = get(scale, absolute, absolute); | ||
| var absolute = Math.abs(value); | ||
| var n = get(scale, absolute, absolute); | ||
| if (typeof n === 'string') return '-' + n; | ||
@@ -279,90 +298,105 @@ return Number(n) * -1; | ||
| const transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginBlock', 'marginBlockEnd', 'marginBlockStart', 'marginInline', 'marginInlineEnd', 'marginInlineStart', 'top', 'bottom', 'left', 'right'].reduce((acc, curr) => ({ ...acc, | ||
| [curr]: positiveOrNegative | ||
| }), {}); | ||
| var transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginBlock', 'marginBlockEnd', 'marginBlockStart', 'marginInline', 'marginInlineEnd', 'marginInlineStart', 'top', 'bottom', 'left', 'right'].reduce(function (acc, curr) { | ||
| var _extends2; | ||
| const responsive = styles => theme => { | ||
| const next = {}; | ||
| const breakpoints = theme && theme.breakpoints || defaultBreakpoints; | ||
| const mediaQueries = [null, ...breakpoints.map(n => n.includes('@media') ? n : `@media screen and (min-width: ${n})`)]; | ||
| return _extends({}, acc, (_extends2 = {}, _extends2[curr] = positiveOrNegative, _extends2)); | ||
| }, {}); | ||
| for (const k in styles) { | ||
| const key = k; | ||
| let value = styles[key]; | ||
| var responsive = function responsive(styles) { | ||
| return function (theme) { | ||
| var next = {}; | ||
| var breakpoints = theme && theme.breakpoints || defaultBreakpoints; | ||
| var mediaQueries = [null].concat(breakpoints.map(function (n) { | ||
| return n.includes('@media') ? n : "@media screen and (min-width: " + n + ")"; | ||
| })); | ||
| if (typeof value === 'function') { | ||
| value = value(theme || {}); | ||
| } | ||
| for (var k in styles) { | ||
| var key = k; | ||
| var value = styles[key]; | ||
| if (value === false || value == null) { | ||
| continue; | ||
| } | ||
| if (typeof value === 'function') { | ||
| value = value(theme || {}); | ||
| } | ||
| if (!Array.isArray(value)) { | ||
| next[key] = value; | ||
| continue; | ||
| } | ||
| if (value === false || value == null) { | ||
| continue; | ||
| } | ||
| for (let i = 0; i < value.slice(0, mediaQueries.length).length; i++) { | ||
| const media = mediaQueries[i]; | ||
| if (!media) { | ||
| next[key] = value[i]; | ||
| if (!Array.isArray(value)) { | ||
| next[key] = value; | ||
| continue; | ||
| } | ||
| next[media] = next[media] || {}; | ||
| if (value[i] == null) continue; | ||
| next[media][key] = value[i]; | ||
| 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; | ||
| return next; | ||
| }; | ||
| }; | ||
| const css = (args = {}) => (props = {}) => { | ||
| const theme = { ...defaultTheme, | ||
| ...('theme' in props ? props.theme : props) | ||
| }; // insert variant props before responsive styles, so they can be merged | ||
| // we need to maintain order of the style props, so if a variant is place in the middle | ||
| // of other props, it will extends its props at that same location order. | ||
| var css = function css(args) { | ||
| if (args === void 0) { | ||
| args = {}; | ||
| } | ||
| const obj = getObjectWithVariants(typeof args === 'function' ? args(theme) : args, theme); | ||
| const styles = responsive(obj)(theme); | ||
| let result = {}; | ||
| return function (props) { | ||
| if (props === void 0) { | ||
| props = {}; | ||
| } | ||
| for (const key in styles) { | ||
| const x = styles[key]; | ||
| const val = typeof x === 'function' ? x(theme) : x; | ||
| var theme = _extends({}, defaultTheme, 'theme' in props ? props.theme : props); // insert variant props before responsive styles, so they can be merged | ||
| // we need to maintain order of the style props, so if a variant is place in the middle | ||
| // of other props, it will extends its props at that same location order. | ||
| if (val && typeof val === 'object') { | ||
| if (hasDefault(val)) { | ||
| result[key] = val[THEME_UI_DEFAULT_KEY]; | ||
| continue; | ||
| } // On type level, val can also be an array here, | ||
| // but we transform all arrays in `responsive` function. | ||
| var obj = getObjectWithVariants(typeof args === 'function' ? args(theme) : args, theme); | ||
| var styles = responsive(obj)(theme); | ||
| var result = {}; | ||
| result[key] = css(val)(theme); | ||
| continue; | ||
| } | ||
| for (var key in styles) { | ||
| var x = styles[key]; | ||
| var val = typeof x === 'function' ? x(theme) : x; | ||
| const prop = key in aliases ? aliases[key] : key; | ||
| const scaleName = prop in scales ? scales[prop] : undefined; | ||
| const scale = scaleName ? theme == null ? void 0 : theme[scaleName] : get(theme, prop, {}); | ||
| const transform = get(transforms, prop, get); | ||
| const value = transform(scale, val, val); | ||
| if (val && typeof val === 'object') { | ||
| if (hasDefault(val)) { | ||
| result[key] = val[THEME_UI_DEFAULT_KEY]; | ||
| continue; | ||
| } // On type level, val can also be an array here, | ||
| // but we transform all arrays in `responsive` function. | ||
| if (prop in multiples) { | ||
| const dirs = multiples[prop]; | ||
| for (let i = 0; i < dirs.length; i++) { | ||
| result[dirs[i]] = value; | ||
| result[key] = css(val)(theme); | ||
| continue; | ||
| } | ||
| } else { | ||
| result[prop] = value; | ||
| var prop = key in aliases ? aliases[key] : key; | ||
| var scaleName = prop in scales ? scales[prop] : undefined; | ||
| var scale = scaleName ? theme == null ? void 0 : theme[scaleName] : get(theme, prop, {}); | ||
| var transform = get(transforms, prop, get); | ||
| var value = transform(scale, val, val); | ||
| if (prop in multiples) { | ||
| var dirs = multiples[prop]; | ||
| for (var i = 0; i < dirs.length; i++) { | ||
| result[dirs[i]] = value; | ||
| } | ||
| } else { | ||
| result[prop] = value; | ||
| } | ||
| } | ||
| } | ||
| return result; | ||
| return result; | ||
| }; | ||
| }; | ||
@@ -369,0 +403,0 @@ |
@@ -5,2 +5,20 @@ 'use strict'; | ||
| 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); | ||
| } | ||
| /** | ||
@@ -18,5 +36,5 @@ * Allows for nested scales with shorthand values | ||
| const THEME_UI_DEFAULT_KEY = '__default'; | ||
| var THEME_UI_DEFAULT_KEY = '__default'; | ||
| const hasDefault = x => { | ||
| var hasDefault = function hasDefault(x) { | ||
| return typeof x === 'object' && x !== null && THEME_UI_DEFAULT_KEY in x; | ||
@@ -36,3 +54,3 @@ }; | ||
| function get(obj, path, fallback, p, undef) { | ||
| const pathArray = path && typeof path === 'string' ? path.split('.') : [path]; | ||
| var pathArray = path && typeof path === 'string' ? path.split('.') : [path]; | ||
@@ -46,15 +64,13 @@ for (p = 0; p < pathArray.length; p++) { | ||
| } | ||
| const getObjectWithVariants = (obj, theme) => { | ||
| var getObjectWithVariants = function getObjectWithVariants(obj, theme) { | ||
| if (obj && obj['variant']) { | ||
| let result = {}; | ||
| var result = {}; | ||
| for (const key in obj) { | ||
| const x = obj[key]; | ||
| for (var key in obj) { | ||
| var x = obj[key]; | ||
| if (key === 'variant') { | ||
| const val = typeof x === 'function' ? x(theme) : x; | ||
| const variant = getObjectWithVariants(get(theme, val), theme); | ||
| result = { ...result, | ||
| ...variant | ||
| }; | ||
| var val = typeof x === 'function' ? x(theme) : x; | ||
| var variant = getObjectWithVariants(get(theme, val), theme); | ||
| result = _extends({}, result, variant); | ||
| } else { | ||
@@ -70,8 +86,10 @@ result[key] = x; | ||
| }; | ||
| const defaultBreakpoints = [40, 52, 64].map(n => n + 'em'); | ||
| const defaultTheme = { | ||
| 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] | ||
| }; | ||
| const aliases = { | ||
| var aliases = { | ||
| bg: 'backgroundColor', | ||
@@ -93,3 +111,3 @@ m: 'margin', | ||
| }; | ||
| const multiples = { | ||
| var multiples = { | ||
| marginX: ['marginLeft', 'marginRight'], | ||
@@ -105,3 +123,3 @@ marginY: ['marginTop', 'marginBottom'], | ||
| }; | ||
| const scales = { | ||
| var scales = { | ||
| color: 'colors', | ||
@@ -255,13 +273,14 @@ background: 'colors', | ||
| const positiveOrNegative = (scale, value) => { | ||
| var positiveOrNegative = function positiveOrNegative(scale, value) { | ||
| if (typeof value !== 'number' || value >= 0) { | ||
| if (typeof value === 'string' && value.startsWith('-')) { | ||
| const valueWithoutMinus = value.substring(1); | ||
| const n = get(scale, valueWithoutMinus, valueWithoutMinus); | ||
| var valueWithoutMinus = value.substring(1); | ||
| if (typeof n === 'number') { | ||
| return n * -1; | ||
| var _n = get(scale, valueWithoutMinus, valueWithoutMinus); | ||
| if (typeof _n === 'number') { | ||
| return _n * -1; | ||
| } | ||
| return `-${n}`; | ||
| return "-" + _n; | ||
| } | ||
@@ -272,4 +291,4 @@ | ||
| const absolute = Math.abs(value); | ||
| const n = get(scale, absolute, absolute); | ||
| var absolute = Math.abs(value); | ||
| var n = get(scale, absolute, absolute); | ||
| if (typeof n === 'string') return '-' + n; | ||
@@ -279,90 +298,105 @@ return Number(n) * -1; | ||
| const transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginBlock', 'marginBlockEnd', 'marginBlockStart', 'marginInline', 'marginInlineEnd', 'marginInlineStart', 'top', 'bottom', 'left', 'right'].reduce((acc, curr) => ({ ...acc, | ||
| [curr]: positiveOrNegative | ||
| }), {}); | ||
| var transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginBlock', 'marginBlockEnd', 'marginBlockStart', 'marginInline', 'marginInlineEnd', 'marginInlineStart', 'top', 'bottom', 'left', 'right'].reduce(function (acc, curr) { | ||
| var _extends2; | ||
| const responsive = styles => theme => { | ||
| const next = {}; | ||
| const breakpoints = theme && theme.breakpoints || defaultBreakpoints; | ||
| const mediaQueries = [null, ...breakpoints.map(n => n.includes('@media') ? n : `@media screen and (min-width: ${n})`)]; | ||
| return _extends({}, acc, (_extends2 = {}, _extends2[curr] = positiveOrNegative, _extends2)); | ||
| }, {}); | ||
| for (const k in styles) { | ||
| const key = k; | ||
| let value = styles[key]; | ||
| var responsive = function responsive(styles) { | ||
| return function (theme) { | ||
| var next = {}; | ||
| var breakpoints = theme && theme.breakpoints || defaultBreakpoints; | ||
| var mediaQueries = [null].concat(breakpoints.map(function (n) { | ||
| return n.includes('@media') ? n : "@media screen and (min-width: " + n + ")"; | ||
| })); | ||
| if (typeof value === 'function') { | ||
| value = value(theme || {}); | ||
| } | ||
| for (var k in styles) { | ||
| var key = k; | ||
| var value = styles[key]; | ||
| if (value === false || value == null) { | ||
| continue; | ||
| } | ||
| if (typeof value === 'function') { | ||
| value = value(theme || {}); | ||
| } | ||
| if (!Array.isArray(value)) { | ||
| next[key] = value; | ||
| continue; | ||
| } | ||
| if (value === false || value == null) { | ||
| continue; | ||
| } | ||
| for (let i = 0; i < value.slice(0, mediaQueries.length).length; i++) { | ||
| const media = mediaQueries[i]; | ||
| if (!media) { | ||
| next[key] = value[i]; | ||
| if (!Array.isArray(value)) { | ||
| next[key] = value; | ||
| continue; | ||
| } | ||
| next[media] = next[media] || {}; | ||
| if (value[i] == null) continue; | ||
| next[media][key] = value[i]; | ||
| 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; | ||
| return next; | ||
| }; | ||
| }; | ||
| const css = (args = {}) => (props = {}) => { | ||
| const theme = { ...defaultTheme, | ||
| ...('theme' in props ? props.theme : props) | ||
| }; // insert variant props before responsive styles, so they can be merged | ||
| // we need to maintain order of the style props, so if a variant is place in the middle | ||
| // of other props, it will extends its props at that same location order. | ||
| var css = function css(args) { | ||
| if (args === void 0) { | ||
| args = {}; | ||
| } | ||
| const obj = getObjectWithVariants(typeof args === 'function' ? args(theme) : args, theme); | ||
| const styles = responsive(obj)(theme); | ||
| let result = {}; | ||
| return function (props) { | ||
| if (props === void 0) { | ||
| props = {}; | ||
| } | ||
| for (const key in styles) { | ||
| const x = styles[key]; | ||
| const val = typeof x === 'function' ? x(theme) : x; | ||
| var theme = _extends({}, defaultTheme, 'theme' in props ? props.theme : props); // insert variant props before responsive styles, so they can be merged | ||
| // we need to maintain order of the style props, so if a variant is place in the middle | ||
| // of other props, it will extends its props at that same location order. | ||
| if (val && typeof val === 'object') { | ||
| if (hasDefault(val)) { | ||
| result[key] = val[THEME_UI_DEFAULT_KEY]; | ||
| continue; | ||
| } // On type level, val can also be an array here, | ||
| // but we transform all arrays in `responsive` function. | ||
| var obj = getObjectWithVariants(typeof args === 'function' ? args(theme) : args, theme); | ||
| var styles = responsive(obj)(theme); | ||
| var result = {}; | ||
| result[key] = css(val)(theme); | ||
| continue; | ||
| } | ||
| for (var key in styles) { | ||
| var x = styles[key]; | ||
| var val = typeof x === 'function' ? x(theme) : x; | ||
| const prop = key in aliases ? aliases[key] : key; | ||
| const scaleName = prop in scales ? scales[prop] : undefined; | ||
| const scale = scaleName ? theme == null ? void 0 : theme[scaleName] : get(theme, prop, {}); | ||
| const transform = get(transforms, prop, get); | ||
| const value = transform(scale, val, val); | ||
| if (val && typeof val === 'object') { | ||
| if (hasDefault(val)) { | ||
| result[key] = val[THEME_UI_DEFAULT_KEY]; | ||
| continue; | ||
| } // On type level, val can also be an array here, | ||
| // but we transform all arrays in `responsive` function. | ||
| if (prop in multiples) { | ||
| const dirs = multiples[prop]; | ||
| for (let i = 0; i < dirs.length; i++) { | ||
| result[dirs[i]] = value; | ||
| result[key] = css(val)(theme); | ||
| continue; | ||
| } | ||
| } else { | ||
| result[prop] = value; | ||
| var prop = key in aliases ? aliases[key] : key; | ||
| var scaleName = prop in scales ? scales[prop] : undefined; | ||
| var scale = scaleName ? theme == null ? void 0 : theme[scaleName] : get(theme, prop, {}); | ||
| var transform = get(transforms, prop, get); | ||
| var value = transform(scale, val, val); | ||
| if (prop in multiples) { | ||
| var dirs = multiples[prop]; | ||
| for (var i = 0; i < dirs.length; i++) { | ||
| result[dirs[i]] = value; | ||
| } | ||
| } else { | ||
| result[prop] = value; | ||
| } | ||
| } | ||
| } | ||
| return result; | ||
| return result; | ||
| }; | ||
| }; | ||
@@ -369,0 +403,0 @@ |
@@ -0,1 +1,19 @@ | ||
| 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); | ||
| } | ||
| /** | ||
@@ -13,5 +31,5 @@ * Allows for nested scales with shorthand values | ||
| const THEME_UI_DEFAULT_KEY = '__default'; | ||
| var THEME_UI_DEFAULT_KEY = '__default'; | ||
| const hasDefault = x => { | ||
| var hasDefault = function hasDefault(x) { | ||
| return typeof x === 'object' && x !== null && THEME_UI_DEFAULT_KEY in x; | ||
@@ -31,3 +49,3 @@ }; | ||
| function get(obj, path, fallback, p, undef) { | ||
| const pathArray = path && typeof path === 'string' ? path.split('.') : [path]; | ||
| var pathArray = path && typeof path === 'string' ? path.split('.') : [path]; | ||
@@ -41,15 +59,13 @@ for (p = 0; p < pathArray.length; p++) { | ||
| } | ||
| const getObjectWithVariants = (obj, theme) => { | ||
| var getObjectWithVariants = function getObjectWithVariants(obj, theme) { | ||
| if (obj && obj['variant']) { | ||
| let result = {}; | ||
| var result = {}; | ||
| for (const key in obj) { | ||
| const x = obj[key]; | ||
| for (var key in obj) { | ||
| var x = obj[key]; | ||
| if (key === 'variant') { | ||
| const val = typeof x === 'function' ? x(theme) : x; | ||
| const variant = getObjectWithVariants(get(theme, val), theme); | ||
| result = { ...result, | ||
| ...variant | ||
| }; | ||
| var val = typeof x === 'function' ? x(theme) : x; | ||
| var variant = getObjectWithVariants(get(theme, val), theme); | ||
| result = _extends({}, result, variant); | ||
| } else { | ||
@@ -65,8 +81,10 @@ result[key] = x; | ||
| }; | ||
| const defaultBreakpoints = [40, 52, 64].map(n => n + 'em'); | ||
| const defaultTheme = { | ||
| 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] | ||
| }; | ||
| const aliases = { | ||
| var aliases = { | ||
| bg: 'backgroundColor', | ||
@@ -88,3 +106,3 @@ m: 'margin', | ||
| }; | ||
| const multiples = { | ||
| var multiples = { | ||
| marginX: ['marginLeft', 'marginRight'], | ||
@@ -100,3 +118,3 @@ marginY: ['marginTop', 'marginBottom'], | ||
| }; | ||
| const scales = { | ||
| var scales = { | ||
| color: 'colors', | ||
@@ -250,13 +268,14 @@ background: 'colors', | ||
| const positiveOrNegative = (scale, value) => { | ||
| var positiveOrNegative = function positiveOrNegative(scale, value) { | ||
| if (typeof value !== 'number' || value >= 0) { | ||
| if (typeof value === 'string' && value.startsWith('-')) { | ||
| const valueWithoutMinus = value.substring(1); | ||
| const n = get(scale, valueWithoutMinus, valueWithoutMinus); | ||
| var valueWithoutMinus = value.substring(1); | ||
| if (typeof n === 'number') { | ||
| return n * -1; | ||
| var _n = get(scale, valueWithoutMinus, valueWithoutMinus); | ||
| if (typeof _n === 'number') { | ||
| return _n * -1; | ||
| } | ||
| return `-${n}`; | ||
| return "-" + _n; | ||
| } | ||
@@ -267,4 +286,4 @@ | ||
| const absolute = Math.abs(value); | ||
| const n = get(scale, absolute, absolute); | ||
| var absolute = Math.abs(value); | ||
| var n = get(scale, absolute, absolute); | ||
| if (typeof n === 'string') return '-' + n; | ||
@@ -274,92 +293,107 @@ return Number(n) * -1; | ||
| const transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginBlock', 'marginBlockEnd', 'marginBlockStart', 'marginInline', 'marginInlineEnd', 'marginInlineStart', 'top', 'bottom', 'left', 'right'].reduce((acc, curr) => ({ ...acc, | ||
| [curr]: positiveOrNegative | ||
| }), {}); | ||
| var transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginBlock', 'marginBlockEnd', 'marginBlockStart', 'marginInline', 'marginInlineEnd', 'marginInlineStart', 'top', 'bottom', 'left', 'right'].reduce(function (acc, curr) { | ||
| var _extends2; | ||
| const responsive = styles => theme => { | ||
| const next = {}; | ||
| const breakpoints = theme && theme.breakpoints || defaultBreakpoints; | ||
| const mediaQueries = [null, ...breakpoints.map(n => n.includes('@media') ? n : `@media screen and (min-width: ${n})`)]; | ||
| return _extends({}, acc, (_extends2 = {}, _extends2[curr] = positiveOrNegative, _extends2)); | ||
| }, {}); | ||
| for (const k in styles) { | ||
| const key = k; | ||
| let value = styles[key]; | ||
| var responsive = function responsive(styles) { | ||
| return function (theme) { | ||
| var next = {}; | ||
| var breakpoints = theme && theme.breakpoints || defaultBreakpoints; | ||
| var mediaQueries = [null].concat(breakpoints.map(function (n) { | ||
| return n.includes('@media') ? n : "@media screen and (min-width: " + n + ")"; | ||
| })); | ||
| if (typeof value === 'function') { | ||
| value = value(theme || {}); | ||
| } | ||
| for (var k in styles) { | ||
| var key = k; | ||
| var value = styles[key]; | ||
| if (value === false || value == null) { | ||
| continue; | ||
| } | ||
| if (typeof value === 'function') { | ||
| value = value(theme || {}); | ||
| } | ||
| if (!Array.isArray(value)) { | ||
| next[key] = value; | ||
| continue; | ||
| } | ||
| if (value === false || value == null) { | ||
| continue; | ||
| } | ||
| for (let i = 0; i < value.slice(0, mediaQueries.length).length; i++) { | ||
| const media = mediaQueries[i]; | ||
| if (!media) { | ||
| next[key] = value[i]; | ||
| if (!Array.isArray(value)) { | ||
| next[key] = value; | ||
| continue; | ||
| } | ||
| next[media] = next[media] || {}; | ||
| if (value[i] == null) continue; | ||
| next[media][key] = value[i]; | ||
| 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; | ||
| return next; | ||
| }; | ||
| }; | ||
| const css = (args = {}) => (props = {}) => { | ||
| const theme = { ...defaultTheme, | ||
| ...('theme' in props ? props.theme : props) | ||
| }; // insert variant props before responsive styles, so they can be merged | ||
| // we need to maintain order of the style props, so if a variant is place in the middle | ||
| // of other props, it will extends its props at that same location order. | ||
| var css = function css(args) { | ||
| if (args === void 0) { | ||
| args = {}; | ||
| } | ||
| const obj = getObjectWithVariants(typeof args === 'function' ? args(theme) : args, theme); | ||
| const styles = responsive(obj)(theme); | ||
| let result = {}; | ||
| return function (props) { | ||
| if (props === void 0) { | ||
| props = {}; | ||
| } | ||
| for (const key in styles) { | ||
| const x = styles[key]; | ||
| const val = typeof x === 'function' ? x(theme) : x; | ||
| var theme = _extends({}, defaultTheme, 'theme' in props ? props.theme : props); // insert variant props before responsive styles, so they can be merged | ||
| // we need to maintain order of the style props, so if a variant is place in the middle | ||
| // of other props, it will extends its props at that same location order. | ||
| if (val && typeof val === 'object') { | ||
| if (hasDefault(val)) { | ||
| result[key] = val[THEME_UI_DEFAULT_KEY]; | ||
| continue; | ||
| } // On type level, val can also be an array here, | ||
| // but we transform all arrays in `responsive` function. | ||
| var obj = getObjectWithVariants(typeof args === 'function' ? args(theme) : args, theme); | ||
| var styles = responsive(obj)(theme); | ||
| var result = {}; | ||
| result[key] = css(val)(theme); | ||
| continue; | ||
| } | ||
| for (var key in styles) { | ||
| var x = styles[key]; | ||
| var val = typeof x === 'function' ? x(theme) : x; | ||
| const prop = key in aliases ? aliases[key] : key; | ||
| const scaleName = prop in scales ? scales[prop] : undefined; | ||
| const scale = scaleName ? theme == null ? void 0 : theme[scaleName] : get(theme, prop, {}); | ||
| const transform = get(transforms, prop, get); | ||
| const value = transform(scale, val, val); | ||
| if (val && typeof val === 'object') { | ||
| if (hasDefault(val)) { | ||
| result[key] = val[THEME_UI_DEFAULT_KEY]; | ||
| continue; | ||
| } // On type level, val can also be an array here, | ||
| // but we transform all arrays in `responsive` function. | ||
| if (prop in multiples) { | ||
| const dirs = multiples[prop]; | ||
| for (let i = 0; i < dirs.length; i++) { | ||
| result[dirs[i]] = value; | ||
| result[key] = css(val)(theme); | ||
| continue; | ||
| } | ||
| } else { | ||
| result[prop] = value; | ||
| var prop = key in aliases ? aliases[key] : key; | ||
| var scaleName = prop in scales ? scales[prop] : undefined; | ||
| var scale = scaleName ? theme == null ? void 0 : theme[scaleName] : get(theme, prop, {}); | ||
| var transform = get(transforms, prop, get); | ||
| var value = transform(scale, val, val); | ||
| if (prop in multiples) { | ||
| var dirs = multiples[prop]; | ||
| for (var i = 0; i < dirs.length; i++) { | ||
| result[dirs[i]] = value; | ||
| } | ||
| } else { | ||
| result[prop] = value; | ||
| } | ||
| } | ||
| } | ||
| return result; | ||
| return result; | ||
| }; | ||
| }; | ||
| export { THEME_UI_DEFAULT_KEY, css, defaultBreakpoints, get, getObjectWithVariants, multiples, scales }; |
| { | ||
| "name": "@theme-ui/css", | ||
| "version": "0.15.0--canary.2215.ff6a38fe74fc9efa00cc1961a6061e030a67fce5.0", | ||
| "version": "0.15.0--canary.2250.a5dfac6ee7342fb74c68b915d82541eea905f5a7.0", | ||
| "source": "src/index.ts", | ||
@@ -27,3 +27,3 @@ "main": "dist/theme-ui-css.cjs.js", | ||
| }, | ||
| "gitHead": "ff6a38fe74fc9efa00cc1961a6061e030a67fce5" | ||
| "gitHead": "a5dfac6ee7342fb74c68b915d82541eea905f5a7" | ||
| } |
@@ -9,3 +9,5 @@ 'use strict'; | ||
| */ | ||
| const makeTheme = theme => theme; | ||
| var makeTheme = function makeTheme(theme) { | ||
| return theme; | ||
| }; | ||
| /** | ||
@@ -16,4 +18,8 @@ * Constrained identity function used to create a styles dictionary | ||
| const makeStyles = styles => styles; | ||
| const makeColorsScale = colors => colors; | ||
| var makeStyles = function makeStyles(styles) { | ||
| return styles; | ||
| }; | ||
| var makeColorsScale = function makeColorsScale(colors) { | ||
| return colors; | ||
| }; | ||
@@ -20,0 +26,0 @@ exports.makeColorsScale = makeColorsScale; |
@@ -9,3 +9,5 @@ 'use strict'; | ||
| */ | ||
| const makeTheme = theme => theme; | ||
| var makeTheme = function makeTheme(theme) { | ||
| return theme; | ||
| }; | ||
| /** | ||
@@ -16,4 +18,8 @@ * Constrained identity function used to create a styles dictionary | ||
| const makeStyles = styles => styles; | ||
| const makeColorsScale = colors => colors; | ||
| var makeStyles = function makeStyles(styles) { | ||
| return styles; | ||
| }; | ||
| var makeColorsScale = function makeColorsScale(colors) { | ||
| return colors; | ||
| }; | ||
@@ -20,0 +26,0 @@ exports.makeColorsScale = makeColorsScale; |
@@ -5,3 +5,5 @@ /** | ||
| */ | ||
| const makeTheme = theme => theme; | ||
| var makeTheme = function makeTheme(theme) { | ||
| return theme; | ||
| }; | ||
| /** | ||
@@ -12,5 +14,9 @@ * Constrained identity function used to create a styles dictionary | ||
| const makeStyles = styles => styles; | ||
| const makeColorsScale = colors => colors; | ||
| var makeStyles = function makeStyles(styles) { | ||
| return styles; | ||
| }; | ||
| var makeColorsScale = function makeColorsScale(colors) { | ||
| return colors; | ||
| }; | ||
| export { makeColorsScale, makeStyles, makeTheme }; |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.69%
159446
- Lines of code
- increased by2.22%
4290
No dependency changes