system-props - npm Package Compare versions

Comparing version 0.19.0-2 to 0.19.0-3

dist/core/createCss.d.ts

@@ -1,7 +0,8 @@
-import { Theme, SystemConfig } from '../types';
+import { Theme, SystemConfig, 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') => (args?: CSSObject<"prefix", Theme> | ((theme: Theme) => CSSObject) | undefined) => ({ theme, }: {
-    theme: Theme;
-}) => CSSObject<"prefix", Theme> | undefined;
+}, tokenPrefix: 'all' | 'prefix' | 'noprefix') => CSSFunction<PrefixOptions>;
+export {};

dist/core/createSystem.d.ts

@@ -1,4 +0,4 @@
-import { SystemConfig, PropConfigCollection, Cache, Theme } from '../types';
-import { CSSObject } from '../css-prop';
-export interface Parser {
+import { SystemConfig, PropConfigCollection, Cache, PrefixDefault, PrefixOptions } from '../types';
+import { CSSFunction } from './createCss';
+export interface Parser<TokenPrefix extends PrefixOptions = PrefixDefault> {
     (...args: any[]): any;
@@ -10,6 +10,4 @@ config: {
     cache: Cache;
+    css?: CSSFunction<TokenPrefix>;
 }
-interface ParserWithCSS extends Parser {
-    css: (args?: CSSObject | ((theme: Theme) => CSSObject)) => (theme: Theme) => any;
-}
 export declare const createParser: (config: {
@@ -19,3 +17,3 @@ [x: string]: SystemConfig;
     [x: string]: string;
-}, strict?: boolean) => Parser;
+}, strict?: boolean) => Parser<"prefix">;
 export declare const createSystem: ({ strict, pseudoSelectors, tokenPrefix, }?: {
@@ -25,3 +23,2 @@ pseudoSelectors?: Record<string, string> | undefined;
     tokenPrefix?: "all" | "prefix" | "noprefix" | undefined;
-}) => (arg: PropConfigCollection) => ParserWithCSS;
-export {};
+}) => (arg: PropConfigCollection) => Required<Parser<PrefixOptions>>;

dist/system-props.cjs.development.js

@@ -518,5 +518,4 @@ 'use strict';
     var parser = createParser(config, pseudoSelectors$1, strict);
-    Object.assign(parser, {
-      css: createCss(config, tokenPrefix)
-    });
+    var cssFunction = createCss(config, tokenPrefix);
+    parser.css = cssFunction;
     return parser;
