@xstyled/styled-components - npm Package Compare versions

Comparing version 1.13.1 to 1.14.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [1.14.0](https://github.com/smooth-code/xstyled/compare/v1.13.1...v1.14.0) (2019-11-13)
+
+
+### Features
+
+* add useTheme & useUp / useDown ([36d2909](https://github.com/smooth-code/xstyled/commit/36d290924d6cfaef97dd3144b4895ab944aa1f25))
+
+
+
+
+
 ## [1.13.1](https://github.com/smooth-code/xstyled/compare/v1.13.0...v1.13.1) (2019-09-26)
@@ -8,0 +19,0 @@

dist/xstyled-styled-components.cjs.js

@@ -89,2 +89,19 @@ 'use strict';
 
+function useTheme() {
+  return React.useContext(scStyled.ThemeContext);
+}
+
+function useBreakpoints() {
+  return core.useThemeBreakpoints(useTheme());
+}
+function useBreakpoint() {
+  return core.useThemeBreakpoint(useTheme());
+}
+function useUp(key) {
+  return core.useThemeUp(useTheme(), key);
+}
+function useDown(key) {
+  return core.useThemeDown(useTheme(), key);
+}
+
 Object.defineProperty(exports, 'ServerStyleSheet', {
@@ -168,2 +185,8 @@ enumerable: true,
 });
+Object.defineProperty(exports, 'useViewportWidth', {
+  enumerable: true,
+  get: function () {
+    return core.useViewportWidth;
+  }
+});
 exports.Box = Box;
@@ -174,1 +197,6 @@ exports.ColorModeProvider = ColorModeProvider;
 exports.default = styled;
+exports.useBreakpoint = useBreakpoint;
+exports.useBreakpoints = useBreakpoints;
+exports.useDown = useDown;
+exports.useTheme = useTheme;
+exports.useUp = useUp;

dist/xstyled-styled-components.es.js

 import scStyled, { css as css$1, createGlobalStyle as createGlobalStyle$1, ThemeContext, ThemeProvider } from 'styled-components';
 export { ServerStyleSheet, StyleSheetConsumer, StyleSheetContext, StyleSheetManager, ThemeConsumer, ThemeContext, ThemeProvider, isStyledComponent, keyframes, withTheme } from 'styled-components';
 import { flattenStrings } from '@xstyled/util';
-import { transform, createBox, createColorModeProvider, createColorStyles } from '@xstyled/core';
-export { getColorModeInitScriptElement, getColorModeInitScriptTag, useColorMode } from '@xstyled/core';
+import { transform, createBox, createColorModeProvider, createColorStyles, useThemeBreakpoints, useThemeBreakpoint, useThemeUp, useThemeDown } from '@xstyled/core';
+export { getColorModeInitScriptElement, getColorModeInitScriptTag, useColorMode, useViewportWidth } from '@xstyled/core';
 import React from 'react';
@@ -84,3 +84,20 @@ import { createSystemComponent } from '@xstyled/system';
 
+function useTheme() {
+  return React.useContext(ThemeContext);
+}
+
+function useBreakpoints() {
+  return useThemeBreakpoints(useTheme());
+}
+function useBreakpoint() {
+  return useThemeBreakpoint(useTheme());
+}
+function useUp(key) {
+  return useThemeUp(useTheme(), key);
+}
+function useDown(key) {
+  return useThemeDown(useTheme(), key);
+}
+
 export default styled;
-export { Box, ColorModeProvider, createGlobalStyle, css };
+export { Box, ColorModeProvider, createGlobalStyle, css, useBreakpoint, useBreakpoints, useDown, useTheme, useUp };

dist/xstyled-styled-components.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("styled-components"),require("@xstyled/system"),require("react")):"function"==typeof define&&define.amd?define(["exports","styled-components","@xstyled/system","react"],t):t((e=e||self).xstyled={},e.styled,e.xstyledSystem,e.React)}(this,function(e,t,r,o){"use strict";var n="default"in t?t.default:t;o=o&&o.hasOwnProperty("default")?o.default:o;var i=function(e){return"string"==typeof e&&""!==e},u=function(e){return"object"==typeof e&&null!==e},c=function(e){return"function"==typeof e};function l(e,t){if(null==e)return{};var r,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}function a(){return(a=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 d(){return["&&{",r.system,"}"]}d.meta=r.system.meta;var f=function(e){return function(t){var r=Number(t);return e(Number.isNaN(r)?t:r)}},s=/\s+/,m=function(e){return function(t){var r=t.split(s);return function(t){return r.map(function(r){return e(r)(t)}).join(" ")}}},g=f(r.getSpace),h=m(g),y=f(r.getBorder),v=f(r.getBorderWidth),p=m(v),b=f(r.getSize),S=m(r.getBorderStyle),C={margin:h,"margin-top":g,"margin-bottom":g,"margin-left":g,"margin-right":g,padding:h,"padding-top":g,"padding-bottom":g,"padding-left":g,"padding-right":g,"grid-gap":h,"grid-row-gap":g,"grid-column-gap":g,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,fill:r.getColor,"border-radius":m(f(r.getRadius)),border:y,"border-top":y,"border-right":y,"border-bottom":y,"border-left":y,"border-width":p,"boder-top-width":v,"boder-right-width":v,"boder-bottom-width":v,"boder-left-width":v,"border-style":S,"boder-top-style":r.getBorderStyle,"boder-right-style":r.getBorderStyle,"boder-bottom-style":r.getBorderStyle,"boder-left-style":r.getBorderStyle,"box-shadow":r.getShadow,"text-shadow":r.getShadow,width:b,height:b,"max-width":b,"max-height":b,"min-width":b,"min-height":b,"z-index":f(r.getZIndex),"font-family":r.getFont,"font-size":f(r.getFontSize),"line-height":f(r.getLineHeight),"font-weight":r.getFontWeight,"letter-spacing":f(r.getLetterSpacing),transition:r.getTransition},w=/(\s*)([^&{}:;\n]+):\s*([^&{}:;\n]+)(\s*);/g,x=/\s*!important\s*/;function M(e){if("string"!=typeof e)return e;for(var t,r=0,o=[],n=function(){var n=t,i=n[1],u=n[2],c=n[3],l=n[4],a=C[u];if(a){var d=x.test(c),f=c.replace(x,"");o.push(e.slice(r,t.index)),o.push(function(e){return""+i+u+": "+a(f)(e)+(d?" !important":"")+";"+l}),r=t.index+t[0].length}};t=w.exec(e);)n();return o.push(e.slice(r,e.length)),o}var P=function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return t.filter(Boolean).join(".")},j=function(e){return"--"+e.replace(/\./g,"-")},O=function(e,t){return"var("+j(e)+", "+t+")"};function T(e,t,r){void 0===r&&(r=e);var o=Array.isArray(e)?[]:{};for(var n in e){var l=e[n],a=P(t,n);u(l)?o[n]=T(l,a,r):i(l)?o[n]=O(a,l):c(l)&&(o[n]=O(a,l({theme:r})))}return o}function E(e,t,r,o){for(var n in void 0===r&&(r=e),void 0===o&&(o={value:""}),e){var l=e[n],a=P(t,n);u(l)?E(l,a,r,o):i(l)?o.value+=j(a)+": "+l+";":c(l)&&(o.value+=j(a)+": "+l({theme:r})+";")}return o.value}var _="xstyled-color-mode",B={get:function(){return"undefined"==typeof window?null:window.localStorage.getItem(_)},set:function(e){return window.localStorage.setItem(_,e)},clear:function(){return window.localStorage.removeItem(_)}},L="xstyled-color-mode-",k=function(e){return""+L+e},q="xstyled-colors",I=["light","dark"];var N=function(e){return"@media "+e},z=function(e){return"(prefers-color-scheme: "+e+")"};function F(e){return e&&e.colors&&e.colors.modes}function A(e){return e&&(void 0===e.useCustomProperties||e.useCustomProperties)}function G(e){return e.initialColorModeName||"default"}function Q(e,t){var r=(void 0===t?{}:t).targetSelector,o=void 0===r?"body":r;if(!F(e))return null;var n=e.colors,i=n.modes,u=E(l(n,["modes"]),q,e);function c(t){var r=function(e,t){return a({},e,{colors:a({},e.colors,{},e.colors.modes[t])})}(e,t),o=r.colors,n=o.modes;return E(a({},l(o,["modes"]),{},n[t]),q,r)}return!1!==e.useColorSchemeMediaQuery&&I.forEach(function(e){if(i[e]){var t=N(z(e));u+=t+"{"+c(e)+"}"}}),[G(e)].concat(Object.keys(i)).forEach(function(e){var t="&."+k(e);u+=t+"{"+c(e)+"}"}),o+"{"+u+"}"}function R(e){var t=o.useMemo(function(){return function(e){return e&&(void 0===e.useColorSchemeMediaQuery||e.useColorSchemeMediaQuery)}(e)?I.map(function(t){if(!e.colors.modes[t])return null;var r=function(e){if("undefined"==typeof window||void 0===window.matchMedia)return null;var t=z(e);return window.matchMedia(t)}(t);return r?{mode:t,mql:r}:null}).filter(Boolean):[]},[e]),r=o.useState(function(){var e=t.find(function(e){return e.mql.matches});return e?e.mode:null}),n=r[0],i=r[1];return o.useEffect(function(){var e=t.filter(function(e){var t=e.mql;return t.addListener&&t.removeListener}).map(function(e){var t=e.mode,r=e.mql,o=function(e){var r=e.matches;i(r?t:function(e){return e===t?null:t})};return r.addListener(o),function(){return r.removeListener(o)}});return function(){return e.forEach(function(e){return e()})}}),n}var H="undefined"!=typeof window?o.useLayoutEffect:o.useEffect;function W(e,t){var r=(void 0===t?{}:t).target,n=R(e),i=function(e){return e.defaultColorModeName||G(e)}(e),u=G(e),c=o.useState(function(){return F(e)?i:null}),l=c[0],a=c[1],d=A(e),f=o.useRef(!1),s=o.useCallback(function(e){f.current=!0,a(e)},[]);return H(function(){if(F(e)){var t=B.get();l!==(t||n||i)&&a(t||n||i)}},[]),H(function(){f.current&&B.set(l)},[l]),H(function(){if(!B.get()){var e=n||i;e!==l&&a(e)}},[l,n,i]),H(function(){if(d&&(B.get()||u!==l)){var e=k(l),t=r||document.body;return t.classList.add(e),function(){t.classList.remove(e)}}},[d,r,l,u]),[l,s]}var Z=o.createContext();function D(e){var t=e.ThemeContext,r=e.ThemeProvider,n=e.ColorModeStyle;return function(e){var i=e.children,u=e.target,c=e.targetSelector,d=o.useContext(t);if(!d)throw new Error("[ColorModeProvider] requires ThemeProvider upper in the tree");var f=W(d,{target:u}),s=function(e,t){var r=o.useMemo(function(){if(!A(e))return null;if(!F(e))return e;var t=e.colors,r=t.modes,o=l(t,["modes"]);return a({},e,{colors:a({},T(o,q,e),{modes:r}),__rawColors:e.colors})},[e]),n=o.useMemo(function(){return A(e)?null:F(e)?t===G(e)?a({},e,{__colorMode:t}):a({},e,{colors:a({},e.colors,{},e.colors.modes[t]),__colorMode:t,__rawColors:e.colors}):e},[e,t]);return r||n}(d,f[0]);return o.createElement(o.Fragment,null,o.createElement(n,{targetSelector:c}),o.createElement(r,{theme:s},o.createElement(Z.Provider,{value:f},i)))}}function J(e){var t=(void 0===e?{}:e).target;return"(function() { try {\n    var mode = localStorage.getItem('"+_+"');\n    if (mode) "+(void 0===t?"document.body":t)+".classList.add('"+L+"' + mode);\n  } catch (e) {} })();"}function K(){var e=t.css.apply(void 0,arguments);return e.reduce(function(e,t){var r=e.length-1,o=e[r];return"string"==typeof o&&"string"==typeof t?e[r]=o+t:e.push(t),e},[]).map(M)}function U(e){return function e(t){var r=function(){return t([K.apply(void 0,arguments)])};return r.attrs=function(r){return e(t.attrs(r))},r.withConfig=function(r){return e(t.withConfig(r))},r}(n(e))}var V=U(r.createSystemComponent(o))(d);function X(){var e,t,r=(e=["",""],t||(t=e.slice(0)),e.raw=t,e);return X=function(){return r},r}U.box=U(V),Object.keys(n).forEach(function(e){U[e]=U(e),U[e+"Box"]=U(V.withComponent(r.createSystemComponent(o,e)))});var Y=t.createGlobalStyle(X(),function(e){return Q(e.theme,{targetSelector:e.targetSelector})}),$=D({ThemeContext:t.ThemeContext,ThemeProvider:t.ThemeProvider,ColorModeStyle:Y});Object.defineProperty(e,"ServerStyleSheet",{enumerable:!0,get:function(){return t.ServerStyleSheet}}),Object.defineProperty(e,"StyleSheetConsumer",{enumerable:!0,get:function(){return t.StyleSheetConsumer}}),Object.defineProperty(e,"StyleSheetContext",{enumerable:!0,get:function(){return t.StyleSheetContext}}),Object.defineProperty(e,"StyleSheetManager",{enumerable:!0,get:function(){return t.StyleSheetManager}}),Object.defineProperty(e,"ThemeConsumer",{enumerable:!0,get:function(){return t.ThemeConsumer}}),Object.defineProperty(e,"ThemeContext",{enumerable:!0,get:function(){return t.ThemeContext}}),Object.defineProperty(e,"ThemeProvider",{enumerable:!0,get:function(){return t.ThemeProvider}}),Object.defineProperty(e,"isStyledComponent",{enumerable:!0,get:function(){return t.isStyledComponent}}),Object.defineProperty(e,"keyframes",{enumerable:!0,get:function(){return t.keyframes}}),Object.defineProperty(e,"withTheme",{enumerable:!0,get:function(){return t.withTheme}}),e.Box=V,e.ColorModeProvider=$,e.createGlobalStyle=function(){return t.createGlobalStyle([K.apply(void 0,arguments)])},e.css=K,e.default=U,e.getColorModeInitScriptElement=function(e){return o.createElement("script",{key:"xstyled-color-mode-init",dangerouslySetInnerHTML:{__html:J(e)}})},e.getColorModeInitScriptTag=function(e){return"<script>"+J(e)+"<\/script>"},e.useColorMode=function(){var e=o.useContext(Z);if(!e)throw new Error("[useColorMode] requires the ColorModeProvider component");return e},Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("styled-components"),require("react"),require("@xstyled/system")):"function"==typeof define&&define.amd?define(["exports","styled-components","react","@xstyled/system"],t):t((e=e||self).xstyled={},e.styled,e.React,e.xstyledSystem)}(this,(function(e,t,r,n){"use strict";var o="default"in t?t.default:t;r=r&&r.hasOwnProperty("default")?r.default:r;var u=function(e){return"string"==typeof e&&""!==e},i=function(e){return"object"==typeof e&&null!==e},c=function(e){return"function"==typeof e};function a(e,t){if(null==e)return{};var r,n,o={},u=Object.keys(e);for(n=0;n<u.length;n++)r=u[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}function l(){return(l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function d(e){return n.getBreakpoints({theme:e})}function f(){var e=r.useState(null),t=e[0],n=e[1];return r.useLayoutEffect((function(){function e(){n(window.innerWidth)}return n(window.innerWidth),window.addEventListener("resize",e),function(){return window.removeEventListener("resize",e)}}),[]),t}function s(e,t){var r=function(e,t){var r=d(e)[t];return 0===r?null:r}(e,t);return f()>r}function m(e,t){var r=function(e,t){var r=d(e)[t];return 0===r?null:r-.02}(e,t);return f()<r}function g(){return["&&{",n.system,"}"]}g.meta=n.system.meta;var h=function(e){return function(t){var r=Number(t);return e(Number.isNaN(r)?t:r)}},v=/\s+/,y=function(e){return function(t){var r=t.split(v);return function(t){return r.map((function(r){return e(r)(t)})).join(" ")}}},p=h(n.getSpace),b=y(p),S=h(n.getBorder),w=h(n.getBorderWidth),C=y(w),x=h(n.getSize),M=y(n.getBorderStyle),P={margin:b,"margin-top":p,"margin-bottom":p,"margin-left":p,"margin-right":p,padding:b,"padding-top":p,"padding-bottom":p,"padding-left":p,"padding-right":p,"grid-gap":b,"grid-row-gap":p,"grid-column-gap":p,color:n.getColor,"background-color":n.getColor,"border-color":n.getColor,"border-top-color":n.getColor,"border-right-color":n.getColor,"border-bottom-color":n.getColor,"border-left-color":n.getColor,fill:n.getColor,"border-radius":y(h(n.getRadius)),border:S,"border-top":S,"border-right":S,"border-bottom":S,"border-left":S,"border-width":C,"boder-top-width":w,"boder-right-width":w,"boder-bottom-width":w,"boder-left-width":w,"border-style":M,"boder-top-style":n.getBorderStyle,"boder-right-style":n.getBorderStyle,"boder-bottom-style":n.getBorderStyle,"boder-left-style":n.getBorderStyle,"box-shadow":n.getShadow,"text-shadow":n.getShadow,width:x,height:x,"max-width":x,"max-height":x,"min-width":x,"min-height":x,"z-index":h(n.getZIndex),"font-family":n.getFont,"font-size":h(n.getFontSize),"line-height":h(n.getLineHeight),"font-weight":n.getFontWeight,"letter-spacing":h(n.getLetterSpacing),transition:n.getTransition},j=/(\s*)([^&{}:;\n]+):\s*([^&{}:;\n]+)(\s*);/g,O=/\s*!important\s*/;function T(e){if("string"!=typeof e)return e;for(var t,r=0,n=[],o=function(){var o=t,u=o[1],i=o[2],c=o[3],a=o[4],l=P[i];if(l){var d=O.test(c),f=c.replace(O,"");n.push(e.slice(r,t.index)),n.push((function(e){return""+u+i+": "+l(f)(e)+(d?" !important":"")+";"+a})),r=t.index+t[0].length}};t=j.exec(e);)o();return n.push(e.slice(r,e.length)),n}var E=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,"-")},L=function(e,t){return"var("+B(e)+", "+t+")"};function k(e,t,r){void 0===r&&(r=e);var n=Array.isArray(e)?[]:{};for(var o in e){var a=e[o],l=E(t,o);i(a)?n[o]=k(a,l,r):u(a)?n[o]=L(l,a):c(a)&&(n[o]=L(l,a({theme:r})))}return n}function _(e,t,r,n){for(var o in void 0===r&&(r=e),void 0===n&&(n={value:""}),e){var a=e[o],l=E(t,o);i(a)?_(a,l,r,n):u(a)?n.value+=B(l)+": "+a+";":c(a)&&(n.value+=B(l)+": "+a({theme:r})+";")}return n.value}var q="xstyled-color-mode",I={get:function(){return"undefined"==typeof window?null:window.localStorage.getItem(q)},set:function(e){return window.localStorage.setItem(q,e)},clear:function(){return window.localStorage.removeItem(q)}},z="xstyled-color-mode-",N=function(e){return""+z+e},W="xstyled-colors",F=["light","dark"];var A=function(e){return"@media "+e},G=function(e){return"(prefers-color-scheme: "+e+")"};function Q(e){return e&&e.colors&&e.colors.modes}function R(e){return e&&(void 0===e.useCustomProperties||e.useCustomProperties)}function H(e){return e.initialColorModeName||"default"}function D(e,t){var r=(void 0===t?{}:t).targetSelector,n=void 0===r?"body":r;if(!Q(e))return null;var o=e.colors,u=o.modes,i=_(a(o,["modes"]),W,e);function c(t){var r=function(e,t){return l({},e,{colors:l({},e.colors,{},e.colors.modes[t])})}(e,t),n=r.colors,o=n.modes;return _(l({},a(n,["modes"]),{},o[t]),W,r)}return!1!==e.useColorSchemeMediaQuery&&F.forEach((function(e){if(u[e]){var t=A(G(e));i+=t+"{"+c(e)+"}"}})),[H(e)].concat(Object.keys(u)).forEach((function(e){var t="&."+N(e);i+=t+"{"+c(e)+"}"})),n+"{"+i+"}"}function U(e){var t=r.useMemo((function(){return function(e){return e&&(void 0===e.useColorSchemeMediaQuery||e.useColorSchemeMediaQuery)}(e)?F.map((function(t){if(!e.colors.modes[t])return null;var r=function(e){if("undefined"==typeof window||void 0===window.matchMedia)return null;var t=G(e);return window.matchMedia(t)}(t);return r?{mode:t,mql:r}:null})).filter(Boolean):[]}),[e]),n=r.useState((function(){var e=t.find((function(e){return e.mql.matches}));return e?e.mode:null})),o=n[0],u=n[1];return r.useEffect((function(){var e=t.filter((function(e){var t=e.mql;return t.addListener&&t.removeListener})).map((function(e){var t=e.mode,r=e.mql,n=function(e){var r=e.matches;u(r?t:function(e){return e===t?null:t})};return r.addListener(n),function(){return r.removeListener(n)}}));return function(){return e.forEach((function(e){return e()}))}})),o}var V="undefined"!=typeof window?r.useLayoutEffect:r.useEffect;function Z(e,t){var n=(void 0===t?{}:t).target,o=U(e),u=function(e){return e.defaultColorModeName||H(e)}(e),i=H(e),c=r.useState((function(){return Q(e)?u:null})),a=c[0],l=c[1],d=R(e),f=r.useRef(!1),s=r.useCallback((function(e){f.current=!0,l(e)}),[]);return V((function(){if(Q(e)){var t=I.get();a!==(t||o||u)&&l(t||o||u)}}),[]),V((function(){f.current&&I.set(a)}),[a]),V((function(){if(!I.get()){var e=o||u;e!==a&&l(e)}}),[a,o,u]),V((function(){if(d&&(I.get()||i!==a)){var e=N(a),t=n||document.body;return t.classList.add(e),function(){t.classList.remove(e)}}}),[d,n,a,i]),[a,s]}var J=r.createContext();function K(e){var t=e.ThemeContext,n=e.ThemeProvider,o=e.ColorModeStyle;return function(e){var u=e.children,i=e.target,c=e.targetSelector,d=r.useContext(t);if(!d)throw new Error("[ColorModeProvider] requires ThemeProvider upper in the tree");var f=Z(d,{target:i}),s=function(e,t){var n=r.useMemo((function(){if(!R(e))return null;if(!Q(e))return e;var t=e.colors,r=t.modes,n=a(t,["modes"]);return l({},e,{colors:l({},k(n,W,e),{modes:r}),__rawColors:e.colors})}),[e]),o=r.useMemo((function(){return R(e)?null:Q(e)?t===H(e)?l({},e,{__colorMode:t}):l({},e,{colors:l({},e.colors,{},e.colors.modes[t]),__colorMode:t,__rawColors:e.colors}):e}),[e,t]);return n||o}(d,f[0]);return r.createElement(r.Fragment,null,r.createElement(o,{targetSelector:c}),r.createElement(n,{theme:s},r.createElement(J.Provider,{value:f},u)))}}function X(e){var t=(void 0===e?{}:e).target;return"(function() { try {\n    var mode = localStorage.getItem('"+q+"');\n    if (mode) "+(void 0===t?"document.body":t)+".classList.add('"+z+"' + mode);\n  } catch (e) {} })();"}function Y(){var e=t.css.apply(void 0,arguments);return e.reduce((function(e,t){var r=e.length-1,n=e[r];return"string"==typeof n&&"string"==typeof t?e[r]=n+t:e.push(t),e}),[]).map(T)}function $(e){return function e(t){var r=function(){return t([Y.apply(void 0,arguments)])};return r.attrs=function(r){return e(t.attrs(r))},r.withConfig=function(r){return e(t.withConfig(r))},r}(o(e))}var ee=$(n.createSystemComponent(r))(g);function te(){var e,t,r=(e=["",""],t||(t=e.slice(0)),e.raw=t,e);return te=function(){return r},r}$.box=$(ee),Object.keys(o).forEach((function(e){$[e]=$(e),$[e+"Box"]=$(ee.withComponent(n.createSystemComponent(r,e)))}));var re=t.createGlobalStyle(te(),(function(e){return D(e.theme,{targetSelector:e.targetSelector})})),ne=K({ThemeContext:t.ThemeContext,ThemeProvider:t.ThemeProvider,ColorModeStyle:re});function oe(){return r.useContext(t.ThemeContext)}Object.defineProperty(e,"ServerStyleSheet",{enumerable:!0,get:function(){return t.ServerStyleSheet}}),Object.defineProperty(e,"StyleSheetConsumer",{enumerable:!0,get:function(){return t.StyleSheetConsumer}}),Object.defineProperty(e,"StyleSheetContext",{enumerable:!0,get:function(){return t.StyleSheetContext}}),Object.defineProperty(e,"StyleSheetManager",{enumerable:!0,get:function(){return t.StyleSheetManager}}),Object.defineProperty(e,"ThemeConsumer",{enumerable:!0,get:function(){return t.ThemeConsumer}}),Object.defineProperty(e,"ThemeContext",{enumerable:!0,get:function(){return t.ThemeContext}}),Object.defineProperty(e,"ThemeProvider",{enumerable:!0,get:function(){return t.ThemeProvider}}),Object.defineProperty(e,"isStyledComponent",{enumerable:!0,get:function(){return t.isStyledComponent}}),Object.defineProperty(e,"keyframes",{enumerable:!0,get:function(){return t.keyframes}}),Object.defineProperty(e,"withTheme",{enumerable:!0,get:function(){return t.withTheme}}),e.Box=ee,e.ColorModeProvider=ne,e.createGlobalStyle=function(){return t.createGlobalStyle([Y.apply(void 0,arguments)])},e.css=Y,e.default=$,e.getColorModeInitScriptElement=function(e){return r.createElement("script",{key:"xstyled-color-mode-init",dangerouslySetInnerHTML:{__html:X(e)}})},e.getColorModeInitScriptTag=function(e){return"<script>"+X(e)+"<\/script>"},e.useBreakpoint=function(){return e=oe(),t=d(e),n=f(),r.useMemo((function(){return Object.keys(t).reverse().find((function(e){return n>t[e]}))||null}),[t,n]);var e,t,n},e.useBreakpoints=function(){return d(oe())},e.useColorMode=function(){var e=r.useContext(J);if(!e)throw new Error("[useColorMode] requires the ColorModeProvider component");return e},e.useDown=function(e){return m(oe(),e)},e.useTheme=oe,e.useUp=function(e){return s(oe(),e)},e.useViewportWidth=f,Object.defineProperty(e,"__esModule",{value:!0})}));

dist/xstyled-styled-components.umd.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('styled-components'), require('@xstyled/system'), require('react')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'styled-components', '@xstyled/system', 'react'], factory) :
-  (global = global || self, factory(global.xstyled = {}, global.styled, global.xstyledSystem, global.React));
-}(this, function (exports, scStyled, system, React) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('styled-components'), require('react'), require('@xstyled/system')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'styled-components', 'react', '@xstyled/system'], factory) :
+  (global = global || self, factory(global.xstyled = {}, global.styled, global.React, global.xstyledSystem));
+}(this, (function (exports, scStyled, React, system) { 'use strict';
 
@@ -74,2 +74,78 @@ var scStyled__default = 'default' in scStyled ? scStyled['default'] : scStyled;
 
+  /* eslint-disable no-undef */
+
+  function useThemeBreakpoints(theme) {
+    return system.getBreakpoints({
+      theme: theme
+    });
+  }
+  /**
+   * Minimum breakpoint width.
+   * Null for the smallest breakpoint.
+   */
+
+
+  function useThemeMinValue(theme, key) {
+    var breakpoints = useThemeBreakpoints(theme);
+    var value = breakpoints[key];
+    return value === 0 ? null : value;
+  }
+  /**
+   * Maximum breakpoint width. Null for the largest (last) breakpoint.
+   * The maximum value is calculated as the minimum of the next one less 0.02px
+   * to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
+   * See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
+   * Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
+   * See https://bugs.webkit.org/show_bug.cgi?id=178261
+   */
+
+
+  function useThemeMaxValue(theme, key) {
+    var breakpoints = useThemeBreakpoints(theme);
+    var breakPoint = breakpoints[key];
+    return breakPoint === 0 ? null : breakPoint - 0.02;
+  }
+
+  function useViewportWidth() {
+    var _React$useState = React.useState(null),
+        width = _React$useState[0],
+        setWidth = _React$useState[1];
+
+    React.useLayoutEffect(function () {
+      setWidth(window.innerWidth);
+
+      function handleResize() {
+        setWidth(window.innerWidth);
+      }
+
+      window.addEventListener('resize', handleResize);
+      return function () {
+        return window.removeEventListener('resize', handleResize);
+      };
+    }, []);
+    return width;
+  }
+
+  function useThemeBreakpoint(theme) {
+    var breakpoints = useThemeBreakpoints(theme);
+    var width = useViewportWidth();
+    return React.useMemo(function () {
+      return Object.keys(breakpoints).reverse().find(function (breakpoint) {
+        return width > breakpoints[breakpoint];
+      }) || null;
+    }, [breakpoints, width]);
+  }
+
+  function useThemeUp(theme, key) {
+    var value = useThemeMinValue(theme, key);
+    var width = useViewportWidth();
+    return width > value;
+  }
+
+  function useThemeDown(theme, key) {
+    var value = useThemeMaxValue(theme, key);
+    var width = useViewportWidth();
+    return width < value;
+  }
+
   function createBox() {
@@ -737,2 +813,19 @@ return ["&&{", system.system, "}"];
 
+  function useTheme() {
+    return React.useContext(scStyled.ThemeContext);
+  }
+
+  function useBreakpoints() {
+    return useThemeBreakpoints(useTheme());
+  }
+  function useBreakpoint() {
+    return useThemeBreakpoint(useTheme());
+  }
+  function useUp(key) {
+    return useThemeUp(useTheme(), key);
+  }
+  function useDown(key) {
+    return useThemeDown(useTheme(), key);
+  }
+
   Object.defineProperty(exports, 'ServerStyleSheet', {
@@ -805,6 +898,12 @@ enumerable: true,
   exports.getColorModeInitScriptTag = getColorModeInitScriptTag;
+  exports.useBreakpoint = useBreakpoint;
+  exports.useBreakpoints = useBreakpoints;
   exports.useColorMode = useColorMode;
+  exports.useDown = useDown;
+  exports.useTheme = useTheme;
+  exports.useUp = useUp;
+  exports.useViewportWidth = useViewportWidth;
 
   Object.defineProperty(exports, '__esModule', { value: true });
 
-}));
+})));

package.json

 {
   "name": "@xstyled/styled-components",
   "description": "Xstyled bindings for styled-components.",
-  "version": "1.13.1",
+  "version": "1.14.0",
   "keywords": [
@@ -28,7 +28,7 @@ "styled-components",
   "dependencies": {
-    "@babel/runtime": "^7.5.5",
-    "@xstyled/core": "^1.13.1",
-    "@xstyled/util": "^1.11.0"
+    "@babel/runtime": "^7.7.2",
+    "@xstyled/core": "^1.14.0",
+    "@xstyled/util": "^1.14.0"
   },
-  "gitHead": "132bc47410b425294bb321e6ef9724cc26b67c5f"
+  "gitHead": "6e5ffa8f9d820f15e2fe0cb0615720172a044990"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

56655

increased by9.88%

Lines of code

1080

increased by13.56%

Dependency changes

• Updated@babel/runtime@^7.7.2

• Updated@xstyled/core@^1.14.0

• Updated@xstyled/util@^1.14.0