Socket
Socket
Sign inDemoInstall

system-props

Package Overview
Dependencies
0
Maintainers
1
Versions
36
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.19.0-4 to 0.19.0-5

src/core/tests/css.test.ts

8

dist/core/createCss.d.ts

@@ -1,8 +0,8 @@

import { Theme, SystemConfig, PrefixOptions } from '../types';
import { PropConfigCollection, Theme, PrefixOptions } from '../types';
import { CSSObject } from '../css-prop';
declare type CSSFunctionArgs<T extends PrefixOptions> = CSSObject<T> | ((theme: Theme) => CSSObject<T>);
export declare type CSSFunction<T extends PrefixOptions> = (args?: CSSFunctionArgs<T>) => (theme: Theme) => CSSObject<T> | undefined;
export declare const createCss: (config: {
[x: string]: SystemConfig;
}, tokenPrefix: 'all' | 'prefix' | 'noprefix') => CSSFunction<PrefixOptions>;
export declare const createCss: (propConfig: PropConfigCollection, options?: {
tokenPrefix: PrefixOptions;
}) => CSSFunction<PrefixOptions>;
export {};

10

dist/core/createSystem.d.ts

@@ -1,4 +0,3 @@

import { SystemConfig, PropConfigCollection, Cache, PrefixDefault, PrefixOptions } from '../types';
import { CSSFunction } from './createCss';
export interface Parser<TokenPrefix extends PrefixOptions = PrefixDefault> {
import { SystemConfig, PropConfigCollection, Cache } from '../types';
export interface Parser {
(...args: any[]): any;

@@ -10,3 +9,2 @@ config: {

cache: Cache;
css?: CSSFunction<TokenPrefix>;
}

@@ -17,3 +15,3 @@ export declare const createParser: (config: {

[x: string]: string;
}, strict?: boolean) => Parser<"prefix">;
}, strict?: boolean) => Parser;
export declare const createSystem: ({ strict, pseudoSelectors, tokenPrefix, }?: {

@@ -23,2 +21,2 @@ pseudoSelectors?: Record<string, string> | undefined;

tokenPrefix?: "all" | "prefix" | "noprefix" | undefined;
}) => (arg: PropConfigCollection) => Parser<"prefix">;
}) => (arg: PropConfigCollection) => Parser;

1

dist/core/index.d.ts
export { get } from './get';
export { createSystem } from './createSystem';
export { createCss } from './createCss';

16

