@xstyled/core - npm Package Compare versions

Comparing version 1.12.0 to 1.12.1

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+## [1.12.1](https://github.com/smooth-code/xstyled/compare/v1.12.0...v1.12.1) (2019-09-22)
+
+
+### Bug Fixes
+
+* **color-mode:** fix camelCase properties ([05ea6e7](https://github.com/smooth-code/xstyled/commit/05ea6e7))
+
+
+
+
+
 # [1.12.0](https://github.com/smooth-code/xstyled/compare/v1.11.0...v1.12.0) (2019-09-22)
@@ -8,0 +19,0 @@

dist/xstyled-core.cjs.js

@@ -232,3 +232,5 @@ 'use strict';
   if (state === void 0) {
-    state = {};
+    state = {
+      value: ''
+    };
   }
@@ -246,3 +248,3 @@
     if (util.string(value)) {
-      state[toVarName(name)] = value;
+      state.value += toVarName(name) + ": " + value + ";";
       continue;
@@ -252,5 +254,5 @@ }
     if (util.func(value)) {
-      state[toVarName(name)] = value({
+      state.value += toVarName(name) + ": " + value({
         theme: theme
-      });
+      }) + ";";
       continue;
@@ -260,3 +262,3 @@ }
 
-  return state;
+  return state.value;
 }
@@ -311,4 +313,2 @@
 function createColorStyles(theme, _temp) {
-  var _ref2;
-
   var _ref = _temp === void 0 ? {} : _temp,
@@ -340,3 +340,3 @@ _ref$targetSelector = _ref.targetSelector,
         var mediaQuery = getMediaQuery(getColorModeQuery(mode));
-        styles[mediaQuery] = getModePropertiesDeclarations(mode);
+        styles += mediaQuery + "{" + getModePropertiesDeclarations(mode) + "}";
       }
@@ -348,5 +348,5 @@ });
     var key = "&." + getColorModeClassName(mode);
-    styles[key] = getModePropertiesDeclarations(mode);
+    styles += key + "{" + getModePropertiesDeclarations(mode) + "}";
   });
-  return _ref2 = {}, _ref2[targetSelector] = styles, _ref2;
+  return targetSelector + "{" + styles + "}";
 }
