@xstyled/core - npm Package Compare versions

Comparing version 1.12.1 to 1.12.2

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+## [1.12.2](https://github.com/smooth-code/xstyled/compare/v1.12.1...v1.12.2) (2019-09-22)
+
+
+### Bug Fixes
+
+* **color-mode:** fix color mode issues ([237c888](https://github.com/smooth-code/xstyled/commit/237c888))
+
+
+
+
+
 ## [1.12.1](https://github.com/smooth-code/xstyled/compare/v1.12.0...v1.12.1) (2019-09-22)
@@ -8,0 +19,0 @@

dist/xstyled-core.cjs.js

@@ -308,2 +308,18 @@ 'use strict';
 
+function hasCustomPropertiesEnabled(theme) {
+  return theme && (theme.useCustomProperties === undefined || theme.useCustomProperties);
+}
+
+function hasMediaQueryEnabled(theme) {
+  return theme && (theme.useColorSchemeMediaQuery === undefined || theme.useColorSchemeMediaQuery);
+}
+
+function getInitialColorModeName(theme) {
+  return theme.initialColorModeName || 'default';
+}
+
+function getDefaultColorModeName(theme) {
+  return theme.defaultColorModeName || getInitialColorModeName(theme);
+}
+
 function createColorStyles(theme, _temp) {
@@ -341,3 +357,4 @@ var _ref = _temp === void 0 ? {} : _temp,
 
-  Object.keys(modes).forEach(function (mode) {
+  var initialModeName = getInitialColorModeName(theme);
+  [initialModeName].concat(Object.keys(modes)).forEach(function (mode) {
     var key = "&." + getColorModeClassName(mode);
@@ -349,25 +366,7 @@ styles += key + "{" + getModePropertiesDeclarations(mode) + "}";
 
-function hasCustomPropertiesEnabled(theme) {
-  return theme && (theme.useCustomProperties === undefined || theme.useCustomProperties);
-}
-
-function hasMediaQueryEnabled(theme) {
-  return theme && (theme.useColorSchemeMediaQuery === undefined || theme.useColorSchemeMediaQuery);
-}
-
-function getInitialColorModeName(theme) {
-  return theme.initialColorModeName || 'default';
-}
-
-function getDefaultColorModeName(theme) {
-  return theme.defaultColorModeName || getInitialColorModeName(theme);
-}
-
 function getInitialMode(theme) {
+  if (!hasColorModes(theme)) return null;
   var stored = storage.get();
+  if (stored) return stored;
 
-  if (stored) {
-    return stored;
-  }
-
   if (hasMediaQueryEnabled(theme) && theme.colors && theme.colors.modes) {
@@ -397,6 +396,4 @@ var systemMode = SYSTEM_MODES.find(function (mode) {
   var customPropertiesEnabled = hasCustomPropertiesEnabled(theme);
-  var initialColorMode = getInitialColorModeName(theme);
   React.useLayoutEffect(function () {
     if (!customPropertiesEnabled) return undefined;
-    if (mode === initialColorMode) return undefined;
     var className = getColorModeClassName(mode);
@@ -407,13 +404,12 @@ target.classList.add(className);
     };
-  }, [customPropertiesEnabled, target, mode, initialColorMode]); // Store mode preference
+  }, [customPropertiesEnabled, target, mode]); // Store mode preference
 
-  var defaultColorMode = getDefaultColorModeName(theme);
+  var changedRef = React.useRef(false);
   React.useEffect(function () {
-    if (mode === defaultColorMode) {
-      storage.clear();
-      return;
+    if (changedRef.current) {
+      storage.set(mode);
+    } else {
+      changedRef.current = true;
     }
-
-    storage.set(mode);
-  }, [defaultColorMode, mode]);
+  }, [mode]);
   return [mode, setMode];
@@ -474,2 +470,7 @@ }
     var theme = React.useContext(ThemeContext);
+
+    if (!theme) {
+      throw new Error('[ColorModeProvider] requires ThemeProvider upper in the tree');
+    }
+
     var colorState = useColorModeState(theme, {
@@ -476,0 +477,0 @@ target: target

dist/xstyled-core.es.js

@@ -302,2 +302,18 @@ import { system, getColor, getBorderStyle, getShadow, getFont, getFontSize, getLineHeight, getFontWeight, getLetterSpacing, getTransition, getSpace, getBorder, getBorderWidth, getSize, getRadius, getZIndex } from '@xstyled/system';
 
+function hasCustomPropertiesEnabled(theme) {
+  return theme && (theme.useCustomProperties === undefined || theme.useCustomProperties);
+}
+
+function hasMediaQueryEnabled(theme) {
+  return theme && (theme.useColorSchemeMediaQuery === undefined || theme.useColorSchemeMediaQuery);
+}
+
+function getInitialColorModeName(theme) {
+  return theme.initialColorModeName || 'default';
+}
+
+function getDefaultColorModeName(theme) {
+  return theme.defaultColorModeName || getInitialColorModeName(theme);
+}
+
 function createColorStyles(theme, _temp) {
@@ -335,3 +351,4 @@ var _ref = _temp === void 0 ? {} : _temp,
 
-  Object.keys(modes).forEach(function (mode) {
+  var initialModeName = getInitialColorModeName(theme);
+  [initialModeName].concat(Object.keys(modes)).forEach(function (mode) {
     var key = "&." + getColorModeClassName(mode);
@@ -343,25 +360,7 @@ styles += key + "{" + getModePropertiesDeclarations(mode) + "}";
 
-function hasCustomPropertiesEnabled(theme) {
-  return theme && (theme.useCustomProperties === undefined || theme.useCustomProperties);
-}
-
-function hasMediaQueryEnabled(theme) {
-  return theme && (theme.useColorSchemeMediaQuery === undefined || theme.useColorSchemeMediaQuery);
-}
-
-function getInitialColorModeName(theme) {
-  return theme.initialColorModeName || 'default';
-}
-
-function getDefaultColorModeName(theme) {
-  return theme.defaultColorModeName || getInitialColorModeName(theme);
-}
-
 function getInitialMode(theme) {
+  if (!hasColorModes(theme)) return null;
   var stored = storage.get();
+  if (stored) return stored;
 
-  if (stored) {
-    return stored;
-  }
-
   if (hasMediaQueryEnabled(theme) && theme.colors && theme.colors.modes) {
@@ -391,6 +390,4 @@ var systemMode = SYSTEM_MODES.find(function (mode) {
   var customPropertiesEnabled = hasCustomPropertiesEnabled(theme);
-  var initialColorMode = getInitialColorModeName(theme);
   React.useLayoutEffect(function () {
     if (!customPropertiesEnabled) return undefined;
-    if (mode === initialColorMode) return undefined;
     var className = getColorModeClassName(mode);
@@ -401,13 +398,12 @@ target.classList.add(className);
     };
-  }, [customPropertiesEnabled, target, mode, initialColorMode]); // Store mode preference
+  }, [customPropertiesEnabled, target, mode]); // Store mode preference
 
-  var defaultColorMode = getDefaultColorModeName(theme);
+  var changedRef = React.useRef(false);
   React.useEffect(function () {
-    if (mode === defaultColorMode) {
-      storage.clear();
-      return;
+    if (changedRef.current) {
+      storage.set(mode);
+    } else {
+      changedRef.current = true;
     }
-
-    storage.set(mode);
-  }, [defaultColorMode, mode]);
+  }, [mode]);
   return [mode, setMode];
@@ -468,2 +464,7 @@ }
     var theme = React.useContext(ThemeContext);
+
+    if (!theme) {
+      throw new Error('[ColorModeProvider] requires ThemeProvider upper in the tree');
+    }
+
     var colorState = useColorModeState(theme, {
@@ -470,0 +471,0 @@ target: target

package.json

 {
   "name": "@xstyled/core",
   "description": "xstyled core utilities",
-  "version": "1.12.1",
+  "version": "1.12.2",
   "sideEffects": false,
@@ -22,3 +22,3 @@ "main": "dist/xstyled-core.cjs.js",
   },
-  "gitHead": "662124aa798c61ac3c4fb8a2c8a0a233977cfe22"
+  "gitHead": "0760bbda5a0d831feb1cce5f0377a1d0b0916f8b"
 }

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

35179

increased by1.01%

Lines of code

871

increased by0.23%

No dependency changes