dist/css-prop.d.ts
import * as CSS from 'csstype';
import { Theme, PrefixToken, PrefixOptions, PrefixDefault, TokenScales } from './types';
interface PropertiesToScales extends Record<keyof CSS.Properties, TokenScales> {
export declare type CSSProperties = CSS.Properties<(string & {}) | number>;
interface PropertiesToScales extends Record<keyof CSSProperties, TokenScales> {
color: 'colors';

@@ -113,10 +114,13 @@ backgroundColor: 'colors';

}
export declare type CSSObject<PrefixOption extends PrefixOptions = PrefixDefault, TTheme extends Theme = Theme> = {
[K in keyof CSS.Properties]?: (PropertiesToScales[K] extends TokenScales ? PrefixToken<PropertiesToScales[K], PrefixOption, TTheme> : never) | CSS.Properties[K];
declare type InternalCss<PrefixOption extends PrefixOptions = PrefixDefault, TTheme extends Theme = Theme> = {
[K in keyof CSSProperties]?: (PropertiesToScales[K] extends TokenScales ? PrefixToken<PropertiesToScales[K], PrefixOption, TTheme> : never) | CSSProperties[K];
} & {
[K in keyof AliasPropertiesToScales]?: (AliasPropertiesToScales[K] extends TokenScales ? PrefixToken<AliasPropertiesToScales[K], PrefixOption, TTheme> : never) | CSS.Properties[AliasToProperties[K]];
[K in keyof AliasPropertiesToScales]?: (AliasPropertiesToScales[K] extends TokenScales ? PrefixToken<AliasPropertiesToScales[K], PrefixOption, TTheme> : never) | CSSProperties[AliasToProperties[K]];
} & {
[K in CSS.Pseudos]?: CSSObject<PrefixOption, TTheme>;
[k: string]: InternalCss<PrefixOption, TTheme> | string | undefined | number;
};
export declare type CSSObject<PrefixOption extends PrefixOptions = PrefixDefault, TTheme extends Theme = Theme> = InternalCss<PrefixOption, TTheme> & {
[K in CSS.Pseudos]?: CSSObject<PrefixOption, TTheme> | string | number | undefined;
} & {
[K in PrefixToken<'mediaQueries', PrefixOption, TTheme>]?: CSSObject<PrefixOption, TTheme>;
[K in PrefixToken<'mediaQueries', PrefixOption, TTheme>]?: CSSObject<PrefixOption, TTheme> | string | number | undefined;
} & {

@@ -123,0 +127,0 @@ [k: string]: CSSObject<PrefixOption, TTheme> | string | number | undefined;

3

dist/index.d.ts

@@ -1,2 +0,3 @@

export { createSystem } from './core/createSystem';
export declare const css: import("./core/createCss").CSSFunction<import("./types").PrefixOptions>;
export { createSystem, createCss } from './core';
export * from './props';

@@ -3,0 +4,0 @@ export * from './pseudos';

1042

dist/system-props.cjs.development.js

@@ -23,505 +23,2 @@ 'use strict';

var createMediaQuery = function createMediaQuery(n) {
return "@media screen and (min-width: " + n + ")";
};
var parseResponsiveStyle = function parseResponsiveStyle(_ref) {
var cache = _ref.cache,
systemConfig = _ref.systemConfig,
scale = _ref.scale,
propValue = _ref.propValue,
props = _ref.props;
var styles = {};
var mediaQueries = cache.media;
propValue.slice(0, mediaQueries.length).forEach(function (valueAtQuery, i) {
// e.g. <Box color={[theme => theme.colors.primary, theme => theme.colors.secondary]} />
var value = typeof valueAtQuery === 'function' ? valueAtQuery(props.theme) : valueAtQuery;
var media = mediaQueries[i]; // @ts-ignore
var style = systemConfig(value, scale, props, cache);
if (!media) {
styles = _extends({}, styles, style);
} else {
var _extends2;
styles = _extends({}, styles, (_extends2 = {}, _extends2[media] = _extends({}, styles[media], style), _extends2));
}
});
return styles;
};
var parseResponsiveObject = function parseResponsiveObject(_ref2) {
var cache = _ref2.cache,
systemConfig = _ref2.systemConfig,
scale = _ref2.scale,
propValue = _ref2.propValue,
props = _ref2.props;
var breakpoints = cache.breakpoints;
var styles = {};
for (var key in propValue) {
// @ts-ignore
var breakpoint = breakpoints[key];
var valueAtQuery = propValue[key]; // e.g.
// <Box
// color={{
// [bp.bp320]: t => t.colors.primary,
// [bp.bp640]: t => t.colors.secondary
// }}
// />
var value = typeof valueAtQuery === 'function' ? valueAtQuery(props.theme) : valueAtQuery; // @ts-ignore
var style = systemConfig(value, scale, props, cache);
if (!breakpoint) {
styles = _extends({}, styles, style);
} else {
var _extends3;
var media = createMediaQuery(breakpoint);
styles = _extends({}, styles, (_extends3 = {}, _extends3[media] = _extends({}, styles[media], style), _extends3));
}
}
return styles;
};
/**
* Generic "get" function
* Used with 'noprefix' tokenPrefix value
*/
var get = function get(object, path, defaultValue) {
if (!object) {
return defaultValue;
}
var route = typeof path === 'string' ? path.split('.') : [path]; // Start with theme, that will get narrowed down
var result = object;
for (var p = 0; p < route.length; p++) {
// For the length of the map, dive deeper into the object
// and return the property at that depth
var next = route[p];
if (result && (typeof next === 'number' || typeof next === 'string')) {
result = result[next];
} else {
result = undefined;
}
}
return result === undefined ? defaultValue : result;
};
/**
* Requires path to have '$' prefixing the value
* Used with 'prefix' tokenPrefix value
*/
var prefixGet = function prefixGet(object, path, defaultValue) {
var result;
if (typeof path === 'string' && path.startsWith('$')) {
result = get(object, path.slice(1));
}
return result === undefined ? defaultValue : result;
};
/**
* Supports '$' prefix or not
* Used with 'all' tokenPrefix value
*/
var allGet = function allGet(object, path, defaultValue) {
var result = get(object, path);
if (typeof path === 'string' && path.startsWith('$')) {
result = get(object, path.slice(1));
}
return result === undefined ? defaultValue : result;
};
var memoizeGet = function memoizeGet(fn) {
var cache = new WeakMap();
var memoizedFn = function memoizedFn(obj, path, fallback) {
if (typeof obj === 'undefined') {
return fn(obj, path, fallback);
}
if (!cache.has(obj)) {
cache.set(obj, new Map());
}
var map = cache.get(obj);
if (map.has(path)) {
return map.get(path);
}
var value = fn(obj, path, fallback);
map.set(path, value);
return value;
};
return memoizedFn;
};
var memoizedGet = {
all: /*#__PURE__*/memoizeGet(allGet),
prefix: /*#__PURE__*/memoizeGet(prefixGet),
noprefix: /*#__PURE__*/memoizeGet(get)
};
var defaultTransform = function defaultTransform(_ref) {
var path = _ref.path,
object = _ref.object,
strict = _ref.strict,
get = _ref.get;
return get(object, path, strict === true ? undefined : path);
};
var createStyleFunction = function createStyleFunction(_ref2) {
var properties = _ref2.properties,
property = _ref2.property,
scale = _ref2.scale,
_ref2$transform = _ref2.transform,
transform = _ref2$transform === void 0 ? defaultTransform : _ref2$transform,
defaultScale = _ref2.defaultScale,
tokenPrefix = _ref2.tokenPrefix;
var _properties = properties || [property];
if (!tokenPrefix || !['all', 'noprefix', 'prefix'].includes(tokenPrefix)) {
throw new Error("Invalid tokenPrefix configuration option. Expected \"all\", \"noprefix\" or \"prefix\". Received: " + tokenPrefix);
}
var get = memoizedGet[tokenPrefix];
var systemConfig = function systemConfig(value, scale, props, cache) {
var result = {};
var n = value;
n = transform({
path: value,
object: scale,
props: props,
strict: cache == null ? void 0 : cache.strict,
get: get
});
if (n === null) {
return result;
}
_properties.forEach(function (prop) {
if (prop) {
result[prop] = n;
}
});
return result;
};
Object.assign(systemConfig, {
scale: scale,
defaultScale: defaultScale
});
return systemConfig;
};
// String.prototype.localeCompare vs Intl.Collator.compare
// https://stackoverflow.com/a/52369951
var collator = /*#__PURE__*/new Intl.Collator(undefined, {
numeric: true,
sensitivity: 'base'
}); // Array.sort an object
var sort = function sort(obj) {
var next = {};
Object.keys(obj).sort(function (a, b) {
return collator.compare(a, b);
}).forEach(function (key) {
next[key] = obj[key];
});
return next;
};
function mergeObj(a, b) {
return _extends({}, a, b);
}
var merge = function merge(a, b) {
var result = mergeObj(a, b);
for (var key in a) {
var _mergeObj;
if (!a[key] || typeof b[key] !== 'object') {
continue;
}
result = mergeObj(result, (_mergeObj = {}, _mergeObj[key] = mergeObj(a[key], b[key]), _mergeObj));
}
return result;
};
var pseudoSelectors = {
_hover: '&:hover',
_focus: '&:focus',
_focusWithin: '&:focus-within',
_focusVisible: '&:focus-visible',
_active: '&:active',
_visited: '&:visited',
_selection: '&::selection',
_before: '&::before',
_after: '&::after',
_placeholder: '&::placeholder',
_hoverAndFocus: '&:hover, &:focus',
_disabled: '[disabled], [disabled]:hover, [disabled]:focus, [aria-disabled], [aria-disabled]:hover, [aria-disabled]:focus',
_readOnly: '[readOnly]',
_first: '&:first-child',
_last: '&:last-child',
_notFirst: '&:not(:first-of-type)',
_notLast: '&:not(:last-of-type)',
_checked: '&[aria-checked=true], &[checked]',
_odd: '&:nth-of-type(odd)',
_even: '&:nth-of-type(even)'
};
var createCss = function createCss(config, tokenPrefix) {
var css = function css(args) {
return function (_ref) {
var theme = _ref.theme;
if (typeof args === 'undefined') {
return;
}
var result = {};
var styles = typeof args === 'function' ? args(theme) : args;
for (var key in styles) {
var x = styles[key]; // Nested selectors (pseudo selectors, media query)
if (x && typeof x === 'object') {
// If key is a mediaQueries token value
var _get = memoizedGet[tokenPrefix];
var maybeQuery = _get(theme.mediaQueries, key);
if (typeof maybeQuery !== 'undefined') {
result[maybeQuery] = css(x)({
theme: theme
});
continue;
}
result[key] = css(x)({
theme: theme
});
continue;
}
var systemConfig = config[key]; // Not a token in the config, let pass through
if (!systemConfig) {
result[key] = x;
continue;
}
var scale = get(theme, systemConfig.scale);
var propValue = x;
result = merge(result, systemConfig(propValue, scale, {
theme: theme
}));
}
return result;
};
};
return css;
};
var createMediaQuery$1 = function createMediaQuery(n) {
return "@media screen and (min-width: " + n + ")";
};
function parseBreakpoints(breakpoints) {
var bps = breakpoints;
if (!Array.isArray(breakpoints)) {
bps = Object.values(breakpoints);
}
return bps.map(createMediaQuery$1);
}
var createParser = function createParser(config, pseudoSelectors, strict) {
if (pseudoSelectors === void 0) {
pseudoSelectors = {};
}
if (strict === void 0) {
strict = false;
}
var cache = {
strict: strict,
key: '__systemprops__'
};
var parse = function parse(props) {
var _props$theme;
var styles = {};
var shouldSort = false; // check cache
var isCacheBusted = false;
if (typeof ((_props$theme = props.theme) == null ? void 0 : _props$theme.systemPropsCacheKey) !== 'undefined' && props.theme.systemPropsCacheKey !== cache.key) {
cache.key = props.theme.systemPropsCacheKey;
isCacheBusted = true;
}
var parseEntry = function parseEntry(obj, key) {
var systemConfig = config[key];
var propValue = obj[key];
var scale = get(props.theme, systemConfig.scale);
if (typeof propValue === 'function') {
// e.g.,
// <Box border={t => `1px solid ${t.colors.primary}`} />
propValue = propValue(props.theme);
}
if (typeof propValue === 'object') {
var _props$theme2;
cache.breakpoints = !isCacheBusted && cache.breakpoints || (props == null ? void 0 : (_props$theme2 = props.theme) == null ? void 0 : _props$theme2.breakpoints);
if (Array.isArray(propValue)) {
if (typeof cache.breakpoints === 'undefined') {
throw new Error('The system props parser could not find a `breakpoints` property in the theme object, which is required for responsive styles to work. Make sure that the theme object has a breakpoints property.');
}
cache.media = !isCacheBusted && cache.media || [null].concat(parseBreakpoints(cache.breakpoints));
return parseResponsiveStyle({
cache: cache,
systemConfig: systemConfig,
scale: scale,
propValue: propValue,
props: obj
});
}
if (propValue !== null) {
shouldSort = true;
return parseResponsiveObject({
cache: cache,
systemConfig: systemConfig,
scale: scale,
propValue: propValue,
props: obj
});
}
}
return systemConfig(propValue, scale, props, cache);
};
for (var key in props) {
// e.g., { _hover: { ... } }
if (pseudoSelectors[key]) {
// _hover -> '&:hover'
var pseudoSelector = pseudoSelectors[key];
var pseudoStyles = props[key];
for (var pseudoStyleKey in pseudoStyles) {
styles[pseudoSelector] = _extends({}, styles[pseudoSelector], parseEntry(pseudoStyles, pseudoStyleKey)); // sort object-based responsive styles
if (shouldSort) {
styles[pseudoSelectors[key]] = sort(styles[pseudoSelectors[key]]);
shouldSort = false;
}
}
continue;
} // the prop is not a system prop, so bail
if (!config[key]) {
continue;
}
styles = merge(styles, parseEntry(props, key));
} // 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, _Object$assign;
Object.assign(parse, (_Object$assign = {}, _Object$assign[key] = createParser((_createParser = {}, _createParser[key] = config[key], _createParser)), _Object$assign));
});
}
return parse;
};
var createSystem = function createSystem(_temp) {
var _ref = _temp === void 0 ? {} : _temp,
_ref$strict = _ref.strict,
strict = _ref$strict === void 0 ? false : _ref$strict,
_ref$pseudoSelectors = _ref.pseudoSelectors,
pseudoSelectors$1 = _ref$pseudoSelectors === void 0 ? pseudoSelectors : _ref$pseudoSelectors,
_ref$tokenPrefix = _ref.tokenPrefix,
tokenPrefix = _ref$tokenPrefix === void 0 ? 'prefix' : _ref$tokenPrefix;
var system = function system(arg) {
var config = {};
Object.keys(arg).forEach(function (key) {
var conf = arg[key];
if (conf === true) {
// shortcut definition
config[key] = createStyleFunction({
property: key,
scale: key,
tokenPrefix: tokenPrefix
});
return;
}
if (typeof conf === 'function') {
return;
}
config[key] = createStyleFunction(_extends({}, conf, {
tokenPrefix: tokenPrefix
}));
});
var parser = createParser(config, pseudoSelectors$1, strict);
var cssFunction = createCss(config, tokenPrefix);
parser.css = cssFunction;
return parser;
};
return system;
};
var background = {

@@ -1377,2 +874,535 @@ background: true,

/**
* Generic "get" function
* Used with 'noprefix' tokenPrefix value
*/
var get = function get(object, path, defaultValue) {
if (!object) {
return defaultValue;
}
var route = typeof path === 'string' ? path.split('.') : [path]; // Start with theme, that will get narrowed down
var result = object;
for (var p = 0; p < route.length; p++) {
// For the length of the map, dive deeper into the object
// and return the property at that depth
var next = route[p];
if (result && (typeof next === 'number' || typeof next === 'string')) {
result = result[next];
} else {
result = undefined;
}
}
return result === undefined ? defaultValue : result;
};
/**
* Requires path to have '$' prefixing the value
* Used with 'prefix' tokenPrefix value
*/
var prefixGet = function prefixGet(object, path, defaultValue) {
var result;
if (typeof path === 'string' && path.startsWith('$')) {
result = get(object, path.slice(1));
}
return result === undefined ? defaultValue : result;
};
/**
* Supports '$' prefix or not
* Used with 'all' tokenPrefix value
*/
var allGet = function allGet(object, path, defaultValue) {
var result = get(object, path);
if (typeof path === 'string' && path.startsWith('$')) {
result = get(object, path.slice(1));
}
return result === undefined ? defaultValue : result;
};
var memoizeGet = function memoizeGet(fn) {
var cache = new WeakMap();
var memoizedFn = function memoizedFn(obj, path, fallback) {
if (typeof obj === 'undefined') {
return fn(obj, path, fallback);
}
if (!cache.has(obj)) {
cache.set(obj, new Map());
}
var map = cache.get(obj);
if (map.has(path)) {
return map.get(path);
}
var value = fn(obj, path, fallback);
map.set(path, value);
return value;
};
return memoizedFn;
};
var memoizedGet = {
all: /*#__PURE__*/memoizeGet(allGet),
prefix: /*#__PURE__*/memoizeGet(prefixGet),
noprefix: /*#__PURE__*/memoizeGet(get)
};
var createMediaQuery = function createMediaQuery(n) {
return "@media screen and (min-width: " + n + ")";
};
var parseResponsiveStyle = function parseResponsiveStyle(_ref) {
var cache = _ref.cache,
systemConfig = _ref.systemConfig,
scale = _ref.scale,
propValue = _ref.propValue,
props = _ref.props;
var styles = {};
var mediaQueries = cache.media;
propValue.slice(0, mediaQueries.length).forEach(function (valueAtQuery, i) {
// e.g. <Box color={[theme => theme.colors.primary, theme => theme.colors.secondary]} />
var value = typeof valueAtQuery === 'function' ? valueAtQuery(props.theme) : valueAtQuery;
var media = mediaQueries[i]; // @ts-ignore
var style = systemConfig(value, scale, props, cache);
if (!media) {
styles = _extends({}, styles, style);
} else {
var _extends2;
styles = _extends({}, styles, (_extends2 = {}, _extends2[media] = _extends({}, styles[media], style), _extends2));
}
});
return styles;
};
var parseResponsiveObject = function parseResponsiveObject(_ref2) {
var cache = _ref2.cache,
systemConfig = _ref2.systemConfig,
scale = _ref2.scale,
propValue = _ref2.propValue,
props = _ref2.props;
var breakpoints = cache.breakpoints;
var styles = {};
for (var key in propValue) {
// @ts-ignore
var breakpoint = breakpoints[key];
var valueAtQuery = propValue[key]; // e.g.
// <Box
// color={{
// [bp.bp320]: t => t.colors.primary,
// [bp.bp640]: t => t.colors.secondary
// }}
// />
var value = typeof valueAtQuery === 'function' ? valueAtQuery(props.theme) : valueAtQuery; // @ts-ignore
var style = systemConfig(value, scale, props, cache);
if (!breakpoint) {
styles = _extends({}, styles, style);
} else {
var _extends3;
var media = createMediaQuery(breakpoint);
styles = _extends({}, styles, (_extends3 = {}, _extends3[media] = _extends({}, styles[media], style), _extends3));
}
}
return styles;
};
var defaultTransform = function defaultTransform(_ref) {
var path = _ref.path,
object = _ref.object,
strict = _ref.strict,
get = _ref.get;
return get(object, path, strict === true ? undefined : path);
};
var createStyleFunction = function createStyleFunction(_ref2) {
var properties = _ref2.properties,
property = _ref2.property,
scale = _ref2.scale,
_ref2$transform = _ref2.transform,
transform = _ref2$transform === void 0 ? defaultTransform : _ref2$transform,
defaultScale = _ref2.defaultScale,
tokenPrefix = _ref2.tokenPrefix;
var _properties = properties || [property];
if (!tokenPrefix || !['all', 'noprefix', 'prefix'].includes(tokenPrefix)) {
throw new Error("Invalid tokenPrefix configuration option. Expected \"all\", \"noprefix\" or \"prefix\". Received: " + tokenPrefix);
}
var get = memoizedGet[tokenPrefix];
var systemConfig = function systemConfig(value, scale, props, cache) {
var result = {};
var n = value;
n = transform({
path: value,
object: scale,
props: props,
strict: cache == null ? void 0 : cache.strict,
get: get
});
if (n === null) {
return result;
}
_properties.forEach(function (prop) {
if (prop) {
result[prop] = n;
}
});
return result;
};
Object.assign(systemConfig, {
scale: scale,
defaultScale: defaultScale
});
return systemConfig;
};
// String.prototype.localeCompare vs Intl.Collator.compare
// https://stackoverflow.com/a/52369951
var collator = /*#__PURE__*/new Intl.Collator(undefined, {
numeric: true,
sensitivity: 'base'
}); // Array.sort an object
var sort = function sort(obj) {
var next = {};
Object.keys(obj).sort(function (a, b) {
return collator.compare(a, b);
}).forEach(function (key) {
next[key] = obj[key];
});
return next;
};
function mergeObj(a, b) {
return _extends({}, a, b);
}
var merge = function merge(a, b) {
var result = mergeObj(a, b);
for (var key in a) {
var _mergeObj;
if (!a[key] || typeof b[key] !== 'object') {
continue;
}
result = mergeObj(result, (_mergeObj = {}, _mergeObj[key] = mergeObj(a[key], b[key]), _mergeObj));
}
return result;
};
var pseudoSelectors = {
_hover: '&:hover',
_focus: '&:focus',
_focusWithin: '&:focus-within',
_focusVisible: '&:focus-visible',
_active: '&:active',
_visited: '&:visited',
_selection: '&::selection',
_before: '&::before',
_after: '&::after',
_placeholder: '&::placeholder',
_hoverAndFocus: '&:hover, &:focus',
_disabled: '[disabled], [disabled]:hover, [disabled]:focus, [aria-disabled], [aria-disabled]:hover, [aria-disabled]:focus',
_readOnly: '[readOnly]',
_first: '&:first-child',
_last: '&:last-child',
_notFirst: '&:not(:first-of-type)',
_notLast: '&:not(:last-of-type)',
_checked: '&[aria-checked=true], &[checked]',
_odd: '&:nth-of-type(odd)',
_even: '&:nth-of-type(even)'
};
var createMediaQuery$1 = function createMediaQuery(n) {
return "@media screen and (min-width: " + n + ")";
};
function parseBreakpoints(breakpoints) {
var bps = breakpoints;
if (!Array.isArray(breakpoints)) {
bps = Object.values(breakpoints);
}
return bps.map(createMediaQuery$1);
}
var createParser = function createParser(config, pseudoSelectors, strict) {
if (pseudoSelectors === void 0) {
pseudoSelectors = {};
}
if (strict === void 0) {
strict = false;
}
var cache = {
strict: strict,
key: '__systemprops__'
};
var parse = function parse(props) {
var _props$theme;
var styles = {};
var shouldSort = false; // check cache
var isCacheBusted = false;
if (typeof ((_props$theme = props.theme) == null ? void 0 : _props$theme.systemPropsCacheKey) !== 'undefined' && props.theme.systemPropsCacheKey !== cache.key) {
cache.key = props.theme.systemPropsCacheKey;
isCacheBusted = true;
}
var parseEntry = function parseEntry(obj, key) {
var systemConfig = config[key];
var propValue = obj[key];
var scale = get(props.theme, systemConfig.scale);
if (typeof propValue === 'function') {
// e.g.,
// <Box border={t => `1px solid ${t.colors.primary}`} />
propValue = propValue(props.theme);
}
if (typeof propValue === 'object') {
var _props$theme2;
cache.breakpoints = !isCacheBusted && cache.breakpoints || (props == null ? void 0 : (_props$theme2 = props.theme) == null ? void 0 : _props$theme2.breakpoints);
if (Array.isArray(propValue)) {
if (typeof cache.breakpoints === 'undefined') {
throw new Error('The system props parser could not find a `breakpoints` property in the theme object, which is required for responsive styles to work. Make sure that the theme object has a breakpoints property.');
}
cache.media = !isCacheBusted && cache.media || [null].concat(parseBreakpoints(cache.breakpoints));
return parseResponsiveStyle({
cache: cache,
systemConfig: systemConfig,
scale: scale,
propValue: propValue,
props: obj
});
}
if (propValue !== null) {
shouldSort = true;
return parseResponsiveObject({
cache: cache,
systemConfig: systemConfig,
scale: scale,
propValue: propValue,
props: obj
});
}
}
return systemConfig(propValue, scale, props, cache);
};
for (var key in props) {
// e.g., { _hover: { ... } }
if (pseudoSelectors[key]) {
// _hover -> '&:hover'
var pseudoSelector = pseudoSelectors[key];
var pseudoStyles = props[key];
for (var pseudoStyleKey in pseudoStyles) {
styles[pseudoSelector] = _extends({}, styles[pseudoSelector], parseEntry(pseudoStyles, pseudoStyleKey)); // sort object-based responsive styles
if (shouldSort) {
styles[pseudoSelectors[key]] = sort(styles[pseudoSelectors[key]]);
shouldSort = false;
}
}
continue;
} // the prop is not a system prop, so bail
if (!config[key]) {
continue;
}
styles = merge(styles, parseEntry(props, key));
} // 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, _Object$assign;
Object.assign(parse, (_Object$assign = {}, _Object$assign[key] = createParser((_createParser = {}, _createParser[key] = config[key], _createParser)), _Object$assign));
});
}
return parse;
};
var createSystem = function createSystem(_temp) {
var _ref = _temp === void 0 ? {} : _temp,
_ref$strict = _ref.strict,
strict = _ref$strict === void 0 ? false : _ref$strict,
_ref$pseudoSelectors = _ref.pseudoSelectors,
pseudoSelectors$1 = _ref$pseudoSelectors === void 0 ? pseudoSelectors : _ref$pseudoSelectors,
_ref$tokenPrefix = _ref.tokenPrefix,
tokenPrefix = _ref$tokenPrefix === void 0 ? 'prefix' : _ref$tokenPrefix;
var system = function system(arg) {
var config = {};
Object.keys(arg).forEach(function (key) {
var conf = arg[key];
if (conf === true) {
// shortcut definition
config[key] = createStyleFunction({
property: key,
scale: key,
tokenPrefix: tokenPrefix
});
return;
}
if (typeof conf === 'function') {
return;
}
config[key] = createStyleFunction(_extends({}, conf, {
tokenPrefix: tokenPrefix
}));
});
var parser = createParser(config, pseudoSelectors$1, strict);
return parser;
};
return system;
};
var createCss = function createCss(propConfig, options) {
if (options === void 0) {
options = {
tokenPrefix: 'prefix'
};
}
var _options = options,
tokenPrefix = _options.tokenPrefix;
var config = {};
Object.keys(propConfig).forEach(function (key) {
var conf = propConfig[key];
if (conf === true) {
// shortcut definition
config[key] = createStyleFunction({
property: key,
scale: key,
tokenPrefix: tokenPrefix
});
return;
}
if (typeof conf === 'function') {
return;
}
config[key] = createStyleFunction(_extends({}, conf, {
tokenPrefix: tokenPrefix
}));
});
var css = function css(args) {
return function (_ref) {
var theme = _ref.theme;
if (typeof args === 'undefined') {
return;
}
var result = {};
var styles = typeof args === 'function' ? args(theme) : args;
for (var key in styles) {
var x = styles[key]; // Nested selectors (pseudo selectors, media query)
if (x && typeof x === 'object') {
var nestedStyles = x; // If key is a mediaQueries token value
var _get = memoizedGet[tokenPrefix];
var maybeQuery = _get(theme.mediaQueries, key);
if (typeof maybeQuery !== 'undefined') {
result[maybeQuery] = css(nestedStyles)({
theme: theme
});
continue;
}
result[key] = css(nestedStyles)({
theme: theme
});
continue;
}
var systemConfig = config[key]; // Not a token in the config, let pass through
if (!systemConfig) {
result[key] = x;
continue;
}
var scale = get(theme, systemConfig.scale);
var propValue = x;
result = merge(result, systemConfig(propValue, scale, {
theme: theme
}));
}
return result;
};
};
return css;
};
var allProps = /*#__PURE__*/_extends({}, pseudoSelectors, background, border, color, grid, flexbox, layout, position, shadow, space, typography);

