aesthetic - npm Package Compare versions

Comparing version 3.1.1 to 3.2.0

CHANGELOG.md

@@ -0,1 +1,19 @@
+# 3.2.0 - 2019-02-14
+
+#### 🎉 Release
+
+This release includes experimental support for the new hooks API. Peer dependency requirements will
+be updated once the Aesthetic API is finalized. Until then, the API may change without a breaking
+major version.
+
+#### 🚀 New
+
+- Added `Aesthetic#useStyles` hook.
+- Added `Aesthetic#useTheme` hook.
+
+#### 🛠 Internal
+
+- Renamed some `Aesthetic` class methods.
+- TS: Marked some `Aesthetic` class methods with access modifiers.
+
 # 3.1.1 - 2019-02-10
@@ -69,6 +87,6 @@
 - Dropped support for `@namespace` (was rarely supported by adapters).
-- Dropped support for global at-rules being defined within a component stylesheet (via
+- Dropped support for global at-rules being defined within a component style sheet (via
   `withStyles`). This includes `@charset`, `@import`, `@font-face`, `@global`, `@keyframes`,
   `@page`, and `@viewport`.
-  - They must only be defined within the global stylesheet when registering a theme.
+  - They must only be defined within the global style sheet when registering a theme.
   - Local `@keyframes` can be defined within a component by setting the keyframes object to
@@ -78,3 +96,3 @@ `animationName`.
     `fontFamily`.
-- Dropped support for local at-rules being defined within a global stylesheet (via theme global
+- Dropped support for local at-rules being defined within a global style sheet (via theme global
   styles). This includes `@fallbacks`, `@media`, `@supports`, and `@selectors`.
@@ -194,4 +212,4 @@ - Child combinators (`> li`), advanced pseudos (`:not(:nth-child(n))`), and advanced attributes
 
-- Style names (usually the component name) are now passed to adapters during the stylesheet creation
-  phase.
+- Style names (usually the component name) are now passed to adapters during the style sheet
+  creation phase.
 
@@ -201,5 +219,5 @@ # 2.0.0 - 2018-01-02
 Aesthetic has been rewritten to properly support specificity, new at-rules, and global styles.
-Styles are no longer transformed on mount and will now be transformed on render using a new
-stylesheet layer. Furthermore, unified syntax now supports most common at-rules, and a new
-`@font-face` structure.
+Styles are no longer transformed on mount and will now be transformed on render using a new style
+sheet layer. Furthermore, unified syntax now supports most common at-rules, and a new `@font-face`
+structure.
 
@@ -238,6 +256,6 @@ [View the migration guide!](https://github.com/milesj/aesthetic/blob/master/docs/migrate/2.0.md)
 - Added `Aesthetic#createStyleSheet` for converting a component's styles into an adapter specific
-  stylesheet.
+  style sheet.
   - The component's current props are passed as the 2nd argument to the HOC styler callback.
   - Inherited and parent styles are now automatically deep merged when extending.
-- Added `Adapter#create` for creating and adapting stylesheets.
+- Added `Adapter#create` for creating and adapting style sheets.
 - Updated `Aesthetic#registerTheme` to use the new global styles system.
@@ -244,0 +262,0 @@ - The current theme declarations will be passed to styled components under the `theme` prop.

esm/Aesthetic.js

@@ -7,8 +7,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import React from 'react';
+import React, { useState, useLayoutEffect } from 'react';
 import uuid from 'uuid/v4';
@@ -23,2 +24,4 @@ import hoistNonReactStatics from 'hoist-non-react-statics';
   function Aesthetic() {
+    var _this = this;
+
     var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -44,2 +47,33 @@
 
+    _defineProperty(this, "transformStyles", function () {
+      var classNames = [];
+      var toTransform = [];
+
+      for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
+        styles[_key] = arguments[_key];
+      }
+
+      styles.forEach(function (style) {
+        if (!style) {
+          return;
+        }
+
+        if (typeof style === 'string') {
+          classNames.push.apply(classNames, _toConsumableArray(String(style).split(' ').map(function (s) {
+            return stripClassPrefix(s).trim();
+          })));
+        } else if (isObject(style)) {
+          toTransform.push(style);
+        } else if ("production" !== process.env.NODE_ENV) {
+          throw new Error('Unsupported style type to transform.');
+        }
+      });
+
+      if (toTransform.length > 0) {
+        classNames.push(_this.transformToClassName(toTransform));
+      }
+
+      return classNames.join(' ').trim();
+    });
+
     this.options = _objectSpread({
@@ -57,25 +91,2 @@ extendable: false,
   _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",
@@ -88,3 +99,3 @@ value: function createStyleSheet(styleName) {
       this.applyGlobalStyles();
-      var styleSheet = this.processStyleSheet(this.syntax.convertStyleSheet(this.getStyles(styleName)).toObject(), styleName);
+      var styleSheet = this.processStyleSheet(this.syntax.convertStyleSheet(this.getStyleSheet(styleName)).toObject(), styleName);
       this.cache[styleName] = styleSheet;
@@ -103,35 +114,2 @@ return styleSheet;
   }, {
-    key: "getStyles",
-    value: function getStyles(styleName) {
-      var parentStyleName = this.parents[styleName];
-      var styleDef = this.styles[styleName];
-      var styleSheet = styleDef(this.getTheme());
-
-      if (parentStyleName) {
-        return deepMerge(true, {}, this.getStyles(parentStyleName), styleSheet);
-      }
-
-      return styleSheet;
-    }
-  }, {
-    key: "getTheme",
-    value: function getTheme() {
-      var customTheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-      var themeName = customTheme || this.options.theme;
-      var theme = this.themes[themeName];
-
-      if ("production" !== process.env.NODE_ENV) {
-        if (!theme || !isObject(theme)) {
-          throw new Error("Theme \"".concat(themeName, "\" does not exist."));
-        }
-      }
-
-      return theme;
-    }
-  }, {
-    key: "processStyleSheet",
-    value: function processStyleSheet(styleSheet, styleName) {
-      return _objectSpread({}, styleSheet);
-    }
-  }, {
     key: "registerTheme",
@@ -154,54 +132,33 @@ value: function registerTheme(themeName, theme) {
   }, {
-    key: "setStyles",
-    value: function setStyles(styleName, styleSheet) {
-      var extendFrom = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+    key: "useStyles",
+    value: function useStyles(styleSheet) {
+      var _this2 = this;
 
-      if (extendFrom) {
-        if ("production" !== process.env.NODE_ENV) {
-          if (!this.styles[extendFrom]) {
-            throw new Error("Cannot extend from \"".concat(extendFrom, "\" as those styles do not exist."));
-          } else if (extendFrom === styleName) {
-            throw new Error('Cannot extend styles from itself.');
-          }
-        }
+      var customName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'Component';
 
-        this.parents[styleName] = extendFrom;
-      }
+      var _useState = useState(function () {
+        var name = "".concat(customName, "-").concat(uuid());
 
-      this.styles[styleName] = this.validateDefinition(styleName, styleSheet, this.styles);
-      return this;
-    }
-  }, {
-    key: "transformStyles",
-    value: function transformStyles() {
-      var classNames = [];
-      var toTransform = [];
+        _this2.setStyleSheet(name, styleSheet);
 
-      for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
-        styles[_key] = arguments[_key];
-      }
+        return name;
+      }),
+          _useState2 = _slicedToArray(_useState, 1),
+          styleName = _useState2[0];
 
-      styles.forEach(function (style) {
-        if (!style) {
-          return;
-        }
+      var sheet = this.createStyleSheet(styleName);
+      var flushed = false;
+      useLayoutEffect(function () {
+        _this2.flushStyles(styleName);
 
-        if (typeof style === 'string') {
-          classNames.push.apply(classNames, _toConsumableArray(String(style).split(' ').map(function (s) {
-            return stripClassPrefix(s).trim();
-          })));
-        } else if (isObject(style)) {
-          toTransform.push(style);
-        } else if ("production" !== process.env.NODE_ENV) {
-          throw new Error('Unsupported style type to transform.');
-        }
-      });
-
-      if (toTransform.length > 0) {
-        classNames.push(this.transformToClassName(toTransform));
-      }
-
-      return classNames.join(' ').trim();
+        flushed = true;
+      }, [flushed]);
+      return [sheet, this.transformStyles, styleName];
     }
   }, {
+    key: "useTheme",
+    value: function useTheme() {
+      return this.getTheme();
+    }
+  }, {
     key: "withStyles",
@@ -227,3 +184,3 @@ value: function withStyles(styleSheet) {
         var Component = pure ? React.PureComponent : React.Component;
-        aesthetic.setStyles(styleName, styleSheet, extendFrom);
+        aesthetic.setStyleSheet(styleName, styleSheet, extendFrom);
 
@@ -236,3 +193,3 @@ var WithStyles = function (_Component) {
 
-            var _this;
+            var _this3;
 
@@ -245,9 +202,9 @@ _classCallCheck(this, WithStyles);
 
-            _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(WithStyles)).call.apply(_getPrototypeOf2, [this].concat(args)));
+            _this3 = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(WithStyles)).call.apply(_getPrototypeOf2, [this].concat(args)));
 
-            _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
+            _defineProperty(_assertThisInitialized(_assertThisInitialized(_this3)), "state", {
               styles: aesthetic.createStyleSheet(styleName)
             });
 
-            return _this;
+            return _this3;
           }
@@ -355,2 +312,78 @@
   }, {
+    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",
+    value: function getStyleSheet(styleName) {
+      var parentStyleName = this.parents[styleName];
+      var styleDef = this.styles[styleName];
+      var styleSheet = styleDef(this.getTheme());
+
+      if (parentStyleName) {
+        return deepMerge(true, {}, this.getStyleSheet(parentStyleName), styleSheet);
+      }
+
+      return styleSheet;
+    }
+  }, {
+    key: "getTheme",
+    value: function getTheme() {
+      var customTheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+      var themeName = customTheme || this.options.theme;
+      var theme = this.themes[themeName];
+
+      if ("production" !== process.env.NODE_ENV) {
+        if (!theme || !isObject(theme)) {
+          throw new Error("Theme \"".concat(themeName, "\" does not exist."));
+        }
+      }
+
+      return theme;
+    }
+  }, {
+    key: "processStyleSheet",
+    value: function processStyleSheet(styleSheet, styleName) {
+      return _objectSpread({}, styleSheet);
+    }
+  }, {
+    key: "setStyleSheet",
+    value: function setStyleSheet(styleName, styleSheet) {
+      var extendFrom = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+
+      if (extendFrom) {
+        if ("production" !== process.env.NODE_ENV) {
+          if (!this.styles[extendFrom]) {
+            throw new Error("Cannot extend from \"".concat(extendFrom, "\" as those styles do not exist."));
+          } else if (extendFrom === styleName) {
+            throw new Error('Cannot extend styles from itself.');
+          }
+        }
+
+        this.parents[styleName] = extendFrom;
+      }
+
+      this.styles[styleName] = this.validateDefinition(styleName, styleSheet, this.styles);
+      return this;
+    }
+  }, {
     key: "validateDefinition",
@@ -357,0 +390,0 @@ value: function validateDefinition(key, value, cache) {

esm/UnifiedSyntax.js

@@ -182,3 +182,3 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
               if ("production" !== process.env.NODE_ENV) {
-                throw new Error("Unknown property \"".concat(rule, "\". Only at-rules are allowed in the global stylesheet."));
+                throw new Error("Unknown property \"".concat(rule, "\". Only at-rules are allowed in the global style sheet."));
               }
@@ -185,0 +185,0 @@ }

lib/Aesthetic.d.ts

 import React from 'react';
 import UnifiedSyntax from './UnifiedSyntax';
-import { ClassName, GlobalSheetDefinition, SheetMap, StyledComponentClass, StyleName, StyleSheet, StyleSheetDefinition, ThemeName, WithStylesOptions, WithStylesProps, WithStylesWrapperProps, WithThemeOptions, WithThemeProps, WithThemeWrapperProps } from './types';
+import { ClassName, ClassNameGenerator, GlobalSheetDefinition, SheetMap, StyledComponentClass, StyleName, StyleSheet, StyleSheetDefinition, ThemeName, WithStylesOptions, WithStylesProps, WithStylesWrapperProps, WithThemeOptions, WithThemeProps, WithThemeWrapperProps } from './types';
 export interface AestheticOptions {
@@ -33,9 +33,4 @@ extendable: boolean;
     /**
-     * Apply and inject global styles for the current theme.
-     * This should only happen once!
+     * Create and return a style sheet unique to an adapter.
      */
-    applyGlobalStyles(): this;
-    /**
-     * Create and return a stylesheet unique to an adapter.
-     */
     createStyleSheet(styleName: StyleName): SheetMap<ParsedBlock>;
@@ -51,39 +46,55 @@ /**
     /**
-     * Retrieve the defined component styles. If the definition is a function,
-     * execute it while passing the current theme and React props.
+     * Register a theme with a pre-defined set of theme settings.
      */
-    getStyles(styleName: StyleName): StyleSheet;
+    registerTheme<T>(themeName: ThemeName, theme: Theme, globalSheet?: GlobalSheetDefinition<Theme, T>): this;
     /**
-     * Return a theme object or throw an error.
+     * Transform the list of style declarations to a list of class name.
      */
-    getTheme(customTheme?: ThemeName): Theme;
+    transformStyles: (...styles: (string | false | NativeBlock | ParsedBlock | undefined)[]) => string;
     /**
-     * Process from an Aesthetic style sheet to an adapter native style sheet.
+     * Hook within a component to provide a style sheet.
      */
-    processStyleSheet(styleSheet: SheetMap<NativeBlock>, styleName: StyleName): SheetMap<ParsedBlock>;
+    useStyles<T>(styleSheet: StyleSheetDefinition<Theme, T>, customName?: string): [SheetMap<ParsedBlock>, ClassNameGenerator<NativeBlock, ParsedBlock>, string];
     /**
-     * Register a theme with a pre-defined set of theme settings.
+     * Hook within a component to provide the current theme object.
      */
-    registerTheme<T>(themeName: ThemeName, theme: Theme, globalSheet?: GlobalSheetDefinition<Theme, T>): this;
+    useTheme(): Theme;
     /**
-     * Set multiple style declarations for a component.
+     * Wrap a React component with an HOC that injects the defined style sheet as a prop.
      */
-    setStyles(styleName: StyleName, styleSheet: StyleSheetDefinition<Theme, any>, extendFrom?: StyleName): this;
+    withStyles<T>(styleSheet: StyleSheetDefinition<Theme, T>, options?: WithStylesOptions): <Props extends object = {}>(WrappedComponent: React.ComponentType<Props & WithStylesProps<Theme, ParsedBlock>>) => StyledComponentClass<Theme, Props & WithStylesWrapperProps>;
     /**
-     * Transform the list of style declarations to a list of class name.
+     * Wrap a React component with an HOC that injects the current theme object as a prop.
      */
-    transformStyles(...styles: (undefined | false | ClassName | NativeBlock | ParsedBlock)[]): ClassName;
+    withTheme(options?: WithThemeOptions): <Props extends object = {}>(WrappedComponent: React.ComponentType<Props & WithThemeProps<Theme>>) => React.ComponentClass<Props & WithThemeWrapperProps, any>;
     /**
-     * Transform the styles into CSS class names.
+     * Apply and inject global styles for the current theme.
+     * This should only happen once!
      */
-    abstract transformToClassName(styles: (NativeBlock | ParsedBlock)[]): ClassName;
+    protected applyGlobalStyles(): this;
     /**
-     * Wrap a React component with an HOC that injects the defined stylesheet as a prop.
+     * Retrieve the defined component styles. If the definition is a function,
+     * execute it while passing the current theme and React props.
      */
-    withStyles<T>(styleSheet: StyleSheetDefinition<Theme, T>, options?: WithStylesOptions): <Props extends object = {}>(WrappedComponent: React.ComponentType<Props & WithStylesProps<Theme, ParsedBlock>>) => StyledComponentClass<Theme, Props & WithStylesWrapperProps>;
+    protected getStyleSheet(styleName: StyleName): StyleSheet;
     /**
-     * Wrap a React component with an HOC that injects the current theme object as a prop.
+     * Return a theme object or throw an error.
      */
-    withTheme(options?: WithThemeOptions): <Props extends object = {}>(WrappedComponent: React.ComponentType<Props & WithThemeProps<Theme>>) => React.ComponentClass<Props & WithThemeWrapperProps, any>;
+    protected getTheme(customTheme?: ThemeName): Theme;
+    /**
+     * Process from an Aesthetic style sheet to an adapter native style sheet.
+     */
+    protected processStyleSheet(styleSheet: SheetMap<NativeBlock>, styleName: StyleName): SheetMap<ParsedBlock>;
+    /**
+     * Set a style sheet definition for a component.
+     */
+    protected setStyleSheet(styleName: StyleName, styleSheet: StyleSheetDefinition<Theme, any>, extendFrom?: StyleName): this;
+    /**
+     * Transform the styles into CSS class names.
+     */
+    protected abstract transformToClassName(styles: (NativeBlock | ParsedBlock)[]): ClassName;
+    /**
+     * Validate a style sheet or theme definition.
+     */
     private validateDefinition;
 }

lib/Aesthetic.js

 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -22,6 +24,8 @@
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -33,3 +37,3 @@
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
@@ -50,2 +54,4 @@ var _v = _interopRequireDefault(require("uuid/v4"));
   function Aesthetic() {
+    var _this = this;
+
     var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -61,2 +67,32 @@ (0, _classCallCheck2.default)(this, Aesthetic);
     (0, _defineProperty2.default)(this, "appliedGlobals", false);
+    (0, _defineProperty2.default)(this, "transformStyles", function () {
+      var classNames = [];
+      var toTransform = [];
+
+      for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
+        styles[_key] = arguments[_key];
+      }
+
+      styles.forEach(function (style) {
+        if (!style) {
+          return;
+        }
+
+        if (typeof style === 'string') {
+          classNames.push.apply(classNames, (0, _toConsumableArray2.default)(String(style).split(' ').map(function (s) {
+            return (0, _stripClassPrefix.default)(s).trim();
+          })));
+        } else if ((0, _isObject.default)(style)) {
+          toTransform.push(style);
+        } else if ("production" !== process.env.NODE_ENV) {
+          throw new Error('Unsupported style type to transform.');
+        }
+      });
+
+      if (toTransform.length > 0) {
+        classNames.push(_this.transformToClassName(toTransform));
+      }
+
+      return classNames.join(' ').trim();
+    });
     this.options = (0, _objectSpread2.default)({
@@ -74,25 +110,2 @@ extendable: false,
   (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",
@@ -105,3 +118,3 @@ value: function createStyleSheet(styleName) {
       this.applyGlobalStyles();
-      var styleSheet = this.processStyleSheet(this.syntax.convertStyleSheet(this.getStyles(styleName)).toObject(), styleName);
+      var styleSheet = this.processStyleSheet(this.syntax.convertStyleSheet(this.getStyleSheet(styleName)).toObject(), styleName);
       this.cache[styleName] = styleSheet;
@@ -120,35 +133,2 @@ return styleSheet;
   }, {
-    key: "getStyles",
-    value: function getStyles(styleName) {
-      var parentStyleName = this.parents[styleName];
-      var styleDef = this.styles[styleName];
-      var styleSheet = styleDef(this.getTheme());
-
-      if (parentStyleName) {
-        return (0, _extend.default)(true, {}, this.getStyles(parentStyleName), styleSheet);
-      }
-
-      return styleSheet;
-    }
-  }, {
-    key: "getTheme",
-    value: function getTheme() {
-      var customTheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-      var themeName = customTheme || this.options.theme;
-      var theme = this.themes[themeName];
-
-      if ("production" !== process.env.NODE_ENV) {
-        if (!theme || !(0, _isObject.default)(theme)) {
-          throw new Error("Theme \"".concat(themeName, "\" does not exist."));
-        }
-      }
-
-      return theme;
-    }
-  }, {
-    key: "processStyleSheet",
-    value: function processStyleSheet(styleSheet, styleName) {
-      return (0, _objectSpread2.default)({}, styleSheet);
-    }
-  }, {
     key: "registerTheme",
@@ -171,54 +151,33 @@ value: function registerTheme(themeName, theme) {
   }, {
-    key: "setStyles",
-    value: function setStyles(styleName, styleSheet) {
-      var extendFrom = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+    key: "useStyles",
+    value: function useStyles(styleSheet) {
+      var _this2 = this;
 
-      if (extendFrom) {
-        if ("production" !== process.env.NODE_ENV) {
-          if (!this.styles[extendFrom]) {
-            throw new Error("Cannot extend from \"".concat(extendFrom, "\" as those styles do not exist."));
-          } else if (extendFrom === styleName) {
-            throw new Error('Cannot extend styles from itself.');
-          }
-        }
+      var customName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'Component';
 
-        this.parents[styleName] = extendFrom;
-      }
+      var _useState = (0, _react.useState)(function () {
+        var name = "".concat(customName, "-").concat((0, _v.default)());
 
-      this.styles[styleName] = this.validateDefinition(styleName, styleSheet, this.styles);
-      return this;
-    }
-  }, {
-    key: "transformStyles",
-    value: function transformStyles() {
-      var classNames = [];
-      var toTransform = [];
+        _this2.setStyleSheet(name, styleSheet);
 
-      for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
-        styles[_key] = arguments[_key];
-      }
+        return name;
+      }),
+          _useState2 = (0, _slicedToArray2.default)(_useState, 1),
+          styleName = _useState2[0];
 
-      styles.forEach(function (style) {
-        if (!style) {
-          return;
-        }
+      var sheet = this.createStyleSheet(styleName);
+      var flushed = false;
+      (0, _react.useLayoutEffect)(function () {
+        _this2.flushStyles(styleName);
 
-        if (typeof style === 'string') {
-          classNames.push.apply(classNames, (0, _toConsumableArray2.default)(String(style).split(' ').map(function (s) {
-            return (0, _stripClassPrefix.default)(s).trim();
-          })));
-        } else if ((0, _isObject.default)(style)) {
-          toTransform.push(style);
-        } else if ("production" !== process.env.NODE_ENV) {
-          throw new Error('Unsupported style type to transform.');
-        }
-      });
-
-      if (toTransform.length > 0) {
-        classNames.push(this.transformToClassName(toTransform));
-      }
-
-      return classNames.join(' ').trim();
+        flushed = true;
+      }, [flushed]);
+      return [sheet, this.transformStyles, styleName];
     }
   }, {
+    key: "useTheme",
+    value: function useTheme() {
+      return this.getTheme();
+    }
+  }, {
     key: "withStyles",
@@ -244,3 +203,3 @@ value: function withStyles(styleSheet) {
         var Component = pure ? _react.default.PureComponent : _react.default.Component;
-        aesthetic.setStyles(styleName, styleSheet, extendFrom);
+        aesthetic.setStyleSheet(styleName, styleSheet, extendFrom);
 
@@ -253,3 +212,3 @@ var WithStyles = function (_Component) {
 
-            var _this;
+            var _this3;
 
@@ -262,7 +221,7 @@ (0, _classCallCheck2.default)(this, WithStyles);
 
-            _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(WithStyles)).call.apply(_getPrototypeOf2, [this].concat(args)));
-            (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "state", {
+            _this3 = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(WithStyles)).call.apply(_getPrototypeOf2, [this].concat(args)));
+            (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this3)), "state", {
               styles: aesthetic.createStyleSheet(styleName)
             });
-            return _this;
+            return _this3;
           }
@@ -360,2 +319,78 @@
   }, {
+    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",
+    value: function getStyleSheet(styleName) {
+      var parentStyleName = this.parents[styleName];
+      var styleDef = this.styles[styleName];
+      var styleSheet = styleDef(this.getTheme());
+
+      if (parentStyleName) {
+        return (0, _extend.default)(true, {}, this.getStyleSheet(parentStyleName), styleSheet);
+      }
+
+      return styleSheet;
+    }
+  }, {
+    key: "getTheme",
+    value: function getTheme() {
+      var customTheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+      var themeName = customTheme || this.options.theme;
+      var theme = this.themes[themeName];
+
+      if ("production" !== process.env.NODE_ENV) {
+        if (!theme || !(0, _isObject.default)(theme)) {
+          throw new Error("Theme \"".concat(themeName, "\" does not exist."));
+        }
+      }
+
+      return theme;
+    }
+  }, {
+    key: "processStyleSheet",
+    value: function processStyleSheet(styleSheet, styleName) {
+      return (0, _objectSpread2.default)({}, styleSheet);
+    }
+  }, {
+    key: "setStyleSheet",
+    value: function setStyleSheet(styleName, styleSheet) {
+      var extendFrom = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+
+      if (extendFrom) {
+        if ("production" !== process.env.NODE_ENV) {
+          if (!this.styles[extendFrom]) {
+            throw new Error("Cannot extend from \"".concat(extendFrom, "\" as those styles do not exist."));
+          } else if (extendFrom === styleName) {
+            throw new Error('Cannot extend styles from itself.');
+          }
+        }
+
+        this.parents[styleName] = extendFrom;
+      }
+
+      this.styles[styleName] = this.validateDefinition(styleName, styleSheet, this.styles);
+      return this;
+    }
+  }, {
     key: "validateDefinition",
@@ -362,0 +397,0 @@ value: function validateDefinition(key, value, cache) {

lib/ClassNameAesthetic.d.ts

 import Aesthetic from './Aesthetic';
 import { ClassName } from './types';
 export default class ClassNameAesthetic<Theme extends object> extends Aesthetic<Theme, any, ClassName> {
-    transformToClassName(styles: any[]): ClassName;
+    protected transformToClassName(styles: any[]): ClassName;
 }

lib/types.d.ts

@@ -7,2 +7,3 @@ /// <reference types="react" />
 export declare type ClassName = string;
+export declare type ClassNameGenerator<N extends object, P extends object | string> = (...styles: (undefined | false | ClassName | N | P)[]) => ClassName;
 export declare type ExtendedProperty<B, T> = B | T | (B | T)[];
@@ -9,0 +10,0 @@ export declare type AtRule = '@charset' | '@font-face' | '@global' | '@import' | '@keyframes' | '@media' | '@page' | '@selectors' | '@supports' | '@viewport' | '@fallbacks';

lib/UnifiedSyntax.d.ts

@@ -13,3 +13,3 @@ import Ruleset from './Ruleset';
     /**
-     * Convert at-rules within a global stylesheet.
+     * Convert at-rules within a global style sheet.
      */
@@ -16,0 +16,0 @@ convertGlobalSheet(globalSheet: GlobalSheet): Sheet<NativeBlock>;

lib/UnifiedSyntax.js

@@ -196,3 +196,3 @@ "use strict";
               if ("production" !== process.env.NODE_ENV) {
-                throw new Error("Unknown property \"".concat(rule, "\". Only at-rules are allowed in the global stylesheet."));
+                throw new Error("Unknown property \"".concat(rule, "\". Only at-rules are allowed in the global style sheet."));
               }
@@ -199,0 +199,0 @@ }

package.json

 {
   "name": "aesthetic",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "description": "Aesthetic is a powerful type-safe React library for styling components through the use of adapters.",
@@ -30,5 +30,5 @@ "keywords": [
   "dependencies": {
-    "@types/extend": "^3.0.0",
+    "@types/extend": "^3.0.1",
     "@types/hoist-non-react-statics": "^3.0.1",
-    "@types/react": "^16.8.2",
+    "@types/react": "^16.8.3",
     "@types/uuid": "^3.4.4",
@@ -45,7 +45,8 @@ "csstype": "^2.6.2",
   "devDependencies": {
-    "@types/prop-types": "^15.5.8",
-    "prop-types": "^15.7.0",
-    "react": "^16.8.1"
+    "@types/prop-types": "^15.5.9",
+    "prop-types": "^15.7.2",
+    "react": "^16.8.2",
+    "react-dom": "^16.8.2"
   },
-  "gitHead": "2d8305ebf9de311cd93ef88f6b0259c58bf599ea"
+  "gitHead": "d731bb32c08bfa48851390838caef57b3ebaedbb"
 }

README.md

@@ -8,3 +8,3 @@ # Aesthetic
 Aesthetic is a powerful type-safe React library for styling components, whether it be CSS-in-JS
-using style objects, importing stylesheets, or simply referencing external class names. Simply put,
+using style objects, importing style sheets, or simply referencing external class names. Simply put,
 Aesthetic is an abstraction layer that utilizes higher-order-components for the compilation of
@@ -14,5 +14,8 @@ styles via third-party libraries, all the while providing customizability, theming, and a unified
 
+Supports both an HOC and hook styled API!
+
 ```tsx
 import React from 'react';
-import withStyles, { WithStylesProps, css } from '../path/to/aesthetic';
+import withStyles, { WithStylesProps } from './withStyles';
+import cx from './cx';
 
@@ -25,3 +28,3 @@ export type Props = {
   return (
-    <button type="button" className={css(styles.button)}>
+    <button type="button" className={cx(styles.button)}>
       {children}
@@ -43,5 +46,4 @@ </button>
 
-- React 16.3+
+- React 16.3+ (16.8 if using hooks)
 - IE 10+
-- `WeakMap`
 
@@ -48,0 +50,0 @@ ## Installation

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

110814

increased by3.12%

Lines of code

2286

increased by2.88%

Number of lines in readme file

57

increased by3.64%

Worsened metrics

Dev dependency count

4

increased by33.33%

Dependency changes

• Updated@types/extend@^3.0.1

• Updated@types/react@^16.8.3