@xstyled/core - npm Package Compare versions

Comparing version 2.2.3 to 2.3.0

CHANGELOG.md

@@ -6,2 +6,20 @@ # Change Log
 
+# [2.3.0](https://github.com/gregberge/xstyled/tree/master/packages/core/compare/v2.2.3...v2.3.0) (2021-03-23)
+
+
+### Bug Fixes
+
+* **styled:** use space in column-gap & row-gap ([517c08e](https://github.com/gregberge/xstyled/tree/master/packages/core/commit/517c08e4caf4ada2b5370f92c6abc211a938d3ad)), closes [#200](https://github.com/gregberge/xstyled/tree/master/packages/core/issues/200)
+* **transform:** confused by comments, whitespace ([93cba6a](https://github.com/gregberge/xstyled/tree/master/packages/core/commit/93cba6adc043dce0389d057d2ab9b88a3b7fa917))
+
+
+### Features
+
+* **durations:** bind durations to `theme.durations` ([362dea3](https://github.com/gregberge/xstyled/tree/master/packages/core/commit/362dea3284a7a9a951ba1b26822dceed78d2ed4d))
+* **transform:** min/max widths in media queries ([aa1f518](https://github.com/gregberge/xstyled/tree/master/packages/core/commit/aa1f518f26c098e30299b4fb1f36db95f1ccab86))
+
+
+
+
+
 ## [2.2.3](https://github.com/gregberge/xstyled/tree/master/packages/core/compare/v2.2.2...v2.2.3) (2021-02-13)
@@ -8,0 +26,0 @@

dist/breakpoints.d.ts

 import { Theme } from '@xstyled/system';
-export declare function useThemeBreakpoints(theme: Theme): Record<string | number, number>;
+export declare function useThemeBreakpoints(theme: Theme): import("@xstyled/system").IBreakpoints;
 export declare function useViewportWidth(): number | null;
@@ -4,0 +4,0 @@ export declare function useThemeBreakpoint(theme: Theme): string | null;

dist/core.cjs.development.js

@@ -140,3 +140,5 @@ 'use strict';
   'grid-gap': getMultiNumberSpace,
+  'row-gap': getNumberSpace,
   'grid-row-gap': getNumberSpace,
+  'column-gap': getNumberSpace,
   'grid-column-gap': getNumberSpace,
@@ -204,2 +206,5 @@ // getColor
   transition: system.getTransition,
+  // getDuration
+  'transition-duration': system.getDuration,
+  'animation-duration': system.getDuration,
   // getAnimation
@@ -221,5 +226,41 @@ animation: system.getAnimation,
 
+var getMediaWidth = function getMediaWidth(getBreakpointBound) {
+  return function (value) {
+    return function (props) {
+      var v = getBreakpointBound(system.getBreakpoints(props), value); // getters return null for smallest, undefined for not found, and otherwise
+      // a px string. Since we MUST emit a matcher at this point, use 0px for the
+      // smallest case (always true for min, never true for max).
+
+      return v === null ? '0' : v || value;
+    };
+  };
+};
+
+var mediaGetters = {
+  'min-width': /*#__PURE__*/getMediaWidth(system.getBreakpointMin),
+  'max-width': /*#__PURE__*/getMediaWidth(system.getBreakpointMax)
+};
+
 /* eslint-disable no-continue, no-loop-func, no-cond-assign */
-var PROP_REGEXP = /(\s*)([^&{}:;\n]+):\s*([^&{}:;\n]+)(\s*);/g;
-var IMPORTANT_REGEXP = /\s*!important\s*/;
+
+var PROP_CHAR = "[-\\w]"; // prop value consists of non-semis unless backslash-escaped.
+
+var VALUE_CHAR = "(?:\\\\.|[^\\\\;])"; // prettier-ignore
+
+var PROP_PATT = "(" + PROP_CHAR + "+)" + // capture prop name
+"(\\s*:\\s*)" + // colon & whitespace
+"(?=\\S)" + ( // prop value starts with non-whitespace
+"(" + VALUE_CHAR + "*?)") + // capture prop value (non-greedy)
+"(\\s*!important)?" + // capture !important
+"(\\s*;)" // semi & whitespace
+; // simplistic but workable media query value.
+
+var MEDIA_CHAR = "[^{]"; // prettier-ignore
+
+var MEDIA_PATT = "(@media\\b\\s*)" + // start of media query
+"(?=\\S)" + ( // value starts with non-whitespace
+"(" + MEDIA_CHAR + "+?)") + // capture queries (non-greedy)
+"(\\s*\\{)" // brace & whitespace
+;
+var MATCH_REGEXP = /*#__PURE__*/new RegExp("(?:" + PROP_PATT + "|" + MEDIA_PATT + ")", "gs");
 function transform(rawValue) {
@@ -233,14 +274,66 @@ if (typeof rawValue !== 'string') return rawValue;
     var _matches = matches,
-        start = _matches[1],
-        prop = _matches[2],
-        propValue = _matches[3],
-        end = _matches[4];
-    var getter = propGetters[prop];
+        prop = _matches[1],
+        colon = _matches[2],
+        value = _matches[3],
+        imp = _matches[4],
+        semi = _matches[5],
+        media = _matches[6],
+        query = _matches[7],
+        brace = _matches[8];
 
+    if (media) {
+      values.push(rawValue.slice(lastIndex, matches.index));
+      values.push(media);
+      mediaTransform(query).forEach(function (v) {
+        return values.push(v);
+      });
+      values.push(brace);
+      lastIndex = matches.index + matches[0].length;
+    } else {
+      var getter = propGetters[prop];
+
+      if (getter) {
+        values.push(rawValue.slice(lastIndex, matches.index));
+        values.push(function (p) {
+          return "" + prop + colon + getter(value)(p) + (imp || '') + semi;
+        });
+        lastIndex = matches.index + matches[0].length;
+      }
+    }
+  };
+
+  while (matches = MATCH_REGEXP.exec(rawValue)) {
+    _loop();
+  }
+
+  values.push(rawValue.slice(lastIndex, rawValue.length));
+  return values;
+} // media query prop/value pairs such as (min-width: 1024px)
+// prettier-ignore
+
+var QUERY_REGEXP = /*#__PURE__*/new RegExp("(\\(\\s*)" + ( // open paren, whitespace
+"(" + PROP_CHAR + "+)") + // capture prop name
+"(\\s*:\\s*)" + // colon & whitespace
+"([^\\)]*?)" + // capture prop value (non-greedy)
+"(\\s*\\))", // close paren, whitespace
+"gs");
+
+function mediaTransform(rawValue) {
+  var matches;
+  var lastIndex = 0;
+  var values = [];
+
+  var _loop2 = function _loop2() {
+    var _matches2 = matches,
+        open = _matches2[1],
+        prop = _matches2[2],
+        colon = _matches2[3],
+        value = _matches2[4],
+        close = _matches2[5];
+    var getter = mediaGetters[prop];
+
     if (getter) {
-      var hasImportant = IMPORTANT_REGEXP.test(propValue);
-      var cleanValue = propValue.replace(IMPORTANT_REGEXP, '');
       values.push(rawValue.slice(lastIndex, matches.index));
       values.push(function (p) {
-        return "" + start + prop + ": " + getter(cleanValue)(p) + (hasImportant ? ' !important' : '') + ";" + end;
+        return "" + open + prop + colon + getter(value)(p) + close;
       });
@@ -251,4 +344,4 @@ lastIndex = matches.index + matches[0].length;
 
-  while (matches = PROP_REGEXP.exec(rawValue)) {
-    _loop();
+  while (matches = QUERY_REGEXP.exec(rawValue)) {
+    _loop2();
   }
@@ -539,11 +632,8 @@
   React.useEffect(function () {
-    var cleans = configs.filter(function (_ref2) {
-      var mql = _ref2.mql;
-      return mql.addEventListener && mql.removeEventListener;
-    }).map(function (_ref3) {
-      var mode = _ref3.mode,
-          mql = _ref3.mql;
+    var cleans = configs.map(function (_ref2) {
+      var mode = _ref2.mode,
+          mql = _ref2.mql;
 
-      var handler = function handler(_ref4) {
-        var matches = _ref4.matches;
+      var handler = function handler(_ref3) {
+        var matches = _ref3.matches;
 
@@ -575,4 +665,4 @@ if (matches) {
 function useColorModeState(theme, _temp2) {
-  var _ref5 = _temp2 === void 0 ? {} : _temp2,
-      target = _ref5.target;
+  var _ref4 = _temp2 === void 0 ? {} : _temp2,
+      target = _ref4.target;
 
@@ -691,11 +781,11 @@ var systemMode = useSystemMode(theme);
 }
-function createColorModeProvider(_ref6) {
-  var ThemeContext = _ref6.ThemeContext,
-      ThemeProvider = _ref6.ThemeProvider,
-      ColorModeStyle = _ref6.ColorModeStyle;
+function createColorModeProvider(_ref5) {
+  var ThemeContext = _ref5.ThemeContext,
+      ThemeProvider = _ref5.ThemeProvider,
+      ColorModeStyle = _ref5.ColorModeStyle;
 
-  function ColorModeProvider(_ref7) {
-    var children = _ref7.children,
-        target = _ref7.target,
-        targetSelector = _ref7.targetSelector;
+  function ColorModeProvider(_ref6) {
+    var children = _ref6.children,
+        target = _ref6.target,
+        targetSelector = _ref6.targetSelector;
     var theme = React.useContext(ThemeContext);
@@ -724,5 +814,5 @@
 function getInitScript(_temp3) {
-  var _ref8 = _temp3 === void 0 ? {} : _temp3,
-      _ref8$target = _ref8.target,
-      target = _ref8$target === void 0 ? 'document.body' : _ref8$target;
+  var _ref7 = _temp3 === void 0 ? {} : _temp3,
+      _ref7$target = _ref7.target,
+      target = _ref7$target === void 0 ? 'document.body' : _ref7$target;
 
@@ -729,0 +819,0 @@ return "(function() { try {\n    var mode = localStorage.getItem('" + STORAGE_KEY + "');\n    if (mode) " + target + ".classList.add('" + COLOR_MODE_CLASS_PREFIX + "' + mode);\n  } catch (e) {} })();";

dist/core.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@xstyled/system"),t=require("@xstyled/util");function o(e){return r.getBreakpoints({theme:e})}function n(){var r=e.useState("undefined"==typeof window?null:window.innerWidth),t=r[0],o=r[1];return e.useEffect((function(){function e(){o(window.innerWidth)}return window.addEventListener("resize",e),o(window.innerWidth),function(){return window.removeEventListener("resize",e)}}),[]),t}function i(){return["&&{",r.system,"}"]}i.meta=r.system.meta;var u=function(e){return function(r){var t=Number(r);return e(Number.isNaN(t)?r:t)}},l=/\s+/,a=function(e){return function(r){var t=r.split(l);return function(r){return t.map((function(t){return e(t)(r)})).join(" ")}}},c=/\s*,\s*/,s=function(e){return function(r){var t=r.split(c);return function(r){return t.map((function(t){return e(t)(r)})).join(",")}}},d=u(r.getInset),f=u(r.getSpace),g=a(f),m=u(r.getBorder),v=u(r.getBorderWidth),p=a(v),h=u(r.getSize),y=a(r.getBorderStyle),w={margin:g,"margin-top":f,"margin-bottom":f,"margin-left":f,"margin-right":f,padding:g,"padding-top":f,"padding-bottom":f,"padding-left":f,"padding-right":f,gap:g,"grid-gap":g,"grid-row-gap":f,"grid-column-gap":f,color:r.getColor,"background-color":r.getColor,"border-color":r.getColor,"border-top-color":r.getColor,"border-right-color":r.getColor,"border-bottom-color":r.getColor,"border-left-color":r.getColor,"outline-color":r.getColor,fill:r.getColor,stroke:r.getColor,"border-radius":a(u(r.getRadius)),"border-top-left-radius":a(u(r.getRadius)),"border-top-right-radius":a(u(r.getRadius)),"border-bottom-right-radius":a(u(r.getRadius)),"border-bottom-left-radius":a(u(r.getRadius)),border:m,"border-top":m,"border-right":m,"border-bottom":m,"border-left":m,"border-width":p,"border-top-width":v,"border-right-width":v,"border-bottom-width":v,"border-left-width":v,"outline-width":v,"border-style":y,"border-top-style":r.getBorderStyle,"border-right-style":r.getBorderStyle,"border-bottom-style":r.getBorderStyle,"border-left-style":r.getBorderStyle,"outline-style":r.getBorderStyle,"box-shadow":s(r.getShadow),"text-shadow":s(r.getShadow),width:h,height:h,"max-width":h,"max-height":h,"min-width":h,"min-height":h,"z-index":u(r.getZIndex),"font-family":r.getFont,"font-size":u(r.getFontSize),"line-height":u(r.getLineHeight),"font-weight":r.getFontWeight,"letter-spacing":u(r.getLetterSpacing),transition:r.getTransition,animation:r.getAnimation,top:d,right:d,bottom:d,left:d,"animation-timing-function":r.getTimingFunction,"transition-timing-function":r.getTimingFunction,transform:r.getTransform,"transition-property":r.getTransitionProperty},b=/(\s*)([^&{}:;\n]+):\s*([^&{}:;\n]+)(\s*);/g,x=/\s*!important\s*/;function C(){return(C=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e}).apply(this,arguments)}function S(e,r){if(null==e)return{};var t,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)r.indexOf(t=i[o])>=0||(n[t]=e[t]);return n}var M=function(){for(var e=arguments.length,r=new Array(e),t=0;t<e;t++)r[t]=arguments[t];return r.filter(Boolean).join(".")},E=function(e){return"--"+e.replace(/\./g,"-")},k=function(e,r){return"var("+E(e)+", "+r+")"},B=function(e,r){return e+": "+r+";"};function j(e,r,o,n){void 0===o&&(o=Object.keys(e));var i=Array.isArray(e)?[]:{};for(var u in o){var l=o[u],a=e[l],c=M(n,l);t.obj(a)?i[l]=j(a,r,Object.keys(a),c):t.string(a)?i[l]=k(c,a):t.func(a)&&(i[l]=k(c,t.cascade(a,{theme:r})))}return i}function T(e,r,o,n,i){for(var u in void 0===o&&(o=Object.keys(e)),void 0===i&&(i={value:""}),o){var l=o[u],a=e[l],c=M(n,l);t.obj(a)?T(a,r,Object.keys(a),c,i):t.string(a)?i.value+=B(E(c),a):t.func(a)&&(i.value+=B(E(c),t.cascade(a,{theme:r})))}return i.value}var L="xstyled-color-mode",O="undefined"!=typeof window&&function(){try{var e="xstyled-test-key";return window.localStorage.setItem(e,e),window.localStorage.removeItem(e),!0}catch(e){return!1}}()?{get:function(){return window.localStorage.getItem(L)},set:function(e){window.localStorage.setItem(L,e)},clear:function(){return window.localStorage.removeItem(L)}}:{get:function(){return null},set:function(){},clear:function(){}},_=function(e){return"xstyled-color-mode-"+e},I=["light","dark"],P=function(e){return"(prefers-color-scheme: "+e+")"};function q(e){return Boolean(e&&e.colors&&e.colors.modes)}function z(e){return Boolean(e&&(void 0===e.useCustomProperties||e.useCustomProperties))}function F(e){return e.initialColorModeName||"default"}function N(e){var r=[];for(var t in e)r=[].concat(r,Object.keys(e[t]));return r}var R="undefined"!=typeof window?e.useLayoutEffect:e.useEffect;function W(r,t){var o=(void 0===t?{}:t).target,n=function(r){var t=e.useMemo((function(){return function(e){return Boolean(e&&(void 0===e.useColorSchemeMediaQuery||e.useColorSchemeMediaQuery))}(r)?I.map((function(e){if(!q(r))return null;if(!r.colors.modes[e])return null;var t=function(e){if("undefined"==typeof window||void 0===window.matchMedia)return null;var r=P(e);return window.matchMedia(r)}(e);return t?{mode:e,mql:t}:null})).filter(Boolean):[]}),[r]),o=e.useState((function(){var e=t.find((function(e){return e.mql.matches}));return e?e.mode:null})),n=o[0],i=o[1];return e.useEffect((function(){var e=t.filter((function(e){var r=e.mql;return r.addEventListener&&r.removeEventListener})).map((function(e){var r=e.mode,t=e.mql,o=function(e){i(e.matches?r:function(e){return e===r?null:r})};return t.addEventListener("change",o),function(){return t.removeEventListener("change",o)}}));return function(){return e.forEach((function(e){return e()}))}})),n}(r),i=function(e){return e.defaultColorModeName||F(e)}(r),u=F(r),l=e.useState((function(){return q(r)?i:null})),a=l[0],c=l[1],s=z(r),d=e.useRef(!1),f=e.useCallback((function(e){d.current=!0,c(e)}),[]);return R((function(){if(q(r)){var e=O.get();a!==(e||n||i)&&c(e||n||i)}}),[]),R((function(){d.current&&(a?O.set(a):O.clear())}),[a]),R((function(){if(!O.get()){var e=n||i;e!==a&&c(e)}}),[a,n,i]),R((function(){if(a&&s&&(O.get()||u!==a)){var e=_(a),r=o||document.body;return r.classList.add(e),function(){r.classList.remove(e)}}}),[s,o,a,u]),[a,f]}function A(r,t){var o=e.useState(t)[0],n=e.useMemo((function(){if(!o)return null;if(!z(r))return null;if(!q(r))return r;var e=r.colors,t=e.modes,n=S(e,["modes"]),i=N(t);return C({},r,{colors:C({},n,j(n,r,i,"xstyled-colors"),{modes:t}),__rawColors:r.colors})}),[o,r]),i=e.useMemo((function(){return t?z(r)?null:q(r)?t===F(r)?C({},r,{__colorMode:t}):C({},r,{colors:C({},r.colors,r.colors.modes[t]),__colorMode:t,__rawColors:r.colors}):r:null}),[r,t]);return n||i}var Q=e.createContext(null);function H(e){var r=(void 0===e?{}:e).target;return"(function() { try {\n    var mode = localStorage.getItem('"+L+"');\n    if (mode) "+(void 0===r?"document.body":r)+".classList.add('xstyled-color-mode-' + mode);\n  } catch (e) {} })();"}exports.ColorModeContext=Q,exports.createBox=i,exports.createColorModeProvider=function(r){var t=r.ThemeContext,o=r.ThemeProvider,n=r.ColorModeStyle;return function(r){var i=r.children,u=r.target,l=r.targetSelector,a=e.useContext(t);if(!a)throw new Error("[ColorModeProvider] requires ThemeProvider upper in the tree");var c=W(a,{target:u}),s=A(a,c[0]);return e.createElement(e.Fragment,null,e.createElement(n,{targetSelector:l}),e.createElement(o,{theme:s},e.createElement(Q.Provider,{value:c},i)))}},exports.createColorStyles=function(e,r){var t=(void 0===r?{}:r).targetSelector,o=void 0===t?"body":t;if(!q(e))return null;var n=e.colors,i=n.modes,u=S(n,["modes"]),l=N(i),a=T(u,e,l,"xstyled-colors");function c(r){var t=function(e,r){return C({},e,{colors:C({},e.colors,e.colors.modes[r])})}(e,r),o=t.colors,n=o.modes;return T(C({},S(o,["modes"]),n[r]),t,l,"xstyled-colors")}return!1!==e.useColorSchemeMediaQuery&&I.forEach((function(e){if(i[e]){var r="@media "+P(e);a+=r+"{"+c(e)+"}"}})),[F(e)].concat(Object.keys(i)).forEach((function(e){var r="&."+_(e);a+=r+"{"+c(e)+"}"})),o+"{"+a+"}"},exports.getColorModeInitScriptElement=function(r){return e.createElement("script",{key:"xstyled-color-mode-init",dangerouslySetInnerHTML:{__html:H(r)}})},exports.getColorModeInitScriptTag=function(e){return"<script>"+H(e)+"<\/script>"},exports.propGetters=w,exports.transform=function(e){if("string"!=typeof e)return e;for(var r,t=0,o=[],n=function(){var n=r[1],i=r[2],u=r[3],l=r[4],a=w[i];if(a){var c=x.test(u),s=u.replace(x,"");o.push(e.slice(t,r.index)),o.push((function(e){return""+n+i+": "+a(s)(e)+(c?" !important":"")+";"+l})),t=r.index+r[0].length}};r=b.exec(e);)n();return o.push(e.slice(t,e.length)),o},exports.useColorMode=function(){var r=e.useContext(Q);if(!r)throw new Error("[useColorMode] requires the ColorModeProvider component");return r},exports.useColorModeState=W,exports.useColorModeTheme=A,exports.useThemeBreakpoint=function(r){var t=o(r),i=n();return e.useMemo((function(){return Object.keys(t).reverse().find((function(e){return null!==i&&i>t[e]}))||null}),[t,i])},exports.useThemeBreakpoints=o,exports.useThemeDown=function(e,r){var t=function(e,r){var t=o(e)[r];return 0===t?null:t-.02}(e,r),i=n();return null!==i&&null!==t&&i<t},exports.useThemeUp=function(e,r){var t=function(e,r){var t=o(e)[r];return 0===t?null:t}(e,r),i=n();return null!==i&&null!==t&&i>=t},exports.useViewportWidth=n;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@xstyled/system"),r=require("@xstyled/util");function o(e){return t.getBreakpoints({theme:e})}function n(){var t=e.useState("undefined"==typeof window?null:window.innerWidth),r=t[0],o=t[1];return e.useEffect((function(){function e(){o(window.innerWidth)}return window.addEventListener("resize",e),o(window.innerWidth),function(){return window.removeEventListener("resize",e)}}),[]),r}function i(){return["&&{",t.system,"}"]}i.meta=t.system.meta;var u=function(e){return function(t){var r=Number(t);return e(Number.isNaN(r)?t:r)}},a=/\s+/,l=function(e){return function(t){var r=t.split(a);return function(t){return r.map((function(r){return e(r)(t)})).join(" ")}}},c=/\s*,\s*/,s=function(e){return function(t){var r=t.split(c);return function(t){return r.map((function(r){return e(r)(t)})).join(",")}}},d=u(t.getInset),f=u(t.getSpace),g=l(f),m=u(t.getBorder),h=u(t.getBorderWidth),p=l(h),v=u(t.getSize),w=l(t.getBorderStyle),y={margin:g,"margin-top":f,"margin-bottom":f,"margin-left":f,"margin-right":f,padding:g,"padding-top":f,"padding-bottom":f,"padding-left":f,"padding-right":f,gap:g,"grid-gap":g,"row-gap":f,"grid-row-gap":f,"column-gap":f,"grid-column-gap":f,color:t.getColor,"background-color":t.getColor,"border-color":t.getColor,"border-top-color":t.getColor,"border-right-color":t.getColor,"border-bottom-color":t.getColor,"border-left-color":t.getColor,"outline-color":t.getColor,fill:t.getColor,stroke:t.getColor,"border-radius":l(u(t.getRadius)),"border-top-left-radius":l(u(t.getRadius)),"border-top-right-radius":l(u(t.getRadius)),"border-bottom-right-radius":l(u(t.getRadius)),"border-bottom-left-radius":l(u(t.getRadius)),border:m,"border-top":m,"border-right":m,"border-bottom":m,"border-left":m,"border-width":p,"border-top-width":h,"border-right-width":h,"border-bottom-width":h,"border-left-width":h,"outline-width":h,"border-style":w,"border-top-style":t.getBorderStyle,"border-right-style":t.getBorderStyle,"border-bottom-style":t.getBorderStyle,"border-left-style":t.getBorderStyle,"outline-style":t.getBorderStyle,"box-shadow":s(t.getShadow),"text-shadow":s(t.getShadow),width:v,height:v,"max-width":v,"max-height":v,"min-width":v,"min-height":v,"z-index":u(t.getZIndex),"font-family":t.getFont,"font-size":u(t.getFontSize),"line-height":u(t.getLineHeight),"font-weight":t.getFontWeight,"letter-spacing":u(t.getLetterSpacing),transition:t.getTransition,"transition-duration":t.getDuration,"animation-duration":t.getDuration,animation:t.getAnimation,top:d,right:d,bottom:d,left:d,"animation-timing-function":t.getTimingFunction,"transition-timing-function":t.getTimingFunction,transform:t.getTransform,"transition-property":t.getTransitionProperty},b=function(e){return function(r){return function(o){var n=e(t.getBreakpoints(o),r);return null===n?"0":n||r}}},x={"min-width":b(t.getBreakpointMin),"max-width":b(t.getBreakpointMax)},C=new RegExp("(?:([-\\w]+)(\\s*:\\s*)(?=\\S)((?:\\\\.|[^\\\\;])*?)(\\s*!important)?(\\s*;)|(@media\\b\\s*)(?=\\S)([^{]+?)(\\s*\\{))","gs"),S=new RegExp("(\\(\\s*)([-\\w]+)(\\s*:\\s*)([^\\)]*?)(\\s*\\))","gs");function M(){return(M=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e}).apply(this,arguments)}function E(e,t){if(null==e)return{};var r,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)t.indexOf(r=i[o])>=0||(n[r]=e[r]);return n}var k=function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return t.filter(Boolean).join(".")},B=function(e){return"--"+e.replace(/\./g,"-")},j=function(e,t){return"var("+B(e)+", "+t+")"},T=function(e,t){return e+": "+t+";"};function O(e,t,o,n){void 0===o&&(o=Object.keys(e));var i=Array.isArray(e)?[]:{};for(var u in o){var a=o[u],l=e[a],c=k(n,a);r.obj(l)?i[a]=O(l,t,Object.keys(l),c):r.string(l)?i[a]=j(c,l):r.func(l)&&(i[a]=j(c,r.cascade(l,{theme:t})))}return i}function _(e,t,o,n,i){for(var u in void 0===o&&(o=Object.keys(e)),void 0===i&&(i={value:""}),o){var a=o[u],l=e[a],c=k(n,a);r.obj(l)?_(l,t,Object.keys(l),c,i):r.string(l)?i.value+=T(B(c),l):r.func(l)&&(i.value+=T(B(c),r.cascade(l,{theme:t})))}return i.value}var I="xstyled-color-mode",L="undefined"!=typeof window&&function(){try{var e="xstyled-test-key";return window.localStorage.setItem(e,e),window.localStorage.removeItem(e),!0}catch(e){return!1}}()?{get:function(){return window.localStorage.getItem(I)},set:function(e){window.localStorage.setItem(I,e)},clear:function(){return window.localStorage.removeItem(I)}}:{get:function(){return null},set:function(){},clear:function(){}},P=function(e){return"xstyled-color-mode-"+e},q=["light","dark"],R=function(e){return"(prefers-color-scheme: "+e+")"};function z(e){return Boolean(e&&e.colors&&e.colors.modes)}function F(e){return Boolean(e&&(void 0===e.useCustomProperties||e.useCustomProperties))}function N(e){return e.initialColorModeName||"default"}function W(e){var t=[];for(var r in e)t=[].concat(t,Object.keys(e[r]));return t}var A="undefined"!=typeof window?e.useLayoutEffect:e.useEffect;function D(t,r){var o=(void 0===r?{}:r).target,n=function(t){var r=e.useMemo((function(){return function(e){return Boolean(e&&(void 0===e.useColorSchemeMediaQuery||e.useColorSchemeMediaQuery))}(t)?q.map((function(e){if(!z(t))return null;if(!t.colors.modes[e])return null;var r=function(e){if("undefined"==typeof window||void 0===window.matchMedia)return null;var t=R(e);return window.matchMedia(t)}(e);return r?{mode:e,mql:r}:null})).filter(Boolean):[]}),[t]),o=e.useState((function(){var e=r.find((function(e){return e.mql.matches}));return e?e.mode:null})),n=o[0],i=o[1];return e.useEffect((function(){var e=r.map((function(e){var t=e.mode,r=e.mql,o=function(e){i(e.matches?t:function(e){return e===t?null:t})};return r.addEventListener("change",o),function(){return r.removeEventListener("change",o)}}));return function(){return e.forEach((function(e){return e()}))}})),n}(t),i=function(e){return e.defaultColorModeName||N(e)}(t),u=N(t),a=e.useState((function(){return z(t)?i:null})),l=a[0],c=a[1],s=F(t),d=e.useRef(!1),f=e.useCallback((function(e){d.current=!0,c(e)}),[]);return A((function(){if(z(t)){var e=L.get();l!==(e||n||i)&&c(e||n||i)}}),[]),A((function(){d.current&&(l?L.set(l):L.clear())}),[l]),A((function(){if(!L.get()){var e=n||i;e!==l&&c(e)}}),[l,n,i]),A((function(){if(l&&s&&(L.get()||u!==l)){var e=P(l),t=o||document.body;return t.classList.add(e),function(){t.classList.remove(e)}}}),[s,o,l,u]),[l,f]}function Q(t,r){var o=e.useState(r)[0],n=e.useMemo((function(){if(!o)return null;if(!F(t))return null;if(!z(t))return t;var e=t.colors,r=e.modes,n=E(e,["modes"]),i=W(r);return M({},t,{colors:M({},n,O(n,t,i,"xstyled-colors"),{modes:r}),__rawColors:t.colors})}),[o,t]),i=e.useMemo((function(){return r?F(t)?null:z(t)?r===N(t)?M({},t,{__colorMode:r}):M({},t,{colors:M({},t.colors,t.colors.modes[r]),__colorMode:r,__rawColors:t.colors}):t:null}),[t,r]);return n||i}var H=e.createContext(null);function G(e){var t=(void 0===e?{}:e).target;return"(function() { try {\n    var mode = localStorage.getItem('"+I+"');\n    if (mode) "+(void 0===t?"document.body":t)+".classList.add('xstyled-color-mode-' + mode);\n  } catch (e) {} })();"}exports.ColorModeContext=H,exports.createBox=i,exports.createColorModeProvider=function(t){var r=t.ThemeContext,o=t.ThemeProvider,n=t.ColorModeStyle;return function(t){var i=t.children,u=t.target,a=t.targetSelector,l=e.useContext(r);if(!l)throw new Error("[ColorModeProvider] requires ThemeProvider upper in the tree");var c=D(l,{target:u}),s=Q(l,c[0]);return e.createElement(e.Fragment,null,e.createElement(n,{targetSelector:a}),e.createElement(o,{theme:s},e.createElement(H.Provider,{value:c},i)))}},exports.createColorStyles=function(e,t){var r=(void 0===t?{}:t).targetSelector,o=void 0===r?"body":r;if(!z(e))return null;var n=e.colors,i=n.modes,u=E(n,["modes"]),a=W(i),l=_(u,e,a,"xstyled-colors");function c(t){var r=function(e,t){return M({},e,{colors:M({},e.colors,e.colors.modes[t])})}(e,t),o=r.colors,n=o.modes;return _(M({},E(o,["modes"]),n[t]),r,a,"xstyled-colors")}return!1!==e.useColorSchemeMediaQuery&&q.forEach((function(e){if(i[e]){var t="@media "+R(e);l+=t+"{"+c(e)+"}"}})),[N(e)].concat(Object.keys(i)).forEach((function(e){var t="&."+P(e);l+=t+"{"+c(e)+"}"})),o+"{"+l+"}"},exports.getColorModeInitScriptElement=function(t){return e.createElement("script",{key:"xstyled-color-mode-init",dangerouslySetInnerHTML:{__html:G(t)}})},exports.getColorModeInitScriptTag=function(e){return"<script>"+G(e)+"<\/script>"},exports.propGetters=y,exports.transform=function(e){if("string"!=typeof e)return e;for(var t,r=0,o=[],n=function(){var n=t[1],i=t[2],u=t[3],a=t[4],l=t[5],c=t[6],s=t[7],d=t[8];if(c)o.push(e.slice(r,t.index)),o.push(c),function(e){for(var t,r=0,o=[],n=function(){var n=t[1],i=t[2],u=t[3],a=t[4],l=t[5],c=x[i];c&&(o.push(e.slice(r,t.index)),o.push((function(e){return""+n+i+u+c(a)(e)+l})),r=t.index+t[0].length)};t=S.exec(e);)n();return o.push(e.slice(r,e.length)),o}(s).forEach((function(e){return o.push(e)})),o.push(d),r=t.index+t[0].length;else{var f=y[n];f&&(o.push(e.slice(r,t.index)),o.push((function(e){return""+n+i+f(u)(e)+(a||"")+l})),r=t.index+t[0].length)}};t=C.exec(e);)n();return o.push(e.slice(r,e.length)),o},exports.useColorMode=function(){var t=e.useContext(H);if(!t)throw new Error("[useColorMode] requires the ColorModeProvider component");return t},exports.useColorModeState=D,exports.useColorModeTheme=Q,exports.useThemeBreakpoint=function(t){var r=o(t),i=n();return e.useMemo((function(){return Object.keys(r).reverse().find((function(e){return null!==i&&i>r[e]}))||null}),[r,i])},exports.useThemeBreakpoints=o,exports.useThemeDown=function(e,t){var r=function(e,t){var r=o(e)[t];return 0===r?null:r-.02}(e,t),i=n();return null!==i&&null!==r&&i<r},exports.useThemeUp=function(e,t){var r=function(e,t){var r=o(e)[t];return 0===r?null:r}(e,t),i=n();return null!==i&&null!==r&&i>=r},exports.useViewportWidth=n;
 //# sourceMappingURL=core.cjs.production.min.js.map

dist/core.esm.js

 import { useState, useEffect, useMemo, useRef, useCallback, createContext, useContext, createElement, useLayoutEffect, Fragment } from 'react';
-import { getBreakpoints, system, getColor, getRadius, getBorderStyle, getShadow, getZIndex, getFont, getFontSize, getLineHeight, getFontWeight, getLetterSpacing, getTransition, getAnimation, getTimingFunction, getTransform, getTransitionProperty, getInset, getSpace, getBorder, getBorderWidth, getSize } from '@xstyled/system';
+import { getBreakpoints, system, getColor, getRadius, getBorderStyle, getShadow, getZIndex, getFont, getFontSize, getLineHeight, getFontWeight, getLetterSpacing, getTransition, getDuration, getAnimation, getTimingFunction, getTransform, getTransitionProperty, getInset, getSpace, getBorder, getBorderWidth, getSize, getBreakpointMax, getBreakpointMin } from '@xstyled/system';
 import { obj, string, func, cascade } from '@xstyled/util';
@@ -136,3 +136,5 @@
   'grid-gap': getMultiNumberSpace,
+  'row-gap': getNumberSpace,
   'grid-row-gap': getNumberSpace,
+  'column-gap': getNumberSpace,
   'grid-column-gap': getNumberSpace,
@@ -200,2 +202,5 @@ // getColor
   transition: getTransition,
+  // getDuration
+  'transition-duration': getDuration,
+  'animation-duration': getDuration,
   // getAnimation
@@ -217,5 +222,41 @@ animation: getAnimation,
 
+var getMediaWidth = function getMediaWidth(getBreakpointBound) {
+  return function (value) {
+    return function (props) {
+      var v = getBreakpointBound(getBreakpoints(props), value); // getters return null for smallest, undefined for not found, and otherwise
+      // a px string. Since we MUST emit a matcher at this point, use 0px for the
+      // smallest case (always true for min, never true for max).
+
+      return v === null ? '0' : v || value;
+    };
+  };
+};
+
+var mediaGetters = {
+  'min-width': /*#__PURE__*/getMediaWidth(getBreakpointMin),
+  'max-width': /*#__PURE__*/getMediaWidth(getBreakpointMax)
+};
+
 /* eslint-disable no-continue, no-loop-func, no-cond-assign */
-var PROP_REGEXP = /(\s*)([^&{}:;\n]+):\s*([^&{}:;\n]+)(\s*);/g;
-var IMPORTANT_REGEXP = /\s*!important\s*/;
+
+var PROP_CHAR = "[-\\w]"; // prop value consists of non-semis unless backslash-escaped.
+
+var VALUE_CHAR = "(?:\\\\.|[^\\\\;])"; // prettier-ignore
+
+var PROP_PATT = "(" + PROP_CHAR + "+)" + // capture prop name
+"(\\s*:\\s*)" + // colon & whitespace
+"(?=\\S)" + ( // prop value starts with non-whitespace
+"(" + VALUE_CHAR + "*?)") + // capture prop value (non-greedy)
+"(\\s*!important)?" + // capture !important
+"(\\s*;)" // semi & whitespace
+; // simplistic but workable media query value.
+
+var MEDIA_CHAR = "[^{]"; // prettier-ignore
+
+var MEDIA_PATT = "(@media\\b\\s*)" + // start of media query
+"(?=\\S)" + ( // value starts with non-whitespace
+"(" + MEDIA_CHAR + "+?)") + // capture queries (non-greedy)
+"(\\s*\\{)" // brace & whitespace
+;
+var MATCH_REGEXP = /*#__PURE__*/new RegExp("(?:" + PROP_PATT + "|" + MEDIA_PATT + ")", "gs");
 function transform(rawValue) {
@@ -229,14 +270,66 @@ if (typeof rawValue !== 'string') return rawValue;
     var _matches = matches,
-        start = _matches[1],
-        prop = _matches[2],
-        propValue = _matches[3],
-        end = _matches[4];
-    var getter = propGetters[prop];
+        prop = _matches[1],
+        colon = _matches[2],
+        value = _matches[3],
+        imp = _matches[4],
+        semi = _matches[5],
+        media = _matches[6],
+        query = _matches[7],
+        brace = _matches[8];
 
+    if (media) {
+      values.push(rawValue.slice(lastIndex, matches.index));
+      values.push(media);
+      mediaTransform(query).forEach(function (v) {
+        return values.push(v);
+      });
+      values.push(brace);
+      lastIndex = matches.index + matches[0].length;
+    } else {
+      var getter = propGetters[prop];
+
+      if (getter) {
+        values.push(rawValue.slice(lastIndex, matches.index));
+        values.push(function (p) {
+          return "" + prop + colon + getter(value)(p) + (imp || '') + semi;
+        });
+        lastIndex = matches.index + matches[0].length;
+      }
+    }
+  };
+
+  while (matches = MATCH_REGEXP.exec(rawValue)) {
+    _loop();
+  }
+
+  values.push(rawValue.slice(lastIndex, rawValue.length));
+  return values;
+} // media query prop/value pairs such as (min-width: 1024px)
+// prettier-ignore
+
+var QUERY_REGEXP = /*#__PURE__*/new RegExp("(\\(\\s*)" + ( // open paren, whitespace
+"(" + PROP_CHAR + "+)") + // capture prop name
+"(\\s*:\\s*)" + // colon & whitespace
+"([^\\)]*?)" + // capture prop value (non-greedy)
+"(\\s*\\))", // close paren, whitespace
+"gs");
+
+function mediaTransform(rawValue) {
+  var matches;
+  var lastIndex = 0;
+  var values = [];
+
+  var _loop2 = function _loop2() {
+    var _matches2 = matches,
+        open = _matches2[1],
+        prop = _matches2[2],
+        colon = _matches2[3],
+        value = _matches2[4],
+        close = _matches2[5];
+    var getter = mediaGetters[prop];
+
     if (getter) {
-      var hasImportant = IMPORTANT_REGEXP.test(propValue);
-      var cleanValue = propValue.replace(IMPORTANT_REGEXP, '');
       values.push(rawValue.slice(lastIndex, matches.index));
       values.push(function (p) {
-        return "" + start + prop + ": " + getter(cleanValue)(p) + (hasImportant ? ' !important' : '') + ";" + end;
+        return "" + open + prop + colon + getter(value)(p) + close;
       });
@@ -247,4 +340,4 @@ lastIndex = matches.index + matches[0].length;
 
-  while (matches = PROP_REGEXP.exec(rawValue)) {
-    _loop();
+  while (matches = QUERY_REGEXP.exec(rawValue)) {
+    _loop2();
   }
@@ -535,11 +628,8 @@
   useEffect(function () {
-    var cleans = configs.filter(function (_ref2) {
-      var mql = _ref2.mql;
-      return mql.addEventListener && mql.removeEventListener;
-    }).map(function (_ref3) {
-      var mode = _ref3.mode,
-          mql = _ref3.mql;
+    var cleans = configs.map(function (_ref2) {
+      var mode = _ref2.mode,
+          mql = _ref2.mql;
 
-      var handler = function handler(_ref4) {
-        var matches = _ref4.matches;
+      var handler = function handler(_ref3) {
+        var matches = _ref3.matches;
 
@@ -571,4 +661,4 @@ if (matches) {
 function useColorModeState(theme, _temp2) {
-  var _ref5 = _temp2 === void 0 ? {} : _temp2,
-      target = _ref5.target;
+  var _ref4 = _temp2 === void 0 ? {} : _temp2,
+      target = _ref4.target;
 
@@ -687,11 +777,11 @@ var systemMode = useSystemMode(theme);
 }
-function createColorModeProvider(_ref6) {
-  var ThemeContext = _ref6.ThemeContext,
-      ThemeProvider = _ref6.ThemeProvider,
-      ColorModeStyle = _ref6.ColorModeStyle;
+function createColorModeProvider(_ref5) {
+  var ThemeContext = _ref5.ThemeContext,
+      ThemeProvider = _ref5.ThemeProvider,
+      ColorModeStyle = _ref5.ColorModeStyle;
 
-  function ColorModeProvider(_ref7) {
-    var children = _ref7.children,
-        target = _ref7.target,
-        targetSelector = _ref7.targetSelector;
+  function ColorModeProvider(_ref6) {
+    var children = _ref6.children,
+        target = _ref6.target,
+        targetSelector = _ref6.targetSelector;
     var theme = useContext(ThemeContext);
@@ -720,5 +810,5 @@
 function getInitScript(_temp3) {
-  var _ref8 = _temp3 === void 0 ? {} : _temp3,
-      _ref8$target = _ref8.target,
-      target = _ref8$target === void 0 ? 'document.body' : _ref8$target;
+  var _ref7 = _temp3 === void 0 ? {} : _temp3,
+      _ref7$target = _ref7.target,
+      target = _ref7$target === void 0 ? 'document.body' : _ref7$target;
 
@@ -725,0 +815,0 @@ return "(function() { try {\n    var mode = localStorage.getItem('" + STORAGE_KEY + "');\n    if (mode) " + target + ".classList.add('" + COLOR_MODE_CLASS_PREFIX + "' + mode);\n  } catch (e) {} })();";

dist/propGetters.d.ts

@@ -14,14 +14,16 @@ export declare const propGetters: {
     'grid-gap': (value: any) => (p: object) => any;
+    'row-gap': (value: any) => any;
     'grid-row-gap': (value: any) => any;
+    'column-gap': (value: any) => any;
     'grid-column-gap': (value: any) => any;
-    color: import("@xstyled/system").ThemeGetter<(string & {}) | (number & {})>;
-    'background-color': import("@xstyled/system").ThemeGetter<(string & {}) | (number & {})>;
-    'border-color': import("@xstyled/system").ThemeGetter<(string & {}) | (number & {})>;
-    'border-top-color': import("@xstyled/system").ThemeGetter<(string & {}) | (number & {})>;
-    'border-right-color': import("@xstyled/system").ThemeGetter<(string & {}) | (number & {})>;
-    'border-bottom-color': import("@xstyled/system").ThemeGetter<(string & {}) | (number & {})>;
-    'border-left-color': import("@xstyled/system").ThemeGetter<(string & {}) | (number & {})>;
-    'outline-color': import("@xstyled/system").ThemeGetter<(string & {}) | (number & {})>;
-    fill: import("@xstyled/system").ThemeGetter<(string & {}) | (number & {})>;
-    stroke: import("@xstyled/system").ThemeGetter<(string & {}) | (number & {})>;
+    color: import("@xstyled/system").ThemeGetter<(string | number) & {}>;
+    'background-color': import("@xstyled/system").ThemeGetter<(string | number) & {}>;
+    'border-color': import("@xstyled/system").ThemeGetter<(string | number) & {}>;
+    'border-top-color': import("@xstyled/system").ThemeGetter<(string | number) & {}>;
+    'border-right-color': import("@xstyled/system").ThemeGetter<(string | number) & {}>;
+    'border-bottom-color': import("@xstyled/system").ThemeGetter<(string | number) & {}>;
+    'border-left-color': import("@xstyled/system").ThemeGetter<(string | number) & {}>;
+    'outline-color': import("@xstyled/system").ThemeGetter<(string | number) & {}>;
+    fill: import("@xstyled/system").ThemeGetter<(string | number) & {}>;
+    stroke: import("@xstyled/system").ThemeGetter<(string | number) & {}>;
     'border-radius': (value: any) => (p: object) => any;
@@ -44,7 +46,7 @@ 'border-top-left-radius': (value: any) => (p: object) => any;
     'border-style': (value: any) => (p: object) => any;
-    'border-top-style': import("@xstyled/system").ThemeGetter<(string & {}) | (number & {})>;
-    'border-right-style': import("@xstyled/system").ThemeGetter<(string & {}) | (number & {})>;
-    'border-bottom-style': import("@xstyled/system").ThemeGetter<(string & {}) | (number & {})>;
-    'border-left-style': import("@xstyled/system").ThemeGetter<(string & {}) | (number & {})>;
-    'outline-style': import("@xstyled/system").ThemeGetter<(string & {}) | (number & {})>;
+    'border-top-style': import("@xstyled/system").ThemeGetter<(string | number) & {}>;
+    'border-right-style': import("@xstyled/system").ThemeGetter<(string | number) & {}>;
+    'border-bottom-style': import("@xstyled/system").ThemeGetter<(string | number) & {}>;
+    'border-left-style': import("@xstyled/system").ThemeGetter<(string | number) & {}>;
+    'outline-style': import("@xstyled/system").ThemeGetter<(string | number) & {}>;
     'box-shadow': (value: any) => (p: object) => any;
@@ -59,9 +61,11 @@ 'text-shadow': (value: any) => (p: object) => any;
     'z-index': (value: any) => any;
-    'font-family': import("@xstyled/system").ThemeGetter<(string & {}) | (number & {})>;
+    'font-family': import("@xstyled/system").ThemeGetter<(string | number) & {}>;
     'font-size': (value: any) => any;
     'line-height': (value: any) => any;
-    'font-weight': import("@xstyled/system").ThemeGetter<(string & {}) | (number & {})>;
+    'font-weight': import("@xstyled/system").ThemeGetter<(string | number) & {}>;
     'letter-spacing': (value: any) => any;
-    transition: import("@xstyled/system").ThemeGetter<(string & {}) | (number & {})>;
-    animation: import("@xstyled/system").ThemeGetter<(string & {}) | (number & {})>;
+    transition: import("@xstyled/system").ThemeGetter<(string | number) & {}>;
+    'transition-duration': import("@xstyled/system").ThemeGetter<import("@xstyled/system").DurationGetter>;
+    'animation-duration': import("@xstyled/system").ThemeGetter<import("@xstyled/system").DurationGetter>;
+    animation: import("@xstyled/system").ThemeGetter<(string | number) & {}>;
     top: (value: any) => any;
@@ -71,6 +75,6 @@ right: (value: any) => any;
     left: (value: any) => any;
-    'animation-timing-function': import("@xstyled/system").ThemeGetter<(string & {}) | (number & {})>;
-    'transition-timing-function': import("@xstyled/system").ThemeGetter<(string & {}) | (number & {})>;
-    transform: import("@xstyled/system").ThemeGetter<(string & {}) | (number & {})>;
-    'transition-property': import("@xstyled/system").ThemeGetter<(string & {}) | (number & {})>;
+    'animation-timing-function': import("@xstyled/system").ThemeGetter<(string | number) & {}>;
+    'transition-timing-function': import("@xstyled/system").ThemeGetter<(string | number) & {}>;
+    transform: import("@xstyled/system").ThemeGetter<(string | number) & {}>;
+    'transition-property': import("@xstyled/system").ThemeGetter<(string | number) & {}>;
 };

package.json

 {
   "name": "@xstyled/core",
   "description": "xstyled core utilities.",
-  "version": "2.2.3",
+  "version": "2.3.0",
   "sideEffects": false,
@@ -27,5 +27,5 @@ "main": "dist/index.js",
   "dependencies": {
-    "@xstyled/system": "^2.2.3"
+    "@xstyled/system": "^2.3.0"
   },
-  "gitHead": "9cec90b9574162148b5e4cbd7b8727d3e12ac22f"
+  "gitHead": "a13b7c54f09080a309649df32ef6bb11ac4cbaca"
 }

No alert changes

Improved metrics

Total package byte prevSize

213970

increased by10.56%

Number of package files

19

increased by5.56%

Lines of code

1617

increased by11.06%

Dependency changes

• Updated@xstyled/system@^2.3.0