@@ -1387,6 +1417,12 @@

var css = /*#__PURE__*/createCss( /*#__PURE__*/_extends({}, background, border, color, flexbox, grid, layout, position, shadow, space, transition, typography), {
tokenPrefix: 'prefix'
});
exports.background = background;
exports.border = border;
exports.color = color;
exports.createCss = createCss;
exports.createSystem = createSystem;
exports.css = css;
exports.flexContainer = flexContainer;

@@ -1393,0 +1429,0 @@ exports.flexItem = flexItem;

2

dist/system-props.cjs.production.min.js

@@ -1,2 +0,2 @@

"use strict";function r(){return(r=Object.assign||function(r){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(r[o]=t[o])}return r}).apply(this,arguments)}Object.defineProperty(exports,"__esModule",{value:!0});var e=function(r,e,t){if(!r)return t;for(var o="string"==typeof e?e.split("."):[e],i=r,a=0;a<o.length;a++){var s=o[a];i=!i||"number"!=typeof s&&"string"!=typeof s?void 0:i[s]}return void 0===i?t:i},t=function(r,t,o){var i;return"string"==typeof t&&t.startsWith("$")&&(i=e(r,t.slice(1))),void 0===i?o:i},o=function(r){var e=new WeakMap;return function(t,o,i){if(void 0===t)return r(t,o,i);e.has(t)||e.set(t,new Map);var a=e.get(t);if(a.has(o))return a.get(o);var s=r(t,o,i);return a.set(o,s),s}},i={all:o((function(r,t,o){var i=e(r,t);return"string"==typeof t&&t.startsWith("$")&&(i=e(r,t.slice(1))),void 0===i?o:i})),prefix:o(t),noprefix:o(e)},a=function(r){var e=r.path;return(0,r.get)(r.object,e,!0===r.strict?void 0:e)},s=function(r){var e=r.scale,t=r.transform,o=void 0===t?a:t,s=r.defaultScale,n=r.tokenPrefix,p=r.properties||[r.property];if(!n||!["all","noprefix","prefix"].includes(n))throw new Error('Invalid tokenPrefix configuration option. Expected "all", "noprefix" or "prefix". Received: '+n);var d=i[n],c=function(r,e,t,i){var a,s={};return null===(a=o({path:r,object:e,props:t,strict:null==i?void 0:i.strict,get:d}))||p.forEach((function(r){r&&(s[r]=a)})),s};return Object.assign(c,{scale:e,defaultScale:s}),c},n=new Intl.Collator(void 0,{numeric:!0,sensitivity:"base"}),p=function(r){var e={};return Object.keys(r).sort((function(r,e){return n.compare(r,e)})).forEach((function(t){e[t]=r[t]})),e};function d(e,t){return r({},e,t)}var c=function(r,e){var t=d(r,e);for(var o in r){var i;r[o]&&"object"==typeof e[o]&&(t=d(t,((i={})[o]=d(r[o],e[o]),i)))}return t},l={_hover:"&:hover",_focus:"&:focus",_focusWithin:"&:focus-within",_focusVisible:"&:focus-visible",_active:"&:active",_visited:"&:visited",_selection:"&::selection",_before:"&::before",_after:"&::after",_placeholder:"&::placeholder",_hoverAndFocus:"&:hover, &:focus",_disabled:"[disabled], [disabled]:hover, [disabled]:focus, [aria-disabled], [aria-disabled]:hover, [aria-disabled]:focus",_readOnly:"[readOnly]",_first:"&:first-child",_last:"&:last-child",_notFirst:"&:not(:first-of-type)",_notLast:"&:not(:last-of-type)",_checked:"&[aria-checked=true], &[checked]",_odd:"&:nth-of-type(odd)",_even:"&:nth-of-type(even)"},f=function(r){return"@media screen and (min-width: "+r+")"},u={background:!0,backgroundImage:!0,backgroundSize:!0,backgroundPosition:!0,backgroundRepeat:!0};u.bgImage=u.backgroundImage,u.bgSize=u.backgroundSize,u.bgPosition=u.backgroundPosition,u.bgRepeat=u.backgroundRepeat;var g,h="",m=0,y=[[]],b=function(r){if(v(),y=[[]],!r)return y;for(var e=r.length,t=0;t<e;t++){var o=r[t];switch(o){case" ":1===g?x():g&&(h+=o);break;case",":m?h+=o:(x(),y[y.length]=[],v());break;case'"':h+=o,m||g?1===m&&2===g&&(m=0,x()):(g=2,m=1);break;case"(":m||(g=3),m++,h+=o;break;case")":h+=o,m--,3!==g||m||x();break;case"[":m||(g=4),h+=o,m++;break;case"]":h+=o,--m||x();break;default:g||(g=1),h+=o}}return h&&x(),y};function v(){m=g=0,h=""}function x(){g&&y[y.length-1].push(h),v()}var R=function(r){var e,t,o,i,a=r.path,s=r.props,n=r.strict,p=r.get;if("string"!=typeof a)return a;var d=p((null==s||null==(e=s.theme)?void 0:e.borders)||r.object,a);if(d)return d;var c=b(a)[0],l=c[0],f=c[1],u=c[2];return[p(null==s||null==(t=s.theme)?void 0:t.borderWidths,l,n?void 0:l),p(null==s||null==(o=s.theme)?void 0:o.borderStyles,f,n?void 0:f),p(null==s||null==(i=s.theme)?void 0:i.colors,u,n?void 0:u)].filter(Boolean).join(" ")},k={border:{property:"border",scale:"borders",transform:R},borderWidth:{property:"borderWidth",scale:"borderWidths"},borderStyle:{property:"borderStyle",scale:"borderStyles"},borderColor:{property:"borderColor",scale:"colors"},borderRadius:{property:"borderRadius",scale:"radii"},borderTop:{property:"borderTop",scale:"borders",transform:R},borderTopLeftRadius:{property:"borderTopLeftRadius",scale:"radii"},borderTopRightRadius:{property:"borderTopRightRadius",scale:"radii"},borderRight:{property:"borderRight",scale:"borders",transform:R},borderBottom:{property:"borderBottom",scale:"borders",transform:R},borderBottomLeftRadius:{property:"borderBottomLeftRadius",scale:"radii"},borderBottomRightRadius:{property:"borderBottomRightRadius",scale:"radii"},borderLeft:{property:"borderLeft",scale:"borders",transform:R},borderX:{properties:["borderLeft","borderRight"],scale:"borders",transform:R},borderY:{properties:["borderTop","borderBottom"],scale:"borders",transform:R},borderTopWidth:{property:"borderTopWidth",scale:"borderWidths"},borderTopColor:{property:"borderTopColor",scale:"colors"},borderTopStyle:{property:"borderTopStyle",scale:"borderStyles"}};k.borderTopLeftRadius={property:"borderTopLeftRadius",scale:"radii"},k.borderTopRightRadius={property:"borderTopRightRadius",scale:"radii"},k.borderBottomWidth={property:"borderBottomWidth",scale:"borderWidths"},k.borderBottomColor={property:"borderBottomColor",scale:"colors"},k.borderBottomStyle={property:"borderBottomStyle",scale:"borderStyles"},k.borderBottomLeftRadius={property:"borderBottomLeftRadius",scale:"radii"},k.borderBottomRightRadius={property:"borderBottomRightRadius",scale:"radii"},k.borderLeftWidth={property:"borderLeftWidth",scale:"borderWidths"},k.borderLeftColor={property:"borderLeftColor",scale:"colors"},k.borderLeftStyle={property:"borderLeftStyle",scale:"borderStyles"},k.borderRightWidth={property:"borderRightWidth",scale:"borderWidths"},k.borderRightColor={property:"borderRightColor",scale:"colors"},k.borderRightStyle={property:"borderRightStyle",scale:"borderStyles"};var S=k,w={color:{property:"color",scale:"colors"},backgroundColor:{property:"backgroundColor",scale:"colors"},fill:{property:"fill",scale:"colors"},stroke:{property:"stroke",scale:"colors"},opacity:!0};w.bg=w.backgroundColor,w.textColor=w.color;var j={alignItems:!0,alignContent:!0,justifyItems:!0,justifyContent:!0,flexWrap:!0,flexDirection:!0},C={flex:!0,flexGrow:!0,flexShrink:!0,flexBasis:!0,justifySelf:!0,alignSelf:!0,order:!0},W=r({},j,C),T={gridArea:!0,gridColumnStart:!0,gridColumnEnd:!0,gridRowStart:!0,gridRowEnd:!0,justifySelf:!0,alignSelf:!0,placeSelf:!0},B={gap:{property:"gap",scale:"space"},gridGap:{property:"gridGap",scale:"space"},gridColumnGap:{property:"gridColumnGap",scale:"space"},gridRowGap:{property:"gridRowGap",scale:"space"},gridColumn:!0,gridRow:!0,gridAutoFlow:!0,gridAutoColumns:!0,gridAutoRows:!0,gridTemplateColumns:!0,gridTemplateRows:!0,gridTemplateAreas:!0},L=r({},T,B),_={width:{property:"width",scale:"sizes"},height:{property:"height",scale:"sizes"},minWidth:{property:"minWidth",scale:"sizes"},minHeight:{property:"minHeight",scale:"sizes"},maxWidth:{property:"maxWidth",scale:"sizes"},maxHeight:{property:"maxHeight",scale:"sizes"},size:{properties:["width","height"],scale:"sizes"},overflow:!0,overflowX:!0,overflowY:!0,display:!0,verticalAlign:!0},z=function(r){return"number"==typeof r&&!isNaN(r)},P=function(r){var e=r.path,t=r.object,o=r.strict,i=r.get;if(!z(e)){if("string"==typeof e&&e.startsWith("-")){var a=e.slice(1),s=i(t,a,a);return z(s)?-1*s:"-"+s}return i(t,e,o?void 0:e)}var n=e<0,p=Math.abs(e),d=i(t,p,o?void 0:p);return z(d)?d*(n?-1:1):null!=d?n?"-"+d:d:void 0},O={position:!0,zIndex:{property:"zIndex",scale:"zIndices"},top:{property:"top",scale:"space",transform:P},right:{property:"right",scale:"space",transform:P},bottom:{property:"bottom",scale:"space",transform:P},left:{property:"left",scale:"space",transform:P}},A=function(r){var e=r.path,t=r.get,o=r.props;return t(r.object,e)||("string"==typeof e?b(e).map((function(r){return r.map((function(r){var e;return t(null==o||null==(e=o.theme)?void 0:e.colors,r,r)})).join(" ")})).join(", "):e)},I={boxShadow:{property:"boxShadow",scale:"shadows",transform:A},textShadow:{property:"textShadow",scale:"shadows",transform:A}},H=function(r){var e=r.path,t=r.object,o=r.props,i=r.strict,a=r.get;if("number"==typeof e){var s=P({path:e,object:t,props:o,strict:i,get:a});if(s)return s}if("string"==typeof e){var n=e.split(" ");return 1===n.length?P({path:e,object:t,props:o,strict:i,get:a}):n.reduce((function(r,e){var s=P({get:a,path:e,object:t,props:o,strict:i});return"number"==typeof s&&(s+="px"),[].concat(r,[s])}),[]).filter(Boolean).join(" ")}return e},E=function(r){var e,t=r.path,o=r.props,i=r.strict,a=r.get;if("number"==typeof t){var s=a(r.object,t);if(s)return s}return"string"==typeof t?1===t.split(" ").length?a(null==o||null==(e=o.theme)?void 0:e.space,t,i?void 0:t):t.split(" ").reduce((function(r,e){var t,s=a(null==o||null==(t=o.theme)?void 0:t.space,e,i?void 0:e);return"number"==typeof s&&(s+="px"),[].concat(r,[s])}),[]).filter(Boolean).join(" "):t},F={margin:{property:"margin",scale:"space",transform:H},marginTop:{property:"marginTop",scale:"space",transform:H},marginRight:{property:"marginRight",scale:"space",transform:H},marginBottom:{property:"marginBottom",scale:"space",transform:H},marginLeft:{property:"marginLeft",scale:"space",transform:H},marginX:{properties:["marginLeft","marginRight"],scale:"space",transform:H},marginY:{properties:["marginTop","marginBottom"],scale:"space",transform:H}};F.m=F.margin,F.mt=F.marginTop,F.mr=F.marginRight,F.mb=F.marginBottom,F.ml=F.marginLeft,F.mx=F.marginX,F.my=F.marginY;var G={padding:{property:"padding",scale:"space",transform:E},paddingTop:{property:"paddingTop",scale:"space",transform:E},paddingRight:{property:"paddingRight",scale:"space",transform:E},paddingBottom:{property:"paddingBottom",scale:"space",transform:E},paddingLeft:{property:"paddingLeft",scale:"space",transform:E},paddingX:{properties:["paddingLeft","paddingRight"],scale:"space",transform:E},paddingY:{properties:["paddingTop","paddingBottom"],scale:"space",transform:E}};G.p=G.padding,G.pt=G.paddingTop,G.pr=G.paddingRight,G.pb=G.paddingBottom,G.pl=G.paddingLeft,G.px=G.paddingX,G.py=G.paddingY;var X=r({},G,F),Y={transition:{property:"transition",scale:"transitions",transform:function(r){var e=r.path,t=r.object,o=r.get,i=r.strict,a=o(t,e);return a||("string"==typeof e?a=b(e).map((function(r){return 1===r.length?o(t,r[0],i?void 0:r[0]):r.join(" ")})).join(", "):e)}},transitionDuration:{property:"transitionDuration",scale:"transitionDurations"},transitionTimingFunction:{property:"transitionTimingFunction",scale:"transitionTimingFunctions"},transitionProperty:!0,transitionDelay:!0},N={fontFamily:{property:"fontFamily",scale:"fonts"},fontSize:{property:"fontSize",scale:"fontSizes"},fontWeight:{property:"fontWeight",scale:"fontWeights"},lineHeight:{property:"lineHeight",scale:"lineHeights"},letterSpacing:{property:"letterSpacing",scale:"letterSpacings"},textAlign:!0,fontStyle:!0},D={width:{property:"width",scale:"sizes",transform:function(r){var e,t=r.path,o=r.object,i=r.get,a=t;return"number"!=typeof(e=t)||isNaN(e)||(a=t>1?t:100*t+"%"),i(o,t,a)}},height:{property:"height",scale:"sizes"},minWidth:{property:"minWidth",scale:"sizes"},minHeight:{property:"minHeight",scale:"sizes"},maxWidth:{property:"maxWidth",scale:"sizes"},maxHeight:{property:"maxHeight",scale:"sizes"},size:{properties:["width","height"],scale:"sizes"},overflow:!0,overflowX:!0,overflowY:!0,display:!0,verticalAlign:!0},M=Object.keys(r({},l,u,S,w,L,W,_,O,I,X,N)),V=new Set(M);exports.background=u,exports.border=S,exports.color=w,exports.createSystem=function(t){var o=void 0===t?{}:t,a=o.strict,n=void 0!==a&&a,d=o.pseudoSelectors,u=void 0===d?l:d,g=o.tokenPrefix,h=void 0===g?"prefix":g;return function(t){var o={};Object.keys(t).forEach((function(e){var i=t[e];!0!==i?"function"!=typeof i&&(o[e]=s(r({},i,{tokenPrefix:h}))):o[e]=s({property:e,scale:e,tokenPrefix:h})}));var a=function t(o,i,a){void 0===i&&(i={}),void 0===a&&(a=!1);var s={strict:a,key:"__systemprops__"},n=function(t){var a,n={},d=!1,l=!1;void 0!==(null==(a=t.theme)?void 0:a.systemPropsCacheKey)&&t.theme.systemPropsCacheKey!==s.key&&(s.key=t.theme.systemPropsCacheKey,l=!0);var u=function(i,a){var n,p,c=o[a],u=i[a],g=e(t.theme,c.scale);if("function"==typeof u&&(u=u(t.theme)),"object"==typeof u){var h;if(s.breakpoints=!l&&s.breakpoints||(null==t||null==(h=t.theme)?void 0:h.breakpoints),Array.isArray(u)){if(void 0===s.breakpoints)throw new Error("The system props parser could not find a `breakpoints` property in the theme object, which is required for responsive styles to work. Make sure that the theme object has a breakpoints property.");return s.media=!l&&s.media||[null].concat((p=n=s.breakpoints,Array.isArray(n)||(p=Object.values(n)),p.map(f))),function(e){var t=e.cache,o=e.systemConfig,i=e.scale,a=e.props,s={},n=t.media;return e.propValue.slice(0,n.length).forEach((function(e,p){var d,c="function"==typeof e?e(a.theme):e,l=n[p],f=o(c,i,a,t);s=r({},s,l?((d={})[l]=r({},s[l],f),d):f)})),s}({cache:s,systemConfig:c,scale:g,propValue:u,props:i})}if(null!==u)return d=!0,function(e){var t=e.cache,o=e.systemConfig,i=e.scale,a=e.propValue,s=e.props,n=t.breakpoints,p={};for(var d in a){var c=n[d],l=a[d],f=o("function"==typeof l?l(s.theme):l,i,s,t);if(c){var u,g="@media screen and (min-width: "+c+")";p=r({},p,((u={})[g]=r({},p[g],f),u))}else p=r({},p,f)}return p}({cache:s,systemConfig:c,scale:g,propValue:u,props:i})}return c(u,g,t,s)};for(var g in t)if(i[g]){var h=i[g],m=t[g];for(var y in m)n[h]=r({},n[h],u(m,y)),d&&(n[i[g]]=p(n[i[g]]),d=!1)}else o[g]&&(n=c(n,u(t,g)));return d&&(n=p(n)),n};n.config=o,n.propNames=Object.keys(o),n.cache=s;var d=Object.keys(o).filter((function(r){return"config"!==r}));return d.length>1&&d.forEach((function(r){var e,i;Object.assign(n,((i={})[r]=t(((e={})[r]=o[r],e)),i))})),n}(o,u,n),d=function(r,t){return function o(a){return function(s){var n=s.theme;if(void 0!==a){var p={},d="function"==typeof a?a(n):a;for(var l in d){var f=d[l];if(f&&"object"==typeof f){var u=(0,i[t])(n.mediaQueries,l);if(void 0!==u){p[u]=o(f)({theme:n});continue}p[l]=o(f)({theme:n})}else{var g=r[l];if(g){var h=e(n,g.scale);p=c(p,g(f,h,{theme:n}))}else p[l]=f}}return p}}}}(o,h);return a.css=d,a}},exports.flexContainer=j,exports.flexItem=C,exports.flexbox=W,exports.grid=L,exports.gridContainer=B,exports.gridItem=T,exports.layout=_,exports.margin=F,exports.padding=G,exports.position=O,exports.propNames=M,exports.pseudoSelectors=l,exports.shadow=I,exports.shouldForwardProp=function(r){return!V.has(r)},exports.space=X,exports.styledSystemLayout=D,exports.transition=Y,exports.typography=N;
"use strict";function r(){return(r=Object.assign||function(r){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(r[o]=t[o])}return r}).apply(this,arguments)}Object.defineProperty(exports,"__esModule",{value:!0});var e={background:!0,backgroundImage:!0,backgroundSize:!0,backgroundPosition:!0,backgroundRepeat:!0};e.bgImage=e.backgroundImage,e.bgSize=e.backgroundSize,e.bgPosition=e.backgroundPosition,e.bgRepeat=e.backgroundRepeat;var t,o="",i=0,a=[[]],n=function(r){if(s(),a=[[]],!r)return a;for(var e=r.length,n=0;n<e;n++){var c=r[n];switch(c){case" ":1===t?p():t&&(o+=c);break;case",":i?o+=c:(p(),a[a.length]=[],s());break;case'"':o+=c,i||t?1===i&&2===t&&(i=0,p()):(t=2,i=1);break;case"(":i||(t=3),i++,o+=c;break;case")":o+=c,i--,3!==t||i||p();break;case"[":i||(t=4),o+=c,i++;break;case"]":o+=c,--i||p();break;default:t||(t=1),o+=c}}return o&&p(),a};function s(){i=t=0,o=""}function p(){t&&a[a.length-1].push(o),s()}var c=function(r){var e,t,o,i,a=r.path,s=r.props,p=r.strict,c=r.get;if("string"!=typeof a)return a;var d=c((null==s||null==(e=s.theme)?void 0:e.borders)||r.object,a);if(d)return d;var l=n(a)[0],f=l[0],u=l[1],g=l[2];return[c(null==s||null==(t=s.theme)?void 0:t.borderWidths,f,p?void 0:f),c(null==s||null==(o=s.theme)?void 0:o.borderStyles,u,p?void 0:u),c(null==s||null==(i=s.theme)?void 0:i.colors,g,p?void 0:g)].filter(Boolean).join(" ")},d={border:{property:"border",scale:"borders",transform:c},borderWidth:{property:"borderWidth",scale:"borderWidths"},borderStyle:{property:"borderStyle",scale:"borderStyles"},borderColor:{property:"borderColor",scale:"colors"},borderRadius:{property:"borderRadius",scale:"radii"},borderTop:{property:"borderTop",scale:"borders",transform:c},borderTopLeftRadius:{property:"borderTopLeftRadius",scale:"radii"},borderTopRightRadius:{property:"borderTopRightRadius",scale:"radii"},borderRight:{property:"borderRight",scale:"borders",transform:c},borderBottom:{property:"borderBottom",scale:"borders",transform:c},borderBottomLeftRadius:{property:"borderBottomLeftRadius",scale:"radii"},borderBottomRightRadius:{property:"borderBottomRightRadius",scale:"radii"},borderLeft:{property:"borderLeft",scale:"borders",transform:c},borderX:{properties:["borderLeft","borderRight"],scale:"borders",transform:c},borderY:{properties:["borderTop","borderBottom"],scale:"borders",transform:c},borderTopWidth:{property:"borderTopWidth",scale:"borderWidths"},borderTopColor:{property:"borderTopColor",scale:"colors"},borderTopStyle:{property:"borderTopStyle",scale:"borderStyles"}};d.borderTopLeftRadius={property:"borderTopLeftRadius",scale:"radii"},d.borderTopRightRadius={property:"borderTopRightRadius",scale:"radii"},d.borderBottomWidth={property:"borderBottomWidth",scale:"borderWidths"},d.borderBottomColor={property:"borderBottomColor",scale:"colors"},d.borderBottomStyle={property:"borderBottomStyle",scale:"borderStyles"},d.borderBottomLeftRadius={property:"borderBottomLeftRadius",scale:"radii"},d.borderBottomRightRadius={property:"borderBottomRightRadius",scale:"radii"},d.borderLeftWidth={property:"borderLeftWidth",scale:"borderWidths"},d.borderLeftColor={property:"borderLeftColor",scale:"colors"},d.borderLeftStyle={property:"borderLeftStyle",scale:"borderStyles"},d.borderRightWidth={property:"borderRightWidth",scale:"borderWidths"},d.borderRightColor={property:"borderRightColor",scale:"colors"},d.borderRightStyle={property:"borderRightStyle",scale:"borderStyles"};var l=d,f={color:{property:"color",scale:"colors"},backgroundColor:{property:"backgroundColor",scale:"colors"},fill:{property:"fill",scale:"colors"},stroke:{property:"stroke",scale:"colors"},opacity:!0};f.bg=f.backgroundColor,f.textColor=f.color;var u={alignItems:!0,alignContent:!0,justifyItems:!0,justifyContent:!0,flexWrap:!0,flexDirection:!0},g={flex:!0,flexGrow:!0,flexShrink:!0,flexBasis:!0,justifySelf:!0,alignSelf:!0,order:!0},h=r({},u,g),m={gridArea:!0,gridColumnStart:!0,gridColumnEnd:!0,gridRowStart:!0,gridRowEnd:!0,justifySelf:!0,alignSelf:!0,placeSelf:!0},y={gap:{property:"gap",scale:"space"},gridGap:{property:"gridGap",scale:"space"},gridColumnGap:{property:"gridColumnGap",scale:"space"},gridRowGap:{property:"gridRowGap",scale:"space"},gridColumn:!0,gridRow:!0,gridAutoFlow:!0,gridAutoColumns:!0,gridAutoRows:!0,gridTemplateColumns:!0,gridTemplateRows:!0,gridTemplateAreas:!0},b=r({},m,y),v={width:{property:"width",scale:"sizes"},height:{property:"height",scale:"sizes"},minWidth:{property:"minWidth",scale:"sizes"},minHeight:{property:"minHeight",scale:"sizes"},maxWidth:{property:"maxWidth",scale:"sizes"},maxHeight:{property:"maxHeight",scale:"sizes"},size:{properties:["width","height"],scale:"sizes"},overflow:!0,overflowX:!0,overflowY:!0,display:!0,verticalAlign:!0},x=function(r){return"number"==typeof r&&!isNaN(r)},k=function(r){var e=r.path,t=r.object,o=r.strict,i=r.get;if(!x(e)){if("string"==typeof e&&e.startsWith("-")){var a=e.slice(1),n=i(t,a,a);return x(n)?-1*n:"-"+n}return i(t,e,o?void 0:e)}var s=e<0,p=Math.abs(e),c=i(t,p,o?void 0:p);return x(c)?c*(s?-1:1):null!=c?s?"-"+c:c:void 0},R={position:!0,zIndex:{property:"zIndex",scale:"zIndices"},top:{property:"top",scale:"space",transform:k},right:{property:"right",scale:"space",transform:k},bottom:{property:"bottom",scale:"space",transform:k},left:{property:"left",scale:"space",transform:k}},S=function(r){var e=r.path,t=r.get,o=r.props;return t(r.object,e)||("string"==typeof e?n(e).map((function(r){return r.map((function(r){var e;return t(null==o||null==(e=o.theme)?void 0:e.colors,r,r)})).join(" ")})).join(", "):e)},w={boxShadow:{property:"boxShadow",scale:"shadows",transform:S},textShadow:{property:"textShadow",scale:"shadows",transform:S}},j=function(r){var e=r.path,t=r.object,o=r.props,i=r.strict,a=r.get;if("number"==typeof e){var n=k({path:e,object:t,props:o,strict:i,get:a});if(n)return n}if("string"==typeof e){var s=e.split(" ");return 1===s.length?k({path:e,object:t,props:o,strict:i,get:a}):s.reduce((function(r,e){var n=k({get:a,path:e,object:t,props:o,strict:i});return"number"==typeof n&&(n+="px"),[].concat(r,[n])}),[]).filter(Boolean).join(" ")}return e},C=function(r){var e,t=r.path,o=r.props,i=r.strict,a=r.get;if("number"==typeof t){var n=a(r.object,t);if(n)return n}return"string"==typeof t?1===t.split(" ").length?a(null==o||null==(e=o.theme)?void 0:e.space,t,i?void 0:t):t.split(" ").reduce((function(r,e){var t,n=a(null==o||null==(t=o.theme)?void 0:t.space,e,i?void 0:e);return"number"==typeof n&&(n+="px"),[].concat(r,[n])}),[]).filter(Boolean).join(" "):t},W={margin:{property:"margin",scale:"space",transform:j},marginTop:{property:"marginTop",scale:"space",transform:j},marginRight:{property:"marginRight",scale:"space",transform:j},marginBottom:{property:"marginBottom",scale:"space",transform:j},marginLeft:{property:"marginLeft",scale:"space",transform:j},marginX:{properties:["marginLeft","marginRight"],scale:"space",transform:j},marginY:{properties:["marginTop","marginBottom"],scale:"space",transform:j}};W.m=W.margin,W.mt=W.marginTop,W.mr=W.marginRight,W.mb=W.marginBottom,W.ml=W.marginLeft,W.mx=W.marginX,W.my=W.marginY;var T={padding:{property:"padding",scale:"space",transform:C},paddingTop:{property:"paddingTop",scale:"space",transform:C},paddingRight:{property:"paddingRight",scale:"space",transform:C},paddingBottom:{property:"paddingBottom",scale:"space",transform:C},paddingLeft:{property:"paddingLeft",scale:"space",transform:C},paddingX:{properties:["paddingLeft","paddingRight"],scale:"space",transform:C},paddingY:{properties:["paddingTop","paddingBottom"],scale:"space",transform:C}};T.p=T.padding,T.pt=T.paddingTop,T.pr=T.paddingRight,T.pb=T.paddingBottom,T.pl=T.paddingLeft,T.px=T.paddingX,T.py=T.paddingY;var B=r({},T,W),L={transition:{property:"transition",scale:"transitions",transform:function(r){var e=r.path,t=r.object,o=r.get,i=r.strict,a=o(t,e);return a||("string"==typeof e?a=n(e).map((function(r){return 1===r.length?o(t,r[0],i?void 0:r[0]):r.join(" ")})).join(", "):e)}},transitionDuration:{property:"transitionDuration",scale:"transitionDurations"},transitionTimingFunction:{property:"transitionTimingFunction",scale:"transitionTimingFunctions"},transitionProperty:!0,transitionDelay:!0},_={fontFamily:{property:"fontFamily",scale:"fonts"},fontSize:{property:"fontSize",scale:"fontSizes"},fontWeight:{property:"fontWeight",scale:"fontWeights"},lineHeight:{property:"lineHeight",scale:"lineHeights"},letterSpacing:{property:"letterSpacing",scale:"letterSpacings"},textAlign:!0,fontStyle:!0},z={width:{property:"width",scale:"sizes",transform:function(r){var e,t=r.path,o=r.object,i=r.get,a=t;return"number"!=typeof(e=t)||isNaN(e)||(a=t>1?t:100*t+"%"),i(o,t,a)}},height:{property:"height",scale:"sizes"},minWidth:{property:"minWidth",scale:"sizes"},minHeight:{property:"minHeight",scale:"sizes"},maxWidth:{property:"maxWidth",scale:"sizes"},maxHeight:{property:"maxHeight",scale:"sizes"},size:{properties:["width","height"],scale:"sizes"},overflow:!0,overflowX:!0,overflowY:!0,display:!0,verticalAlign:!0},P=function(r,e,t){if(!r)return t;for(var o="string"==typeof e?e.split("."):[e],i=r,a=0;a<o.length;a++){var n=o[a];i=!i||"number"!=typeof n&&"string"!=typeof n?void 0:i[n]}return void 0===i?t:i},O=function(r,e,t){var o;return"string"==typeof e&&e.startsWith("$")&&(o=P(r,e.slice(1))),void 0===o?t:o},A=function(r){var e=new WeakMap;return function(t,o,i){if(void 0===t)return r(t,o,i);e.has(t)||e.set(t,new Map);var a=e.get(t);if(a.has(o))return a.get(o);var n=r(t,o,i);return a.set(o,n),n}},I={all:A((function(r,e,t){var o=P(r,e);return"string"==typeof e&&e.startsWith("$")&&(o=P(r,e.slice(1))),void 0===o?t:o})),prefix:A(O),noprefix:A(P)},E=function(r){var e=r.path;return(0,r.get)(r.object,e,!0===r.strict?void 0:e)},H=function(r){var e=r.scale,t=r.transform,o=void 0===t?E:t,i=r.defaultScale,a=r.tokenPrefix,n=r.properties||[r.property];if(!a||!["all","noprefix","prefix"].includes(a))throw new Error('Invalid tokenPrefix configuration option. Expected "all", "noprefix" or "prefix". Received: '+a);var s=I[a],p=function(r,e,t,i){var a,p={};return null===(a=o({path:r,object:e,props:t,strict:null==i?void 0:i.strict,get:s}))||n.forEach((function(r){r&&(p[r]=a)})),p};return Object.assign(p,{scale:e,defaultScale:i}),p},F=new Intl.Collator(void 0,{numeric:!0,sensitivity:"base"}),G=function(r){var e={};return Object.keys(r).sort((function(r,e){return F.compare(r,e)})).forEach((function(t){e[t]=r[t]})),e};function X(e,t){return r({},e,t)}var Y=function(r,e){var t=X(r,e);for(var o in r){var i;r[o]&&"object"==typeof e[o]&&(t=X(t,((i={})[o]=X(r[o],e[o]),i)))}return t},N={_hover:"&:hover",_focus:"&:focus",_focusWithin:"&:focus-within",_focusVisible:"&:focus-visible",_active:"&:active",_visited:"&:visited",_selection:"&::selection",_before:"&::before",_after:"&::after",_placeholder:"&::placeholder",_hoverAndFocus:"&:hover, &:focus",_disabled:"[disabled], [disabled]:hover, [disabled]:focus, [aria-disabled], [aria-disabled]:hover, [aria-disabled]:focus",_readOnly:"[readOnly]",_first:"&:first-child",_last:"&:last-child",_notFirst:"&:not(:first-of-type)",_notLast:"&:not(:last-of-type)",_checked:"&[aria-checked=true], &[checked]",_odd:"&:nth-of-type(odd)",_even:"&:nth-of-type(even)"},D=function(r){return"@media screen and (min-width: "+r+")"},M=function(e,t){void 0===t&&(t={tokenPrefix:"prefix"});var o=t.tokenPrefix,i={};return Object.keys(e).forEach((function(t){var a=e[t];!0!==a?"function"!=typeof a&&(i[t]=H(r({},a,{tokenPrefix:o}))):i[t]=H({property:t,scale:t,tokenPrefix:o})})),function r(e){return function(t){var a=t.theme;if(void 0!==e){var n={},s="function"==typeof e?e(a):e;for(var p in s){var c=s[p];if(c&&"object"==typeof c){var d=c,l=(0,I[o])(a.mediaQueries,p);if(void 0!==l){n[l]=r(d)({theme:a});continue}n[p]=r(d)({theme:a})}else{var f=i[p];if(f){var u=P(a,f.scale);n=Y(n,f(c,u,{theme:a}))}else n[p]=c}}return n}}}},V=Object.keys(r({},N,e,l,f,b,h,v,R,w,B,_)),K=new Set(V),$=M(r({},e,l,f,h,b,v,R,w,B,L,_),{tokenPrefix:"prefix"});exports.background=e,exports.border=l,exports.color=f,exports.createCss=M,exports.createSystem=function(e){var t=void 0===e?{}:e,o=t.strict,i=void 0!==o&&o,a=t.pseudoSelectors,n=void 0===a?N:a,s=t.tokenPrefix,p=void 0===s?"prefix":s;return function(e){var t={};return Object.keys(e).forEach((function(o){var i=e[o];!0!==i?"function"!=typeof i&&(t[o]=H(r({},i,{tokenPrefix:p}))):t[o]=H({property:o,scale:o,tokenPrefix:p})})),function e(t,o,i){void 0===o&&(o={}),void 0===i&&(i=!1);var a={strict:i,key:"__systemprops__"},n=function(e){var i,n={},s=!1,p=!1;void 0!==(null==(i=e.theme)?void 0:i.systemPropsCacheKey)&&e.theme.systemPropsCacheKey!==a.key&&(a.key=e.theme.systemPropsCacheKey,p=!0);var c=function(o,i){var n,c,d=t[i],l=o[i],f=P(e.theme,d.scale);if("function"==typeof l&&(l=l(e.theme)),"object"==typeof l){var u;if(a.breakpoints=!p&&a.breakpoints||(null==e||null==(u=e.theme)?void 0:u.breakpoints),Array.isArray(l)){if(void 0===a.breakpoints)throw new Error("The system props parser could not find a `breakpoints` property in the theme object, which is required for responsive styles to work. Make sure that the theme object has a breakpoints property.");return a.media=!p&&a.media||[null].concat((c=n=a.breakpoints,Array.isArray(n)||(c=Object.values(n)),c.map(D))),function(e){var t=e.cache,o=e.systemConfig,i=e.scale,a=e.props,n={},s=t.media;return e.propValue.slice(0,s.length).forEach((function(e,p){var c,d="function"==typeof e?e(a.theme):e,l=s[p],f=o(d,i,a,t);n=r({},n,l?((c={})[l]=r({},n[l],f),c):f)})),n}({cache:a,systemConfig:d,scale:f,propValue:l,props:o})}if(null!==l)return s=!0,function(e){var t=e.cache,o=e.systemConfig,i=e.scale,a=e.propValue,n=e.props,s=t.breakpoints,p={};for(var c in a){var d=s[c],l=a[c],f=o("function"==typeof l?l(n.theme):l,i,n,t);if(d){var u,g="@media screen and (min-width: "+d+")";p=r({},p,((u={})[g]=r({},p[g],f),u))}else p=r({},p,f)}return p}({cache:a,systemConfig:d,scale:f,propValue:l,props:o})}return d(l,f,e,a)};for(var d in e)if(o[d]){var l=o[d],f=e[d];for(var u in f)n[l]=r({},n[l],c(f,u)),s&&(n[o[d]]=G(n[o[d]]),s=!1)}else t[d]&&(n=Y(n,c(e,d)));return s&&(n=G(n)),n};n.config=t,n.propNames=Object.keys(t),n.cache=a;var s=Object.keys(t).filter((function(r){return"config"!==r}));return s.length>1&&s.forEach((function(r){var o,i;Object.assign(n,((i={})[r]=e(((o={})[r]=t[r],o)),i))})),n}(t,n,i)}},exports.css=$,exports.flexContainer=u,exports.flexItem=g,exports.flexbox=h,exports.grid=b,exports.gridContainer=y,exports.gridItem=m,exports.layout=v,exports.margin=W,exports.padding=T,exports.position=R,exports.propNames=V,exports.pseudoSelectors=N,exports.shadow=w,exports.shouldForwardProp=function(r){return!K.has(r)},exports.space=B,exports.styledSystemLayout=z,exports.transition=L,exports.typography=_;
//# sourceMappingURL=system-props.cjs.production.min.js.map