@@ -523,0 +522,0 @@ };

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,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}}}},u=function(r){return"@media screen and (min-width: "+r+")"},g={background:!0,backgroundImage:!0,backgroundSize:!0,backgroundPosition:!0,backgroundRepeat:!0};g.bgImage=g.backgroundImage,g.bgSize=g.backgroundSize,g.bgPosition=g.backgroundPosition,g.bgRepeat=g.backgroundRepeat;var h,m="",y=0,b=[[]],v=function(r){if(x(),b=[[]],!r)return b;for(var e=r.length,t=0;t<e;t++){var o=r[t];switch(o){case" ":1===h?R():h&&(m+=o);break;case",":y?m+=o:(R(),b[b.length]=[],x());break;case'"':m+=o,y||h?1===y&&2===h&&(y=0,R()):(h=2,y=1);break;case"(":y||(h=3),y++,m+=o;break;case")":m+=o,y--,3!==h||y||R();break;case"[":y||(h=4),m+=o,y++;break;case"]":m+=o,--y||R();break;default:h||(h=1),m+=o}}return m&&R(),b};function x(){y=h=0,m=""}function R(){h&&b[b.length-1].push(m),x()}var k=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=v(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(" ")},S={border:{property:"border",scale:"borders",transform:k},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:k},borderTopLeftRadius:{property:"borderTopLeftRadius",scale:"radii"},borderTopRightRadius:{property:"borderTopRightRadius",scale:"radii"},borderRight:{property:"borderRight",scale:"borders",transform:k},borderBottom:{property:"borderBottom",scale:"borders",transform:k},borderBottomLeftRadius:{property:"borderBottomLeftRadius",scale:"radii"},borderBottomRightRadius:{property:"borderBottomRightRadius",scale:"radii"},borderLeft:{property:"borderLeft",scale:"borders",transform:k},borderX:{properties:["borderLeft","borderRight"],scale:"borders",transform:k},borderY:{properties:["borderTop","borderBottom"],scale:"borders",transform:k},borderTopWidth:{property:"borderTopWidth",scale:"borderWidths"},borderTopColor:{property:"borderTopColor",scale:"colors"},borderTopStyle:{property:"borderTopStyle",scale:"borderStyles"}};S.borderTopLeftRadius={property:"borderTopLeftRadius",scale:"radii"},S.borderTopRightRadius={property:"borderTopRightRadius",scale:"radii"},S.borderBottomWidth={property:"borderBottomWidth",scale:"borderWidths"},S.borderBottomColor={property:"borderBottomColor",scale:"colors"},S.borderBottomStyle={property:"borderBottomStyle",scale:"borderStyles"},S.borderBottomLeftRadius={property:"borderBottomLeftRadius",scale:"radii"},S.borderBottomRightRadius={property:"borderBottomRightRadius",scale:"radii"},S.borderLeftWidth={property:"borderLeftWidth",scale:"borderWidths"},S.borderLeftColor={property:"borderLeftColor",scale:"colors"},S.borderLeftStyle={property:"borderLeftStyle",scale:"borderStyles"},S.borderRightWidth={property:"borderRightWidth",scale:"borderWidths"},S.borderRightColor={property:"borderRightColor",scale:"colors"},S.borderRightStyle={property:"borderRightStyle",scale:"borderStyles"};var w=S,j={color:{property:"color",scale:"colors"},backgroundColor:{property:"backgroundColor",scale:"colors"},fill:{property:"fill",scale:"colors"},stroke:{property:"stroke",scale:"colors"},opacity:!0};j.bg=j.backgroundColor,j.textColor=j.color;var C={alignItems:!0,alignContent:!0,justifyItems:!0,justifyContent:!0,flexWrap:!0,flexDirection:!0},W={flex:!0,flexGrow:!0,flexShrink:!0,flexBasis:!0,justifySelf:!0,alignSelf:!0,order:!0},T=r({},C,W),B={gridArea:!0,gridColumnStart:!0,gridColumnEnd:!0,gridRowStart:!0,gridRowEnd:!0,justifySelf:!0,alignSelf:!0,placeSelf:!0},L={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},_=r({},B,L),z={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},O=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(!O(e)){if("string"==typeof e&&e.startsWith("-")){var a=e.slice(1),s=i(t,a,a);return O(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 O(d)?d*(n?-1:1):null!=d?n?"-"+d:d:void 0},A={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}},I=function(r){var e=r.path,t=r.get,o=r.props;return t(r.object,e)||("string"==typeof e?v(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)},H={boxShadow:{property:"boxShadow",scale:"shadows",transform:I},textShadow:{property:"textShadow",scale:"shadows",transform:I}},E=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},F=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},G={margin:{property:"margin",scale:"space",transform:E},marginTop:{property:"marginTop",scale:"space",transform:E},marginRight:{property:"marginRight",scale:"space",transform:E},marginBottom:{property:"marginBottom",scale:"space",transform:E},marginLeft:{property:"marginLeft",scale:"space",transform:E},marginX:{properties:["marginLeft","marginRight"],scale:"space",transform:E},marginY:{properties:["marginTop","marginBottom"],scale:"space",transform:E}};G.m=G.margin,G.mt=G.marginTop,G.mr=G.marginRight,G.mb=G.marginBottom,G.ml=G.marginLeft,G.mx=G.marginX,G.my=G.marginY;var X={padding:{property:"padding",scale:"space",transform:F},paddingTop:{property:"paddingTop",scale:"space",transform:F},paddingRight:{property:"paddingRight",scale:"space",transform:F},paddingBottom:{property:"paddingBottom",scale:"space",transform:F},paddingLeft:{property:"paddingLeft",scale:"space",transform:F},paddingX:{properties:["paddingLeft","paddingRight"],scale:"space",transform:F},paddingY:{properties:["paddingTop","paddingBottom"],scale:"space",transform:F}};X.p=X.padding,X.pt=X.paddingTop,X.pr=X.paddingRight,X.pb=X.paddingBottom,X.pl=X.paddingLeft,X.px=X.paddingX,X.py=X.paddingY;var Y=r({},X,G),N={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=v(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},D={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},M={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},V=Object.keys(r({},l,g,w,j,_,T,z,A,H,Y,D)),K=new Set(V);exports.background=g,exports.border=w,exports.color=j,exports.createSystem=function(t){var o=void 0===t?{}:t,i=o.strict,a=void 0!==i&&i,n=o.pseudoSelectors,d=void 0===n?l:n,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 i=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 f=function(i,a){var n,p,c=o[a],f=i[a],g=e(t.theme,c.scale);if("function"==typeof f&&(f=f(t.theme)),"object"==typeof f){var h;if(s.breakpoints=!l&&s.breakpoints||(null==t||null==(h=t.theme)?void 0:h.breakpoints),Array.isArray(f)){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(u))),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:f,props:i})}if(null!==f)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:f,props:i})}return c(f,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],f(m,y)),d&&(n[i[g]]=p(n[i[g]]),d=!1)}else o[g]&&(n=c(n,f(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,d,a);return Object.assign(i,{css:f(o,h)}),i}},exports.flexContainer=C,exports.flexItem=W,exports.flexbox=T,exports.grid=_,exports.gridContainer=L,exports.gridItem=B,exports.layout=z,exports.margin=G,exports.padding=X,exports.position=A,exports.propNames=V,exports.pseudoSelectors=l,exports.shadow=H,exports.shouldForwardProp=function(r){return!K.has(r)},exports.space=Y,exports.styledSystemLayout=M,exports.transition=N,exports.typography=D;
+"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;
 //# sourceMappingURL=system-props.cjs.production.min.js.map

