system-props - npm Package Compare versions

Comparing version 0.17.0-1 to 0.17.0-2

dist/core/createSystem.d.ts

@@ -1,2 +0,2 @@
-import { SystemConfig, PropConfigCollection, Cache, Get } from '../types';
+import { SystemConfig, PropConfigCollection, Cache } from '../types';
 export interface Parser {
@@ -15,6 +15,6 @@ (...args: any[]): any;
 }, strict?: boolean) => Parser;
-export declare const createSystem: ({ strict, pseudoSelectors, get, }?: {
+export declare const createSystem: ({ strict, pseudoSelectors, tokenPrefix, }?: {
     pseudoSelectors?: Record<string, string> | undefined;
     strict?: boolean | undefined;
-    get?: Get | undefined;
+    tokenPrefix?: "all" | "prefix" | "noprefix" | undefined;
 }) => (arg: PropConfigCollection) => Parser;

dist/core/get.d.ts

 import { Get } from '../types';
 /**
  * Generic "get" function
+ * Used with 'noprefix' tokenPrefix value
  */
@@ -8,5 +9,15 @@ export declare const get: Get;
  * Requires path to have '$' prefixing the value
+ * Used with 'prefix' tokenPrefix value
  */
-export declare const tokenGet: Get;
+export declare const prefixGet: Get;
+/**
+ * Supports '$' prefix or not
+ * Used with 'all' tokenPrefix value
+ */
+export declare const allGet: Get;
 export declare const memoizeGet: (fn: Get) => Get;
-export declare const memoizedGet: Get;
+export declare const memoizedGet: {
+    all: Get;
+    prefix: Get;
+    noprefix: Get;
+};

dist/core/index.d.ts

@@ -1,2 +0,2 @@
-export { tokenGet, memoizeGet, get, memoizedGet } from './get';
+export { get } from './get';
 export { createSystem } from './createSystem';

dist/index.d.ts

@@ -1,2 +0,1 @@
-export { memoizeGet, get, tokenGet } from './core/get';
 export { createSystem } from './core/createSystem';
@@ -3,0 +2,0 @@ export * from './props';

dist/system-props.cjs.development.js

@@ -5,68 +5,2 @@ 'use strict';
 
-/**
- * Generic "get" function
- */
-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
- */
-
-var tokenGet = function tokenGet(object, path, defaultValue) {
-  var result;
-
-  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 = /*#__PURE__*/memoizeGet(tokenGet);
-
 function _extends() {
@@ -156,2 +90,91 @@ _extends = Object.assign || function (target) {
 
+/**
+ * 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;
+  };
+
+  Object.assign(memoizedFn, {
+    displayName: fn.name
+  });
+  return memoizedFn;
+};
+var memoizedGet = {
+  all: /*#__PURE__*/memoizeGet(allGet),
+  prefix: /*#__PURE__*/memoizeGet(prefixGet),
+  noprefix: /*#__PURE__*/memoizeGet(get)
+};
+
 var defaultTransform = function defaultTransform(_ref) {
@@ -172,10 +195,12 @@ var path = _ref.path,
       defaultScale = _ref2.defaultScale,
-      get = _ref2.get;
+      tokenPrefix = _ref2.tokenPrefix;
 
   var _properties = properties || [property];
 
-  if (typeof get !== 'function') {
-    throw new Error('');
+  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) {
@@ -417,4 +442,4 @@ var result = {};
       pseudoSelectors$1 = _ref$pseudoSelectors === void 0 ? pseudoSelectors : _ref$pseudoSelectors,
-      _ref$get = _ref.get,
-      get = _ref$get === void 0 ? memoizedGet : _ref$get;
+      _ref$tokenPrefix = _ref.tokenPrefix,
+      tokenPrefix = _ref$tokenPrefix === void 0 ? 'prefix' : _ref$tokenPrefix;
 
@@ -431,3 +456,3 @@ var system = function system(arg) {
           scale: key,
-          get: get
+          tokenPrefix: tokenPrefix
         });
@@ -442,3 +467,3 @@ return;
       config[key] = createStyleFunction(_extends({}, conf, {
-        get: get
+        tokenPrefix: tokenPrefix
       }));
@@ -1273,3 +1298,2 @@ });
 exports.flexbox = flexbox;
-exports.get = get;
 exports.grid = grid;
@@ -1280,3 +1304,2 @@ exports.gridContainer = gridContainer;
 exports.margin = margin;
-exports.memoizeGet = memoizeGet;
 exports.padding = padding;
@@ -1290,4 +1313,3 @@ exports.position = position;
 exports.styledSystemLayout = layout$1;
-exports.tokenGet = tokenGet;
 exports.typography = typography;
 //# sourceMappingURL=system-props.cjs.development.js.map

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

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=function(r,e,t){if(!r)return t;for(var o="string"==typeof e?e.split("."):[e],a=r,i=0;i<o.length;i++){var s=o[i];a=!a||"number"!=typeof s&&"string"!=typeof s?void 0:a[s]}return void 0===a?t:a},e=function(e,t,o){var a;return"string"==typeof t&&t.startsWith("$")&&(a=r(e,t.slice(1))),void 0===a?o:a},t=function(r){var e=new WeakMap;return function(t,o,a){if(void 0===t)return r(t,o,a);e.has(t)||e.set(t,new Map);var i=e.get(t);if(i.has(o))return i.get(o);var s=r(t,o,a);return i.set(o,s),s}},o=t(e);function a(){return(a=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)}var i=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?i:t,a=r.defaultScale,s=r.get,p=r.properties||[r.property];if("function"!=typeof s)throw new Error("");var n=function(r,e,t,a){var i,n={};return null===(i=o({path:r,object:e,props:t,strict:a.strict,get:s}))||p.forEach((function(r){r&&(n[r]=i)})),n};return Object.assign(n,{scale:e,defaultScale:a}),n},p=new Intl.Collator(void 0,{numeric:!0,sensitivity:"base"}),n=function(r){var e={};return Object.keys(r).sort((function(r,e){return p.compare(r,e)})).forEach((function(t){e[t]=r[t]})),e};function d(r,e){return a({},r,e)}var c=function(r,e){var t=d(r,e);for(var o in r){var a;r[o]&&"object"==typeof e[o]&&(t=d(t,((a={})[o]=d(r[o],e[o]),a)))}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=function e(t,o,i){void 0===o&&(o={}),void 0===i&&(i=!1);var s={strict:i,key:"__systemprops__"},p=function(e){var i,p={},d=!1,l=!1;void 0!==(null==(i=e.theme)?void 0:i.systemPropsCacheKey)&&e.theme.systemPropsCacheKey!==s.key&&(s.key=e.theme.systemPropsCacheKey,l=!0);var u=function(o,i){var p,n,c=t[i],u=o[i],g=r(e.theme,c.scale);if("function"==typeof u&&(u=u(e.theme)),"object"==typeof u){var h;if(s.breakpoints=!l&&s.breakpoints||(null==e||null==(h=e.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((n=p=s.breakpoints,Array.isArray(p)||(n=Object.values(p)),n.map(f))),function(r){var e=r.cache,t=r.systemConfig,o=r.scale,i=r.props,s={},p=e.media;return r.propValue.slice(0,p.length).forEach((function(r,n){var d,c="function"==typeof r?r(i.theme):r,l=p[n],f=t(c,o,i,e);s=a({},s,l?((d={})[l]=a({},s[l],f),d):f)})),s}({cache:s,systemConfig:c,scale:g,propValue:u,props:o})}if(null!==u)return d=!0,function(r){var e=r.cache,t=r.systemConfig,o=r.scale,i=r.propValue,s=r.props,p=e.breakpoints,n={};for(var d in i){var c=p[d],l=i[d],f=t("function"==typeof l?l(s.theme):l,o,s,e);if(c){var u,g="@media screen and (min-width: "+c+")";n=a({},n,((u={})[g]=a({},n[g],f),u))}else n=a({},n,f)}return n}({cache:s,systemConfig:c,scale:g,propValue:u,props:o})}return c(u,g,e,s)};for(var g in e)if(o[g]){var h=o[g],m=e[g];for(var b in m)p[h]=a({},p[h],u(m,b)),d&&(p[o[g]]=n(p[o[g]]),d=!1)}else t[g]&&(p=c(p,u(e,g)));return d&&(p=n(p)),p};p.config=t,p.propNames=Object.keys(t),p.cache=s;var d=Object.keys(t).filter((function(r){return"config"!==r}));return d.length>1&&d.forEach((function(r){var o,a;Object.assign(p,((a={})[r]=e(((o={})[r]=t[r],o)),a))})),p},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="",b=0,y=[[]],v=function(r){if(x(),y=[[]],!r)return y;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",":b?m+=o:(R(),y[y.length]=[],x());break;case'"':m+=o,b||h?1===b&&2===h&&(b=0,R()):(h=2,b=1);break;case"(":b||(h=3),b++,m+=o;break;case")":m+=o,b--,3!==h||b||R();break;case"[":b||(h=4),m+=o,b++;break;case"]":m+=o,--b||R();break;default:h||(h=1),m+=o}}return m&&R(),y};function x(){b=h=0,m=""}function R(){h&&y[y.length-1].push(m),x()}var k=function(r){var e,t,o,a,i=r.path,s=r.props,p=r.strict,n=r.get;if("string"!=typeof i)return i;var d=n((null==s||null==(e=s.theme)?void 0:e.borders)||r.object,i);if(d)return d;var c=v(i)[0],l=c[0],f=c[1],u=c[2];return[n(null==s||null==(t=s.theme)?void 0:t.borderWidths,l,p?void 0:l),n(null==s||null==(o=s.theme)?void 0:o.borderStyles,f,p?void 0:f),n(null==s||null==(a=s.theme)?void 0:a.colors,u,p?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},B=a({},C,W),T={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},z=a({},T,L),_={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)},A=function(r){var e=r.path,t=r.object,o=r.strict,a=r.get;if(!O(e)){if("string"==typeof e&&e.startsWith("-")){var i=e.slice(1),s=a(t,i,i);return O(s)?-1*s:"-"+s}return a(t,e,o?void 0:e)}var p=e<0,n=Math.abs(e),d=a(t,n,o?void 0:n);return O(d)?d*(p?-1:1):null!=d?p?"-"+d:d:void 0},H={position:!0,zIndex:{property:"zIndex",scale:"zIndices"},top:{property:"top",scale:"space",transform:A},right:{property:"right",scale:"space",transform:A},bottom:{property:"bottom",scale:"space",transform:A},left:{property:"left",scale:"space",transform:A}},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)},E={boxShadow:{property:"boxShadow",scale:"shadows",transform:I},textShadow:{property:"textShadow",scale:"shadows",transform:I}},G=function(r){var e=r.path,t=r.object,o=r.props,a=r.strict,i=r.get;if("number"==typeof e){var s=A({path:e,object:t,props:o,strict:a,get:i});if(s)return s}if("string"==typeof e){var p=e.split(" ");return 1===p.length?A({path:e,object:t,props:o,strict:a,get:i}):p.reduce((function(r,e){var s=A({get:i,path:e,object:t,props:o,strict:a});return"number"==typeof s&&(s+="px"),[].concat(r,[s])}),[]).filter(Boolean).join(" ")}return e},P=function(r){var e,t=r.path,o=r.props,a=r.strict,i=r.get;if("number"==typeof t){var s=i(r.object,t);if(s)return s}return"string"==typeof t?1===t.split(" ").length?i(null==o||null==(e=o.theme)?void 0:e.space,t,a?void 0:t):t.split(" ").reduce((function(r,e){var t,s=i(null==o||null==(t=o.theme)?void 0:t.space,e,a?void 0:e);return"number"==typeof s&&(s+="px"),[].concat(r,[s])}),[]).filter(Boolean).join(" "):t},X={margin:{property:"margin",scale:"space",transform:G},marginTop:{property:"marginTop",scale:"space",transform:G},marginRight:{property:"marginRight",scale:"space",transform:G},marginBottom:{property:"marginBottom",scale:"space",transform:G},marginLeft:{property:"marginLeft",scale:"space",transform:G},marginX:{properties:["marginLeft","marginRight"],scale:"space",transform:G},marginY:{properties:["marginTop","marginBottom"],scale:"space",transform:G}};X.m=X.margin,X.mt=X.marginTop,X.mr=X.marginRight,X.mb=X.marginBottom,X.ml=X.marginLeft,X.mx=X.marginX,X.my=X.marginY;var Y={padding:{property:"padding",scale:"space",transform:P},paddingTop:{property:"paddingTop",scale:"space",transform:P},paddingRight:{property:"paddingRight",scale:"space",transform:P},paddingBottom:{property:"paddingBottom",scale:"space",transform:P},paddingLeft:{property:"paddingLeft",scale:"space",transform:P},paddingX:{properties:["paddingLeft","paddingRight"],scale:"space",transform:P},paddingY:{properties:["paddingTop","paddingBottom"],scale:"space",transform:P}};Y.p=Y.padding,Y.pt=Y.paddingTop,Y.pr=Y.paddingRight,Y.pb=Y.paddingBottom,Y.pl=Y.paddingLeft,Y.px=Y.paddingX,Y.py=Y.paddingY;var F=a({},Y,X),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},M={width:{property:"width",scale:"sizes",transform:function(r){var e,t=r.path,o=r.object,a=r.get,i=t;return"number"!=typeof(e=t)||isNaN(e)||(i=t>1?t:100*t+"%"),a(o,t,i)}},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(a({},l,g,w,j,z,B,_,H,E,F,N)),K=new Set(V);exports.background=g,exports.border=w,exports.color=j,exports.createSystem=function(r){var e=void 0===r?{}:r,t=e.strict,i=void 0!==t&&t,p=e.pseudoSelectors,n=void 0===p?l:p,d=e.get,c=void 0===d?o:d;return function(r){var e={};return Object.keys(r).forEach((function(t){var o=r[t];!0!==o?"function"!=typeof o&&(e[t]=s(a({},o,{get:c}))):e[t]=s({property:t,scale:t,get:c})})),u(e,n,i)}},exports.flexContainer=C,exports.flexItem=W,exports.flexbox=B,exports.get=r,exports.grid=z,exports.gridContainer=L,exports.gridItem=T,exports.layout=_,exports.margin=X,exports.memoizeGet=t,exports.padding=Y,exports.position=H,exports.propNames=V,exports.pseudoSelectors=l,exports.shadow=E,exports.shouldForwardProp=function(r){return!K.has(r)},exports.space=F,exports.styledSystemLayout=M,exports.tokenGet=e,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=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,t=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};return Object.assign(t,{displayName:r.name}),t},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,p=r.tokenPrefix,n=r.properties||[r.property];if(!p||!["all","noprefix","prefix"].includes(p))throw new Error('Invalid tokenPrefix configuration option. Expected "all", "noprefix" or "prefix". Received: '+p);var d=i[p],c=function(r,e,t,i){var a,s={};return null===(a=o({path:r,object:e,props:t,strict:i.strict,get:d}))||n.forEach((function(r){r&&(s[r]=a)})),s};return Object.assign(c,{scale:e,defaultScale:s}),c},p=new Intl.Collator(void 0,{numeric:!0,sensitivity:"base"}),n=function(r){var e={};return Object.keys(r).sort((function(r,e){return p.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,b=[[]],y=function(r){if(v(),b=[[]],!r)return b;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(),b[b.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(),b};function v(){m=g=0,h=""}function x(){g&&b[b.length-1].push(h),v()}var R=function(r){var e,t,o,i,a=r.path,s=r.props,p=r.strict,n=r.get;if("string"!=typeof a)return a;var d=n((null==s||null==(e=s.theme)?void 0:e.borders)||r.object,a);if(d)return d;var c=y(a)[0],l=c[0],f=c[1],u=c[2];return[n(null==s||null==(t=s.theme)?void 0:t.borderWidths,l,p?void 0:l),n(null==s||null==(o=s.theme)?void 0:o.borderStyles,f,p?void 0:f),n(null==s||null==(i=s.theme)?void 0:i.colors,u,p?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),B={gridArea:!0,gridColumnStart:!0,gridColumnEnd:!0,gridRowStart:!0,gridRowEnd:!0,justifySelf:!0,alignSelf:!0,placeSelf:!0},T={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({},B,T),_={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)},O=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 p=e<0,n=Math.abs(e),d=i(t,n,o?void 0:n);return z(d)?d*(p?-1:1):null!=d?p?"-"+d:d:void 0},P={position:!0,zIndex:{property:"zIndex",scale:"zIndices"},top:{property:"top",scale:"space",transform:O},right:{property:"right",scale:"space",transform:O},bottom:{property:"bottom",scale:"space",transform:O},left:{property:"left",scale:"space",transform:O}},A=function(r){var e=r.path,t=r.get,o=r.props;return t(r.object,e)||("string"==typeof e?y(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=O({path:e,object:t,props:o,strict:i,get:a});if(s)return s}if("string"==typeof e){var p=e.split(" ");return 1===p.length?O({path:e,object:t,props:o,strict:i,get:a}):p.reduce((function(r,e){var s=O({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},G={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}};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 N={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}};N.p=N.padding,N.pt=N.paddingTop,N.pr=N.paddingRight,N.pb=N.paddingBottom,N.pl=N.paddingLeft,N.px=N.paddingX,N.py=N.paddingY;var X=r({},N,G),Y={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},F={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,_,P,I,X,Y)),V=new Set(M);exports.background=u,exports.border=S,exports.color=w,exports.createSystem=function(t){var o=void 0===t?{}:t,i=o.strict,a=void 0!==i&&i,p=o.pseudoSelectors,d=void 0===p?l:p,u=o.tokenPrefix,g=void 0===u?"prefix":u;return function(t){var o={};return Object.keys(t).forEach((function(e){var i=t[e];!0!==i?"function"!=typeof i&&(o[e]=s(r({},i,{tokenPrefix:g}))):o[e]=s({property:e,scale:e,tokenPrefix:g})})),function t(o,i,a){void 0===i&&(i={}),void 0===a&&(a=!1);var s={strict:a,key:"__systemprops__"},p=function(t){var a,p={},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 p,n,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((n=p=s.breakpoints,Array.isArray(p)||(n=Object.values(p)),n.map(f))),function(e){var t=e.cache,o=e.systemConfig,i=e.scale,a=e.props,s={},p=t.media;return e.propValue.slice(0,p.length).forEach((function(e,n){var d,c="function"==typeof e?e(a.theme):e,l=p[n],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,p=t.breakpoints,n={};for(var d in a){var c=p[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+")";n=r({},n,((u={})[g]=r({},n[g],f),u))}else n=r({},n,f)}return n}({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 b in m)p[h]=r({},p[h],u(m,b)),d&&(p[i[g]]=n(p[i[g]]),d=!1)}else o[g]&&(p=c(p,u(t,g)));return d&&(p=n(p)),p};p.config=o,p.propNames=Object.keys(o),p.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(p,((i={})[r]=t(((e={})[r]=o[r],e)),i))})),p}(o,d,a)}},exports.flexContainer=j,exports.flexItem=C,exports.flexbox=W,exports.grid=L,exports.gridContainer=T,exports.gridItem=B,exports.layout=_,exports.margin=G,exports.padding=N,exports.position=P,exports.propNames=M,exports.pseudoSelectors=l,exports.shadow=I,exports.shouldForwardProp=function(r){return!V.has(r)},exports.space=X,exports.styledSystemLayout=F,exports.typography=Y;
 //# sourceMappingURL=system-props.cjs.production.min.js.map

dist/system-props.esm.js

@@ -1,67 +0,1 @@
-/**
- * Generic "get" function
- */
-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
- */
-
-var tokenGet = function tokenGet(object, path, defaultValue) {
-  var result;
-
-  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 = /*#__PURE__*/memoizeGet(tokenGet);
-
 function _extends() {
@@ -151,2 +85,91 @@ _extends = Object.assign || function (target) {
 
+/**
+ * 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;
+  };
+
+  Object.assign(memoizedFn, {
+    displayName: fn.name
+  });
+  return memoizedFn;
+};
+var memoizedGet = {
+  all: /*#__PURE__*/memoizeGet(allGet),
+  prefix: /*#__PURE__*/memoizeGet(prefixGet),
+  noprefix: /*#__PURE__*/memoizeGet(get)
+};
+
 var defaultTransform = function defaultTransform(_ref) {
@@ -167,10 +190,12 @@ var path = _ref.path,
       defaultScale = _ref2.defaultScale,
-      get = _ref2.get;
+      tokenPrefix = _ref2.tokenPrefix;
 
   var _properties = properties || [property];
 
-  if (typeof get !== 'function') {
-    throw new Error('');
+  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) {
@@ -412,4 +437,4 @@ var result = {};
       pseudoSelectors$1 = _ref$pseudoSelectors === void 0 ? pseudoSelectors : _ref$pseudoSelectors,
-      _ref$get = _ref.get,
-      get = _ref$get === void 0 ? memoizedGet : _ref$get;
+      _ref$tokenPrefix = _ref.tokenPrefix,
+      tokenPrefix = _ref$tokenPrefix === void 0 ? 'prefix' : _ref$tokenPrefix;
 
@@ -426,3 +451,3 @@ var system = function system(arg) {
           scale: key,
-          get: get
+          tokenPrefix: tokenPrefix
         });
@@ -437,3 +462,3 @@ return;
       config[key] = createStyleFunction(_extends({}, conf, {
-        get: get
+        tokenPrefix: tokenPrefix
       }));
@@ -1261,3 +1286,3 @@ });
 
-export { background, border, color, createSystem, flexContainer, flexItem, flexbox, get, grid, gridContainer, gridItem, layout, margin, memoizeGet, padding, position, propNames, pseudoSelectors, shadow, shouldForwardProp, space, layout$1 as styledSystemLayout, tokenGet, typography };
+export { background, border, color, createSystem, flexContainer, flexItem, flexbox, grid, gridContainer, gridItem, layout, margin, padding, position, propNames, pseudoSelectors, shadow, shouldForwardProp, space, layout$1 as styledSystemLayout, typography };
 //# sourceMappingURL=system-props.esm.js.map

dist/types.d.ts

@@ -42,13 +42,12 @@ import { Property as P, Properties as CSSProperties, Color, Paint } from './css-types';
 }
-export declare type MaybeCSSProperty = keyof CSSProperties | (string & {});
 export declare type PropertyConfig = {
-    properties?: Array<MaybeCSSProperty>;
-    property?: MaybeCSSProperty;
+    properties?: Array<keyof CSSProperties>;
+    property?: keyof CSSProperties;
     scale?: string;
     defaultScale?: Array<string | number>;
     transform?: Transform;
-    get?: Get;
+    tokenPrefix?: 'prefix' | 'noprefix' | 'all';
 };
 export interface PropConfigCollection {
-    [key: string]: true | PropertyConfig;
+    [x: string]: true | PropertyConfig;
 }
@@ -55,0 +54,0 @@ export interface Cache {

package.json

 {
   "name": "system-props",
-  "version": "0.17.0-1",
+  "version": "0.17.0-2",
   "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/__tests__/exports.test.ts

@@ -13,3 +13,2 @@ import * as AllExports from '..';
       "flexbox",
-      "get",
       "grid",
@@ -20,3 +19,2 @@ "gridContainer",
       "margin",
-      "memoizeGet",
       "padding",
@@ -30,3 +28,2 @@ "position",
       "styledSystemLayout",
-      "tokenGet",
       "typography",
@@ -33,0 +30,0 @@ ]

src/core/createStyleFunction.ts

@@ -1,9 +0,3 @@
-// import { memoizedGet } from './get';
-import {
-  Props,
-  Cache,
-  StyleFunction,
-  Transform,
-  MaybeCSSProperty,
-} from '../types';
+import { memoizedGet } from './get';
+import { Props, Cache, StyleFunction, Transform } from '../types';
 import * as CSS from 'csstype';
@@ -21,10 +15,14 @@
   defaultScale,
-  get,
+  tokenPrefix,
 }) => {
   const _properties = properties || [property];
 
-  if (typeof get !== 'function') {
-    throw new Error('');
+  if (!tokenPrefix || !['all', 'noprefix', 'prefix'].includes(tokenPrefix)) {
+    throw new Error(
+      `Invalid tokenPrefix configuration option. Expected "all", "noprefix" or "prefix". Received: ${tokenPrefix}`
+    );
   }
 
+  const get = memoizedGet[tokenPrefix];
+
   const systemConfig = (
@@ -50,3 +48,3 @@ value: number | string,
     }
-    _properties.forEach((prop: MaybeCSSProperty | undefined) => {
+    _properties.forEach((prop: keyof CSS.Properties | undefined) => {
       if (prop) {
@@ -53,0 +51,0 @@ result[prop] = n;

src/core/createSystem.ts

@@ -163,7 +163,7 @@ import { parseResponsiveStyle, parseResponsiveObject } from './parseResponsive';
   pseudoSelectors = defaultPseudos,
-  get = defaultGet,
+  tokenPrefix = 'prefix',
 }: {
   pseudoSelectors?: Record<string, string>;
   strict?: boolean;
-  get?: Get;
+  tokenPrefix?: 'prefix' | 'noprefix' | 'all';
 } = {}) => {
@@ -179,3 +179,3 @@ const system = (arg: PropConfigCollection) => {
           scale: key,
-          get,
+          tokenPrefix,
         });
@@ -187,3 +187,3 @@ return;
       }
-      config[key] = createStyleFunction({ ...conf, get });
+      config[key] = createStyleFunction({ ...conf, tokenPrefix });
     });
@@ -190,0 +190,0 @@ const parser = createParser(config, pseudoSelectors, strict);

src/core/get.ts

@@ -5,2 +5,3 @@ import { Get } from '../types';
  * Generic "get" function
+ * Used with 'noprefix' tokenPrefix value
  */
@@ -33,4 +34,5 @@ export const get: Get = (object, path, defaultValue) => {
  * Requires path to have '$' prefixing the value
+ * Used with 'prefix' tokenPrefix value
  */
-export const tokenGet: Get = (object, path, defaultValue) => {
+export const prefixGet: Get = (object, path, defaultValue) => {
   let result;
@@ -45,2 +47,16 @@
 
+/**
+ * Supports '$' prefix or not
+ * Used with 'all' tokenPrefix value
+ */
+export const allGet: Get = (object, path, defaultValue) => {
+  let result = get(object, path);
+
+  if (typeof path === 'string' && path.startsWith('$')) {
+    result = get(object, path.slice(1));
+  }
+
+  return result === undefined ? defaultValue : result;
+};
+
 export const memoizeGet = (fn: Get) => {
@@ -71,5 +87,11 @@ let cache = new WeakMap();
 
+  Object.assign(memoizedFn, { displayName: fn.name });
+
   return memoizedFn;
 };
 
-export const memoizedGet = memoizeGet(tokenGet);
+export const memoizedGet = {
+  all: memoizeGet(allGet),
+  prefix: memoizeGet(prefixGet),
+  noprefix: memoizeGet(get),
+};

src/core/index.ts

@@ -1,2 +0,2 @@
-export { tokenGet, memoizeGet, get, memoizedGet } from './get';
+export { get } from './get';
 export { createSystem } from './createSystem';

src/core/tests/get.test.ts

@@ -1,43 +0,56 @@
-import { get, tokenGet, memoizeGet } from '../get';
+import { get, allGet, prefixGet, memoizeGet } from '../get';
 
-test('returns a deeply nested value', () => {
-  const a = get(
-    {
-      colors: {
-        blue: ['#0cf', '#0be', '#09d', '#07c'],
+describe('get', () => {
+  test('returns a deeply nested value', () => {
+    const a = get(
+      {
+        colors: {
+          blue: ['#0cf', '#0be', '#09d', '#07c'],
+        },
       },
-    },
-    'colors.blue.3'
-  );
-  expect(a).toBe('#07c');
-});
+      'colors.blue.3'
+    );
+    expect(a).toBe('#07c');
+  });
 
-test('supports fallback values', () => {
-  const a = get({}, 'hi', 'nope');
-  expect(a).toBe('nope');
-});
+  test('supports fallback values', () => {
+    const a = get({}, 'hi', 'nope');
+    expect(a).toBe('nope');
+  });
 
-test('handles number values', () => {
-  const a = get([1, 2, 3], 0);
-  expect(a).toBe(1);
-});
+  test('handles number values', () => {
+    const a = get([1, 2, 3], 0);
+    expect(a).toBe(1);
+  });
 
-test('handles undefined values', () => {
-  const a = get({});
-  expect(a).toBeUndefined();
-});
+  test('handles undefined values', () => {
+    const a = get({});
+    expect(a).toBeUndefined();
+  });
 
-test('handles null values', () => {
-  const a = get({}, null);
-  expect(a).toBeUndefined();
+  test('handles null values', () => {
+    const a = get({}, null);
+    expect(a).toBeUndefined();
+  });
+
+  test('returns 0 index items', () => {
+    const a = get(['a', 'b', 'c'], 0);
+    expect(a).toBe('a');
+  });
 });
 
-test('returns 0 index items', () => {
-  const a = get(['a', 'b', 'c'], 0);
-  expect(a).toBe('a');
+describe('get with prefix', () => {
+  test('returns number values with $', () => {
+    const a = prefixGet([0, 4, 8], '$2');
+    expect(a).toBe(8);
+  });
 });
 
-test('returns number values with $', () => {
-  const a = tokenGet([0, 4, 8], '$2');
-  expect(a).toBe(8);
+describe('get with prefix or without', () => {
+  test('returns number values with $', () => {
+    const a = allGet([0, 4, 8], '$2');
+    expect(a).toBe(8);
+    const b = allGet([0, 4, 8], 2);
+    expect(b).toBe(8);
+  });
 });
@@ -44,0 +57,0 @@

src/core/tests/system.test.ts

 import { createSystem } from '../createSystem';
-import { get } from '../get';
+import { space, color } from '../../props';
 
@@ -336,33 +336,101 @@ const breakpoints = [40, 52, 64].map((n) => n + 'em');
 
-test('supports custom get function', () => {
-  const system = createSystem({ get });
-  const parser = system({
-    margin: true,
-    padding: true,
-    backgroundColor: { property: 'backgroundColor', scale: 'colors' },
-    color: { property: 'color', scale: 'colors' },
+describe('tokenPrefix', () => {
+  test('default (prefix)', () => {
+    const system = createSystem();
+    const parser = system({
+      ...space,
+      ...color,
+    });
+    const styles = parser({
+      theme: {
+        systemPropsCacheKey: true,
+        colors: {
+          red: '#ff0000',
+          blue: '#0000ff',
+          green: '#00ff00',
+        },
+        space: {
+          250: '2px',
+          500: '4px',
+          1000: '8px',
+        },
+      },
+      color: '$red',
+      backgroundColor: '$green',
+      margin: 250,
+      padding: '$500',
+    });
+    expect(styles).toStrictEqual({
+      color: '#ff0000',
+      backgroundColor: '#00ff00',
+      margin: 250,
+      padding: '4px',
+    });
   });
-  const styles = parser({
-    theme: {
-      systemPropsCacheKey: true,
-      colors: {
-        red: '#ff0000',
-        blue: '#0000ff',
-        green: '#00ff00',
+
+  test('all', () => {
+    const system = createSystem({ tokenPrefix: 'all' });
+    const parser = system({
+      ...space,
+      ...color,
+    });
+    const styles = parser({
+      theme: {
+        systemPropsCacheKey: true,
+        colors: {
+          red: '#ff0000',
+          blue: '#0000ff',
+          green: '#00ff00',
+        },
+        space: {
+          250: '2px',
+          500: '4px',
+          1000: '8px',
+        },
       },
-      margin: {
-        250: '2px',
-        500: '4px',
-        1000: '8px',
+      color: 'red',
+      backgroundColor: 'green',
+      margin: 250,
+      padding: '$500',
+    });
+    expect(styles).toStrictEqual({
+      color: '#ff0000',
+      backgroundColor: '#00ff00',
+      margin: '2px',
+      padding: '4px',
+    });
+  });
+
+  test('noprefix', () => {
+    const system = createSystem({ tokenPrefix: 'noprefix' });
+    const parser = system({
+      ...space,
+      ...color,
+    });
+    const styles = parser({
+      theme: {
+        systemPropsCacheKey: true,
+        colors: {
+          red: '#ff0000',
+          blue: '#0000ff',
+          green: '#00ff00',
+        },
+        space: {
+          250: '2px',
+          500: '4px',
+          1000: '8px',
+        },
       },
-    },
-    color: 'red',
-    backgroundColor: 'green',
-    margin: 250,
+      color: 'red',
+      backgroundColor: 'green',
+      margin: 1000,
+      padding: '$500',
+    });
+    expect(styles).toStrictEqual({
+      color: '#ff0000',
+      backgroundColor: '#00ff00',
+      margin: '8px',
+      padding: '$500',
+    });
   });
-  expect(styles).toStrictEqual({
-    color: '#ff0000',
-    backgroundColor: '#00ff00',
-    margin: '2px',
-  });
 });

src/index.ts

@@ -1,2 +0,1 @@
-export { memoizeGet, get, tokenGet } from './core/get';
 export { createSystem } from './core/createSystem';
@@ -3,0 +2,0 @@

src/props/shadow/tests/getShadow.test.ts

 import { getShadow } from '../getShadow';
-import { tokenGet } from '../../../core';
+import { prefixGet } from '../../../core/get';
 
@@ -14,3 +14,3 @@ describe('getShadow', () => {
   const _getShadow = (path: string) =>
-    getShadow({ path, object: {}, get: tokenGet, props });
+    getShadow({ path, object: {}, get: prefixGet, props });
 
@@ -17,0 +17,0 @@ test('handles tokens in box-shadow', () => {

src/props/space/index.ts

@@ -1,2 +0,1 @@
-// import { memoizedGet } from '../../core/get';
 import { PropConfigCollection, Transform } from '../../types';
@@ -3,0 +2,0 @@ import { positiveOrNegative } from '../positiveOrNegative';

src/types.ts

@@ -113,15 +113,13 @@ import {
 
-export type MaybeCSSProperty = keyof CSSProperties | (string & {});
-
 export type PropertyConfig = {
-  properties?: Array<MaybeCSSProperty>;
-  property?: MaybeCSSProperty;
+  properties?: Array<keyof CSSProperties>;
+  property?: keyof CSSProperties;
   scale?: string;
   defaultScale?: Array<string | number>;
   transform?: Transform;
-  get?: Get;
+  tokenPrefix?: 'prefix' | 'noprefix' | 'all';
 };
 
 export interface PropConfigCollection {
-  [key: string]: true | PropertyConfig;
+  [x: string]: true | PropertyConfig;
 }
@@ -128,0 +126,0 @@

No alert changes

Improved metrics

Total package byte prevSize

372488

increased by2.38%

Lines of code

5925

increased by2.35%

No dependency changes