emotion-theming - npm Package Compare versions

Comparing version 11.0.0-next.1 to 11.0.0-next.2

CHANGELOG.md

 # emotion-theming
 
+## 11.0.0-next.2
+
+### Major Changes
+
+- [`79036056`](https://github.com/emotion-js/emotion/commit/79036056808eefc81a77225254f7c25c2ff9d967) [#967](https://github.com/emotion-js/emotion/pull/967) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Use hooks internally for improved bundle size and a better tree in React DevTools
+
+### Patch Changes
+
+- Updated dependencies [[`79036056`](https://github.com/emotion-js/emotion/commit/79036056808eefc81a77225254f7c25c2ff9d967), [`79036056`](https://github.com/emotion-js/emotion/commit/79036056808eefc81a77225254f7c25c2ff9d967)]:
+  - @emotion/styled@11.0.0-next.2
+  - @emotion/core@11.0.0-next.2
+
 ## 11.0.0-next.1
@@ -4,0 +16,0 @@

dist/emotion-theming.browser.cjs.js

@@ -44,14 +44,15 @@ 'use strict';
 var ThemeProvider = function ThemeProvider(props) {
-  return React.createElement(core.ThemeContext.Consumer, null, function (theme) {
-    if (props.theme !== theme) {
-      theme = createCacheWithTheme(theme)(props.theme);
-    }
+  var theme = React.useContext(core.ThemeContext);
 
-    return React.createElement(core.ThemeContext.Provider, {
-      value: theme
-    }, props.children);
-  });
+  if (props.theme !== theme) {
+    theme = createCacheWithTheme(theme)(props.theme);
+  }
+
+  return React.createElement(core.ThemeContext.Provider, {
+    value: theme
+  }, props.children);
 };
 
 // should we change this to be forwardRef/withCSSContext style so it doesn't merge with props?
+// should we remove this altogether and tell people to useContext
 function withTheme(Component) {
@@ -61,8 +62,7 @@ var componentName = Component.displayName || Component.name || 'Component';
   var render = function render(props, ref) {
-    return React.createElement(core.ThemeContext.Consumer, null, function (theme) {
-      return React.createElement(Component, _extends({
-        theme: theme,
-        ref: ref
-      }, props));
-    });
+    var theme = React.useContext(core.ThemeContext);
+    return React.createElement(Component, _extends({
+      theme: theme,
+      ref: ref
+    }, props));
   }; // $FlowFixMe
@@ -69,0 +69,0 @@

dist/emotion-theming.browser.esm.js

 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import React__default, { createElement, forwardRef } from 'react';
+import React__default, { useContext, createElement, forwardRef } from 'react';
 import { ThemeContext } from '@emotion/core';
@@ -37,14 +37,15 @@ import weakMemoize from '@emotion/weak-memoize';
 var ThemeProvider = function ThemeProvider(props) {
-  return createElement(ThemeContext.Consumer, null, function (theme) {
-    if (props.theme !== theme) {
-      theme = createCacheWithTheme(theme)(props.theme);
-    }
+  var theme = useContext(ThemeContext);
 
-    return createElement(ThemeContext.Provider, {
-      value: theme
-    }, props.children);
-  });
+  if (props.theme !== theme) {
+    theme = createCacheWithTheme(theme)(props.theme);
+  }
+
+  return createElement(ThemeContext.Provider, {
+    value: theme
+  }, props.children);
 };
 
 // should we change this to be forwardRef/withCSSContext style so it doesn't merge with props?
+// should we remove this altogether and tell people to useContext
 function withTheme(Component) {
@@ -54,8 +55,7 @@ var componentName = Component.displayName || Component.name || 'Component';
   var render = function render(props, ref) {
-    return createElement(ThemeContext.Consumer, null, function (theme) {
-      return createElement(Component, _extends({
-        theme: theme,
-        ref: ref
-      }, props));
-    });
+    var theme = useContext(ThemeContext);
+    return createElement(Component, _extends({
+      theme: theme,
+      ref: ref
+    }, props));
   }; // $FlowFixMe
@@ -62,0 +62,0 @@

dist/emotion-theming.cjs.dev.js

@@ -44,14 +44,15 @@ 'use strict';
 var ThemeProvider = function ThemeProvider(props) {
-  return React.createElement(core.ThemeContext.Consumer, null, function (theme) {
-    if (props.theme !== theme) {
-      theme = createCacheWithTheme(theme)(props.theme);
-    }
+  var theme = React.useContext(core.ThemeContext);
 
-    return React.createElement(core.ThemeContext.Provider, {
-      value: theme
-    }, props.children);
-  });
+  if (props.theme !== theme) {
+    theme = createCacheWithTheme(theme)(props.theme);
+  }
+
+  return React.createElement(core.ThemeContext.Provider, {
+    value: theme
+  }, props.children);
 };
 
 // should we change this to be forwardRef/withCSSContext style so it doesn't merge with props?
+// should we remove this altogether and tell people to useContext
 function withTheme(Component) {
@@ -61,8 +62,7 @@ var componentName = Component.displayName || Component.name || 'Component';
   var render = function render(props, ref) {
-    return React.createElement(core.ThemeContext.Consumer, null, function (theme) {
-      return React.createElement(Component, _extends({
-        theme: theme,
-        ref: ref
-      }, props));
-    });
+    var theme = React.useContext(core.ThemeContext);
+    return React.createElement(Component, _extends({
+      theme: theme,
+      ref: ref
+    }, props));
   }; // $FlowFixMe
@@ -69,0 +69,0 @@

dist/emotion-theming.cjs.prod.js

@@ -43,8 +43,7 @@ "use strict";
 }), ThemeProvider = function(props) {
-  return React.createElement(core.ThemeContext.Consumer, null, function(theme) {
-    return props.theme !== theme && (theme = createCacheWithTheme(theme)(props.theme)), 
-    React.createElement(core.ThemeContext.Provider, {
-      value: theme
-    }, props.children);
-  });
+  var theme = React.useContext(core.ThemeContext);
+  return props.theme !== theme && (theme = createCacheWithTheme(theme)(props.theme)), 
+  React.createElement(core.ThemeContext.Provider, {
+    value: theme
+  }, props.children);
 };
@@ -54,8 +53,7 @@
   var componentName = Component.displayName || Component.name || "Component", WithTheme = React.forwardRef(function(props, ref) {
-    return React.createElement(core.ThemeContext.Consumer, null, function(theme) {
-      return React.createElement(Component, _extends({
-        theme: theme,
-        ref: ref
-      }, props));
-    });
+    var theme = React.useContext(core.ThemeContext);
+    return React.createElement(Component, _extends({
+      theme: theme,
+      ref: ref
+    }, props));
   });
@@ -62,0 +60,0 @@ return WithTheme.displayName = "WithTheme(" + componentName + ")", hoistNonReactStatics(WithTheme, Component);

dist/emotion-theming.esm.js

 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import React__default, { createElement, forwardRef } from 'react';
+import React__default, { useContext, createElement, forwardRef } from 'react';
 import { ThemeContext } from '@emotion/core';
@@ -37,14 +37,15 @@ import weakMemoize from '@emotion/weak-memoize';
 var ThemeProvider = function ThemeProvider(props) {
-  return createElement(ThemeContext.Consumer, null, function (theme) {
-    if (props.theme !== theme) {
-      theme = createCacheWithTheme(theme)(props.theme);
-    }
+  var theme = useContext(ThemeContext);
 
-    return createElement(ThemeContext.Provider, {
-      value: theme
-    }, props.children);
-  });
+  if (props.theme !== theme) {
+    theme = createCacheWithTheme(theme)(props.theme);
+  }
+
+  return createElement(ThemeContext.Provider, {
+    value: theme
+  }, props.children);
 };
 
 // should we change this to be forwardRef/withCSSContext style so it doesn't merge with props?
+// should we remove this altogether and tell people to useContext
 function withTheme(Component) {
@@ -54,8 +55,7 @@ var componentName = Component.displayName || Component.name || 'Component';
   var render = function render(props, ref) {
-    return createElement(ThemeContext.Consumer, null, function (theme) {
-      return createElement(Component, _extends({
-        theme: theme,
-        ref: ref
-      }, props));
-    });
+    var theme = useContext(ThemeContext);
+    return createElement(Component, _extends({
+      theme: theme,
+      ref: ref
+    }, props));
   }; // $FlowFixMe
@@ -62,0 +62,0 @@

dist/emotion-theming.umd.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("@emotion/core")):"function"==typeof define&&define.amd?define(["exports","react","@emotion/core"],t):t((e=e||self).emotionTheming={},e.React,e.emotionCore)}(this,function(e,t,r){"use strict";var o="default"in t?t.default:t;var n=function(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e},i=function(e){var t=new WeakMap;return function(r){if(t.has(r))return t.get(r);var o=e(r);return t.set(r,o),o}};function c(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,o)}return r}var s=function(e,t){return"function"==typeof t?t(e):function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?c(r,!0).forEach(function(t){n(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(r).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}({},e,{},t)},u=i(function(e){return i(function(t){return s(e,t)})});function a(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function f(e,t){return e(t={exports:{}},t.exports),t.exports}var p=f(function(e){function t(){return e.exports=t=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},t.apply(this,arguments)}e.exports=t}),l=f(function(e,t){Object.defineProperty(t,"__esModule",{value:!0});var r="function"==typeof Symbol&&Symbol.for,o=r?Symbol.for("react.element"):60103,n=r?Symbol.for("react.portal"):60106,i=r?Symbol.for("react.fragment"):60107,c=r?Symbol.for("react.strict_mode"):60108,s=r?Symbol.for("react.profiler"):60114,u=r?Symbol.for("react.provider"):60109,a=r?Symbol.for("react.context"):60110,f=r?Symbol.for("react.async_mode"):60111,p=r?Symbol.for("react.concurrent_mode"):60111,l=r?Symbol.for("react.forward_ref"):60112,y=r?Symbol.for("react.suspense"):60113,m=r?Symbol.for("react.memo"):60115,d=r?Symbol.for("react.lazy"):60116;function b(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case o:switch(e=e.type){case f:case p:case i:case s:case c:case y:return e;default:switch(e=e&&e.$$typeof){case a:case l:case u:return e;default:return t}}case d:case m:case n:return t}}}function P(e){return b(e)===p}t.typeOf=b,t.AsyncMode=f,t.ConcurrentMode=p,t.ContextConsumer=a,t.ContextProvider=u,t.Element=o,t.ForwardRef=l,t.Fragment=i,t.Lazy=d,t.Memo=m,t.Portal=n,t.Profiler=s,t.StrictMode=c,t.Suspense=y,t.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===i||e===p||e===s||e===c||e===y||"object"==typeof e&&null!==e&&(e.$$typeof===d||e.$$typeof===m||e.$$typeof===u||e.$$typeof===a||e.$$typeof===l)},t.isAsyncMode=function(e){return P(e)||b(e)===f},t.isConcurrentMode=P,t.isContextConsumer=function(e){return b(e)===a},t.isContextProvider=function(e){return b(e)===u},t.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===o},t.isForwardRef=function(e){return b(e)===l},t.isFragment=function(e){return b(e)===i},t.isLazy=function(e){return b(e)===d},t.isMemo=function(e){return b(e)===m},t.isPortal=function(e){return b(e)===n},t.isProfiler=function(e){return b(e)===s},t.isStrictMode=function(e){return b(e)===c},t.isSuspense=function(e){return b(e)===y}});a(l);l.typeOf,l.AsyncMode,l.ConcurrentMode,l.ContextConsumer,l.ContextProvider,l.Element,l.ForwardRef,l.Fragment,l.Lazy,l.Memo,l.Portal,l.Profiler,l.StrictMode,l.Suspense,l.isValidElementType,l.isAsyncMode,l.isConcurrentMode,l.isContextConsumer,l.isContextProvider,l.isElement,l.isForwardRef,l.isFragment,l.isLazy,l.isMemo,l.isPortal,l.isProfiler,l.isStrictMode,l.isSuspense;var y=f(function(e,t){});a(y);y.typeOf,y.AsyncMode,y.ConcurrentMode,y.ContextConsumer,y.ContextProvider,y.Element,y.ForwardRef,y.Fragment,y.Lazy,y.Memo,y.Portal,y.Profiler,y.StrictMode,y.Suspense,y.isValidElementType,y.isAsyncMode,y.isConcurrentMode,y.isContextConsumer,y.isContextProvider,y.isElement,y.isForwardRef,y.isFragment,y.isLazy,y.isMemo,y.isPortal,y.isProfiler,y.isStrictMode,y.isSuspense;var m=f(function(e){e.exports=l}),d={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},b={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},P={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},v={};function O(e){return m.isMemo(e)?P:v[e.$$typeof]||d}v[m.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0};var C=Object.defineProperty,h=Object.getOwnPropertyNames,S=Object.getOwnPropertySymbols,g=Object.getOwnPropertyDescriptor,x=Object.getPrototypeOf,M=Object.prototype;var w=function e(t,r,o){if("string"!=typeof r){if(M){var n=x(r);n&&n!==M&&e(t,n,o)}var i=h(r);S&&(i=i.concat(S(r)));for(var c=O(t),s=O(r),u=0;u<i.length;++u){var a=i[u];if(!(b[a]||o&&o[a]||s&&s[a]||c&&c[a])){var f=g(r,a);try{C(t,a,f)}catch(e){}}}return t}return t};e.ThemeProvider=function(e){return t.createElement(r.ThemeContext.Consumer,null,function(o){return e.theme!==o&&(o=u(o)(e.theme)),t.createElement(r.ThemeContext.Provider,{value:o},e.children)})},e.useTheme=function(){return o.useContext(r.ThemeContext)},e.withTheme=function(e){var o=e.displayName||e.name||"Component",n=t.forwardRef(function(o,n){return t.createElement(r.ThemeContext.Consumer,null,function(r){return t.createElement(e,p({theme:r,ref:n},o))})});return n.displayName="WithTheme("+o+")",w(n,e)},Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("@emotion/core")):"function"==typeof define&&define.amd?define(["exports","react","@emotion/core"],t):t((e=e||self).emotionTheming={},e.React,e.emotionCore)}(this,function(e,t,r){"use strict";var o="default"in t?t.default:t;var n=function(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e},i=function(e){var t=new WeakMap;return function(r){if(t.has(r))return t.get(r);var o=e(r);return t.set(r,o),o}};function c(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,o)}return r}var s=function(e,t){return"function"==typeof t?t(e):function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?c(r,!0).forEach(function(t){n(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(r).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}({},e,{},t)},a=i(function(e){return i(function(t){return s(e,t)})});function f(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function u(e,t){return e(t={exports:{}},t.exports),t.exports}var p=u(function(e){function t(){return e.exports=t=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},t.apply(this,arguments)}e.exports=t}),l=u(function(e,t){Object.defineProperty(t,"__esModule",{value:!0});var r="function"==typeof Symbol&&Symbol.for,o=r?Symbol.for("react.element"):60103,n=r?Symbol.for("react.portal"):60106,i=r?Symbol.for("react.fragment"):60107,c=r?Symbol.for("react.strict_mode"):60108,s=r?Symbol.for("react.profiler"):60114,a=r?Symbol.for("react.provider"):60109,f=r?Symbol.for("react.context"):60110,u=r?Symbol.for("react.async_mode"):60111,p=r?Symbol.for("react.concurrent_mode"):60111,l=r?Symbol.for("react.forward_ref"):60112,y=r?Symbol.for("react.suspense"):60113,m=r?Symbol.for("react.memo"):60115,d=r?Symbol.for("react.lazy"):60116;function b(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case o:switch(e=e.type){case u:case p:case i:case s:case c:case y:return e;default:switch(e=e&&e.$$typeof){case f:case l:case a:return e;default:return t}}case d:case m:case n:return t}}}function P(e){return b(e)===p}t.typeOf=b,t.AsyncMode=u,t.ConcurrentMode=p,t.ContextConsumer=f,t.ContextProvider=a,t.Element=o,t.ForwardRef=l,t.Fragment=i,t.Lazy=d,t.Memo=m,t.Portal=n,t.Profiler=s,t.StrictMode=c,t.Suspense=y,t.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===i||e===p||e===s||e===c||e===y||"object"==typeof e&&null!==e&&(e.$$typeof===d||e.$$typeof===m||e.$$typeof===a||e.$$typeof===f||e.$$typeof===l)},t.isAsyncMode=function(e){return P(e)||b(e)===u},t.isConcurrentMode=P,t.isContextConsumer=function(e){return b(e)===f},t.isContextProvider=function(e){return b(e)===a},t.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===o},t.isForwardRef=function(e){return b(e)===l},t.isFragment=function(e){return b(e)===i},t.isLazy=function(e){return b(e)===d},t.isMemo=function(e){return b(e)===m},t.isPortal=function(e){return b(e)===n},t.isProfiler=function(e){return b(e)===s},t.isStrictMode=function(e){return b(e)===c},t.isSuspense=function(e){return b(e)===y}});f(l);l.typeOf,l.AsyncMode,l.ConcurrentMode,l.ContextConsumer,l.ContextProvider,l.Element,l.ForwardRef,l.Fragment,l.Lazy,l.Memo,l.Portal,l.Profiler,l.StrictMode,l.Suspense,l.isValidElementType,l.isAsyncMode,l.isConcurrentMode,l.isContextConsumer,l.isContextProvider,l.isElement,l.isForwardRef,l.isFragment,l.isLazy,l.isMemo,l.isPortal,l.isProfiler,l.isStrictMode,l.isSuspense;var y=u(function(e,t){});f(y);y.typeOf,y.AsyncMode,y.ConcurrentMode,y.ContextConsumer,y.ContextProvider,y.Element,y.ForwardRef,y.Fragment,y.Lazy,y.Memo,y.Portal,y.Profiler,y.StrictMode,y.Suspense,y.isValidElementType,y.isAsyncMode,y.isConcurrentMode,y.isContextConsumer,y.isContextProvider,y.isElement,y.isForwardRef,y.isFragment,y.isLazy,y.isMemo,y.isPortal,y.isProfiler,y.isStrictMode,y.isSuspense;var m=u(function(e){e.exports=l}),d={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},b={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},P={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},v={};function O(e){return m.isMemo(e)?P:v[e.$$typeof]||d}v[m.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0};var C=Object.defineProperty,x=Object.getOwnPropertyNames,h=Object.getOwnPropertySymbols,S=Object.getOwnPropertyDescriptor,g=Object.getPrototypeOf,M=Object.prototype;var w=function e(t,r,o){if("string"!=typeof r){if(M){var n=g(r);n&&n!==M&&e(t,n,o)}var i=x(r);h&&(i=i.concat(h(r)));for(var c=O(t),s=O(r),a=0;a<i.length;++a){var f=i[a];if(!(b[f]||o&&o[f]||s&&s[f]||c&&c[f])){var u=S(r,f);try{C(t,f,u)}catch(e){}}}return t}return t};e.ThemeProvider=function(e){var o=t.useContext(r.ThemeContext);return e.theme!==o&&(o=a(o)(e.theme)),t.createElement(r.ThemeContext.Provider,{value:o},e.children)},e.useTheme=function(){return o.useContext(r.ThemeContext)},e.withTheme=function(e){var o=e.displayName||e.name||"Component",n=t.forwardRef(function(o,n){var i=t.useContext(r.ThemeContext);return t.createElement(e,p({theme:i,ref:n},o))});return n.displayName="WithTheme("+o+")",w(n,e)},Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=emotion-theming.umd.min.js.map

package.json

 {
   "name": "emotion-theming",
-  "version": "11.0.0-next.1",
+  "version": "11.0.0-next.2",
   "description": "A CSS-in-JS theming solution, inspired by styled-components",
@@ -35,7 +35,7 @@ "main": "dist/emotion-theming.cjs.js",
   "devDependencies": {
-    "@emotion/core": "^11.0.0-next.1",
-    "@emotion/styled": "^11.0.0-next.1",
-    "@types/react": "^16.8.20",
+    "@emotion/core": "^11.0.0-next.2",
+    "@emotion/styled": "^11.0.0-next.2",
+    "@types/react": "^16.9.11",
     "dtslint": "^0.3.0",
-    "react": "^16.5.2"
+    "react": "^16.11.0"
   },
@@ -48,4 +48,4 @@ "dependencies": {
   "peerDependencies": {
-    "@emotion/core": "^11.0.0-next.1",
-    "react": ">=16.3.0"
+    "@emotion/core": "^11.0.0-next.2",
+    "react": ">=16.8.0"
   },
@@ -52,0 +52,0 @@ "umd:main": "dist/emotion-theming.umd.min.js",

README.md

@@ -170,10 +170,5 @@ # emotion-theming
 
-function SomeText (props) {
+function SomeText(props) {
   const theme = useTheme()
-  return (
-    <div
-      css={{ color: theme.colors.primary }}
-      {...props}
-    />
-  )
+  return <div css={{ color: theme.colors.primary }} {...props} />
 }
@@ -180,0 +175,0 @@

src/theme-provider.js

@@ -45,15 +45,11 @@ // @flow
 let ThemeProvider = (props: Props) => {
+  let theme = React.useContext(ThemeContext)
+
+  if (props.theme !== theme) {
+    theme = createCacheWithTheme(theme)(props.theme)
+  }
   return (
-    <ThemeContext.Consumer>
-      {theme => {
-        if (props.theme !== theme) {
-          theme = createCacheWithTheme(theme)(props.theme)
-        }
-        return (
-          <ThemeContext.Provider value={theme}>
-            {props.children}
-          </ThemeContext.Provider>
-        )
-      }}
-    </ThemeContext.Consumer>
+    <ThemeContext.Provider value={theme}>
+      {props.children}
+    </ThemeContext.Provider>
   )
@@ -60,0 +56,0 @@ }

src/with-theme.js

@@ -9,2 +9,3 @@ // @flow
 // should we change this to be forwardRef/withCSSContext style so it doesn't merge with props?
+// should we remove this altogether and tell people to useContext
 
@@ -16,9 +17,5 @@ export default function withTheme<Config: {}>(
   let render = (props, ref) => {
-    return (
-      <ThemeContext.Consumer>
-        {theme => {
-          return <Component theme={theme} ref={ref} {...props} />
-        }}
-      </ThemeContext.Consumer>
-    )
+    let theme = React.useContext(ThemeContext)
+
+    return <Component theme={theme} ref={ref} {...props} />
   }
@@ -25,0 +22,0 @@ // $FlowFixMe

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

56781

increased by0.25%

Worsened metrics

Lines of code

597

decreased by-2.45%

Number of lines in readme file

189

decreased by-2.58%

No dependency changes