1042

dist/system-props.esm.js

@@ -19,505 +19,2 @@ function _extends() {

var createMediaQuery = function createMediaQuery(n) {
return "@media screen and (min-width: " + n + ")";
};
var parseResponsiveStyle = function parseResponsiveStyle(_ref) {
var cache = _ref.cache,
systemConfig = _ref.systemConfig,
scale = _ref.scale,
propValue = _ref.propValue,
props = _ref.props;
var styles = {};
var mediaQueries = cache.media;
propValue.slice(0, mediaQueries.length).forEach(function (valueAtQuery, i) {
// e.g. <Box color={[theme => theme.colors.primary, theme => theme.colors.secondary]} />
var value = typeof valueAtQuery === 'function' ? valueAtQuery(props.theme) : valueAtQuery;
var media = mediaQueries[i]; // @ts-ignore
var style = systemConfig(value, scale, props, cache);
if (!media) {
styles = _extends({}, styles, style);
} else {
var _extends2;
styles = _extends({}, styles, (_extends2 = {}, _extends2[media] = _extends({}, styles[media], style), _extends2));
}
});
return styles;
};
var parseResponsiveObject = function parseResponsiveObject(_ref2) {
var cache = _ref2.cache,
systemConfig = _ref2.systemConfig,
scale = _ref2.scale,
propValue = _ref2.propValue,
props = _ref2.props;
var breakpoints = cache.breakpoints;
var styles = {};
for (var key in propValue) {
// @ts-ignore
var breakpoint = breakpoints[key];
var valueAtQuery = propValue[key]; // e.g.
// <Box
// color={{
// [bp.bp320]: t => t.colors.primary,
// [bp.bp640]: t => t.colors.secondary
// }}
// />
var value = typeof valueAtQuery === 'function' ? valueAtQuery(props.theme) : valueAtQuery; // @ts-ignore
var style = systemConfig(value, scale, props, cache);
if (!breakpoint) {
styles = _extends({}, styles, style);
} else {
var _extends3;
var media = createMediaQuery(breakpoint);
styles = _extends({}, styles, (_extends3 = {}, _extends3[media] = _extends({}, styles[media], style), _extends3));
}
}
return styles;
};
/**
* Generic "get" function
* Used with 'noprefix' tokenPrefix value
*/
var get = function get(object, path, defaultValue) {
if (!object) {
return defaultValue;
}
var route = typeof path === 'string' ? path.split('.') : [path]; // Start with theme, that will get narrowed down
var result = object;
for (var p = 0; p < route.length; p++) {
// For the length of the map, dive deeper into the object
// and return the property at that depth
var next = route[p];
if (result && (typeof next === 'number' || typeof next === 'string')) {
result = result[next];
} else {
result = undefined;
}
}
return result === undefined ? defaultValue : result;
};
/**
* Requires path to have '$' prefixing the value
* Used with 'prefix' tokenPrefix value
*/
var prefixGet = function prefixGet(object, path, defaultValue) {
var result;
if (typeof path === 'string' && path.startsWith('$')) {
result = get(object, path.slice(1));
}
return result === undefined ? defaultValue : result;
};
/**
* Supports '$' prefix or not
* Used with 'all' tokenPrefix value
*/
var allGet = function allGet(object, path, defaultValue) {
var result = get(object, path);
if (typeof path === 'string' && path.startsWith('$')) {
result = get(object, path.slice(1));
}
return result === undefined ? defaultValue : result;
};
var memoizeGet = function memoizeGet(fn) {
var cache = new WeakMap();
var memoizedFn = function memoizedFn(obj, path, fallback) {
if (typeof obj === 'undefined') {
return fn(obj, path, fallback);
}
if (!cache.has(obj)) {
cache.set(obj, new Map());
}
var map = cache.get(obj);
if (map.has(path)) {
return map.get(path);
}
var value = fn(obj, path, fallback);
map.set(path, value);
return value;
};
return memoizedFn;
};
var memoizedGet = {
all: /*#__PURE__*/memoizeGet(allGet),
prefix: /*#__PURE__*/memoizeGet(prefixGet),
noprefix: /*#__PURE__*/memoizeGet(get)
};
var defaultTransform = function defaultTransform(_ref) {
var path = _ref.path,
object = _ref.object,
strict = _ref.strict,
get = _ref.get;
return get(object, path, strict === true ? undefined : path);
};
var createStyleFunction = function createStyleFunction(_ref2) {
var properties = _ref2.properties,
property = _ref2.property,
scale = _ref2.scale,
_ref2$transform = _ref2.transform,
transform = _ref2$transform === void 0 ? defaultTransform : _ref2$transform,
defaultScale = _ref2.defaultScale,
tokenPrefix = _ref2.tokenPrefix;
var _properties = properties || [property];
if (!tokenPrefix || !['all', 'noprefix', 'prefix'].includes(tokenPrefix)) {
throw new Error("Invalid tokenPrefix configuration option. Expected \"all\", \"noprefix\" or \"prefix\". Received: " + tokenPrefix);
}
var get = memoizedGet[tokenPrefix];
var systemConfig = function systemConfig(value, scale, props, cache) {
var result = {};
var n = value;
n = transform({
path: value,
object: scale,
props: props,
strict: cache == null ? void 0 : cache.strict,
get: get
});
if (n === null) {
return result;
}
_properties.forEach(function (prop) {
if (prop) {
result[prop] = n;
}
});
return result;
};
Object.assign(systemConfig, {
scale: scale,
defaultScale: defaultScale
});
return systemConfig;
};
// String.prototype.localeCompare vs Intl.Collator.compare
// https://stackoverflow.com/a/52369951
var collator = /*#__PURE__*/new Intl.Collator(undefined, {
numeric: true,
sensitivity: 'base'
}); // Array.sort an object
var sort = function sort(obj) {
var next = {};
Object.keys(obj).sort(function (a, b) {
return collator.compare(a, b);
}).forEach(function (key) {
next[key] = obj[key];
});
return next;
};
function mergeObj(a, b) {
return _extends({}, a, b);
}
var merge = function merge(a, b) {
var result = mergeObj(a, b);
for (var key in a) {
var _mergeObj;
if (!a[key] || typeof b[key] !== 'object') {
continue;
}
result = mergeObj(result, (_mergeObj = {}, _mergeObj[key] = mergeObj(a[key], b[key]), _mergeObj));
}
return result;
};
var pseudoSelectors = {
_hover: '&:hover',
_focus: '&:focus',
_focusWithin: '&:focus-within',
_focusVisible: '&:focus-visible',
_active: '&:active',
_visited: '&:visited',
_selection: '&::selection',
_before: '&::before',
_after: '&::after',
_placeholder: '&::placeholder',
_hoverAndFocus: '&:hover, &:focus',
_disabled: '[disabled], [disabled]:hover, [disabled]:focus, [aria-disabled], [aria-disabled]:hover, [aria-disabled]:focus',
_readOnly: '[readOnly]',
_first: '&:first-child',
_last: '&:last-child',
_notFirst: '&:not(:first-of-type)',
_notLast: '&:not(:last-of-type)',
_checked: '&[aria-checked=true], &[checked]',
_odd: '&:nth-of-type(odd)',
_even: '&:nth-of-type(even)'
};
var createCss = function createCss(config, tokenPrefix) {
var css = function css(args) {
return function (_ref) {
var theme = _ref.theme;
if (typeof args === 'undefined') {
return;
}
var result = {};
var styles = typeof args === 'function' ? args(theme) : args;
for (var key in styles) {
var x = styles[key]; // Nested selectors (pseudo selectors, media query)
if (x && typeof x === 'object') {
// If key is a mediaQueries token value
var _get = memoizedGet[tokenPrefix];
var maybeQuery = _get(theme.mediaQueries, key);
if (typeof maybeQuery !== 'undefined') {
result[maybeQuery] = css(x)({
theme: theme
});
continue;
}
result[key] = css(x)({
theme: theme
});
continue;
}
var systemConfig = config[key]; // Not a token in the config, let pass through
if (!systemConfig) {
result[key] = x;
continue;
}
var scale = get(theme, systemConfig.scale);
var propValue = x;
result = merge(result, systemConfig(propValue, scale, {
theme: theme
}));
}
return result;
};
};
return css;
};
var createMediaQuery$1 = function createMediaQuery(n) {
return "@media screen and (min-width: " + n + ")";
};
function parseBreakpoints(breakpoints) {
var bps = breakpoints;
if (!Array.isArray(breakpoints)) {
bps = Object.values(breakpoints);
}
return bps.map(createMediaQuery$1);
}
var createParser = function createParser(config, pseudoSelectors, strict) {
if (pseudoSelectors === void 0) {
pseudoSelectors = {};
}
if (strict === void 0) {
strict = false;
}
var cache = {
strict: strict,
key: '__systemprops__'
};
var parse = function parse(props) {
var _props$theme;
var styles = {};
var shouldSort = false; // check cache
var isCacheBusted = false;
if (typeof ((_props$theme = props.theme) == null ? void 0 : _props$theme.systemPropsCacheKey) !== 'undefined' && props.theme.systemPropsCacheKey !== cache.key) {
cache.key = props.theme.systemPropsCacheKey;
isCacheBusted = true;
}
var parseEntry = function parseEntry(obj, key) {
var systemConfig = config[key];
var propValue = obj[key];
var scale = get(props.theme, systemConfig.scale);
if (typeof propValue === 'function') {
// e.g.,
// <Box border={t => `1px solid ${t.colors.primary}`} />
propValue = propValue(props.theme);
}
if (typeof propValue === 'object') {
var _props$theme2;
cache.breakpoints = !isCacheBusted && cache.breakpoints || (props == null ? void 0 : (_props$theme2 = props.theme) == null ? void 0 : _props$theme2.breakpoints);
if (Array.isArray(propValue)) {
if (typeof cache.breakpoints === 'undefined') {
throw new Error('The system props parser could not find a `breakpoints` property in the theme object, which is required for responsive styles to work. Make sure that the theme object has a breakpoints property.');
}
cache.media = !isCacheBusted && cache.media || [null].concat(parseBreakpoints(cache.breakpoints));
return parseResponsiveStyle({
cache: cache,
systemConfig: systemConfig,
scale: scale,
propValue: propValue,
props: obj
});
}
if (propValue !== null) {
shouldSort = true;
return parseResponsiveObject({
cache: cache,
systemConfig: systemConfig,
scale: scale,
propValue: propValue,
props: obj
});
}
}
return systemConfig(propValue, scale, props, cache);
};
for (var key in props) {
// e.g., { _hover: { ... } }
if (pseudoSelectors[key]) {
// _hover -> '&:hover'
var pseudoSelector = pseudoSelectors[key];
var pseudoStyles = props[key];
for (var pseudoStyleKey in pseudoStyles) {
styles[pseudoSelector] = _extends({}, styles[pseudoSelector], parseEntry(pseudoStyles, pseudoStyleKey)); // sort object-based responsive styles
if (shouldSort) {
styles[pseudoSelectors[key]] = sort(styles[pseudoSelectors[key]]);
shouldSort = false;
}
}
continue;
} // the prop is not a system prop, so bail
if (!config[key]) {
continue;
}
styles = merge(styles, parseEntry(props, key));
} // 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, _Object$assign;
Object.assign(parse, (_Object$assign = {}, _Object$assign[key] = createParser((_createParser = {}, _createParser[key] = config[key], _createParser)), _Object$assign));
});
}
return parse;
};
var createSystem = function createSystem(_temp) {
var _ref = _temp === void 0 ? {} : _temp,
_ref$strict = _ref.strict,
strict = _ref$strict === void 0 ? false : _ref$strict,
_ref$pseudoSelectors = _ref.pseudoSelectors,
pseudoSelectors$1 = _ref$pseudoSelectors === void 0 ? pseudoSelectors : _ref$pseudoSelectors,
_ref$tokenPrefix = _ref.tokenPrefix,
tokenPrefix = _ref$tokenPrefix === void 0 ? 'prefix' : _ref$tokenPrefix;
var system = function system(arg) {
var config = {};
Object.keys(arg).forEach(function (key) {
var conf = arg[key];
if (conf === true) {
// shortcut definition
config[key] = createStyleFunction({
property: key,
scale: key,
tokenPrefix: tokenPrefix
});
return;
}
if (typeof conf === 'function') {
return;
}
config[key] = createStyleFunction(_extends({}, conf, {
tokenPrefix: tokenPrefix
}));
});
var parser = createParser(config, pseudoSelectors$1, strict);
var cssFunction = createCss(config, tokenPrefix);
parser.css = cssFunction;
return parser;
};
return system;
};
var background = {

@@ -1373,2 +870,535 @@ background: true,

/**
* Generic "get" function
* Used with 'noprefix' tokenPrefix value
*/
var get = function get(object, path, defaultValue) {
if (!object) {
return defaultValue;
}
var route = typeof path === 'string' ? path.split('.') : [path]; // Start with theme, that will get narrowed down
var result = object;
for (var p = 0; p < route.length; p++) {
// For the length of the map, dive deeper into the object
// and return the property at that depth
var next = route[p];
if (result && (typeof next === 'number' || typeof next === 'string')) {
result = result[next];
} else {
result = undefined;
}
}
return result === undefined ? defaultValue : result;
};
/**
* Requires path to have '$' prefixing the value
* Used with 'prefix' tokenPrefix value
*/
var prefixGet = function prefixGet(object, path, defaultValue) {
var result;
if (typeof path === 'string' && path.startsWith('$')) {
result = get(object, path.slice(1));
}
return result === undefined ? defaultValue : result;
};
/**
* Supports '$' prefix or not
* Used with 'all' tokenPrefix value
*/
var allGet = function allGet(object, path, defaultValue) {
var result = get(object, path);
if (typeof path === 'string' && path.startsWith('$')) {
result = get(object, path.slice(1));
}
return result === undefined ? defaultValue : result;
};
var memoizeGet = function memoizeGet(fn) {
var cache = new WeakMap();
var memoizedFn = function memoizedFn(obj, path, fallback) {
if (typeof obj === 'undefined') {
return fn(obj, path, fallback);
}
if (!cache.has(obj)) {
cache.set(obj, new Map());
}
var map = cache.get(obj);
if (map.has(path)) {
return map.get(path);
}
var value = fn(obj, path, fallback);
map.set(path, value);
return value;
};
return memoizedFn;
};
var memoizedGet = {
all: /*#__PURE__*/memoizeGet(allGet),
prefix: /*#__PURE__*/memoizeGet(prefixGet),
noprefix: /*#__PURE__*/memoizeGet(get)
};
var createMediaQuery = function createMediaQuery(n) {
return "@media screen and (min-width: " + n + ")";
};
var parseResponsiveStyle = function parseResponsiveStyle(_ref) {
var cache = _ref.cache,
systemConfig = _ref.systemConfig,
scale = _ref.scale,
propValue = _ref.propValue,
props = _ref.props;
var styles = {};
var mediaQueries = cache.media;
propValue.slice(0, mediaQueries.length).forEach(function (valueAtQuery, i) {
// e.g. <Box color={[theme => theme.colors.primary, theme => theme.colors.secondary]} />
var value = typeof valueAtQuery === 'function' ? valueAtQuery(props.theme) : valueAtQuery;
var media = mediaQueries[i]; // @ts-ignore
var style = systemConfig(value, scale, props, cache);
if (!media) {
styles = _extends({}, styles, style);
} else {
var _extends2;
styles = _extends({}, styles, (_extends2 = {}, _extends2[media] = _extends({}, styles[media], style), _extends2));
}
});
return styles;
};
var parseResponsiveObject = function parseResponsiveObject(_ref2) {
var cache = _ref2.cache,
systemConfig = _ref2.systemConfig,
scale = _ref2.scale,
propValue = _ref2.propValue,
props = _ref2.props;
var breakpoints = cache.breakpoints;
var styles = {};
for (var key in propValue) {
// @ts-ignore
var breakpoint = breakpoints[key];
var valueAtQuery = propValue[key]; // e.g.
// <Box
// color={{
// [bp.bp320]: t => t.colors.primary,
// [bp.bp640]: t => t.colors.secondary
// }}
// />
var value = typeof valueAtQuery === 'function' ? valueAtQuery(props.theme) : valueAtQuery; // @ts-ignore
var style = systemConfig(value, scale, props, cache);
if (!breakpoint) {
styles = _extends({}, styles, style);
} else {
var _extends3;
var media = createMediaQuery(breakpoint);
styles = _extends({}, styles, (_extends3 = {}, _extends3[media] = _extends({}, styles[media], style), _extends3));
}
}
return styles;
};
var defaultTransform = function defaultTransform(_ref) {
var path = _ref.path,
object = _ref.object,
strict = _ref.strict,
get = _ref.get;
return get(object, path, strict === true ? undefined : path);
};
var createStyleFunction = function createStyleFunction(_ref2) {
var properties = _ref2.properties,
property = _ref2.property,
scale = _ref2.scale,
_ref2$transform = _ref2.transform,
transform = _ref2$transform === void 0 ? defaultTransform : _ref2$transform,
defaultScale = _ref2.defaultScale,
tokenPrefix = _ref2.tokenPrefix;
var _properties = properties || [property];
if (!tokenPrefix || !['all', 'noprefix', 'prefix'].includes(tokenPrefix)) {
throw new Error("Invalid tokenPrefix configuration option. Expected \"all\", \"noprefix\" or \"prefix\". Received: " + tokenPrefix);
}
var get = memoizedGet[tokenPrefix];
var systemConfig = function systemConfig(value, scale, props, cache) {
var result = {};
var n = value;
n = transform({
path: value,
object: scale,
props: props,
strict: cache == null ? void 0 : cache.strict,
get: get
});
if (n === null) {
return result;
}
_properties.forEach(function (prop) {
if (prop) {
result[prop] = n;
}
});
return result;
};
Object.assign(systemConfig, {
scale: scale,
defaultScale: defaultScale
});
return systemConfig;
};
// String.prototype.localeCompare vs Intl.Collator.compare
// https://stackoverflow.com/a/52369951
var collator = /*#__PURE__*/new Intl.Collator(undefined, {
numeric: true,
sensitivity: 'base'
}); // Array.sort an object
var sort = function sort(obj) {
var next = {};
Object.keys(obj).sort(function (a, b) {
return collator.compare(a, b);
}).forEach(function (key) {
next[key] = obj[key];
});
return next;
};
function mergeObj(a, b) {
return _extends({}, a, b);
}
var merge = function merge(a, b) {
var result = mergeObj(a, b);
for (var key in a) {
var _mergeObj;
if (!a[key] || typeof b[key] !== 'object') {
continue;
}
result = mergeObj(result, (_mergeObj = {}, _mergeObj[key] = mergeObj(a[key], b[key]), _mergeObj));
}
return result;
};
var pseudoSelectors = {
_hover: '&:hover',
_focus: '&:focus',
_focusWithin: '&:focus-within',
_focusVisible: '&:focus-visible',
_active: '&:active',
_visited: '&:visited',
_selection: '&::selection',
_before: '&::before',
_after: '&::after',
_placeholder: '&::placeholder',
_hoverAndFocus: '&:hover, &:focus',
_disabled: '[disabled], [disabled]:hover, [disabled]:focus, [aria-disabled], [aria-disabled]:hover, [aria-disabled]:focus',
_readOnly: '[readOnly]',
_first: '&:first-child',
_last: '&:last-child',
_notFirst: '&:not(:first-of-type)',
_notLast: '&:not(:last-of-type)',
_checked: '&[aria-checked=true], &[checked]',
_odd: '&:nth-of-type(odd)',
_even: '&:nth-of-type(even)'
};
var createMediaQuery$1 = function createMediaQuery(n) {
return "@media screen and (min-width: " + n + ")";
};
function parseBreakpoints(breakpoints) {
var bps = breakpoints;
if (!Array.isArray(breakpoints)) {
bps = Object.values(breakpoints);
}
return bps.map(createMediaQuery$1);
}
var createParser = function createParser(config, pseudoSelectors, strict) {
if (pseudoSelectors === void 0) {
pseudoSelectors = {};
}
if (strict === void 0) {
strict = false;
}
var cache = {
strict: strict,
key: '__systemprops__'
};
var parse = function parse(props) {
var _props$theme;
var styles = {};
var shouldSort = false; // check cache
var isCacheBusted = false;
if (typeof ((_props$theme = props.theme) == null ? void 0 : _props$theme.systemPropsCacheKey) !== 'undefined' && props.theme.systemPropsCacheKey !== cache.key) {
cache.key = props.theme.systemPropsCacheKey;
isCacheBusted = true;
}
var parseEntry = function parseEntry(obj, key) {
var systemConfig = config[key];
var propValue = obj[key];
var scale = get(props.theme, systemConfig.scale);
if (typeof propValue === 'function') {
// e.g.,
// <Box border={t => `1px solid ${t.colors.primary}`} />
propValue = propValue(props.theme);
}
if (typeof propValue === 'object') {
var _props$theme2;
cache.breakpoints = !isCacheBusted && cache.breakpoints || (props == null ? void 0 : (_props$theme2 = props.theme) == null ? void 0 : _props$theme2.breakpoints);
if (Array.isArray(propValue)) {
if (typeof cache.breakpoints === 'undefined') {
throw new Error('The system props parser could not find a `breakpoints` property in the theme object, which is required for responsive styles to work. Make sure that the theme object has a breakpoints property.');
}
cache.media = !isCacheBusted && cache.media || [null].concat(parseBreakpoints(cache.breakpoints));
return parseResponsiveStyle({
cache: cache,
systemConfig: systemConfig,
scale: scale,
propValue: propValue,
props: obj
});
}
if (propValue !== null) {
shouldSort = true;
return parseResponsiveObject({
cache: cache,
systemConfig: systemConfig,
scale: scale,
propValue: propValue,
props: obj
});
}
}
return systemConfig(propValue, scale, props, cache);
};
for (var key in props) {
// e.g., { _hover: { ... } }
if (pseudoSelectors[key]) {
// _hover -> '&:hover'
var pseudoSelector = pseudoSelectors[key];
var pseudoStyles = props[key];
for (var pseudoStyleKey in pseudoStyles) {
styles[pseudoSelector] = _extends({}, styles[pseudoSelector], parseEntry(pseudoStyles, pseudoStyleKey)); // sort object-based responsive styles
if (shouldSort) {
styles[pseudoSelectors[key]] = sort(styles[pseudoSelectors[key]]);
shouldSort = false;
}
}
continue;
} // the prop is not a system prop, so bail
if (!config[key]) {
continue;
}
styles = merge(styles, parseEntry(props, key));
} // 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, _Object$assign;
Object.assign(parse, (_Object$assign = {}, _Object$assign[key] = createParser((_createParser = {}, _createParser[key] = config[key], _createParser)), _Object$assign));
});
}
return parse;
};
var createSystem = function createSystem(_temp) {
var _ref = _temp === void 0 ? {} : _temp,
_ref$strict = _ref.strict,
strict = _ref$strict === void 0 ? false : _ref$strict,
_ref$pseudoSelectors = _ref.pseudoSelectors,
pseudoSelectors$1 = _ref$pseudoSelectors === void 0 ? pseudoSelectors : _ref$pseudoSelectors,
_ref$tokenPrefix = _ref.tokenPrefix,
tokenPrefix = _ref$tokenPrefix === void 0 ? 'prefix' : _ref$tokenPrefix;
var system = function system(arg) {
var config = {};
Object.keys(arg).forEach(function (key) {
var conf = arg[key];
if (conf === true) {
// shortcut definition
config[key] = createStyleFunction({
property: key,
scale: key,
tokenPrefix: tokenPrefix
});
return;
}
if (typeof conf === 'function') {
return;
}
config[key] = createStyleFunction(_extends({}, conf, {
tokenPrefix: tokenPrefix
}));
});
var parser = createParser(config, pseudoSelectors$1, strict);
return parser;
};
return system;
};
var createCss = function createCss(propConfig, options) {
if (options === void 0) {
options = {
tokenPrefix: 'prefix'
};
}
var _options = options,
tokenPrefix = _options.tokenPrefix;
var config = {};
Object.keys(propConfig).forEach(function (key) {
var conf = propConfig[key];
if (conf === true) {
// shortcut definition
config[key] = createStyleFunction({
property: key,
scale: key,
tokenPrefix: tokenPrefix
});
return;
}
if (typeof conf === 'function') {
return;
}
config[key] = createStyleFunction(_extends({}, conf, {
tokenPrefix: tokenPrefix
}));
});
var css = function css(args) {
return function (_ref) {
var theme = _ref.theme;
if (typeof args === 'undefined') {
return;
}
var result = {};
var styles = typeof args === 'function' ? args(theme) : args;
for (var key in styles) {
var x = styles[key]; // Nested selectors (pseudo selectors, media query)
if (x && typeof x === 'object') {
var nestedStyles = x; // If key is a mediaQueries token value
var _get = memoizedGet[tokenPrefix];
var maybeQuery = _get(theme.mediaQueries, key);
if (typeof maybeQuery !== 'undefined') {
result[maybeQuery] = css(nestedStyles)({
theme: theme
});
continue;
}
result[key] = css(nestedStyles)({
theme: theme
});
continue;
}
var systemConfig = config[key]; // Not a token in the config, let pass through
if (!systemConfig) {
result[key] = x;
continue;
}
var scale = get(theme, systemConfig.scale);
var propValue = x;
result = merge(result, systemConfig(propValue, scale, {
theme: theme
}));
}
return result;
};
};
return css;
};
var allProps = /*#__PURE__*/_extends({}, pseudoSelectors, background, border, color, grid, flexbox, layout, position, shadow, space, typography);

