aesthetic - npm Package Compare versions

Comparing version 3.2.0 to 3.3.0

CHANGELOG.md

@@ -0,1 +1,11 @@
+# 3.3.0 - 2019-02-15
+
+#### 🚀 New
+
+- Added `Aesthetic#extendStyles` to support hook style extending.
+
+#### 🛠 Internal
+
+- TS: More access modifier work.
+
 # 3.2.0 - 2019-02-14
@@ -2,0 +12,0 @@

esm/Aesthetic.js

@@ -88,2 +88,25 @@ import _extends from "@babel/runtime/helpers/esm/extends";
   _createClass(Aesthetic, [{
+    key: "applyGlobalStyles",
+    value: function applyGlobalStyles() {
+      if (this.appliedGlobals) {
+        return this;
+      }
+
+      var globalDef = this.globals[this.options.theme];
+      var globalSheet = globalDef ? globalDef(this.getTheme()) : null;
+
+      if (globalSheet) {
+        var sheet = this.processStyleSheet(this.syntax.convertGlobalSheet(globalSheet).toObject(), ':root');
+        var _styles = [];
+        Object.keys(sheet).forEach(function (key) {
+          _styles.push(sheet[key]);
+        });
+        this.transformToClassName(_styles);
+      }
+
+      this.appliedGlobals = true;
+      this.flushStyles(':root');
+      return this;
+    }
+  }, {
     key: "createStyleSheet",
@@ -101,2 +124,16 @@ value: function createStyleSheet(styleName) {
   }, {
+    key: "extendStyles",
+    value: function extendStyles() {
+      for (var _len2 = arguments.length, styleSheets = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+        styleSheets[_key2] = arguments[_key2];
+      }
+
+      return function (theme) {
+        var sheets = styleSheets.map(function (sheet) {
+          return sheet(theme);
+        });
+        return deepMerge.apply(void 0, [true, {}].concat(_toConsumableArray(sheets)));
+      };
+    }
+  }, {
     key: "extendTheme",
@@ -191,4 +228,4 @@ value: function extendTheme(themeName, parentThemeName, theme) {
 
-            for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-              args[_key2] = arguments[_key2];
+            for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+              args[_key3] = arguments[_key3];
             }
@@ -305,25 +342,2 @@
   }, {
-    key: "applyGlobalStyles",
-    value: function applyGlobalStyles() {
-      if (this.appliedGlobals) {
-        return this;
-      }
-
-      var globalDef = this.globals[this.options.theme];
-      var globalSheet = globalDef ? globalDef(this.getTheme()) : null;
-
-      if (globalSheet) {
-        var sheet = this.processStyleSheet(this.syntax.convertGlobalSheet(globalSheet).toObject(), ':root');
-        var _styles = [];
-        Object.keys(sheet).forEach(function (key) {
-          _styles.push(sheet[key]);
-        });
-        this.transformToClassName(_styles);
-      }
-
-      this.appliedGlobals = true;
-      this.flushStyles(':root');
-      return this;
-    }
-  }, {
     key: "getStyleSheet",
@@ -330,0 +344,0 @@ value: function getStyleSheet(styleName) {

lib/Aesthetic.d.ts

@@ -33,2 +33,7 @@ import React from 'react';
     /**
+     * Apply and inject global styles for the current theme.
+     * This should only happen once!
+     */
+    applyGlobalStyles(): this;
+    /**
      * Create and return a style sheet unique to an adapter.
@@ -38,2 +43,6 @@ */
     /**
+     * Compose and extend multiple stylesheets to create 1 stylesheet.
+     */
+    extendStyles(...styleSheets: StyleSheetDefinition<Theme, any>[]): StyleSheetDefinition<Theme, any>;
+    /**
      * Register a theme by extending and merging with a previously defined theme.
@@ -71,7 +80,2 @@ */
     /**
-     * Apply and inject global styles for the current theme.
-     * This should only happen once!
-     */
-    protected applyGlobalStyles(): this;
-    /**
      * Retrieve the defined component styles. If the definition is a function,
@@ -78,0 +82,0 @@ * execute it while passing the current theme and React props.

lib/Aesthetic.js

@@ -106,2 +106,25 @@ "use strict";
   (0, _createClass2.default)(Aesthetic, [{
+    key: "applyGlobalStyles",
+    value: function applyGlobalStyles() {
+      if (this.appliedGlobals) {
+        return this;
+      }
+
+      var globalDef = this.globals[this.options.theme];
+      var globalSheet = globalDef ? globalDef(this.getTheme()) : null;
+
+      if (globalSheet) {
+        var sheet = this.processStyleSheet(this.syntax.convertGlobalSheet(globalSheet).toObject(), ':root');
+        var _styles = [];
+        Object.keys(sheet).forEach(function (key) {
+          _styles.push(sheet[key]);
+        });
+        this.transformToClassName(_styles);
+      }
+
+      this.appliedGlobals = true;
+      this.flushStyles(':root');
+      return this;
+    }
+  }, {
     key: "createStyleSheet",
@@ -119,2 +142,16 @@ value: function createStyleSheet(styleName) {
   }, {
+    key: "extendStyles",
+    value: function extendStyles() {
+      for (var _len2 = arguments.length, styleSheets = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+        styleSheets[_key2] = arguments[_key2];
+      }
+
+      return function (theme) {
+        var sheets = styleSheets.map(function (sheet) {
+          return sheet(theme);
+        });
+        return _extend.default.apply(void 0, [true, {}].concat((0, _toConsumableArray2.default)(sheets)));
+      };
+    }
+  }, {
     key: "extendTheme",
@@ -209,4 +246,4 @@ value: function extendTheme(themeName, parentThemeName, theme) {
 
-            for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-              args[_key2] = arguments[_key2];
+            for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+              args[_key3] = arguments[_key3];
             }
@@ -311,25 +348,2 @@
   }, {
-    key: "applyGlobalStyles",
-    value: function applyGlobalStyles() {
-      if (this.appliedGlobals) {
-        return this;
-      }
-
-      var globalDef = this.globals[this.options.theme];
-      var globalSheet = globalDef ? globalDef(this.getTheme()) : null;
-
-      if (globalSheet) {
-        var sheet = this.processStyleSheet(this.syntax.convertGlobalSheet(globalSheet).toObject(), ':root');
-        var _styles = [];
-        Object.keys(sheet).forEach(function (key) {
-          _styles.push(sheet[key]);
-        });
-        this.transformToClassName(_styles);
-      }
-
-      this.appliedGlobals = true;
-      this.flushStyles(':root');
-      return this;
-    }
-  }, {
     key: "getStyleSheet",
@@ -336,0 +350,0 @@ value: function getStyleSheet(styleName) {

package.json

 {
   "name": "aesthetic",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Aesthetic is a powerful type-safe React library for styling components through the use of adapters.",
@@ -49,3 +49,3 @@ "keywords": [
   },
-  "gitHead": "d731bb32c08bfa48851390838caef57b3ebaedbb"
+  "gitHead": "dac52ca81819af254c9f4e3734813914fb29432b"
 }

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

112109

increased by1.17%

Lines of code

2316

increased by1.31%

No dependency changes