aesthetic - npm Package Compare versions

lib/Aesthetic.d.ts

lib/ClassNameAesthetic.d.ts

lib/ClassNameAesthetic.js

lib/helpers/formatFontFace.d.ts

lib/helpers/isObject.d.ts

lib/helpers/stripClassPrefix.d.ts

lib/helpers/toArray.d.ts

lib/helpers/toObjectRecursive.d.ts

lib/helpers/toObjectRecursive.js

lib/index.d.ts

lib/Ruleset.d.ts

lib/Ruleset.js

lib/Sheet.d.ts

lib/Sheet.js

lib/types.d.ts

lib/types.js

lib/UnifiedSyntax.d.ts

LICENSE

269

CHANGELOG.md

		@@ -0,62 +1,163 @@
		# 3.0.0

		Aesthetic has been rewritten in TypeScript, and as such, many existing patterns were not type safe
		and had to be refactored. With this rewrite comes a new adapter layer, easier theme layer, removal
		of stylers, and unified syntax as the default.

		[View the migration guide!](https://github.com/milesj/aesthetic/blob/master/docs/migrate/3.0.md)

		#### 💥 Breaking

		Core

		- Dropped support for Glamor and the `aesthetic-adapter-glamor` package.
		- Dropped support for style objects passed directly to `withStyles`. Styles must now be a definition
		function that returns an object.
		- Removed the `Adapter` class. Adapters now extend `Aesthetic` instead of being passed to it through
		the constructor.
		- `Adapter#create` is now `Aesthetic#processStyleSheet`.
		- `Adapter#transform` is now `Aesthetic#transformToClassName`.
		- `Adapter#merge` has been removed, and now relies on `lodash` merge.
		- Removed the `Aesthetic` option `defaultTheme`, use `theme` option instead.
		- Removed the `ThemeProvider` component, use `theme` option instead.
		- Removed the `createStyler` factory function.
		- Use `Aesthetic#withStyles` instead of `style`.
		- Use `Aesthetic#transformStyles` instead of `transform`.
		- Removed `createStyleElement` helper function.
		- Removed `PropType`s exported from the index.
		- Updated `Aesthetic#registerTheme` and `Aesthetic#extendTheme` global styles to require a
		definition function that returns an object, or null.
		- Moved `Aesthetic#constructor` options to the 1st argument.
		- Moved `Aesthetic#extendTheme` theme name to 1st argument, and parent theme name to 2nd argument
		(swapped positions).

		Unified Syntax

		- Unified syntax is now required and is the default syntax. Native adapter syntax is no longer
		supported.
		- Dropped support for `@namespace` (was rarely supported by adapters).
		- Dropped support for global at-rules being defined within a component stylesheet (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.
		- Local `@keyframes` can be defined within a component by setting the keyframes object to
		`animationName`.
		- Dropped support for local at-rules being definef within a global stylesheet (via theme global
		styles). This includes `@fallbacks`, `@media`, `@supports`, and `@selectors`.
		- Descendent selectors (`> li`), advanced pseudos (`:not(:nth-child(n))`), and advanced attributes
		(`[href*="foo"]`) must now be defined within the `@selectors` at-rule.
		- Properly supports nested at-rules, like `@media` and `@supports`.

		#### 🚀 New

		Core

		- Added new `Aesthetic` option `theme` to denote the currently active theme.
		- Updated `withStyles` to use `getDerivedStateFromProps` for better performance.
		- DOM styles are now flushed on mount to properly support server-side rendering.
		- Global styles now have access to the current theme object.

		Unified Syntax

		- Added new `@selectors` at-rule to support all advanced selectors.
		- Updated `animationName` property to support inline keyframes objects.

		#### 🐞 Fixed

		- Global theme styles will no longer collide with other themes.

		#### 🛠 Internal

		- Converted from Flow to TypeScript.

		# 2.6.0 - 07/11/18

		#### 🚀 New
		* Unified Syntax
		* Updated `@import` to support an array of paths.

		- Unified Syntax
		- Updated `@import` to support an array of paths.

		# 2.5.0 - 05/30/18

		#### 🚀 New
		* Added an `Adapter#merge` method.

		- Added an `Adapter#merge` method.

		# 2.4.1 - 05/09/18

		#### 🐞 Fixed
		* Fixed a bug in which `themeName` was being passed from the HOC.

		- Fixed a bug in which `themeName` was being passed from the HOC.

		# 2.4.0 - 05/08/18

		#### 🚀 New
		* Added new `passThemeProp` and `passThemeNameProp` options to control which props are passed to the underlying component.

		- Added new `passThemeProp` and `passThemeNameProp` options to control which props are passed to the
		underlying component.

		#### 🐞 Fixed
		* Fixed a bug in which a component's `defaultProps` were not being passed to the styler function.

		- Fixed a bug in which a component's `defaultProps` were not being passed to the styler function.

		# 2.3.1 - 04/19/18

		#### 🐞 Fixed
		* Moved initial style transformation to the constructor to avoid possible race conditions.

		- Moved initial style transformation to the constructor to avoid possible race conditions.

		# 2.3.0 - 04/17/18

		#### 🚀 New
		* Added a `wrappedRef` prop to access the underlying wrapped component.

		- Added a `wrappedRef` prop to access the underlying wrapped component.

		#### 🐞 Fixed
		* Fixed an issue in which styles would transform infinitely on update.

		- Fixed an issue in which styles would transform infinitely on update.

		# 2.2.4 - 04/16/18

		#### 🐞 Fixed
		* Updated `componentWillMount` to `componentDidMount` and `componentWillReceiveProps` to `componentDidUpdate` in preparation for React 16.3.

		- Updated `componentWillMount` to `componentDidMount` and `componentWillReceiveProps` to
		`componentDidUpdate` in preparation for React 16.3.

		# 2.2.3 - 03/20/18

		#### 🐞 Fixed
		* Fixed incorrectly built and published files.

		- Fixed incorrectly built and published files.

		# 2.2.2 - 03/20/18

		#### 🐞 Fixed
		* Fixed a bug where generated class names would start with an invalid number.

		- Fixed a bug where generated class names would start with an invalid number.

		# 2.2.1 - 01/30/18

		#### 🐞 Fixed
		* Unified Syntax
		* Font face `srcPaths` will now work with query strings.

		- Unified Syntax
		- Font face `srcPaths` will now work with query strings.

		# 2.2.0 - 01/13/18

		#### 🚀 New
		* Unified Syntax
		* Attribute selectors are now supported when starting with `[`.
		* Direct descendant selectors are now supported with `>`.
		* Multiple selectors are now supported by separating each selector with a comma.

		- Unified Syntax
		- Attribute selectors are now supported when starting with `[`.
		- Direct descendant selectors are now supported with `>`.
		- Multiple selectors are now supported by separating each selector with a comma.

		# 2.1.0 - 01/03/18

		#### 🚀 New
		* 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 stylesheet creation
		phase.

		# 2.0.0 - 01/02/18

		Aesthetic has been rewritten to properly support specificity, new at-rules, and global styles.
		@@ -67,89 +168,105 @@ Styles are no longer transformed on mount and will now be transformed on render using a new

		[View the migration guide!](../../MIGRATE_2.0.md)
		[View the migration guide!](https://github.com/milesj/aesthetic/blob/master/docs/migrate/2.0.md)

		#### 💥 Breaking
		* Requires IE 11+.
		* Requires `WeakMap` support.
		* Removed React Native support (it was finicky and only supported by 1 adapter).
		* Removed `aesthetic-utils` package (any remaining helpers were moved to core).
		* Removed the `classes` function.
		* Use the `transform` function provided by `createStyler` instead.
		* Removed `ClassNamesPropType` and `ClassOrStylesPropType` prop types.
		* Use the `StylesPropType` instead.
		* Refactored `Aesthetic#transformStyles` and `Adapter#transform` to now require an array of style

		- Requires IE 11+.
		- Requires `WeakMap` support.
		- Removed React Native support (it was finicky and only supported by 1 adapter).
		- Removed `aesthetic-utils` package (any remaining helpers were moved to core).
		- Removed the `classes` function.
		- Use the `transform` function provided by `createStyler` instead.
		- Removed `ClassNamesPropType` and `ClassOrStylesPropType` prop types.
		- Use the `StylesPropType` instead.
		- Refactored `Aesthetic#transformStyles` and `Adapter#transform` to now require an array of style
		declarations.
		* Will now return a single combined class name for increased specificity.
		* Refactored `createStyler` to return 2 functions, `style` and `transform`.
		* The `style` function is an HOC factory and works like the original 1.0 return value.
		* The `transform` function is now required to generate class names from style declarations.
		* Renamed the HOC `wrappedComponent` static property to `WrappedComponent`.
		* Renamed the HOC `theme` prop (to toggle themes) to `themeName`.
		* Inherited and parent styles are no longer passed as the HOC styler callback 2nd argument.
		* Unified Syntax
		* The `@font-face` unified syntax rule has been rewritten to support multiple variations of the
		- Will now return a single combined class name for increased specificity.
		- Refactored `createStyler` to return 2 functions, `style` and `transform`.
		- The `style` function is an HOC factory and works like the original 1.0 return value.
		- The `transform` function is now required to generate class names from style declarations.
		- Renamed the HOC `wrappedComponent` static property to `WrappedComponent`.
		- Renamed the HOC `theme` prop (to toggle themes) to `themeName`.
		- Inherited and parent styles are no longer passed as the HOC styler callback 2nd argument.
		- Unified Syntax
		- The `@font-face` unified syntax rule has been rewritten to support multiple variations of the
		same font family.
		* The object key is now the font family name, instead of a random name.
		* The object value can now be an array of font face style declarations.
		* The `srcPaths` property, an array of paths, is now required (instead of `src`).
		- The object key is now the font family name, instead of a random name.
		- The object value can now be an array of font face style declarations.
		- The `srcPaths` property, an array of paths, is now required (instead of `src`).

		#### 🚀 New
		* Added a new adapter, `TypeStyle`.
		* Added `Aesthetic#createStyleSheet` for converting a component's styles into an adapter
		specific stylesheet.
		* 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.
		* Updated `Aesthetic#registerTheme` to use the new global styles system.
		* The current theme declarations will be passed to styled components under the `theme` prop.
		* The previous `theme` prop was renamed to `themeName`.
		* The `Aesthetic` `themePropName` option now controls this new prop.
		* Unified Syntax
		* Added new `@charset`, `@global`, `@import`, `@namespace`, `@page`, `@supports`, and `@viewport`

		- Added a new adapter, `TypeStyle`.
		- Added `Aesthetic#createStyleSheet` for converting a component's styles into an adapter specific
		stylesheet.
		- 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.
		- Updated `Aesthetic#registerTheme` to use the new global styles system.
		- The current theme declarations will be passed to styled components under the `theme` prop.
		- The previous `theme` prop was renamed to `themeName`.
		- The `Aesthetic` `themePropName` option now controls this new prop.
		- Unified Syntax
		- Added new `@charset`, `@global`, `@import`, `@namespace`, `@page`, `@supports`, and `@viewport`
		at-rules (varies between adapters).
		* Added a new property `local` for use within `@font-face` (the source `local()` value).
		- Added a new property `local` for use within `@font-face` (the source `local()` value).

		#### 🛠 Internal
		* Rewritten Flowtype definitions.

		- Rewritten Flowtype definitions.

		# 1.7.1 - 11/10/17

		#### 🛠 Internal
		* Tested against React 16.1.
		* Improved build process.

		- Tested against React 16.1.
		- Improved build process.

		# 1.7.0 - 10/18/17

		#### 🚀 New
		* Added a `defaultTheme` option to `Aesthetic`, which is used when `themeName` is empty.
		* Added a `pure` option to `Aesthetic`, which forces components to extend `React.PureComponent`.

		- Added a `defaultTheme` option to `Aesthetic`, which is used when `themeName` is empty.
		- Added a `pure` option to `Aesthetic`, which forces components to extend `React.PureComponent`.

		#### 🛠 Internal
		* Enabled Yarn workspaces.
		* Updated Flowtype definitions.

		- Enabled Yarn workspaces.
		- Updated Flowtype definitions.

		# 1.6.0 - 9/27/17

		#### 🚀 New
		* Added support for `react` 16.0.
		* Updated `prop-types` to 15.6.

		- Added support for `react` 16.0.
		- Updated `prop-types` to 15.6.

		#### 🛠 Internal
		* Updated Flowtype definitions.
		* Updated cross package imports to use CommonJS paths.
		* Improved the build process.

		- Updated Flowtype definitions.
		- Updated cross package imports to use CommonJS paths.
		- Improved the build process.

		# 1.5.0 - 7/28/17
		* Updated `hoist-non-react-statics` to 2.2.
		* Updated Flow definitions.
		* Wrapped errors in `__DEV__` environment checks.

		- Updated `hoist-non-react-statics` to 2.2.
		- Updated Flow definitions.
		- Wrapped errors in `__DEV__` environment checks.

		# 1.4.2 - 6/19/17
		* Fixed an issue with the Lerna package.

		- Fixed an issue with the Lerna package.

		# 1.4.1 - 6/19/17
		* Updated `react` to 15.6.
		* Updated `prop-types` to 15.5.10.

		- Updated `react` to 15.6.
		- Updated `prop-types` to 15.5.10.

		# 1.4.0 - 5/11/17
		* Updated IE requirement to 11+.
		* Updated to include src/ files in the published package.

		- Updated IE requirement to 11+.
		- Updated to include src/ files in the published package.

		# 1.3.0 - 4/24/17
		* Updated to support React 15.5 and the new `prop-types` package.

		- Updated to support React 15.5 and the new `prop-types` package.

513

lib/Aesthetic.js

		@@ -1,243 +0,292 @@
		'use strict';

		Object.defineProperty(exports, "__esModule", {
		value: true
		});

		var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

		var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

		var _extends2 = require('babel-runtime/helpers/extends');

		var _extends3 = _interopRequireDefault(_extends2);

		var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

		var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

		var _createClass2 = require('babel-runtime/helpers/createClass');

		var _createClass3 = _interopRequireDefault(_createClass2);

		var _isObject = require('./helpers/isObject');

		var _isObject2 = _interopRequireDefault(_isObject);

		var _stripClassPrefix = require('./helpers/stripClassPrefix');

		var _stripClassPrefix2 = _interopRequireDefault(_stripClassPrefix);

		var _Adapter = require('./Adapter');

		var _Adapter2 = _interopRequireDefault(_Adapter);

		var _style = require('./style');

		var _style2 = _interopRequireDefault(_style);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		"use strict";
		/**
		* @copyright 2017, Miles Johnson
		* @copyright 2017-2019, Miles Johnson
		* @license https://opensource.org/licenses/MIT
		*
		*/

		var Aesthetic = function () {
		function Aesthetic(adapter) {
		var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
		(0, _classCallCheck3.default)(this, Aesthetic);
		this.cache = new WeakMap();
		this.options = {
		defaultTheme: '',
		extendable: false,
		passThemeNameProp: true,
		passThemeProp: true,
		pure: false,
		stylesPropName: 'styles',
		themePropName: 'theme'
		var __extends = (this && this.__extends) \|\| (function () {
		var extendStatics = function (d, b) {
		extendStatics = Object.setPrototypeOf \|\|
		({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) \|\|
		function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
		return extendStatics(d, b);
		}
		return function (d, b) {
		extendStatics(d, b);
		function __() { this.constructor = d; }
		d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
		};
		this.parents = {};
		this.styles = {};
		this.themes = {};

		this.options = (0, _extends3.default)({}, this.options, options);

		this.setAdapter(adapter);
		}

		(0, _createClass3.default)(Aesthetic, [{
		key: 'createStyleSheet',
		value: function createStyleSheet(styleName) {
		var themeName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
		var props = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};

		return this.adapter.create(this.getStyles(styleName, themeName, props), styleName);
		}
		}, {
		key: 'extendTheme',
		value: function extendTheme(parentThemeName, themeName) {
		var theme = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
		var globals = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};

		return this.registerTheme(themeName, this.adapter.merge(this.getTheme(parentThemeName), theme), globals);
		}
		}, {
		key: 'getStyles',
		value: function getStyles(styleName) {
		var themeName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
		var props = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};

		var parentStyleName = this.parents[styleName];
		var styleSheet = this.styles[styleName];

		if ("production" !== process.env.NODE_ENV) {
		if (!styleSheet) {
		throw new Error('Styles do not exist for "' + styleName + '".');
		})();
		var __assign = (this && this.__assign) \|\| function () {
		__assign = Object.assign \|\| function(t) {
		for (var s, i = 1, n = arguments.length; i < n; i++) {
		s = arguments[i];
		for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
		t[p] = s[p];
		}
		}

		if (typeof styleSheet === 'function') {
		styleSheet = styleSheet(themeName ? this.getTheme(themeName) : {}, props);
		}

		if (parentStyleName) {
		styleSheet = this.adapter.merge(this.getStyles(parentStyleName, themeName, props), styleSheet);
		}

		return styleSheet;
		return t;
		};
		return __assign.apply(this, arguments);
		};
		var __rest = (this && this.__rest) \|\| function (s, e) {
		var t = {};
		for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
		t[p] = s[p];
		if (s != null && typeof Object.getOwnPropertySymbols === "function")
		for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
		t[p[i]] = s[p[i]];
		return t;
		};
		var __importDefault = (this && this.__importDefault) \|\| function (mod) {
		return (mod && mod.__esModule) ? mod : { "default": mod };
		};
		Object.defineProperty(exports, "__esModule", { value: true });
		var react_1 = __importDefault(require("react"));
		var v4_1 = __importDefault(require("uuid/v4"));
		var hoist_non_react_statics_1 = __importDefault(require("hoist-non-react-statics"));
		var shallowequal_1 = __importDefault(require("shallowequal"));
		var merge_1 = __importDefault(require("lodash/merge"));
		var isObject_1 = __importDefault(require("./helpers/isObject"));
		var stripClassPrefix_1 = __importDefault(require("./helpers/stripClassPrefix"));
		var UnifiedSyntax_1 = __importDefault(require("./UnifiedSyntax"));
		var Aesthetic = /** @class */ (function () {
		function Aesthetic(options) {
		if (options === void 0) { options = {}; }
		this.cache = {};
		this.globals = {};
		this.parents = {};
		this.styles = {};
		this.themes = {};
		this.appliedGlobals = false;
		this.options = __assign({ extendable: false, passThemeNameProp: true, passThemeProp: true, pure: false, stylesPropName: 'styles', theme: 'default', themePropName: 'theme' }, options);
		this.syntax = new UnifiedSyntax_1.default();
		}
		}, {
		key: 'getTheme',
		value: function getTheme() {
		var themeName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
		var defaultTheme = this.options.defaultTheme;


		var theme = this.themes[themeName];

		if (!theme && defaultTheme) {
		theme = this.themes[defaultTheme];
		}

		if ("production" !== process.env.NODE_ENV) {
		if (!theme) {
		throw new Error('Theme "' + themeName + '" does not exist.');
		/**
		* Apply and inject global styles for the current theme.
		* This should only happen once!
		*/
		Aesthetic.prototype.applyGlobalStyles = function () {
		if (this.appliedGlobals) {
		return;
		}
		}

		return theme;
		}
		}, {
		key: 'registerTheme',
		value: function registerTheme(themeName) {
		var theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
		var globals = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};

		if ("production" !== process.env.NODE_ENV) {
		if (this.themes[themeName]) {
		throw new Error('Theme "' + themeName + '" already exists.');
		} else if (!(0, _isObject2.default)(theme)) {
		throw new TypeError('Theme "' + themeName + '" must be a style object.');
		} else if (!(0, _isObject2.default)(globals)) {
		throw new TypeError('Global styles for "' + themeName + '" must be an object.');
		var globalDef = this.globals[this.options.theme];
		var globalSheet = globalDef ? globalDef(this.getTheme()) : null;
		if (globalSheet) {
		this.processStyleSheet(this.syntax.convertGlobalSheet(globalSheet).toObject(), ':root');
		}
		}

		this.themes[themeName] = theme;

		var globalStyleSheet = this.adapter.create(globals, ':root');

		this.transformStyles(Object.values(globalStyleSheet));

		return this;
		}
		}, {
		key: 'setAdapter',
		value: function setAdapter(adapter) {
		if (adapter instanceof _Adapter2.default \|\| adapter && typeof adapter.transform === 'function') {
		this.adapter = adapter;
		} else if ("production" !== process.env.NODE_ENV) {
		throw new TypeError('Adapter must be an instance of `Adapter`.');
		}

		return this;
		}
		}, {
		key: 'setStyles',
		value: function setStyles(styleName, styleSheet) {
		var extendFrom = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';

		if ("production" !== process.env.NODE_ENV) {
		if (this.styles[styleName]) {
		throw new Error('Styles have already been set for "' + styleName + '".');
		} else if (!(0, _isObject2.default)(styleSheet) && typeof styleSheet !== 'function') {
		throw new TypeError('Styles defined for "' + styleName + '" must be an object or function.');
		this.appliedGlobals = true;
		this.flushStyles(':root');
		};
		/**
		* Create and return a stylesheet unique to an adapter.
		*/
		Aesthetic.prototype.createStyleSheet = function (styleName, props) {
		if (props === void 0) { props = {}; }
		if (this.cache[styleName]) {
		return this.cache[styleName];
		}
		}

		this.styles[styleName] = styleSheet;

		if (extendFrom) {
		if ("production" !== process.env.NODE_ENV) {
		if (!this.styles[extendFrom]) {
		throw new Error('Cannot extend from "' + extendFrom + '" as those styles do not exist.');
		} else if (extendFrom === styleName) {
		throw new Error('Cannot extend styles from itself.');
		}
		this.applyGlobalStyles();
		var styleSheet = this.processStyleSheet(this.syntax.convertStyleSheet(this.getStyles(styleName, props)).toObject(), styleName);
		this.cache[styleName] = styleSheet;
		return styleSheet;
		};
		/**
		* Register a theme by extending and merging with a previously defined theme.
		*/
		Aesthetic.prototype.extendTheme = function (themeName, parentThemeName, theme, globalSheet) {
		if (globalSheet === void 0) { globalSheet = null; }
		return this.registerTheme(themeName, merge_1.default({}, this.getTheme(parentThemeName), theme), globalSheet \|\| this.globals[parentThemeName]);
		};
		/**
		* Flush parsed styles and inject them into the DOM.
		*/
		Aesthetic.prototype.flushStyles = function (styleName) { };
		/**
		* Retrieve the defined component styles. If the definition is a function,
		* execute it while passing the current theme and React props.
		*/
		Aesthetic.prototype.getStyles = function (styleName, props) {
		if (props === void 0) { props = {}; }
		var parentStyleName = this.parents[styleName];
		var styleDef = this.styles[styleName];
		var styleSheet = styleDef ? styleDef(this.getTheme(), props) : {};
		// Merge from parent
		if (parentStyleName) {
		return merge_1.default({}, this.getStyles(parentStyleName, props), styleSheet);
		}

		this.parents[styleName] = extendFrom;
		}

		return this;
		}
		}, {
		key: 'transformStyles',
		value: function transformStyles(styles) {
		if (this.cache.has(styles)) {
		return this.cache.get(styles);
		}

		var classNames = [];
		var toTransform = [];

		styles.forEach(function (style) {
		if (!style) {
		return;
		} else if (typeof style === 'string' \|\| typeof style === 'number') {
		classNames.push.apply(classNames, (0, _toConsumableArray3.default)(String(style).split(' ').map(function (s) {
		return (0, _stripClassPrefix2.default)(s).trim();
		})));
		} else if ((0, _isObject2.default)(style)) {
		toTransform.push(style);
		} else if ("production" !== process.env.NODE_ENV) {
		throw new Error('Unsupported style type to transform.');
		return styleSheet;
		};
		/**
		* Return a theme object or throw an error.
		*/
		Aesthetic.prototype.getTheme = function (customTheme) {
		if (customTheme === void 0) { customTheme = ''; }
		var themeName = customTheme \|\| this.options.theme;
		var theme = this.themes[themeName];
		if (process.env.NODE_ENV !== 'production') {
		if (!theme \|\| !isObject_1.default(theme)) {
		throw new Error("Theme \"" + themeName + "\" does not exist.");
		}
		}
		});

		if (toTransform.length > 0) {
		var _adapter;

		classNames.push((_adapter = this.adapter).transform.apply(_adapter, toTransform));
		}

		var className = classNames.join(' ').trim();

		this.cache.set(styles, className);

		return className;
		}
		}, {
		key: 'withStyles',
		value: function withStyles(styleSheet) {
		var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

		return (0, _style2.default)(this, styleSheet, options);
		}
		}]);
		return Aesthetic;
		}();

		exports.default = Aesthetic;
		return theme;
		};
		/**
		* Process from an Aesthetic style sheet to an adapter native style sheet.
		*/
		Aesthetic.prototype.processStyleSheet = function (styleSheet, styleName) {
		// @ts-ignore Allow spread
		return __assign({}, styleSheet);
		};
		/**
		* Register a theme with a pre-defined set of theme settings.
		*/
		Aesthetic.prototype.registerTheme = function (themeName, theme, globalSheet) {
		if (globalSheet === void 0) { globalSheet = null; }
		if (process.env.NODE_ENV !== 'production') {
		if (this.themes[themeName]) {
		throw new Error("Theme \"" + themeName + "\" already exists.");
		}
		else if (!isObject_1.default(theme)) {
		throw new TypeError("Theme \"" + themeName + "\" must be a style object.");
		}
		}
		this.themes[themeName] = theme;
		this.globals[themeName] = this.validateDefinition(themeName, globalSheet, this.globals);
		return this;
		};
		/**
		* Set multiple style declarations for a component.
		*/
		Aesthetic.prototype.setStyles = function (styleName, styleSheet, extendFrom) {
		if (extendFrom === void 0) { extendFrom = ''; }
		this.styles[styleName] = this.validateDefinition(styleName, styleSheet, this.styles);
		if (extendFrom) {
		if (process.env.NODE_ENV !== 'production') {
		if (!this.styles[extendFrom]) {
		throw new Error("Cannot extend from \"" + extendFrom + "\" as those styles do not exist.");
		}
		else if (extendFrom === styleName) {
		throw new Error('Cannot extend styles from itself.');
		}
		}
		this.parents[styleName] = extendFrom;
		}
		return this;
		};
		/**
		* Transform the list of style declarations to a list of class name.
		*/
		Aesthetic.prototype.transformStyles = function () {
		var styles = [];
		for (var _i = 0; _i < arguments.length; _i++) {
		styles[_i] = arguments[_i];
		}
		var classNames = [];
		var toTransform = [];
		styles.forEach(function (style) {
		if (!style) {
		return;
		}
		if (typeof style === 'string' \|\| typeof style === 'number') {
		classNames.push.apply(classNames, String(style)
		.split(' ')
		.map(function (s) { return stripClassPrefix_1.default(s).trim(); }));
		}
		else if (isObject_1.default(style)) {
		toTransform.push(style);
		}
		else if (process.env.NODE_ENV !== 'production') {
		throw new Error('Unsupported style type to transform.');
		}
		});
		if (toTransform.length > 0) {
		classNames.push(this.transformToClassName(toTransform));
		}
		return classNames.join(' ').trim();
		};
		/**
		* Wrap a React component with an HOC that handles the entire styling, converting,
		* and transforming process.
		*/
		Aesthetic.prototype.withStyles = function (styleSheet, options) {
		if (options === void 0) { options = {}; }
		var aesthetic = this;
		var _a = options.extendable, extendable = _a === void 0 ? this.options.extendable : _a, _b = options.extendFrom, extendFrom = _b === void 0 ? '' : _b, _c = options.passThemeNameProp, passThemeNameProp = _c === void 0 ? this.options.passThemeNameProp : _c, _d = options.passThemeProp, passThemeProp = _d === void 0 ? this.options.passThemeProp : _d, _e = options.pure, pure = _e === void 0 ? this.options.pure : _e, _f = options.stylesPropName, stylesPropName = _f === void 0 ? this.options.stylesPropName : _f, _g = options.themePropName, themePropName = _g === void 0 ? this.options.themePropName : _g;
		return function withStylesFactory(WrappedComponent) {
		var baseName = WrappedComponent.displayName \|\| WrappedComponent.name;
		var styleName = baseName + "-" + v4_1.default();
		var Component = pure ? react_1.default.PureComponent : react_1.default.Component;
		aesthetic.setStyles(styleName, styleSheet, extendFrom);
		var WithStyles = /** @class */ (function (_super) {
		__extends(WithStyles, _super);
		function WithStyles() {
		var _this = _super !== null && _super.apply(this, arguments) \|\| this;
		_this.state = {
		styles: {},
		};
		return _this;
		}
		WithStyles.extendStyles = function (customStyleSheet, extendOptions) {
		if (extendOptions === void 0) { extendOptions = {}; }
		if (process.env.NODE_ENV !== 'production') {
		if (!extendable) {
		throw new Error(baseName + " is not extendable.");
		}
		}
		return aesthetic.withStyles(customStyleSheet, __assign({}, options, extendOptions, { extendFrom: styleName }))(WrappedComponent);
		};
		WithStyles.getDerivedStateFromProps = function (props, state) {
		if (shallowequal_1.default(props, state.props)) {
		return null;
		}
		return {
		props: props,
		styles: aesthetic.createStyleSheet(styleName, __assign({}, WrappedComponent.defaultProps, props)),
		};
		};
		WithStyles.prototype.componentDidMount = function () {
		aesthetic.flushStyles(styleName);
		};
		WithStyles.prototype.render = function () {
		var _a;
		// @ts-ignore Allow rest
		var _b = this.props, wrappedRef = _b.wrappedRef, props = __rest(_b, ["wrappedRef"]);
		var extraProps = (_a = {},
		_a[stylesPropName] = this.state.styles,
		_a);
		if (passThemeProp) {
		extraProps[themePropName] = aesthetic.getTheme();
		}
		if (passThemeNameProp) {
		extraProps.themeName = aesthetic.options.theme;
		}
		if (wrappedRef) {
		extraProps.ref = wrappedRef;
		}
		return react_1.default.createElement(WrappedComponent, __assign({}, props, extraProps));
		};
		WithStyles.displayName = "withAesthetic(" + baseName + ")";
		WithStyles.styleName = styleName;
		WithStyles.WrappedComponent = WrappedComponent;
		WithStyles.defaultProps = {
		wrappedRef: null,
		};
		return WithStyles;
		}(Component));
		// @ts-ignore
		return hoist_non_react_statics_1.default(WithStyles, WrappedComponent);
		};
		};
		Aesthetic.prototype.validateDefinition = function (key, value, cache) {
		if (process.env.NODE_ENV !== 'production') {
		if (cache[key]) {
		throw new Error("Styles have already been defined for \"" + key + "\".");
		}
		else if (value !== null && typeof value !== 'function') {
		throw new TypeError("Definition for \"" + key + "\" must be null or a function.");
		}
		}
		return value;
		};
		return Aesthetic;
		}());
		exports.default = Aesthetic;

131

lib/helpers/formatFontFace.js

		@@ -1,76 +0,61 @@
		'use strict';

		Object.defineProperty(exports, "__esModule", {
		value: true
		});

		var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

		var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

		var _extends2 = require('babel-runtime/helpers/extends');

		var _extends3 = _interopRequireDefault(_extends2);

		exports.default = formatFontFace;

		var _toArray = require('./toArray');

		var _toArray2 = _interopRequireDefault(_toArray);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		"use strict";
		/**
		* @copyright 2017-2019, Miles Johnson
		* @license https://opensource.org/licenses/MIT
		*/
		var __assign = (this && this.__assign) \|\| function () {
		__assign = Object.assign \|\| function(t) {
		for (var s, i = 1, n = arguments.length; i < n; i++) {
		s = arguments[i];
		for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
		t[p] = s[p];
		}
		return t;
		};
		return __assign.apply(this, arguments);
		};
		var __importDefault = (this && this.__importDefault) \|\| function (mod) {
		return (mod && mod.__esModule) ? mod : { "default": mod };
		};
		Object.defineProperty(exports, "__esModule", { value: true });
		var toArray_1 = __importDefault(require("./toArray"));
		var FORMATS = {
		'.eot': 'embedded-opentype',
		'.otf': 'opentype',
		'.svg': 'svg',
		'.svgz': 'svg',
		'.ttf': 'truetype',
		'.woff': 'woff',
		'.woff2': 'woff2'
		}; /**
		* @copyright 2017, Miles Johnson
		* @license https://opensource.org/licenses/MIT
		*
		*/

		'.eot': 'embedded-opentype',
		'.otf': 'opentype',
		'.svg': 'svg',
		'.svgz': 'svg',
		'.ttf': 'truetype',
		'.woff': 'woff',
		'.woff2': 'woff2',
		};
		function formatFontFace(properties) {
		var fontFace = (0, _extends3.default)({}, properties);
		var src = [];

		if (fontFace.local) {
		(0, _toArray2.default)(fontFace.local).forEach(function (alias) {
		src.push('local(\'' + String(alias) + '\')');
		});

		delete fontFace.local;
		}

		if (Array.isArray(fontFace.srcPaths)) {
		(0, _toArray2.default)(fontFace.srcPaths).forEach(function (srcPath) {
		var ext = srcPath.slice(srcPath.lastIndexOf('.'));

		if (ext.indexOf('?') >= 0) {
		var _ext$split = ext.split('?');

		var _ext$split2 = (0, _slicedToArray3.default)(_ext$split, 1);

		ext = _ext$split2[0];
		}

		if (FORMATS[ext]) {
		src.push('url(\'' + srcPath + '\') format(\'' + FORMATS[ext] + '\')');
		} else if ("production" !== process.env.NODE_ENV) {
		throw new Error('Unsupported font format "' + ext + '".');
		}
		});

		delete fontFace.srcPaths;
		} else {
		var fontFace = __assign({}, properties);
		var src = [];
		if (fontFace.local) {
		toArray_1.default(fontFace.local).forEach(function (alias) {
		src.push("local('" + String(alias) + "')");
		});
		delete fontFace.local;
		}
		if (Array.isArray(fontFace.srcPaths)) {
		toArray_1.default(fontFace.srcPaths).forEach(function (srcPath) {
		var ext = srcPath.slice(srcPath.lastIndexOf('.'));
		if (ext.indexOf('?') >= 0) {
		ext = ext.split('?')[0];
		}
		if (FORMATS[ext]) {
		src.push("url('" + srcPath + "') format('" + FORMATS[ext] + "')");
		}
		else if (process.env.NODE_ENV !== 'production') {
		throw new Error("Unsupported font format \"" + ext + "\".");
		}
		});
		delete fontFace.srcPaths;
		}
		else {
		return fontFace;
		}
		fontFace.src = src.join(', ');
		return fontFace;
		}

		fontFace.src = src.join(', ');

		return fontFace;
		}
		}
		exports.default = formatFontFace;

25

lib/helpers/isObject.js

		@@ -1,23 +0,10 @@
		'use strict';

		Object.defineProperty(exports, "__esModule", {
		value: true
		});

		var _typeof2 = require('babel-runtime/helpers/typeof');

		var _typeof3 = _interopRequireDefault(_typeof2);

		exports.default = isObject;

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		"use strict";
		/**
		* @copyright 2017, Miles Johnson
		* @copyright 2017-2019, Miles Johnson
		* @license https://opensource.org/licenses/MIT
		*
		*/

		Object.defineProperty(exports, "__esModule", { value: true });
		function isObject(value) {
		return value !== null && !Array.isArray(value) && (typeof value === 'undefined' ? 'undefined' : (0, _typeof3.default)(value)) === 'object';
		}
		return value !== null && !Array.isArray(value) && typeof value === 'object';
		}
		exports.default = isObject;

17

lib/helpers/stripClassPrefix.js

		@@ -1,15 +0,10 @@
		'use strict';

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.default = stripClassPrefix;
		"use strict";
		/**
		* @copyright 2017, Miles Johnson
		* @copyright 2017-2019, Miles Johnson
		* @license https://opensource.org/licenses/MIT
		*
		*/

		Object.defineProperty(exports, "__esModule", { value: true });
		function stripClassPrefix(name) {
		return name.charAt(0) === '.' ? name.substring(1) : name;
		}
		return name.charAt(0) === '.' ? name.substring(1) : name;
		}
		exports.default = stripClassPrefix;

15

lib/helpers/toArray.js

		"use strict";

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.default = toArray;
		/**
		* @copyright 2017, Miles Johnson
		* @copyright 2017-2019, Miles Johnson
		* @license https://opensource.org/licenses/MIT
		*
		*/

		Object.defineProperty(exports, "__esModule", { value: true });
		function toArray(value) {
		return Array.isArray(value) ? value : [value];
		}
		return Array.isArray(value) ? value : [value];
		}
		exports.default = toArray;

59

lib/index.js

		@@ -1,46 +0,19 @@
		'use strict';

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.createStyler = exports.ThemeProvider = exports.ClassNameAdapter = exports.Adapter = exports.StylesPropType = undefined;

		var _propTypes = require('prop-types');

		var _propTypes2 = _interopRequireDefault(_propTypes);

		var _Aesthetic = require('./Aesthetic');

		var _Aesthetic2 = _interopRequireDefault(_Aesthetic);

		var _Adapter = require('./Adapter');

		var _Adapter2 = _interopRequireDefault(_Adapter);

		var _ClassNameAdapter = require('./ClassNameAdapter');

		var _ClassNameAdapter2 = _interopRequireDefault(_ClassNameAdapter);

		var _ThemeProvider = require('./ThemeProvider');

		var _ThemeProvider2 = _interopRequireDefault(_ThemeProvider);

		var _createStyler = require('./createStyler');

		var _createStyler2 = _interopRequireDefault(_createStyler);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		"use strict";
		/**
		* @copyright 2017, Miles Johnson
		* @copyright 2017-2019, Miles Johnson
		* @license https://opensource.org/licenses/MIT
		*
		*/

		var StylesPropType = exports.StylesPropType = _propTypes2.default.objectOf(_propTypes2.default.object);

		exports.Adapter = _Adapter2.default;
		exports.ClassNameAdapter = _ClassNameAdapter2.default;
		exports.ThemeProvider = _ThemeProvider2.default;
		exports.createStyler = _createStyler2.default;
		exports.default = _Aesthetic2.default;
		var __importDefault = (this && this.__importDefault) \|\| function (mod) {
		return (mod && mod.__esModule) ? mod : { "default": mod };
		};
		Object.defineProperty(exports, "__esModule", { value: true });
		var Aesthetic_1 = __importDefault(require("./Aesthetic"));
		var ClassNameAesthetic_1 = __importDefault(require("./ClassNameAesthetic"));
		exports.ClassNameAesthetic = ClassNameAesthetic_1.default;
		var UnifiedSyntax_1 = __importDefault(require("./UnifiedSyntax"));
		exports.UnifiedSyntax = UnifiedSyntax_1.default;
		var Ruleset_1 = __importDefault(require("./Ruleset"));
		exports.Ruleset = Ruleset_1.default;
		var Sheet_1 = __importDefault(require("./Sheet"));
		exports.Sheet = Sheet_1.default;
		exports.default = Aesthetic_1.default;

737

lib/UnifiedSyntax.js

		@@ -1,398 +0,367 @@
		'use strict';

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.LOCAL_RULES = exports.GLOBAL_RULES = undefined;

		var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

		var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

		var _extends2 = require('babel-runtime/helpers/extends');

		var _extends3 = _interopRequireDefault(_extends2);

		var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

		var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

		var _createClass2 = require('babel-runtime/helpers/createClass');

		var _createClass3 = _interopRequireDefault(_createClass2);

		var _formatFontFace = require('./helpers/formatFontFace');

		var _formatFontFace2 = _interopRequireDefault(_formatFontFace);

		var _isObject = require('./helpers/isObject');

		var _isObject2 = _interopRequireDefault(_isObject);

		var _toArray = require('./helpers/toArray');

		var _toArray2 = _interopRequireDefault(_toArray);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var GLOBAL_RULES = exports.GLOBAL_RULES = ['@charset', '@font-face', '@global', '@import', '@keyframes', '@namespace', '@page', '@viewport']; /**
		* @copyright 2017, Miles Johnson
		* @license https://opensource.org/licenses/MIT
		*
		*/

		var LOCAL_RULES = exports.LOCAL_RULES = ['@fallbacks', '@media', '@supports'];

		var UnifiedSyntax = function () {
		function UnifiedSyntax() {
		(0, _classCallCheck3.default)(this, UnifiedSyntax);
		this.events = {};
		this.fontFaces = {};
		this.fontFacesCache = {};
		this.keyframes = {};
		this.keyframesCache = {};

		this.on('property', this.handleProperty).on('selector', this.handleSelector).on('@charset', this.handleCharset).on('@fallbacks', this.handleFallbacks).on('@font-face', this.handleFontFace).on('@global', this.handleGlobal).on('@import', this.handleImport).on('@keyframes', this.handleKeyframes).on('@media', this.handleMedia).on('@namespace', this.handleNamespace).on('@page', this.handlePage).on('@supports', this.handleSupports).on('@viewport', this.handleViewport);
		}

		(0, _createClass3.default)(UnifiedSyntax, [{
		key: 'checkBlock',
		value: function checkBlock(value) {
		if ((0, _isObject2.default)(value)) {
		return value;
		}

		throw new Error('Must be a style declaration.');
		}
		}, {
		key: 'convert',
		value: function convert(styleSheet) {
		var _this = this;

		var prevStyleSheet = (0, _extends3.default)({}, styleSheet);
		var nextStyleSheet = {};

		GLOBAL_RULES.forEach(function (rule) {
		if (!prevStyleSheet[rule]) {
		delete prevStyleSheet[rule];

		return;
		"use strict";
		/**
		* @copyright 2017-2019, Miles Johnson
		* @license https://opensource.org/licenses/MIT
		*/
		var __assign = (this && this.__assign) \|\| function () {
		__assign = Object.assign \|\| function(t) {
		for (var s, i = 1, n = arguments.length; i < n; i++) {
		s = arguments[i];
		for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
		t[p] = s[p];
		}

		switch (rule) {
		case '@charset':
		case '@namespace':
		{
		var path = prevStyleSheet[rule];

		if (typeof path === 'string') {
		_this.emit(rule, [nextStyleSheet, path]);
		} else if ("production" !== process.env.NODE_ENV) {
		throw new Error(rule + ' value must be a string.');
		}

		break;
		return t;
		};
		return __assign.apply(this, arguments);
		};
		var __importDefault = (this && this.__importDefault) \|\| function (mod) {
		return (mod && mod.__esModule) ? mod : { "default": mod };
		};
		Object.defineProperty(exports, "__esModule", { value: true });
		/* eslint-disable lines-between-class-members, no-dupe-class-members, complexity */
		var formatFontFace_1 = __importDefault(require("./helpers/formatFontFace"));
		var isObject_1 = __importDefault(require("./helpers/isObject"));
		var toArray_1 = __importDefault(require("./helpers/toArray"));
		var Sheet_1 = __importDefault(require("./Sheet"));
		var UnifiedSyntax = /** @class */ (function () {
		function UnifiedSyntax() {
		var _this = this;
		this.handlers = {};
		this.keyframesCount = 0;
		/**
		* Support keyframe objects within the `animationName` property.
		*/
		this.handleAnimationName = function (ruleset, value) {
		if (!value) {
		return undefined;
		}

		case '@import':
		{
		var paths = prevStyleSheet[rule];

		if (typeof paths === 'string' \|\| Array.isArray(paths)) {
		_this.emit(rule, [nextStyleSheet, paths]);
		} else if ("production" !== process.env.NODE_ENV) {
		throw new Error(rule + ' value must be a string, or an array of strings.');
		}

		break;
		return (Array.isArray(value) ? value : [value])
		.map(function (item) {
		if (typeof item === 'string') {
		return item;
		}
		var name = item.name \|\| "keyframe-" + (_this.keyframesCount += 1);
		_this.convertKeyframe(name, item, ruleset.root);
		return name;
		})
		.join(', ');
		};
		this.on('property:animationName', this.handleAnimationName);
		}
		/**
		* Convert at-rules within a global stylesheet.
		*/
		UnifiedSyntax.prototype.convertGlobalSheet = function (globalSheet) {
		var _this = this;
		var sheet = new Sheet_1.default();
		Object.keys(globalSheet).forEach(function (rule) {
		switch (rule) {
		case '@charset': {
		var path = globalSheet[rule];
		if (typeof path === 'string') {
		_this.emit('charset', [sheet, path]);
		}
		else if (process.env.NODE_ENV !== 'production') {
		throw new Error('@charset must be a string.');
		}
		break;
		}
		case '@font-face': {
		var faces_1 = globalSheet[rule] \|\| {};
		if (process.env.NODE_ENV !== 'production') {
		if (!isObject_1.default(faces_1)) {
		throw new Error('@font-face must be an object of font family names to font faces.');
		}
		}
		Object.keys(faces_1).forEach(function (fontFamily) {
		var srcPaths = [];
		var fontFaces = toArray_1.default(faces_1[fontFamily]).map(function (font) {
		srcPaths.push(font.srcPaths);
		return _this.convertRuleset(formatFontFace_1.default(__assign({}, font, { fontFamily: fontFamily })), sheet.createRuleset(fontFamily));
		});
		_this.emit('font-face', [sheet, fontFaces, fontFamily, srcPaths]);
		});
		break;
		}
		case '@global': {
		var globals_1 = globalSheet[rule] \|\| {};
		if (process.env.NODE_ENV !== 'production') {
		if (!isObject_1.default(globals_1)) {
		throw new Error('@global must be an object of selectors to ruleset objects.');
		}
		}
		Object.keys(globals_1).forEach(function (selector) {
		if (isObject_1.default(globals_1[selector])) {
		_this.emit('global', [
		sheet,
		selector,
		_this.convertRuleset(globals_1[selector], sheet.createRuleset(selector)),
		]);
		}
		else if (process.env.NODE_ENV !== 'production') {
		throw new Error("@global \"" + selector + "\" must be a ruleset object.");
		}
		});
		break;
		}
		case '@import': {
		var paths = globalSheet[rule];
		if (typeof paths === 'string' \|\| Array.isArray(paths)) {
		_this.emit('import', [sheet, toArray_1.default(paths).map(function (path) { return String(path); })]);
		}
		else if (process.env.NODE_ENV !== 'production') {
		throw new Error('@import must be a string or an array of strings.');
		}
		break;
		}
		case '@keyframes': {
		var frames_1 = globalSheet[rule] \|\| {};
		if (process.env.NODE_ENV !== 'production') {
		if (!isObject_1.default(frames_1)) {
		throw new Error('@keyframes must be an object of animation names to keyframes.');
		}
		}
		Object.keys(frames_1).forEach(function (animationName) {
		_this.convertKeyframe(animationName, frames_1[animationName], sheet);
		});
		break;
		}
		case '@page':
		case '@viewport': {
		var style = globalSheet[rule];
		if (isObject_1.default(style)) {
		_this.emit(rule.slice(1), [
		sheet,
		_this.convertRuleset(style, sheet.createRuleset(rule)),
		]);
		}
		else if (process.env.NODE_ENV !== 'production') {
		throw new Error(rule + " must be a ruleset object.");
		}
		break;
		}
		default: {
		if (process.env.NODE_ENV !== 'production') {
		throw new Error("Unknown property \"" + rule + "\". Only at-rules are allowed in the global stylesheet.");
		}
		}
		}

		case '@font-face':
		{
		var faces = prevStyleSheet['@font-face'];

		Object.keys(_this.checkBlock(faces)).forEach(function (fontFamily) {
		_this.fontFaces[fontFamily] = (0, _toArray2.default)(faces[fontFamily]).map(function (font) {
		return (0, _extends3.default)({}, font, {
		fontFamily: fontFamily
		});
		});

		_this.emit(rule, [nextStyleSheet, _this.fontFaces[fontFamily], fontFamily]);
		});

		break;
		});
		return sheet;
		};
		/**
		* Convert a mapping of unified rulesets to their native syntax.
		*/
		UnifiedSyntax.prototype.convertStyleSheet = function (styleSheet) {
		var _this = this;
		var sheet = new Sheet_1.default();
		Object.keys(styleSheet).forEach(function (selector) {
		var ruleset = styleSheet[selector];
		if (!ruleset) {
		return;
		}

		case '@global':
		{
		var globals = prevStyleSheet['@global'];

		Object.keys(_this.checkBlock(globals)).forEach(function (selector) {
		if ((0, _isObject2.default)(globals[selector])) {
		_this.emit(rule, [nextStyleSheet, _this.convertDeclaration(selector, globals[selector]), selector]);
		} else if ("production" !== process.env.NODE_ENV) {
		throw new Error('Invalid @global selector style declaration.');
		// At-rule
		if (selector.charAt(0) === '@') {
		if (process.env.NODE_ENV !== 'production') {
		throw new SyntaxError("At-rules may not be defined in the root, found \"" + selector + "\".");
		}
		});

		break;
		// Class name
		}

		case '@keyframes':
		{
		var frames = prevStyleSheet['@keyframes'];

		Object.keys(_this.checkBlock(frames)).forEach(function (animationName) {
		_this.keyframes[animationName] = _this.checkBlock(frames[animationName]);

		_this.emit(rule, [nextStyleSheet, _this.keyframes[animationName], animationName]);
		});

		break;
		else if (typeof ruleset === 'string') {
		sheet.addClassName(selector, ruleset);
		// Style object
		}

		case '@page':
		case '@viewport':
		{
		var style = prevStyleSheet[rule];

		if ((0, _isObject2.default)(style)) {
		_this.emit(rule, [nextStyleSheet, style]);
		} else if ("production" !== process.env.NODE_ENV) {
		throw new Error(rule + ' must be a style object.');
		}

		break;
		else if (isObject_1.default(ruleset)) {
		sheet.addRuleset(_this.convertRuleset(ruleset, sheet.createRuleset(selector)));
		// Unknown
		}

		default:
		break;
		else if (process.env.NODE_ENV !== 'production') {
		throw new Error("Invalid ruleset for \"" + selector + "\". Must be an object or class name.");
		}
		});
		return sheet;
		};
		/**
		* Convert a ruleset including local at-rules, blocks, and properties.
		*/
		UnifiedSyntax.prototype.convertRuleset = function (unifiedRuleset, ruleset) {
		var _this = this;
		if (process.env.NODE_ENV !== 'production') {
		if (!isObject_1.default(unifiedRuleset)) {
		throw new TypeError('Ruleset must be an object of properties.');
		}
		}

		delete prevStyleSheet[rule];
		});

		Object.keys(prevStyleSheet).forEach(function (selector) {
		var declaration = prevStyleSheet[selector];

		delete prevStyleSheet[selector];

		if (!declaration) {
		return;
		}

		if (selector.charAt(0) === '@') {
		if ("production" !== process.env.NODE_ENV) {
		throw new SyntaxError('Unsupported global at-rule "' + selector + '".');
		}
		} else if (typeof declaration === 'string') {
		nextStyleSheet[selector] = declaration;
		} else if ((0, _isObject2.default)(declaration)) {
		nextStyleSheet[selector] = _this.convertDeclaration(selector, declaration);
		} else if ("production" !== process.env.NODE_ENV) {
		throw new Error('Invalid style declaration for "' + selector + '".');
		}
		});

		return nextStyleSheet;
		}
		}, {
		key: 'convertDeclaration',
		value: function convertDeclaration(selector, declaration) {
		var _this2 = this;

		var prevDeclaration = (0, _extends3.default)({}, declaration);
		var nextDeclaration = {};

		Object.keys(prevDeclaration).forEach(function (key) {
		switch (key.charAt(0)) {
		case '@':
		return;

		case ':':
		case '>':
		case '[':
		{
		key.split(',').forEach(function (k) {
		_this2.emit('selector', [nextDeclaration, prevDeclaration[key], k.trim()]);
		});

		break;
		var atRules = [];
		Object.keys(unifiedRuleset).forEach(function (baseKey) {
		var key = baseKey;
		var value = unifiedRuleset[key];
		if (typeof value === 'undefined') {
		return;
		}

		default:
		_this2.emit('property', [nextDeclaration, prevDeclaration[key], key]);
		break;
		if (key.startsWith('@')) {
		atRules.push(key);
		}
		else if (key.startsWith(':') \|\| key.startsWith('[')) {
		_this.convertSelector(key, value, ruleset);
		}
		else {
		// @ts-ignore These events are internal only, so ignore the type issues
		var newValue = _this.emit("property:" + key, [ruleset, value]);
		_this.emit('property', [ruleset, key, newValue \|\| value]);
		}
		});
		// Process at-rule's after properties, as some at-rule's may require
		// a property or nested value to exist before modifying it.
		atRules.forEach(function (key) {
		switch (key) {
		case '@fallbacks': {
		var fallbacks_1 = unifiedRuleset[key] \|\| {};
		if (process.env.NODE_ENV !== 'production') {
		if (!isObject_1.default(fallbacks_1)) {
		throw new Error('@fallbacks must be an object of property names to fallback values.');
		}
		}
		Object.keys(fallbacks_1).forEach(function (property) {
		_this.emit('fallback', [
		ruleset,
		property,
		toArray_1.default(fallbacks_1[property]),
		]);
		});
		break;
		}
		case '@media':
		case '@supports': {
		var styles_1 = unifiedRuleset[key] \|\| {};
		if (process.env.NODE_ENV !== 'production') {
		if (!isObject_1.default(styles_1)) {
		throw new Error(key + " must be an object of queries to rulesets.");
		}
		}
		Object.keys(styles_1).forEach(function (query) {
		if (isObject_1.default(styles_1[query])) {
		var event_1 = key === '@media' ? 'media' : 'support';
		_this.emit(event_1, [
		ruleset,
		query,
		_this.convertRuleset(styles_1[query], ruleset.createRuleset(key + " " + query)),
		]);
		}
		else if (process.env.NODE_ENV !== 'production') {
		throw new Error(key + " " + query + " must be a mapping of conditions to style objects.");
		}
		});
		break;
		}
		case '@selectors': {
		var selectors_1 = unifiedRuleset[key] \|\| {};
		if (process.env.NODE_ENV !== 'production') {
		if (!isObject_1.default(selectors_1)) {
		throw new Error('@selectors must be an object of selectors to rulesets.');
		}
		}
		Object.keys(selectors_1).forEach(function (selector) {
		_this.convertSelector(selector, selectors_1[selector], ruleset);
		});
		break;
		}
		default: {
		if (process.env.NODE_ENV !== 'production') {
		throw new SyntaxError("Unsupported local at-rule \"" + key + "\".");
		}
		}
		}
		});
		return ruleset;
		};
		/**
		* Convert a nested selector ruleset by emitting the appropriate name.
		*/
		UnifiedSyntax.prototype.convertSelector = function (key, value, ruleset) {
		var _this = this;
		if (process.env.NODE_ENV !== 'production') {
		if (!isObject_1.default(value)) {
		throw new Error("Selector \"" + key + "\" must be a ruleset object.");
		}
		}

		delete prevDeclaration[key];
		});

		LOCAL_RULES.forEach(function (rule) {
		var style = prevDeclaration[rule];

		delete prevDeclaration[rule];

		if (!style \|\| !(0, _isObject2.default)(style)) {
		return;
		}

		if (rule === '@fallbacks') {
		Object.keys(style).forEach(function (property) {
		_this2.emit(rule, [nextDeclaration, (0, _toArray2.default)(style[property]), property]);
		});
		} else if (rule === '@media' \|\| rule === '@supports') {
		Object.keys(style).forEach(function (condition) {
		if ((0, _isObject2.default)(style[condition])) {
		_this2.emit(rule, [nextDeclaration, style[condition], condition]);
		} else if ("production" !== process.env.NODE_ENV) {
		throw new Error(rule + ' ' + condition + ' must be a mapping of conditions to style objects.');
		key.split(',').forEach(function (k) {
		var selector = k.trim();
		var type = 'selector';
		if (selector.charAt(0) === ':') {
		type = 'pseudo';
		}
		});
		}
		});

		if ("production" !== process.env.NODE_ENV) {
		Object.keys(prevDeclaration).forEach(function (key) {
		throw new SyntaxError('Unsupported local at-rule "' + key + '".');
		else if (selector.charAt(0) === '[') {
		type = 'attribute';
		}
		_this.emit(type, [
		ruleset,
		selector,
		_this.convertRuleset(value, ruleset.createRuleset(selector)),
		]);
		});
		}

		return nextDeclaration;
		}
		}, {
		key: 'createUnsupportedHandler',
		value: function createUnsupportedHandler(rule) {
		return function () {
		throw new Error('Adapter does not support "' + rule + '".');
		};
		}
		}, {
		key: 'emit',
		value: function emit(eventName, args) {
		if (this.events[eventName]) {
		var _events;

		(_events = this.events)[eventName].apply(_events, (0, _toConsumableArray3.default)(args));
		}

		return this;
		}
		}, {
		key: 'handleCharset',
		value: function handleCharset(styleSheet, style) {
		styleSheet['@charset'] = style;
		}
		}, {
		key: 'handleFallbacks',
		value: function handleFallbacks(declaration, style, property) {
		declaration[property] = [declaration[property]].concat((0, _toConsumableArray3.default)(style)).filter(Boolean);
		}
		}, {
		key: 'handleFontFace',
		value: function handleFontFace(styleSheet, style, fontFamily) {
		if (Array.isArray(styleSheet['@font-face'])) {
		var _styleSheet$FontFac;

		(_styleSheet$FontFac = styleSheet['@font-face']).push.apply(_styleSheet$FontFac, (0, _toConsumableArray3.default)(style));
		} else {
		styleSheet['@font-face'] = style;
		}
		}
		}, {
		key: 'handleGlobal',
		value: function handleGlobal(styleSheet, declaration, selector) {}
		}, {
		key: 'handleImport',
		value: function handleImport(styleSheet, style) {
		styleSheet['@import'] = style;
		}
		}, {
		key: 'handleKeyframes',
		value: function handleKeyframes(styleSheet, style, animationName) {
		styleSheet['@keyframes ' + animationName] = style;
		}
		}, {
		key: 'handleMedia',
		value: function handleMedia(declaration, style, condition) {
		declaration['@media ' + condition] = style;
		}
		}, {
		key: 'handleNamespace',
		value: function handleNamespace(styleSheet, style) {
		styleSheet['@namespace'] = style;
		}
		}, {
		key: 'handlePage',
		value: function handlePage(styleSheet, style) {
		styleSheet['@page'] = style;
		}
		}, {
		key: 'handleProperty',
		value: function handleProperty(declaration, style, property) {
		declaration[property] = style;
		}
		}, {
		key: 'handleSelector',
		value: function handleSelector(declaration, style, selector) {
		declaration[selector] = style;
		}
		}, {
		key: 'handleSupports',
		value: function handleSupports(declaration, style, condition) {
		declaration['@supports ' + condition] = style;
		}
		}, {
		key: 'handleViewport',
		value: function handleViewport(styleSheet, style) {
		styleSheet['@viewport'] = style;
		}
		}, {
		key: 'injectFontFaces',
		value: function injectFontFaces(value, cache) {
		var fontFaces = [];

		String(value).split(',').forEach(function (name) {
		var familyName = name.trim();
		var fonts = cache[familyName];

		if (Array.isArray(fonts)) {
		fonts.forEach(function (font) {
		fontFaces.push((0, _formatFontFace2.default)(font));
		});
		} else {
		fontFaces.push(familyName);
		};
		/**
		* Convert a unified syntax keyframes object to a ruleset.
		*/
		UnifiedSyntax.prototype.convertKeyframe = function (animationName, frames, sheet) {
		var _this = this;
		var keyframe = sheet.createRuleset(animationName);
		// from, to, and percent keys aren't easily detectable
		// when converting a ruleset. We also don't want adapters
		// to have to worry about it, so do it manually here.
		Object.keys(frames).forEach(function (key) {
		var value = frames[key];
		// Filter out "name" property
		if (typeof value !== 'string' && typeof value !== 'undefined') {
		keyframe.addNested(key, _this.convertRuleset(value, keyframe.createRuleset(key)));
		}
		});
		this.emit('keyframe', [sheet, keyframe, animationName]);
		};
		/**
		* Replace a `fontFamily` property with font face objects of the same name.
		*/
		UnifiedSyntax.prototype.injectFontFaces = function (value, cache) {
		var fontFaces = [];
		value.split(',').forEach(function (name) {
		var familyName = name.trim();
		var fonts = cache[familyName];
		if (Array.isArray(fonts)) {
		fontFaces.push.apply(fontFaces, fonts);
		}
		else {
		fontFaces.push(familyName);
		}
		});
		return fontFaces;
		};
		/**
		* Replace a `animationName` property with keyframe objects of the same name.
		*/
		UnifiedSyntax.prototype.injectKeyframes = function (value, cache) {
		return value.split(',').map(function (name) {
		var animationName = name.trim();
		return cache[animationName] \|\| animationName;
		});
		};
		UnifiedSyntax.prototype.emit = function (eventName, args) {
		var _a;
		if (this.handlers[eventName]) {
		return (_a = this.handlers)[eventName].apply(_a, args);
		}
		});

		return fontFaces;
		}
		}, {
		key: 'injectKeyframes',
		value: function injectKeyframes(value, cache) {
		return String(value).split(',').map(function (name) {
		var animationName = name.trim();

		return cache[animationName] \|\| animationName;
		});
		}
		}, {
		key: 'off',
		value: function off(eventName) {
		delete this.events[eventName];

		return this;
		}
		}, {
		key: 'on',
		value: function on(eventName, callback) {
		this.events[eventName] = callback;

		return this;
		}
		}]);
		return UnifiedSyntax;
		}();

		exports.default = UnifiedSyntax;
		return undefined;
		};
		/**
		* Delete an event listener.
		*/
		UnifiedSyntax.prototype.off = function (eventName) {
		delete this.handlers[eventName];
		return this;
		};
		UnifiedSyntax.prototype.on = function (eventName, callback) {
		this.handlers[eventName] = callback;
		return this;
		};
		return UnifiedSyntax;
		}());
		exports.default = UnifiedSyntax;

29

package.json

		{
		"name": "aesthetic",
		"version": "2.6.0",
		"version": "3.0.0-alpha.0",
		"description": "Aesthetic is a powerful React library for styling components through the use of adapters.",
		@@ -22,18 +22,25 @@ "keywords": [
		"license": "MIT",
		"scripts": {
		"build": "build-lib --react"
		"main": "./lib/index.js",
		"types": "./lib/index.d.ts",
		"publishConfig": {
		"access": "public"
		},
		"dependencies": {
		"babel-runtime": "^6.26.0",
		"hoist-non-react-statics": "^2.5.5",
		"lodash": "^4.17.10",
		"prop-types": "^15.6.2"
		"@types/hoist-non-react-statics": "^3.0.1",
		"@types/react": "^16.7.7",
		"@types/shallowequal": "^0.2.3",
		"@types/uuid": "^3.4.4",
		"csstype": "^2.5.7",
		"hoist-non-react-statics": "^3.1.0",
		"lodash": "^4.17.11",
		"shallowequal": "^1.1.0",
		"uuid": "^3.3.2"
		},
		"peerDependencies": {
		"react": "^15.0.0 \|\| ^16.0.0"
		"react": "^16.3.0"
		},
		"devDependencies": {
		"@milesj/build-tool-config": "^0.50.0",
		"react": "^16.4.1"
		}
		"react": "^16.6.3"
		},
		"gitHead": "f0862dad56c2f32e3ce7fcf689e4f256dc1e700c"
		}

31

README.md

		@@ -5,13 +5,12 @@ # Aesthetic

		Aesthetic is a powerful React library for styling components, whether it be CSS-in-JS
		using style objects, importing stylesheets, or simply referencing external class names.
		Simply put, Aesthetic is an abstraction layer that utilizes higher-order-components for
		the compilation of styles via third-party libraries, all the while providing customizability,
		theming, and a unified syntax.
		Aesthetic is a powerful React library for styling components, whether it be CSS-in-JS using style
		objects, importing stylesheets, or simply referencing external class names. Simply put, Aesthetic is
		an abstraction layer that utilizes higher-order-components for the compilation of styles via
		third-party libraries, all the while providing customizability, theming, and a unified syntax.

		```javascript
		import React from "react";
		import PropTypes from "prop-types";
		import { StylesPropType } from "aesthetic";
		import withStyles, { classes } from "../path/to/styler";
		import React from 'react';
		import PropTypes from 'prop-types';
		import { StylesPropType } from 'aesthetic';
		import withStyles, { classes } from '../path/to/styler';

		@@ -27,4 +26,4 @@ function Button({ children, styles }) {
		Button.propTypes = {
		children: PropTypes.node.isRequire,
		styles: StylesPropType.isRequired
		children: PropTypes.node.isRequired,
		styles: StylesPropType.isRequired,
		};
		@@ -34,6 +33,6 @@
		button: {
		textAlign: "center",
		display: "inline-block",
		padding: unit
		}
		textAlign: 'center',
		display: 'inline-block',
		padding: unit,
		},
		}))(Button);
		@@ -44,3 +43,3 @@ ```

		- React 15/16+
		- React 16.3+
		- IE 10+
		@@ -47,0 +46,0 @@ - `WeakMap`

aesthetic.js.flow

esm/Adapter.js

esm/Aesthetic.js

esm/ClassNameAdapter.js

esm/createStyler.js

esm/helpers/createStyleElement.js

esm/helpers/formatFontFace.js

esm/helpers/isObject.js

esm/helpers/stripClassPrefix.js

esm/helpers/toArray.js

esm/index.js

esm/style.js

esm/ThemeProvider.js

esm/UnifiedSyntax.js

index.js

lib/Adapter.js

lib/ClassNameAdapter.js

lib/createStyler.js

lib/helpers/createStyleElement.js

lib/style.js

lib/ThemeProvider.js

src/Adapter.js

src/Aesthetic.js

src/ClassNameAdapter.js

src/createStyler.js

src/helpers/createStyleElement.js

src/helpers/formatFontFace.js

src/helpers/isObject.js

src/helpers/stripClassPrefix.js

src/helpers/toArray.js

src/index.js

src/style.js

src/ThemeProvider.js

src/UnifiedSyntax.js

unified.js

aesthetic - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics

Dependency changes