@@ -1383,3 +1413,7 @@

export { background, border, color, createSystem, flexContainer, flexItem, flexbox, grid, gridContainer, gridItem, layout, margin, padding, position, propNames, pseudoSelectors, shadow, shouldForwardProp, space, layout$1 as styledSystemLayout, transition, typography };
var css = /*#__PURE__*/createCss( /*#__PURE__*/_extends({}, background, border, color, flexbox, grid, layout, position, shadow, space, transition, typography), {
tokenPrefix: 'prefix'
});
export { background, border, color, createCss, createSystem, css, flexContainer, flexItem, flexbox, grid, gridContainer, gridItem, layout, margin, padding, position, propNames, pseudoSelectors, shadow, shouldForwardProp, space, layout$1 as styledSystemLayout, transition, typography };
//# sourceMappingURL=system-props.esm.js.map

7

dist/types.d.ts
import { Property as P, Properties as CSSProperties, Color, Paint } from './css-types';
declare type KeysOfArray = keyof [];
export declare type KeyOf<T extends []> = Exclude<keyof T, KeysOfArray>;
export declare type KeyOf<T> = T extends Array<any> ? number | Exclude<keyof T, keyof []> : T extends object ? keyof T : never;
export declare type TokenScales = 'colors' | 'sizes' | 'space' | 'borders' | 'borderStyles' | 'borderWidths' | 'letterSpacings' | 'zIndices' | 'shadows' | 'fontWeights' | 'fontSizes' | 'lineHeights' | 'fonts' | 'radii' | 'mediaQueries' | 'transitions' | 'transitionDurations' | 'transitionTimingFunctions' | 'breakpoints';

