theme-ui - npm Package Compare versions

Comparing version 0.2.0-alpha.0 to 0.2.0

dist/index.esm.js

 import { MDXProvider } from '@mdx-js/react';
 import deepmerge from 'deepmerge';
 import isPropValid from '@emotion/is-prop-valid';
-import React, { forwardRef, useContext, createContext, useState, useEffect, useLayoutEffect } from 'react';
+import React, { forwardRef, useContext, createContext, useState, useEffect } from 'react';
 import { jsx, ThemeContext, Global } from '@emotion/core';
@@ -288,12 +288,7 @@ import css, { css as css$1, get } from '@styled-system/css';
 
-  useLayoutEffect(function () {
+  useEffect(function () {
     // initialize
     var stored = storage.get();
     var dark = getMediaQuery();
-
-    if (dark) {
-      setMode('dark');
-      return;
-    }
-
+    if (dark) { setMode('dark'); }
     document.body.classList.remove('theme-ui-' + stored);
@@ -384,2 +379,3 @@ if (!stored || stored === mode) { return; }
   var context = {
+    __THEME_UI__: true,
     colorMode: colorMode,
@@ -415,3 +411,3 @@ setColorMode: setColorMode,
 
-  if (outer.colorMode) {
+  if (outer.__THEME_UI__) {
     return jsx$1(NestedProvider, props);
@@ -418,0 +414,0 @@ }

dist/index.js

@@ -291,12 +291,7 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-  React.useLayoutEffect(function () {
+  React.useEffect(function () {
     // initialize
     var stored = storage.get();
     var dark = getMediaQuery();
-
-    if (dark) {
-      setMode('dark');
-      return;
-    }
-
+    if (dark) { setMode('dark'); }
     document.body.classList.remove('theme-ui-' + stored);
@@ -387,2 +382,3 @@ if (!stored || stored === mode) { return; }
   var context = {
+    __THEME_UI__: true,
     colorMode: colorMode,
@@ -418,3 +414,3 @@ setColorMode: setColorMode,
 
-  if (outer.colorMode) {
+  if (outer.__THEME_UI__) {
     return jsx(NestedProvider, props);
@@ -421,0 +417,0 @@ }

dist/index.umd.js

@@ -290,12 +290,7 @@ (function (global, factory) {
 
-    React.useLayoutEffect(function () {
+    React.useEffect(function () {
       // initialize
       var stored = storage.get();
       var dark = getMediaQuery();
-
-      if (dark) {
-        setMode('dark');
-        return;
-      }
-
+      if (dark) { setMode('dark'); }
       document.body.classList.remove('theme-ui-' + stored);
@@ -386,2 +381,3 @@ if (!stored || stored === mode) { return; }
     var context = {
+      __THEME_UI__: true,
       colorMode: colorMode,
@@ -417,3 +413,3 @@ setColorMode: setColorMode,
 
-    if (outer.colorMode) {
+    if (outer.__THEME_UI__) {
       return jsx(NestedProvider, props);
@@ -420,0 +416,0 @@ }

package.json

 {
   "name": "theme-ui",
-  "version": "0.2.0-alpha.0",
+  "version": "0.2.0",
   "description": "Build consistent, themeable React UIs based on design system constraints and design tokens",
@@ -28,3 +28,3 @@ "main": "dist/index.js",
   },
-  "gitHead": "42a0f53e59d053daf2f897392d8f0019e2428712"
+  "gitHead": "5dcccad4eb873ea59691a23f6648755ae7c2bad9"
 }

src/color-modes.js

@@ -1,2 +0,2 @@
-import React, { useState, useEffect, useLayoutEffect } from 'react'
+import React, { useState, useEffect } from 'react'
 import { css } from '@styled-system/css'
@@ -23,10 +23,7 @@ import { Global } from '@emotion/core'
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     // initialize
     const stored = storage.get()
     const dark = getMediaQuery()
-    if (dark) {
-      setMode('dark')
-      return
-    }
+    if (dark) setMode('dark')
     document.body.classList.remove('theme-ui-' + stored)
@@ -33,0 +30,0 @@ if (!stored || stored === mode) return

src/provider.js

@@ -37,2 +37,3 @@ import { ThemeContext as EmotionContext } from '@emotion/core'
   const context = {
+    __THEME_UI__: true,
     colorMode,
@@ -64,3 +65,3 @@ setColorMode,
   const outer = useThemeUI()
-  if (outer.colorMode) {
+  if (outer.__THEME_UI__) {
     return jsx(NestedProvider, props)
@@ -67,0 +68,0 @@ }

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

Worsened metrics

Total package byte prevSize

112524

decreased by-0.11%

Lines of code

1595

decreased by-0.5%

No dependency changes