@@ -389,5 +389,5 @@
 function useColorModeState(theme, _temp2) {
-  var _ref3 = _temp2 === void 0 ? {} : _temp2,
-      _ref3$target = _ref3.target,
-      target = _ref3$target === void 0 ? document.body : _ref3$target;
+  var _ref2 = _temp2 === void 0 ? {} : _temp2,
+      _ref2$target = _ref2.target,
+      target = _ref2$target === void 0 ? document.body : _ref2$target;
 
@@ -467,11 +467,11 @@ var _React$useState = React.useState(function () {
 }
-function createColorModeProvider(_ref4) {
-  var ThemeContext = _ref4.ThemeContext,
-      ThemeProvider = _ref4.ThemeProvider,
-      ColorModeStyle = _ref4.ColorModeStyle;
+function createColorModeProvider(_ref3) {
+  var ThemeContext = _ref3.ThemeContext,
+      ThemeProvider = _ref3.ThemeProvider,
+      ColorModeStyle = _ref3.ColorModeStyle;
 
-  function ColorModeProvider(_ref5) {
-    var children = _ref5.children,
-        target = _ref5.target,
-        targetSelector = _ref5.targetSelector;
+  function ColorModeProvider(_ref4) {
+    var children = _ref4.children,
+        target = _ref4.target,
+        targetSelector = _ref4.targetSelector;
     var theme = React.useContext(ThemeContext);
@@ -495,5 +495,5 @@ var colorState = useColorModeState(theme, {
 function getInitScript(_temp3) {
-  var _ref6 = _temp3 === void 0 ? {} : _temp3,
-      _ref6$target = _ref6.target,
-      target = _ref6$target === void 0 ? 'document.body' : _ref6$target;
+  var _ref5 = _temp3 === void 0 ? {} : _temp3,
+      _ref5$target = _ref5.target,
+      target = _ref5$target === void 0 ? 'document.body' : _ref5$target;
 
@@ -500,0 +500,0 @@ return "(function() { try {\n    var mode = localStorage.getItem('" + STORAGE_KEY + "');\n    if (mode) " + target + ".classList.add('" + COLOR_MODE_CLASS_PREFIX + "' + mode);\n  } catch (e) {} })();";

dist/xstyled-core.es.js

@@ -226,3 +226,5 @@ import { system, getColor, getBorderStyle, getShadow, getFont, getFontSize, getLineHeight, getFontWeight, getLetterSpacing, getTransition, getSpace, getBorder, getBorderWidth, getSize, getRadius, getZIndex } from '@xstyled/system';
   if (state === void 0) {
-    state = {};
+    state = {
+      value: ''
+    };
   }
@@ -240,3 +242,3 @@
     if (string(value)) {
-      state[toVarName(name)] = value;
+      state.value += toVarName(name) + ": " + value + ";";
       continue;
@@ -246,5 +248,5 @@ }
     if (func(value)) {
-      state[toVarName(name)] = value({
+      state.value += toVarName(name) + ": " + value({
         theme: theme
-      });
+      }) + ";";
       continue;
@@ -254,3 +256,3 @@ }
 
-  return state;
+  return state.value;
 }
@@ -305,4 +307,2 @@
 function createColorStyles(theme, _temp) {
-  var _ref2;
-
   var _ref = _temp === void 0 ? {} : _temp,
@@ -334,3 +334,3 @@ _ref$targetSelector = _ref.targetSelector,
         var mediaQuery = getMediaQuery(getColorModeQuery(mode));
-        styles[mediaQuery] = getModePropertiesDeclarations(mode);
+        styles += mediaQuery + "{" + getModePropertiesDeclarations(mode) + "}";
       }
@@ -342,5 +342,5 @@ });
     var key = "&." + getColorModeClassName(mode);
-    styles[key] = getModePropertiesDeclarations(mode);
+    styles += key + "{" + getModePropertiesDeclarations(mode) + "}";
   });
-  return _ref2 = {}, _ref2[targetSelector] = styles, _ref2;
+  return targetSelector + "{" + styles + "}";
 }
@@ -383,5 +383,5 @@
 function useColorModeState(theme, _temp2) {
-  var _ref3 = _temp2 === void 0 ? {} : _temp2,
-      _ref3$target = _ref3.target,
-      target = _ref3$target === void 0 ? document.body : _ref3$target;
+  var _ref2 = _temp2 === void 0 ? {} : _temp2,
+      _ref2$target = _ref2.target,
+      target = _ref2$target === void 0 ? document.body : _ref2$target;
 
@@ -461,11 +461,11 @@ var _React$useState = React.useState(function () {
 }
-function createColorModeProvider(_ref4) {
-  var ThemeContext = _ref4.ThemeContext,
-      ThemeProvider = _ref4.ThemeProvider,
-      ColorModeStyle = _ref4.ColorModeStyle;
+function createColorModeProvider(_ref3) {
+  var ThemeContext = _ref3.ThemeContext,
+      ThemeProvider = _ref3.ThemeProvider,
+      ColorModeStyle = _ref3.ColorModeStyle;
 
-  function ColorModeProvider(_ref5) {
-    var children = _ref5.children,
-        target = _ref5.target,
-        targetSelector = _ref5.targetSelector;
+  function ColorModeProvider(_ref4) {
+    var children = _ref4.children,
+        target = _ref4.target,
+        targetSelector = _ref4.targetSelector;
     var theme = React.useContext(ThemeContext);
@@ -489,5 +489,5 @@ var colorState = useColorModeState(theme, {
 function getInitScript(_temp3) {
-  var _ref6 = _temp3 === void 0 ? {} : _temp3,
-      _ref6$target = _ref6.target,
-      target = _ref6$target === void 0 ? 'document.body' : _ref6$target;
+  var _ref5 = _temp3 === void 0 ? {} : _temp3,
+      _ref5$target = _ref5.target,
+      target = _ref5$target === void 0 ? 'document.body' : _ref5$target;
 
@@ -494,0 +494,0 @@ return "(function() { try {\n    var mode = localStorage.getItem('" + STORAGE_KEY + "');\n    if (mode) " + target + ".classList.add('" + COLOR_MODE_CLASS_PREFIX + "' + mode);\n  } catch (e) {} })();";

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

34827

increased by1.05%

Lines of code

869

increased by0.23%

No dependency changes