dist/system-props.esm.js

@@ -514,5 +514,4 @@ function _extends() {
     var parser = createParser(config, pseudoSelectors$1, strict);
-    Object.assign(parser, {
-      css: createCss(config, tokenPrefix)
-    });
+    var cssFunction = createCss(config, tokenPrefix);
+    parser.css = cssFunction;
     return parser;
@@ -519,0 +518,0 @@ };

package.json

 {
   "name": "system-props",
-  "version": "0.19.0-2",
+  "version": "0.19.0-3",
   "description": "Inspired by styled-system, a responsive, theme-based style props for building design systems with React.",
@@ -5,0 +5,0 @@ "author": "Rogin Farrer",

src/core/createCss.ts

 import { get, memoizedGet } from './get';
-import { Theme, SystemConfig } from '../types';
+import { Theme, SystemConfig, PrefixOptions } from '../types';
 import { CSSObject } from '../css-prop';
 import { merge } from './merge';
 
+type CSSFunctionArgs<T extends PrefixOptions> =
+  | CSSObject<T>
+  | ((theme: Theme) => CSSObject<T>);
+
+export type CSSFunction<T extends PrefixOptions> = (
+  args?: CSSFunctionArgs<T>
+) => (theme: Theme) => CSSObject<T> | undefined;
+
 export const createCss = (
@@ -10,7 +18,3 @@ config: { [x: string]: SystemConfig },
 ) => {
-  const css = (args?: CSSObject | ((theme: Theme) => CSSObject)) => ({
-    theme,
-  }: {
-    theme: Theme;
-  }) => {
+  const css: CSSFunction<typeof tokenPrefix> = (args) => ({ theme }) => {
     if (typeof args === 'undefined') {
@@ -20,3 +24,3 @@ return;
 
-    let result: CSSObject = {};
+    let result: CSSObject<typeof tokenPrefix> = {};
     const styles = typeof args === 'function' ? args(theme) : args;
@@ -23,0 +27,0 @@

src/core/createSystem.ts

@@ -11,3 +11,4 @@ import { parseResponsiveStyle, parseResponsiveObject } from './parseResponsive';
   Cache,
-  Theme,
+  PrefixDefault,
+  PrefixOptions,
 } from '../types';
@@ -18,6 +19,5 @@ import { sort } from './sort';
 import * as CSS from 'csstype';
-import { CSSObject } from '../css-prop';
-import { createCss } from './createCss';
+import { createCss, CSSFunction } from './createCss';
 
-export interface Parser {
+export interface Parser<TokenPrefix extends PrefixOptions = PrefixDefault> {
   (...args: any[]): any;
@@ -27,10 +27,5 @@ config: { [key: string]: SystemConfig };
   cache: Cache;
+  css?: CSSFunction<TokenPrefix>;
 }
 
-interface ParserWithCSS extends Parser {
-  css: (
-    args?: CSSObject | ((theme: Theme) => CSSObject)
-  ) => (theme: Theme) => any;
-}
-
 const createMediaQuery = (n: string) => `@media screen and (min-width: ${n})`;
@@ -199,4 +194,5 @@
     const parser = createParser(config, pseudoSelectors, strict);
-    Object.assign(parser, { css: createCss(config, tokenPrefix) });
-    return parser as ParserWithCSS;
+    const cssFunction = createCss(config, tokenPrefix);
+    parser.css = cssFunction;
+    return parser as Required<Parser<typeof tokenPrefix>>;
   };
@@ -203,0 +199,0 @@

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

410253

increased by0.24%

Number of low supply chain risk alerts

1

decreased by-50%

Worsened metrics

Lines of code

6634

decreased by-0.08%

No dependency changes