@xstyled/core - npm Package Compare versions

Comparing version 1.12.3 to 1.12.4

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+## [1.12.4](https://github.com/smooth-code/xstyled/compare/v1.12.3...v1.12.4) (2019-09-22)
+
+
+### Bug Fixes
+
+* **color-mode:** fix initial color mode from system ([c2ac051](https://github.com/smooth-code/xstyled/commit/c2ac051))
+
+
+
+
+
 ## [1.12.3](https://github.com/smooth-code/xstyled/compare/v1.12.2...v1.12.3) (2019-09-22)
@@ -8,0 +19,0 @@

dist/xstyled-core.cjs.js

@@ -364,16 +364,10 @@ 'use strict';
 
-function getInitialMode(theme) {
-  if (!hasColorModes(theme)) return null;
-  var stored = storage.get();
-  if (stored) return stored;
-
-  if (hasMediaQueryEnabled(theme) && theme.colors && theme.colors.modes) {
-    var systemMode = SYSTEM_MODES.find(function (mode) {
+function useSystemMode(theme) {
+  return React.useMemo(function () {
+    if (!hasColorModes(theme) || !hasMediaQueryEnabled(theme)) return null;
+    return SYSTEM_MODES.find(function (mode) {
       if (!theme.colors.modes[mode]) return null;
       return detectSystemMode(mode);
-    });
-    return systemMode || getDefaultColorModeName(theme);
-  }
-
-  return getDefaultColorModeName(theme);
+    }) || null;
+  }, [theme]);
 }
@@ -386,4 +380,8 @@
 
+  var systemMode = useSystemMode(theme);
+
   var _React$useState = React.useState(function () {
-    return getInitialMode(theme);
+    if (!hasColorModes(theme)) return null;
+    var storedMode = storage.get();
+    return storedMode || systemMode || getDefaultColorModeName(theme);
   }),
@@ -394,14 +392,3 @@ mode = _React$useState[0],
 
-  var customPropertiesEnabled = hasCustomPropertiesEnabled(theme);
-  var initialColorModeName = getInitialColorModeName(theme);
-  var pristine = mode === initialColorModeName && !storage.get();
-  React.useLayoutEffect(function () {
-    if (!customPropertiesEnabled) return undefined;
-    if (pristine) return undefined;
-    var className = getColorModeClassName(mode);
-    target.classList.add(className);
-    return function () {
-      target.classList.remove(className);
-    };
-  }, [customPropertiesEnabled, target, mode, pristine]); // Store mode preference
+  var customPropertiesEnabled = hasCustomPropertiesEnabled(theme); // Store mode preference
 
@@ -416,2 +403,15 @@ var changedRef = React.useRef(false);
   }, [mode]);
+  var initialMode = getInitialColorModeName(theme);
+  React.useEffect(function () {
+    if (!customPropertiesEnabled) return undefined;
+    var storedMode = storage.get();
+    var fromSystem = !storedMode && systemMode === mode;
+    var initial = !storedMode && initialMode === mode;
+    if (fromSystem || initial) return undefined;
+    var className = getColorModeClassName(mode);
+    target.classList.add(className);
+    return function () {
+      target.classList.remove(className);
+    };
+  }, [customPropertiesEnabled, target, mode, systemMode, initialMode]);
   return [mode, setMode];
@@ -418,0 +418,0 @@ }

dist/xstyled-core.es.js

@@ -358,16 +358,10 @@ import { system, getColor, getBorderStyle, getShadow, getFont, getFontSize, getLineHeight, getFontWeight, getLetterSpacing, getTransition, getSpace, getBorder, getBorderWidth, getSize, getRadius, getZIndex } from '@xstyled/system';
 
-function getInitialMode(theme) {
-  if (!hasColorModes(theme)) return null;
-  var stored = storage.get();
-  if (stored) return stored;
-
-  if (hasMediaQueryEnabled(theme) && theme.colors && theme.colors.modes) {
-    var systemMode = SYSTEM_MODES.find(function (mode) {
+function useSystemMode(theme) {
+  return React.useMemo(function () {
+    if (!hasColorModes(theme) || !hasMediaQueryEnabled(theme)) return null;
+    return SYSTEM_MODES.find(function (mode) {
       if (!theme.colors.modes[mode]) return null;
       return detectSystemMode(mode);
-    });
-    return systemMode || getDefaultColorModeName(theme);
-  }
-
-  return getDefaultColorModeName(theme);
+    }) || null;
+  }, [theme]);
 }
@@ -380,4 +374,8 @@
 
+  var systemMode = useSystemMode(theme);
+
   var _React$useState = React.useState(function () {
-    return getInitialMode(theme);
+    if (!hasColorModes(theme)) return null;
+    var storedMode = storage.get();
+    return storedMode || systemMode || getDefaultColorModeName(theme);
   }),
@@ -388,14 +386,3 @@ mode = _React$useState[0],
 
-  var customPropertiesEnabled = hasCustomPropertiesEnabled(theme);
-  var initialColorModeName = getInitialColorModeName(theme);
-  var pristine = mode === initialColorModeName && !storage.get();
-  React.useLayoutEffect(function () {
-    if (!customPropertiesEnabled) return undefined;
-    if (pristine) return undefined;
-    var className = getColorModeClassName(mode);
-    target.classList.add(className);
-    return function () {
-      target.classList.remove(className);
-    };
-  }, [customPropertiesEnabled, target, mode, pristine]); // Store mode preference
+  var customPropertiesEnabled = hasCustomPropertiesEnabled(theme); // Store mode preference
 
@@ -410,2 +397,15 @@ var changedRef = React.useRef(false);
   }, [mode]);
+  var initialMode = getInitialColorModeName(theme);
+  React.useEffect(function () {
+    if (!customPropertiesEnabled) return undefined;
+    var storedMode = storage.get();
+    var fromSystem = !storedMode && systemMode === mode;
+    var initial = !storedMode && initialMode === mode;
+    if (fromSystem || initial) return undefined;
+    var className = getColorModeClassName(mode);
+    target.classList.add(className);
+    return function () {
+      target.classList.remove(className);
+    };
+  }, [customPropertiesEnabled, target, mode, systemMode, initialMode]);
   return [mode, setMode];
@@ -412,0 +412,0 @@ }

package.json

 {
   "name": "@xstyled/core",
   "description": "xstyled core utilities",
-  "version": "1.12.3",
+  "version": "1.12.4",
   "sideEffects": false,
@@ -22,3 +22,3 @@ "main": "dist/xstyled-core.cjs.js",
   },
-  "gitHead": "486e7d284ef35acdd8bad417c8ce796430bed631"
+  "gitHead": "360135940fae15abbcb17556f11f4da5078caaf5"
 }

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

36177

increased by1.21%

Lines of code

879

increased by0.23%

No dependency changes