@@ -17,4 +16,4 @@ export interface Theme {

export declare type PrefixDefault = 'prefix';
declare type ScaleLookup<Token extends TokenScales, TTheme extends Theme = Theme> = TTheme[Token] extends Array<string | number> ? TTheme[Token][number] | KeyOf<TTheme[Token]> : TTheme[Token] extends object ? KeyOf<TTheme[Token]> : never;
export declare type PrefixToken<Token extends TokenScales, PrefixOption extends PrefixOptions, TTheme extends Theme = Theme> = PrefixOption extends 'all' ? ScaleLookup<Token, TTheme> | `$${(number | string) & ScaleLookup<Token, TTheme>}` : PrefixOption extends 'prefix' ? `$${(number | string) & ScaleLookup<Token, TTheme>}` : PrefixOption extends 'noprefix' ? ScaleLookup<Token, TTheme> : never;
declare type ScaleLookup<Token extends TokenScales, TTheme extends Theme = Theme> = KeyOf<TTheme[Token]>;
export declare type PrefixToken<Token extends TokenScales, PrefixOption extends PrefixOptions, TTheme extends Theme = Theme> = PrefixOption extends 'all' ? ScaleLookup<Token, TTheme> | `$${string & ScaleLookup<Token, TTheme>}` : PrefixOption extends 'prefix' ? `$${string & ScaleLookup<Token, TTheme>}` : PrefixOption extends 'noprefix' ? ScaleLookup<Token, TTheme> : never;
declare type MaybeToken<CSSProperty extends any, PrefixOption extends PrefixOptions = PrefixDefault, Token extends TokenScales | null = null> = Token extends TokenScales ? SystemProp<PrefixToken<Token, PrefixOption> | CSSProperty> : SystemProp<CSSProperty>;

@@ -21,0 +20,0 @@ export declare type Props = {

4

package.json
{
"name": "system-props",
"version": "0.19.0-4",
"version": "0.19.0-5",
"description": "Inspired by styled-system, a responsive, theme-based style props for building design systems with React.",

@@ -14,3 +14,3 @@ "author": "Rogin Farrer",

"@rollup/plugin-alias": "^3.1.1",
"csstype": "^3.0.5",
"csstype": "^3.0.7",
"eslint-plugin-no-only-tests": "^2.4.0",

@@ -17,0 +17,0 @@ "eslint-plugin-prettier": "^3.1.4",

2

src/__tests__/exports.test.ts

@@ -9,3 +9,5 @@ import * as AllExports from '..';

"color",
"createCss",
"createSystem",
"css",
"flexContainer",

@@ -12,0 +14,0 @@ "flexItem",

39

src/core/createCss.ts
import { get, memoizedGet } from './get';
import { Theme, SystemConfig, PrefixOptions } from '../types';
import {
PropConfigCollection,
Theme,
SystemConfig,
PrefixOptions,
} from '../types';
import { CSSObject } from '../css-prop';
import { merge } from './merge';
import * as CSS from 'csstype';
import { createStyleFunction } from './createStyleFunction';

@@ -15,5 +22,25 @@ type CSSFunctionArgs<T extends PrefixOptions> =

export const createCss = (
config: { [x: string]: SystemConfig },
tokenPrefix: 'all' | 'prefix' | 'noprefix'
propConfig: PropConfigCollection,
options: { tokenPrefix: PrefixOptions } = { tokenPrefix: 'prefix' }
) => {
const { tokenPrefix } = options;
const config: { [x: string]: SystemConfig } = {};
Object.keys(propConfig).forEach((key) => {
const conf = propConfig[key];
if (conf === true) {
// shortcut definition
config[key] = createStyleFunction({
property: key as keyof CSS.Properties,
scale: key,
tokenPrefix,
});
return;
}
if (typeof conf === 'function') {
return;
}
config[key] = createStyleFunction({ ...conf, tokenPrefix });
});
const css: CSSFunction<typeof tokenPrefix> = (args) => ({ theme }) => {

@@ -32,2 +59,4 @@ if (typeof args === 'undefined') {

if (x && typeof x === 'object') {
const nestedStyles = x as CSSObject<typeof tokenPrefix>;
// If key is a mediaQueries token value

@@ -37,7 +66,7 @@ const _get = memoizedGet[tokenPrefix];

if (typeof maybeQuery !== 'undefined') {
result[maybeQuery] = css(x)({ theme });
result[maybeQuery] = css(nestedStyles)({ theme });
continue;
}
result[key] = css(x)({ theme });
result[key] = css(nestedStyles)({ theme });
continue;

@@ -44,0 +73,0 @@ }

8

src/core/createSystem.ts

@@ -11,4 +11,2 @@ import { parseResponsiveStyle, parseResponsiveObject } from './parseResponsive';

Cache,
PrefixDefault,
PrefixOptions,
} from '../types';

@@ -19,5 +17,4 @@ import { sort } from './sort';

import * as CSS from 'csstype';
import { createCss, CSSFunction } from './createCss';
export interface Parser<TokenPrefix extends PrefixOptions = PrefixDefault> {
export interface Parser {
(...args: any[]): any;

@@ -27,3 +24,2 @@ config: { [key: string]: SystemConfig };

cache: Cache;
css?: CSSFunction<TokenPrefix>;
}

@@ -194,4 +190,2 @@

const parser = createParser(config, pseudoSelectors, strict);
const cssFunction = createCss(config, tokenPrefix);
parser.css = cssFunction;
return parser;

@@ -198,0 +192,0 @@ };

1

src/core/index.ts
export { get } from './get';
export { createSystem } from './createSystem';
export { createCss } from './createCss';

66

src/core/tests/system.test.ts

@@ -436,67 +436,1 @@ import { createSystem } from '../createSystem';

});
test('parser has a css property that also parses styles', () => {
const system = createSystem();
const parser = system({
color: true,
backgroundColor: {
property: 'backgroundColor',
scale: 'colors',
},
mx: {
scale: 'space',
properties: ['marginLeft', 'marginRight'],
},
size: {
properties: ['height', 'width'],
},
});
expect(typeof parser.css).toBe('function');
// @ts-ignore
const styles = parser.css({
color: 'tomato',
backgroundColor: '$primary',
mx: '$2',
size: '400px',
opacity: 1,
':hover': {
opacity: 0.5,
},
$bp1: {
color: 'green',
},
'@media and (min-width: 300px)': {
mx: '$3',
},
})({
theme: {
breakpoints,
mediaQueries: breakpoints.reduce((acc, bp, index) => {
return { ...acc, [`bp${index + 1}`]: `@media and (min-width: ${bp})` };
}, {}),
space: ['0px', '4px', '8px', '16px', '32px'],
colors: {
primary: 'rebeccapurple',
},
},
});
expect(styles).toEqual({
color: 'tomato',
backgroundColor: 'rebeccapurple',
marginLeft: '8px',
marginRight: '8px',
height: '400px',
width: '400px',
opacity: 1,
':hover': {
opacity: 0.5,
},
'@media and (min-width: 40em)': {
color: 'green',
},
'@media and (min-width: 300px)': {
marginLeft: '16px',
marginRight: '16px',
},
});
});

43

src/css-prop.ts

@@ -10,3 +10,7 @@ import * as CSS from 'csstype';

interface PropertiesToScales extends Record<keyof CSS.Properties, TokenScales> {
// Autocomplete string values, also allow raw numbers which
// most libraries will convert to pixel values
export type CSSProperties = CSS.Properties<(string & {}) | number>;
interface PropertiesToScales extends Record<keyof CSSProperties, TokenScales> {
color: 'colors';

@@ -125,3 +129,3 @@ backgroundColor: 'colors';

export type CSSObject<
type InternalCss<
PrefixOption extends PrefixOptions = PrefixDefault,

@@ -131,7 +135,7 @@ TTheme extends Theme = Theme

// All regular CSS Property Keys to theme values & csstype
[K in keyof CSS.Properties]?:
[K in keyof CSSProperties]?:
| (PropertiesToScales[K] extends TokenScales
? PrefixToken<PropertiesToScales[K], PrefixOption, TTheme>
: never)
| CSS.Properties[K];
| CSSProperties[K];
} &

@@ -144,17 +148,32 @@ // Alias properties to theme values & csstype

: never)
| CSS.Properties[AliasToProperties[K]];
} &
| CSSProperties[AliasToProperties[K]];
} & {
[k: string]:
| InternalCss<PrefixOption, TTheme>
| string
| undefined
| number;
};
export type CSSObject<
PrefixOption extends PrefixOptions = PrefixDefault,
TTheme extends Theme = Theme
> = InternalCss<PrefixOption, TTheme> &
// Pseudo Selectors
{
[K in CSS.Pseudos]?: CSSObject<PrefixOption, TTheme>;
[K in CSS.Pseudos]?:
| CSSObject<PrefixOption, TTheme>
| string
| number
| undefined;
} &
// Theme Media Queries
{
[K in PrefixToken<'mediaQueries', PrefixOption, TTheme>]?: CSSObject<
PrefixOption,
TTheme
>;
[K in PrefixToken<'mediaQueries', PrefixOption, TTheme>]?:
| CSSObject<PrefixOption, TTheme>
| string
| number
| undefined;
} & {
// Any unknown selectors or properties
[k: string]: CSSObject<PrefixOption, TTheme> | string | number | undefined;
};

33

src/index.ts

@@ -1,3 +0,34 @@

export { createSystem } from './core/createSystem';
import {
background,
border,
color,
flexbox,
grid,
layout,
position,
shadow,
space,
transition,
typography,
} from './props';
import { createCss } from './core';
export const css = createCss(
{
...background,
...border,
...color,
...flexbox,
...grid,
...layout,
...position,
...shadow,
...space,
...transition,
...typography,
},
{ tokenPrefix: 'prefix' }
);
export { createSystem, createCss } from './core';
export * from './props';

@@ -4,0 +35,0 @@ export * from './pseudos';

19

src/types.ts

@@ -8,4 +8,7 @@ import {

type KeysOfArray = keyof [];
export type KeyOf<T extends []> = Exclude<keyof T, KeysOfArray>;
export type KeyOf<T> = T extends Array<any>
? number | Exclude<keyof T, keyof []>
: T extends object
? keyof T
: never;

@@ -58,7 +61,3 @@ export type TokenScales =

TTheme extends Theme = Theme
> = TTheme[Token] extends Array<string | number>
? TTheme[Token][number] | KeyOf<TTheme[Token]>
: TTheme[Token] extends object
? KeyOf<TTheme[Token]>
: never;
> = KeyOf<TTheme[Token]>;

@@ -70,7 +69,5 @@ export type PrefixToken<

> = PrefixOption extends 'all'
?
| ScaleLookup<Token, TTheme>
| `$${(number | string) & ScaleLookup<Token, TTheme>}`
? ScaleLookup<Token, TTheme> | `$${string & ScaleLookup<Token, TTheme>}`
: PrefixOption extends 'prefix'
? `$${(number | string) & ScaleLookup<Token, TTheme>}`
? `$${string & ScaleLookup<Token, TTheme>}`
: PrefixOption extends 'noprefix'

@@ -77,0 +74,0 @@ ? ScaleLookup<Token, TTheme>

dist/system-props.cjs.development.js.map

Sorry, the diff of this file is not supported yet

dist/system-props.cjs.production.min.js.map

Sorry, the diff of this file is not supported yet

dist/system-props.esm.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc