@theme-ui/theme-provider - npm Package Compare versions

Comparing version 0.15.7 to 0.16.0-develop.4

dist/declarations/src/index.d.ts

 import React from 'react';
 import { ThemeProviderProps as CoreThemeProviderProps } from '@theme-ui/core';
-interface ThemeProviderProps extends Pick<CoreThemeProviderProps, 'theme'> {
+export interface ThemeProviderProps extends Pick<CoreThemeProviderProps, 'theme'> {
     children?: React.ReactNode;
 }
+export declare const ThemeUIProvider: ({ theme, children }: ThemeProviderProps) => React.JSX.Element;
+/** @deprecated ThemeProvider is now called ThemeUIProvider to reduce confusion with Emotion */
 export declare const ThemeProvider: React.FC<ThemeProviderProps>;
-export {};

dist/theme-ui-theme-provider.cjs.d.ts

 export * from "./declarations/src/index";
+//# sourceMappingURL=theme-ui-theme-provider.cjs.d.ts.map

dist/theme-ui-theme-provider.cjs.dev.js

@@ -10,2 +10,3 @@ 'use strict';
 var react = require('@emotion/react');
+var jsxRuntime = require('@theme-ui/core/jsx-runtime');
 
@@ -16,42 +17,61 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
-var RootStyles = function RootStyles() {
-  return core.jsx(react.Global, {
-    styles: function styles(emotionTheme) {
-      var _theme$config;
-
-      var theme = emotionTheme;
-
-      var _ref = theme.config || theme,
-          useRootStyles = _ref.useRootStyles;
-
-      if (useRootStyles === false || theme.styles && !theme.styles.root) {
-        return null;
+const RootStyles = () => core.jsx(react.Global, {
+  styles: emotionTheme => {
+    var _theme$config;
+    const theme = emotionTheme;
+    const {
+      useRootStyles
+    } = theme.config || theme;
+    if (useRootStyles === false || theme.styles && !theme.styles.root) {
+      return null;
+    }
+    const boxSizing = ((_theme$config = theme.config) == null ? void 0 : _theme$config.useBorderBox) === false ? undefined : 'border-box';
+    return css.css({
+      '*': {
+        boxSizing
+      },
+      html: {
+        variant: 'styles.root'
+      },
+      body: {
+        margin: 0
       }
+    })(theme);
+  }
+});
+const ThemeUIProvider = ({
+  theme,
+  children
+}) => {
+  const outer = core.useThemeUI();
+  const isTopLevel = outer === core.__themeUiDefaultContextValue;
+  return jsxRuntime.jsx(core.ThemeProvider, {
+    theme: theme,
+    children: jsxRuntime.jsxs(colorModes.ColorModeProvider, {
+      children: [isTopLevel && jsxRuntime.jsx(RootStyles, {}), children]
+    })
+  });
+};
 
-      var boxSizing = ((_theme$config = theme.config) == null ? void 0 : _theme$config.useBorderBox) === false ? undefined : 'border-box';
-      return css.css({
-        '*': {
-          boxSizing: boxSizing
-        },
-        html: {
-          variant: 'styles.root'
-        },
-        body: {
-          margin: 0
-        }
-      })(theme);
+/** @deprecated ThemeProvider is now called ThemeUIProvider to reduce confusion with Emotion */
+const ThemeProvider = ({
+  theme,
+  children
+}) => {
+  React__default["default"].useEffect(() => {
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn('[theme-ui] The export ThemeUIProvider is deprecated and is now called ThemeProvider to reduce confusion with Emotion. Please update your import; ThemeUIProvider will be removed in a future version.');
     }
+  }, []);
+  const outer = core.useThemeUI();
+  const isTopLevel = outer === core.__themeUiDefaultContextValue;
+  return jsxRuntime.jsx(core.ThemeProvider, {
+    theme: theme,
+    children: jsxRuntime.jsxs(colorModes.ColorModeProvider, {
+      children: [isTopLevel && jsxRuntime.jsx(RootStyles, {}), children]
+    })
   });
 };
 
-var ThemeProvider = function ThemeProvider(_ref2) {
-  var theme = _ref2.theme,
-      children = _ref2.children;
-  var outer = core.useThemeUI();
-  var isTopLevel = outer === core.__themeUiDefaultContextValue;
-  return /*#__PURE__*/React__default["default"].createElement(core.ThemeProvider, {
-    theme: theme
-  }, /*#__PURE__*/React__default["default"].createElement(colorModes.ColorModeProvider, null, isTopLevel && /*#__PURE__*/React__default["default"].createElement(RootStyles, null), children));
-};
-
 exports.ThemeProvider = ThemeProvider;
+exports.ThemeUIProvider = ThemeUIProvider;

dist/theme-ui-theme-provider.cjs.prod.js

@@ -10,2 +10,3 @@ 'use strict';
 var react = require('@emotion/react');
+var jsxRuntime = require('@theme-ui/core/jsx-runtime');
 
@@ -16,42 +17,58 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
-var RootStyles = function RootStyles() {
-  return core.jsx(react.Global, {
-    styles: function styles(emotionTheme) {
-      var _theme$config;
-
-      var theme = emotionTheme;
-
-      var _ref = theme.config || theme,
-          useRootStyles = _ref.useRootStyles;
-
-      if (useRootStyles === false || theme.styles && !theme.styles.root) {
-        return null;
+const RootStyles = () => core.jsx(react.Global, {
+  styles: emotionTheme => {
+    var _theme$config;
+    const theme = emotionTheme;
+    const {
+      useRootStyles
+    } = theme.config || theme;
+    if (useRootStyles === false || theme.styles && !theme.styles.root) {
+      return null;
+    }
+    const boxSizing = ((_theme$config = theme.config) == null ? void 0 : _theme$config.useBorderBox) === false ? undefined : 'border-box';
+    return css.css({
+      '*': {
+        boxSizing
+      },
+      html: {
+        variant: 'styles.root'
+      },
+      body: {
+        margin: 0
       }
-
-      var boxSizing = ((_theme$config = theme.config) == null ? void 0 : _theme$config.useBorderBox) === false ? undefined : 'border-box';
-      return css.css({
-        '*': {
-          boxSizing: boxSizing
-        },
-        html: {
-          variant: 'styles.root'
-        },
-        body: {
-          margin: 0
-        }
-      })(theme);
-    }
+    })(theme);
+  }
+});
+const ThemeUIProvider = ({
+  theme,
+  children
+}) => {
+  const outer = core.useThemeUI();
+  const isTopLevel = outer === core.__themeUiDefaultContextValue;
+  return jsxRuntime.jsx(core.ThemeProvider, {
+    theme: theme,
+    children: jsxRuntime.jsxs(colorModes.ColorModeProvider, {
+      children: [isTopLevel && jsxRuntime.jsx(RootStyles, {}), children]
+    })
   });
 };
 
-var ThemeProvider = function ThemeProvider(_ref2) {
-  var theme = _ref2.theme,
-      children = _ref2.children;
-  var outer = core.useThemeUI();
-  var isTopLevel = outer === core.__themeUiDefaultContextValue;
-  return /*#__PURE__*/React__default["default"].createElement(core.ThemeProvider, {
-    theme: theme
-  }, /*#__PURE__*/React__default["default"].createElement(colorModes.ColorModeProvider, null, isTopLevel && /*#__PURE__*/React__default["default"].createElement(RootStyles, null), children));
+/** @deprecated ThemeProvider is now called ThemeUIProvider to reduce confusion with Emotion */
+const ThemeProvider = ({
+  theme,
+  children
+}) => {
+  React__default["default"].useEffect(() => {
+  }, []);
+  const outer = core.useThemeUI();
+  const isTopLevel = outer === core.__themeUiDefaultContextValue;
+  return jsxRuntime.jsx(core.ThemeProvider, {
+    theme: theme,
+    children: jsxRuntime.jsxs(colorModes.ColorModeProvider, {
+      children: [isTopLevel && jsxRuntime.jsx(RootStyles, {}), children]
+    })
+  });
 };
 
 exports.ThemeProvider = ThemeProvider;
+exports.ThemeUIProvider = ThemeUIProvider;

dist/theme-ui-theme-provider.esm.js

 import React from 'react';
-import { useThemeUI, ThemeProvider as ThemeProvider$1, jsx, __themeUiDefaultContextValue } from '@theme-ui/core';
+import { useThemeUI, ThemeProvider as ThemeProvider$1, jsx as jsx$1, __themeUiDefaultContextValue } from '@theme-ui/core';
 import { css } from '@theme-ui/css';
 import { ColorModeProvider } from '@theme-ui/color-modes';
 import { Global } from '@emotion/react';
+import { jsx, jsxs } from '@theme-ui/core/jsx-runtime';
 
-var RootStyles = function RootStyles() {
-  return jsx(Global, {
-    styles: function styles(emotionTheme) {
-      var _theme$config;
-
-      var theme = emotionTheme;
-
-      var _ref = theme.config || theme,
-          useRootStyles = _ref.useRootStyles;
-
-      if (useRootStyles === false || theme.styles && !theme.styles.root) {
-        return null;
+const RootStyles = () => jsx$1(Global, {
+  styles: emotionTheme => {
+    var _theme$config;
+    const theme = emotionTheme;
+    const {
+      useRootStyles
+    } = theme.config || theme;
+    if (useRootStyles === false || theme.styles && !theme.styles.root) {
+      return null;
+    }
+    const boxSizing = ((_theme$config = theme.config) == null ? void 0 : _theme$config.useBorderBox) === false ? undefined : 'border-box';
+    return css({
+      '*': {
+        boxSizing
+      },
+      html: {
+        variant: 'styles.root'
+      },
+      body: {
+        margin: 0
       }
+    })(theme);
+  }
+});
+const ThemeUIProvider = ({
+  theme,
+  children
+}) => {
+  const outer = useThemeUI();
+  const isTopLevel = outer === __themeUiDefaultContextValue;
+  return jsx(ThemeProvider$1, {
+    theme: theme,
+    children: jsxs(ColorModeProvider, {
+      children: [isTopLevel && jsx(RootStyles, {}), children]
+    })
+  });
+};
 
-      var boxSizing = ((_theme$config = theme.config) == null ? void 0 : _theme$config.useBorderBox) === false ? undefined : 'border-box';
-      return css({
-        '*': {
-          boxSizing: boxSizing
-        },
-        html: {
-          variant: 'styles.root'
-        },
-        body: {
-          margin: 0
-        }
-      })(theme);
+/** @deprecated ThemeProvider is now called ThemeUIProvider to reduce confusion with Emotion */
+const ThemeProvider = ({
+  theme,
+  children
+}) => {
+  React.useEffect(() => {
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn('[theme-ui] The export ThemeUIProvider is deprecated and is now called ThemeProvider to reduce confusion with Emotion. Please update your import; ThemeUIProvider will be removed in a future version.');
     }
+  }, []);
+  const outer = useThemeUI();
+  const isTopLevel = outer === __themeUiDefaultContextValue;
+  return jsx(ThemeProvider$1, {
+    theme: theme,
+    children: jsxs(ColorModeProvider, {
+      children: [isTopLevel && jsx(RootStyles, {}), children]
+    })
   });
 };
 
-var ThemeProvider = function ThemeProvider(_ref2) {
-  var theme = _ref2.theme,
-      children = _ref2.children;
-  var outer = useThemeUI();
-  var isTopLevel = outer === __themeUiDefaultContextValue;
-  return /*#__PURE__*/React.createElement(ThemeProvider$1, {
-    theme: theme
-  }, /*#__PURE__*/React.createElement(ColorModeProvider, null, isTopLevel && /*#__PURE__*/React.createElement(RootStyles, null), children));
-};
-
-export { ThemeProvider };
+export { ThemeProvider, ThemeUIProvider };

package.json

 {
   "name": "@theme-ui/theme-provider",
-  "version": "0.15.7",
+  "version": "0.16.0-develop.4",
   "repository": "system-ui/theme-ui",
@@ -15,16 +15,17 @@ "main": "dist/theme-ui-theme-provider.cjs.js",
   "dependencies": {
-    "@theme-ui/color-modes": "^0.15.7",
-    "@theme-ui/core": "^0.15.7",
-    "@theme-ui/css": "^0.15.7"
+    "@theme-ui/color-modes": "^0.16.0-develop.4",
+    "@theme-ui/core": "^0.16.0-develop.4",
+    "@theme-ui/css": "^0.16.0-develop.4"
   },
   "peerDependencies": {
-    "@emotion/react": "^11",
+    "@emotion/react": "^11.11.1",
     "react": ">=18"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@types/react": "^18",
-    "@theme-ui/test-utils": "^0.15.7"
+    "@emotion/react": "^11.11.1",
+    "@types/react": "^18.2.12",
+    "react": "^18.1.0",
+    "@theme-ui/test-utils": "^0.16.0-develop.4"
   },
   "gitHead": "621199460fa3bdb0100748441e62517b7529b8c8"
 }

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

23114

increased by14.27%

Number of package files

14

increased by7.69%

Lines of code

463

increased by24.13%

Worsened metrics

Dev dependency count

4

increased by33.33%

Number of low supply chain risk alerts

4

increased by100%

Dependency changes

• + Added@theme-ui/color-modes@0.16.2(transitive)

• + Added@theme-ui/core@0.16.2(transitive)

• + Added@theme-ui/css@0.16.2(transitive)

• - Removed@theme-ui/color-modes@0.15.7(transitive)

• - Removed@theme-ui/core@0.15.7(transitive)

• - Removed@theme-ui/css@0.15.7(transitive)

• Updated@theme-ui/color-modes@^0.16.0-develop.4

• Updated@theme-ui/core@^0.16.0-develop.4

• Updated@theme-ui/css@^0.16.0-develop.4