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

Comparing version 0.6.0-alpha.6 to 0.6.0-alpha.7

dist/index.esm.js

@@ -1,2 +0,2 @@
-import { useThemeUI, jsx, ThemeProvider as ThemeProvider$1 } from '@theme-ui/core';
+import { useThemeUI, jsx, ThemeProvider as ThemeProvider$1, __internalGetUseRootStyles } from '@theme-ui/core';
 import { css } from '@theme-ui/css';
@@ -7,8 +7,12 @@ import { ColorModeProvider } from '@theme-ui/color-modes';
 
-var BodyStyles = function BodyStyles() {
+var RootStyles = function RootStyles() {
   return jsx(Global, {
     styles: function styles(emotionTheme) {
+      var _css;
+
       var theme = emotionTheme;
 
-      if (theme.useBodyStyles === false || theme.styles && !theme.styles.root) {
+      var use = __internalGetUseRootStyles(theme);
+
+      if (use.rootStyles === false || theme.styles && !theme.styles.root) {
         return false;
@@ -18,11 +22,10 @@ }
       var boxSizing = theme.useBorderBox === false ? undefined : 'border-box';
-      return css({
+      return css((_css = {
         '*': {
           boxSizing: boxSizing
-        },
-        body: {
-          margin: 0,
-          variant: 'styles.root'
         }
-      })(theme);
+      }, _css[use.scope] = {
+        margin: 0,
+        variant: 'styles.root'
+      }, _css))(theme);
     }
@@ -49,3 +52,3 @@ });
     theme: theme
-  }, jsx(ColorModeProvider, null, jsx(BodyStyles), jsx(MDXProvider, {
+  }, jsx(ColorModeProvider, null, jsx(RootStyles), jsx(MDXProvider, {
     components: components,
@@ -52,0 +55,0 @@ children: children

dist/index.js

@@ -7,8 +7,12 @@ var core = require('@theme-ui/core');
 
-var BodyStyles = function BodyStyles() {
+var RootStyles = function RootStyles() {
   return core.jsx(react.Global, {
     styles: function styles(emotionTheme) {
+      var _css;
+
       var theme = emotionTheme;
 
-      if (theme.useBodyStyles === false || theme.styles && !theme.styles.root) {
+      var use = core.__internalGetUseRootStyles(theme);
+
+      if (use.rootStyles === false || theme.styles && !theme.styles.root) {
         return false;
@@ -18,11 +22,10 @@ }
       var boxSizing = theme.useBorderBox === false ? undefined : 'border-box';
-      return css.css({
+      return css.css((_css = {
         '*': {
           boxSizing: boxSizing
-        },
-        body: {
-          margin: 0,
-          variant: 'styles.root'
         }
-      })(theme);
+      }, _css[use.scope] = {
+        margin: 0,
+        variant: 'styles.root'
+      }, _css))(theme);
     }
@@ -49,3 +52,3 @@ });
     theme: theme
-  }, core.jsx(colorModes.ColorModeProvider, null, core.jsx(BodyStyles), core.jsx(mdx.MDXProvider, {
+  }, core.jsx(colorModes.ColorModeProvider, null, core.jsx(RootStyles), core.jsx(mdx.MDXProvider, {
     components: components,
@@ -52,0 +55,0 @@ children: children

dist/index.modern.js

@@ -1,2 +0,2 @@
-import { useThemeUI, jsx, ThemeProvider as ThemeProvider$1 } from '@theme-ui/core';
+import { useThemeUI, jsx, ThemeProvider as ThemeProvider$1, __internalGetUseRootStyles } from '@theme-ui/core';
 import { css } from '@theme-ui/css';
@@ -7,7 +7,9 @@ import { ColorModeProvider } from '@theme-ui/color-modes';
 
-const BodyStyles = () => jsx(Global, {
+const RootStyles = () => jsx(Global, {
   styles: emotionTheme => {
     const theme = emotionTheme;
 
-    if (theme.useBodyStyles === false || theme.styles && !theme.styles.root) {
+    const use = __internalGetUseRootStyles(theme);
+
+    if (use.rootStyles === false || theme.styles && !theme.styles.root) {
       return false;
@@ -21,3 +23,3 @@ }
       },
-      body: {
+      [use.scope]: {
         margin: 0,
@@ -48,3 +50,3 @@ variant: 'styles.root'
     theme
-  }, jsx(ColorModeProvider, null, jsx(BodyStyles), jsx(MDXProvider, {
+  }, jsx(ColorModeProvider, null, jsx(RootStyles), jsx(MDXProvider, {
     components,
@@ -51,0 +53,0 @@ children

dist/index.umd.js

@@ -6,8 +6,12 @@ (function (global, factory) {
 }(this, (function (exports, core, css, colorModes, mdx, react) {
-  var BodyStyles = function BodyStyles() {
+  var RootStyles = function RootStyles() {
     return core.jsx(react.Global, {
       styles: function styles(emotionTheme) {
+        var _css;
+
         var theme = emotionTheme;
 
-        if (theme.useBodyStyles === false || theme.styles && !theme.styles.root) {
+        var use = core.__internalGetUseRootStyles(theme);
+
+        if (use.rootStyles === false || theme.styles && !theme.styles.root) {
           return false;
@@ -17,11 +21,10 @@ }
         var boxSizing = theme.useBorderBox === false ? undefined : 'border-box';
-        return css.css({
+        return css.css((_css = {
           '*': {
             boxSizing: boxSizing
-          },
-          body: {
-            margin: 0,
-            variant: 'styles.root'
           }
-        })(theme);
+        }, _css[use.scope] = {
+          margin: 0,
+          variant: 'styles.root'
+        }, _css))(theme);
       }
@@ -48,3 +51,3 @@ });
       theme: theme
-    }, core.jsx(colorModes.ColorModeProvider, null, core.jsx(BodyStyles), core.jsx(mdx.MDXProvider, {
+    }, core.jsx(colorModes.ColorModeProvider, null, core.jsx(RootStyles), core.jsx(mdx.MDXProvider, {
       components: components,
@@ -51,0 +54,0 @@ children: children

package.json

 {
   "name": "@theme-ui/theme-provider",
-  "version": "0.6.0-alpha.6",
+  "version": "0.6.0-alpha.7",
   "main": "dist/index.js",
@@ -16,5 +16,5 @@ "module": "dist/index.esm.js",
     "@emotion/react": "^11.1.1",
-    "@theme-ui/color-modes": "0.6.0-alpha.6",
-    "@theme-ui/core": "0.6.0-alpha.6",
-    "@theme-ui/mdx": "0.6.0-alpha.6"
+    "@theme-ui/color-modes": "0.6.0-alpha.7",
+    "@theme-ui/core": "0.6.0-alpha.7",
+    "@theme-ui/mdx": "0.6.0-alpha.7"
   },
@@ -31,3 +31,3 @@ "peerDependencies": {
   },
-  "gitHead": "6d4b231dc59d56409804ad7f1b883239ad1e746b"
+  "gitHead": "3f031141f8509487fe77542e32a3240f277ce3b4"
 }

src/index.ts

@@ -7,2 +7,3 @@ import {
   IntrinsicSxElements,
+  __internalGetUseRootStyles,
 } from '@theme-ui/core'
@@ -14,10 +15,9 @@ import { css, Theme } from '@theme-ui/css'
 
-const BodyStyles = () =>
+const RootStyles = () =>
   jsx(Global, {
-    styles: emotionTheme => {
+    styles: (emotionTheme) => {
       const theme = emotionTheme as Theme
-      if (
-        theme.useBodyStyles === false ||
-        (theme.styles && !theme.styles.root)
-      ) {
+      const use = __internalGetUseRootStyles(theme)
+
+      if (use.rootStyles === false || (theme.styles && !theme.styles.root)) {
         return false
@@ -31,3 +31,3 @@ }
         },
-        body: {
+        [use.scope]: {
           margin: 0,
@@ -40,4 +40,2 @@ variant: 'styles.root',
 
-
-
 interface ThemeProviderProps extends Pick<CoreThemeProviderProps, 'theme'> {
@@ -72,3 +70,3 @@ children?: React.ReactNode
       null,
-      jsx(BodyStyles),
+      jsx(RootStyles),
       jsx(MDXProvider, {
@@ -75,0 +73,0 @@ components,

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

28457

increased by3.4%

Lines of code

469

increased by0.43%

Dependency changes

• + Added@theme-ui/color-modes@0.6.0-alpha.7(transitive)

• + Added@theme-ui/core@0.6.0-alpha.7(transitive)

• + Added@theme-ui/css@0.6.0-alpha.7(transitive)

• + Added@theme-ui/mdx@0.6.0-alpha.7(transitive)

• + Added@theme-ui/parse-props@0.6.0-alpha.7(transitive)

• - Removed@theme-ui/color-modes@0.6.0-alpha.6(transitive)

• - Removed@theme-ui/core@0.6.0-alpha.6(transitive)

• - Removed@theme-ui/css@0.6.0-alpha.6(transitive)

• - Removed@theme-ui/mdx@0.6.0-alpha.6(transitive)

• - Removed@theme-ui/parse-props@0.6.0-alpha.6(transitive)

• Updated@theme-ui/color-modes@0.6.0-alpha.7

• Updated@theme-ui/core@0.6.0-alpha.7

• Updated@theme-ui/mdx@0.6.0-alpha.7