aesthetic - npm Package Compare versions

Comparing version 3.5.1 to 4.0.0-alpha.0

CHANGELOG.md

@@ -0,1 +1,41 @@
+# 4.0.0
+
+To support right-to-left, dynamic themes, and other frameworks besides React, the core APIs had to
+slightly change.
+
+[View the migration guide!](https://github.com/milesj/aesthetic/blob/master/docs/migrate/4.0.md)
+
+#### 💥 Breaking
+
+- React hooks, HOCs, and types have moved to the new
+  [aesthetic-react](https://github.com/milesj/aesthetic/tree/master/packages/react) package.
+- Updated `Aesthetic#transformStyles` to require all styles as an array in the 1st argument, instead
+  of being spread across all arguments.
+- Updated `Aesthetic#transformToClassName` to only be passed the parsed blocks and not the native
+  adapter blocks.
+- Renamed `Aesthetic#setStyleSheet` to `registerStyleSheet`.
+- Renamed `Aesthetic#processStyleSheet` to `parseStyleSheet`.
+
+#### 🚀 Updates
+
+- Added built-in RTL support for _all_ adapters!
+- Added a `cxPropName` option to `Aesthetic`.
+- Added a `rtl` option to `Aesthetic`.
+- Added `Aesthetic#changeTheme`, so that the theme can be dynamically changed without having to
+  refresh the page (integration dependent).
+- Added `Aesthetic#isParsedBlock` for determining whether a style block is native or parsed.
+- Added `Aesthetic#isRTL` for determining if a direction is right-to-left.
+- Added `Aesthetic#purgeStyles`, so that adapters can clear their style sheets.
+- Added `getFlushedStyles`, `getStyleElements`, and `purgeStyles` helper functions.
+- Added an options object to `Aesthetic#createStyleSheet`, `Aeshetic#transformStyles`,
+  `UnifiedSyntax#convertGlobalSheet`, `UnifiedSyntax#convertStyleSheet`, and `Sheet`.
+- Updated `Aeshetic#transformStyles` to convert native blocks to parsed blocks before transforming
+  to CSS class names.
+- Updated `Sheet` (and `Ruleset`) to convert CSS properties to RTL when the direction option is
+  enabled.
+
+#### 🛠 Internals
+
+- Moved `@types` dependencies to development only.
+
 ## 3.5.0 - 2019-04-28
@@ -2,0 +42,0 @@

esm/Aesthetic.js

@@ -1,7 +0,1 @@
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
-
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -11,8 +5,7 @@
 
-import React, { useState, useLayoutEffect } from 'react';
+import deepMerge from 'extend';
 import uuid from 'uuid/v4';
-import hoistNonReactStatics from 'hoist-non-react-statics';
-import deepMerge from 'extend';
 import isObject from './helpers/isObject';
 import stripClassPrefix from './helpers/stripClassPrefix';
+import Sheet from './Sheet';
 import StyleSheetManager from './StyleSheetManager';
@@ -23,4 +16,2 @@ import UnifiedSyntax from './UnifiedSyntax';
   function Aesthetic(options) {
-    var _this = this;
-
     if (options === void 0) {
@@ -48,37 +39,8 @@ options = {};
 
-    _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, 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 = _extends({
+      cxPropName: 'cx',
       extendable: false,
       passThemeProp: false,
       pure: true,
+      rtl: false,
       stylesPropName: 'styles',
@@ -89,2 +51,3 @@ theme: 'default',
     this.syntax = new UnifiedSyntax();
+    document.documentElement.setAttribute('dir', this.options.rtl ? 'rtl' : 'ltr');
   }
@@ -94,3 +57,3 @@
 
-  _proto.applyGlobalStyles = function applyGlobalStyles() {
+  _proto.applyGlobalStyles = function applyGlobalStyles(baseOptions) {
     if (this.appliedGlobals) {
@@ -100,2 +63,3 @@ return this;
 
+    var options = this.getDefaultTransformOptions(baseOptions);
     var globalDef = this.globals[this.options.theme];
@@ -105,8 +69,4 @@ 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);
+      var sheet = this.parseStyleSheet(this.syntax.convertGlobalSheet(globalSheet, options).toObject(), ':root');
+      this.transformStyles(Object.values(sheet), options);
     }
@@ -119,3 +79,16 @@
 
-  _proto.createStyleSheet = function createStyleSheet(styleName) {
+  _proto.changeTheme = function changeTheme(themeName) {
+    this.getTheme(themeName);
+    this.options.theme = themeName;
+    this.purgeStyles();
+    this.getStyleSheetManager().purgeStyles();
+    this.cache = {};
+    this.appliedGlobals = false;
+    this.applyGlobalStyles({
+      rtl: this.options.rtl
+    });
+    return this;
+  };
+
+  _proto.createStyleSheet = function createStyleSheet(styleName, baseOptions) {
     if (this.cache[styleName]) {
@@ -125,6 +98,9 @@ return this.cache[styleName];
 
-    this.applyGlobalStyles();
-    var baseSheet = this.syntax.convertStyleSheet(this.getStyleSheet(styleName), styleName);
-    var styleSheet = this.processStyleSheet(baseSheet.toObject(), styleName);
-    this.cache[styleName] = _extends({}, styleSheet, baseSheet.classNames);
+    this.applyGlobalStyles(baseOptions);
+    var options = this.getDefaultTransformOptions(baseOptions);
+    var nativeSheet = this.syntax.convertStyleSheet(this.getStyleSheet(styleName), _extends({}, options, {
+      name: styleName
+    }));
+    var parsedSheet = this.parseStyleSheet(nativeSheet.toObject(), styleName);
+    this.cache[styleName] = _extends({}, parsedSheet, nativeSheet.classNames);
     return this.cache[styleName];
@@ -134,4 +110,4 @@ };
   _proto.extendStyles = function extendStyles() {
-    for (var _len2 = arguments.length, styleSheets = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      styleSheets[_key2] = arguments[_key2];
+    for (var _len = arguments.length, styleSheets = new Array(_len), _key = 0; _key < _len; _key++) {
+      styleSheets[_key] = arguments[_key];
     }
@@ -157,200 +133,130 @@
 
-  _proto.registerTheme = function registerTheme(themeName, theme, globalSheet) {
-    if (globalSheet === void 0) {
-      globalSheet = null;
-    }
+  _proto.getStyleSheet = function getStyleSheet(styleName) {
+    var parentStyleName = this.parents[styleName];
+    var styleDef = this.styles[styleName];
+    var styleSheet = styleDef(this.getTheme());
 
-    if ("production" !== process.env.NODE_ENV) {
-      if (this.themes[themeName]) {
-        throw new Error("Theme \"" + themeName + "\" already exists.");
-      } else if (!isObject(theme)) {
-        throw new TypeError("Theme \"" + themeName + "\" must be a style object.");
-      }
+    if (parentStyleName) {
+      return deepMerge(true, {}, this.getStyleSheet(parentStyleName), styleSheet);
     }
 
-    this.themes[themeName] = theme;
-    this.globals[themeName] = this.validateDefinition(themeName, globalSheet, this.globals);
-    return this;
+    return styleSheet;
   };
 
-  _proto.useStyles = function useStyles(styleSheet, customName) {
-    var _this2 = this;
+  _proto.getTheme = function getTheme(name) {
+    var themeName = name || this.options.theme;
+    var theme = this.themes[themeName];
 
-    if (customName === void 0) {
-      customName = 'Component';
+    if ("production" !== process.env.NODE_ENV) {
+      if (!theme || !isObject(theme)) {
+        throw new Error("Theme \"" + themeName + "\" does not exist.");
+      }
     }
 
-    var _useState = useState(function () {
-      var name = customName + "-" + uuid();
+    return theme;
+  };
 
-      _this2.setStyleSheet(name, styleSheet);
-
-      return name;
-    }),
-        styleName = _useState[0];
-
-    var sheet = this.createStyleSheet(styleName);
-    useLayoutEffect(function () {
-      _this2.flushStyles(styleName);
-    }, [styleName]);
-    return [sheet, this.transformStyles, styleName];
+  _proto.isParsedBlock = function isParsedBlock(block) {
+    return isObject(block);
   };
 
-  _proto.useTheme = function useTheme() {
-    return this.getTheme();
+  _proto.parseStyleSheet = function parseStyleSheet(styleSheet, styleName) {
+    return _extends({}, styleSheet);
   };
 
-  _proto.withStyles = function withStyles(styleSheet, options) {
-    if (options === void 0) {
-      options = {};
-    }
+  _proto.purgeStyles = function purgeStyles() {};
 
-    var aesthetic = this;
-    var _options = options,
-        _options$extendable = _options.extendable,
-        extendable = _options$extendable === void 0 ? this.options.extendable : _options$extendable,
-        _options$extendFrom = _options.extendFrom,
-        extendFrom = _options$extendFrom === void 0 ? '' : _options$extendFrom,
-        _options$passThemePro = _options.passThemeProp,
-        passThemeProp = _options$passThemePro === void 0 ? this.options.passThemeProp : _options$passThemePro,
-        _options$pure = _options.pure,
-        pure = _options$pure === void 0 ? this.options.pure : _options$pure,
-        _options$stylesPropNa = _options.stylesPropName,
-        stylesPropName = _options$stylesPropNa === void 0 ? this.options.stylesPropName : _options$stylesPropNa,
-        _options$themePropNam = _options.themePropName,
-        themePropName = _options$themePropNam === void 0 ? this.options.themePropName : _options$themePropNam;
-    return function withStylesFactory(WrappedComponent) {
-      var baseName = WrappedComponent.displayName || WrappedComponent.name;
-      var styleName = baseName + "-" + uuid();
-      var Component = pure ? React.PureComponent : React.Component;
-      aesthetic.setStyleSheet(styleName, styleSheet, extendFrom);
-
-      var WithStyles = function (_Component) {
-        _inheritsLoose(WithStyles, _Component);
-
-        function WithStyles() {
-          var _this3;
-
-          for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-            args[_key3] = arguments[_key3];
-          }
-
-          _this3 = _Component.call.apply(_Component, [this].concat(args)) || this;
-
-          _defineProperty(_assertThisInitialized(_this3), "state", {
-            styles: aesthetic.createStyleSheet(styleName)
-          });
-
-          return _this3;
+  _proto.registerStyleSheet = function registerStyleSheet(styleName, styleSheet, extendFrom) {
+    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.');
         }
+      }
 
-        WithStyles.extendStyles = function extendStyles(customStyleSheet, extendOptions) {
-          if (extendOptions === void 0) {
-            extendOptions = {};
-          }
+      this.parents[styleName] = extendFrom;
+    }
 
-          if ("production" !== process.env.NODE_ENV) {
-            if (!extendable) {
-              throw new Error(baseName + " is not extendable.");
-            }
-          }
+    this.styles[styleName] = this.validateDefinition(styleName, styleSheet, this.styles);
+    return this;
+  };
 
-          return aesthetic.withStyles(customStyleSheet, _extends({}, options, extendOptions, {
-            extendFrom: styleName
-          }))(WrappedComponent);
-        };
+  _proto.registerTheme = function registerTheme(themeName, theme, globalSheet) {
+    if (globalSheet === void 0) {
+      globalSheet = null;
+    }
 
-        var _proto2 = WithStyles.prototype;
+    if ("production" !== process.env.NODE_ENV) {
+      if (this.themes[themeName]) {
+        throw new Error("Theme \"" + themeName + "\" already exists.");
+      } else if (!isObject(theme)) {
+        throw new TypeError("Theme \"" + themeName + "\" must be a style object.");
+      }
+    }
 
-        _proto2.componentDidMount = function componentDidMount() {
-          aesthetic.flushStyles(styleName);
-        };
-
-        _proto2.render = function render() {
-          var _extraProps;
-
-          var _this$props = this.props,
-              wrappedRef = _this$props.wrappedRef,
-              props = _objectWithoutPropertiesLoose(_this$props, ["wrappedRef"]);
-
-          var extraProps = (_extraProps = {}, _extraProps[stylesPropName] = this.state.styles, _extraProps.ref = wrappedRef, _extraProps);
-
-          if (passThemeProp) {
-            extraProps[themePropName] = aesthetic.getTheme();
-          }
-
-          return React.createElement(WrappedComponent, _extends({}, props, extraProps));
-        };
-
-        return WithStyles;
-      }(Component);
-
-      _defineProperty(WithStyles, "displayName", "withStyles(" + baseName + ")");
-
-      _defineProperty(WithStyles, "styleName", styleName);
-
-      _defineProperty(WithStyles, "WrappedComponent", WrappedComponent);
-
-      hoistNonReactStatics(WithStyles, WrappedComponent);
-      return WithStyles;
-    };
+    this.themes[themeName] = theme;
+    this.globals[themeName] = this.validateDefinition(themeName, globalSheet, this.globals);
+    return this;
   };
 
-  _proto.withTheme = function withTheme(options) {
-    if (options === void 0) {
-      options = {};
-    }
+  _proto.transformStyles = function transformStyles(styles, baseOptions) {
+    var _this = this;
 
-    var aesthetic = this;
-    var _options2 = options,
-        _options2$pure = _options2.pure,
-        pure = _options2$pure === void 0 ? this.options.pure : _options2$pure,
-        _options2$themePropNa = _options2.themePropName,
-        themePropName = _options2$themePropNa === void 0 ? this.options.themePropName : _options2$themePropNa;
-    return function withThemeFactory(WrappedComponent) {
-      var baseName = WrappedComponent.displayName || WrappedComponent.name;
-      var Component = pure ? React.PureComponent : React.Component;
+    var options = this.getDefaultTransformOptions(baseOptions);
+    var classNames = [];
+    var nativeBlocks = [];
+    var parsedBlocks = [];
+    var inlineName = '';
+    styles.forEach(function (style) {
+      if (!style) {
+        return;
+      }
 
-      var WithTheme = function (_Component2) {
-        _inheritsLoose(WithTheme, _Component2);
-
-        function WithTheme() {
-          return _Component2.apply(this, arguments) || this;
+      if (typeof style === 'string') {
+        classNames.push.apply(classNames, String(style).split(' ').map(function (s) {
+          return stripClassPrefix(s).trim();
+        }));
+      } else if (isObject(style)) {
+        if (_this.isParsedBlock(style)) {
+          parsedBlocks.push(style);
+        } else {
+          nativeBlocks.push(style);
         }
+      } else if ("production" !== process.env.NODE_ENV) {
+        throw new Error('Unsupported style type to transform.');
+      }
+    });
 
-        var _proto3 = WithTheme.prototype;
+    if (nativeBlocks.length > 0) {
+      var nativeSheet = new Sheet(options);
+      var counter = 0;
+      inlineName = uuid();
+      nativeBlocks.forEach(function (block) {
+        nativeSheet.addRuleset(nativeSheet.createRuleset("inline-" + counter).addProperties(block));
+        counter += 1;
+      });
+      parsedBlocks.push.apply(parsedBlocks, Object.values(this.parseStyleSheet(nativeSheet.toObject(), inlineName)));
+    }
 
-        _proto3.render = function render() {
-          var _extraProps2;
+    if (parsedBlocks.length > 0) {
+      classNames.push(this.transformToClassName(parsedBlocks));
+    }
 
-          var _this$props2 = this.props,
-              wrappedRef = _this$props2.wrappedRef,
-              props = _objectWithoutPropertiesLoose(_this$props2, ["wrappedRef"]);
+    if (inlineName) {
+      this.flushStyles(inlineName);
+    }
 
-          var extraProps = (_extraProps2 = {}, _extraProps2[themePropName] = aesthetic.getTheme(), _extraProps2.ref = wrappedRef, _extraProps2);
-          return React.createElement(WrappedComponent, _extends({}, props, extraProps));
-        };
-
-        return WithTheme;
-      }(Component);
-
-      _defineProperty(WithTheme, "displayName", "withTheme(" + baseName + ")");
-
-      _defineProperty(WithTheme, "WrappedComponent", WrappedComponent);
-
-      hoistNonReactStatics(WithTheme, WrappedComponent);
-      return WithTheme;
-    };
+    return classNames.join(' ').trim();
   };
 
-  _proto.getStyleSheet = 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);
+  _proto.getDefaultTransformOptions = function getDefaultTransformOptions(baseOptions) {
+    if (baseOptions === void 0) {
+      baseOptions = {};
     }
 
-    return styleSheet;
+    return {
+      rtl: typeof baseOptions.rtl === 'undefined' ? this.options.rtl : baseOptions.rtl
+    };
   };
@@ -367,44 +273,2 @@
 
-  _proto.getTheme = function getTheme(customTheme) {
-    if (customTheme === void 0) {
-      customTheme = '';
-    }
-
-    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 \"" + themeName + "\" does not exist.");
-      }
-    }
-
-    return theme;
-  };
-
-  _proto.processStyleSheet = function processStyleSheet(styleSheet, styleName) {
-    return _extends({}, styleSheet);
-  };
-
-  _proto.setStyleSheet = function setStyleSheet(styleName, styleSheet, extendFrom) {
-    if (extendFrom === void 0) {
-      extendFrom = '';
-    }
-
-    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.parents[styleName] = extendFrom;
-    }
-
-    this.styles[styleName] = this.validateDefinition(styleName, styleSheet, this.styles);
-    return this;
-  };
-
   _proto.validateDefinition = function validateDefinition(key, value, cache) {
@@ -411,0 +275,0 @@ if ("production" !== process.env.NODE_ENV) {

esm/helpers/toObjectRecursive.js

 export default function toObjectRecursive(map) {
   var object = {};
-  Object.keys(map).forEach(function (key) {
-    object[key] = map[key].toObject();
-  });
+
+  if (map instanceof Map) {
+    map.forEach(function (obj, key) {
+      object[key] = obj.toObject();
+    });
+  } else {
+    Object.keys(map).forEach(function (key) {
+      object[key] = map[key].toObject();
+    });
+  }
+
   return object;
 }

esm/index.js

@@ -10,4 +10,8 @@ /**
 import Sheet from './Sheet';
-export { AestheticOptions, ClassNameAesthetic, UnifiedSyntax, Ruleset, Sheet };
+import getFlushedStyles from './helpers/getFlushedStyles';
+import getStyleElements from './helpers/getStyleElements';
+import purgeStyles from './helpers/purgeStyles';
+import isRTL from './helpers/isRTL';
 export * from './types';
+export { AestheticOptions, ClassNameAesthetic, UnifiedSyntax, Ruleset, Sheet, getFlushedStyles, getStyleElements, isRTL, purgeStyles };
 export default Aesthetic;

esm/Ruleset.js

@@ -0,3 +1,6 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+import convertRTL from 'rtl-css-js';
 import toObjectRecursive from './helpers/toObjectRecursive';
@@ -11,4 +14,6 @@
 
-    _defineProperty(this, "nested", {});
+    _defineProperty(this, "compoundProperties", new Map());
 
+    _defineProperty(this, "nested", new Map());
+
     _defineProperty(this, "parent", null);
@@ -29,2 +34,7 @@
 
+  _proto.addCompoundProperty = function addCompoundProperty(key, value) {
+    this.compoundProperties.set(key, value);
+    return this;
+  };
+
   _proto.addNested = function addNested(selector, ruleset, merge) {
@@ -35,6 +45,6 @@ if (merge === void 0) {
 
-    if (merge && this.nested[selector]) {
-      this.nested[selector].merge(ruleset);
+    if (merge && this.nested.has(selector)) {
+      this.nested.get(selector).merge(ruleset);
     } else {
-      this.nested[selector] = ruleset;
+      this.nested.set(selector, ruleset);
     }
@@ -50,2 +60,7 @@
 
+  _proto.addProperties = function addProperties(properties) {
+    Object.assign(this.properties, properties);
+    return this;
+  };
+
   _proto.createRuleset = function createRuleset(selector) {
@@ -59,4 +74,4 @@ return new Ruleset(selector, this.root, this);
     Object.assign(this.properties, ruleset.properties);
-    Object.keys(ruleset.nested).forEach(function (selector) {
-      _this.addNested(selector, ruleset.nested[selector]);
+    ruleset.nested.forEach(function (nested, selector) {
+      _this.addNested(selector, nested);
     });
@@ -67,3 +82,8 @@ return this;
   _proto.toObject = function toObject() {
-    return Object.assign({}, this.properties, toObjectRecursive(this.nested));
+    var props = this.root.options.rtl ? convertRTL(this.properties) : this.properties;
+    var compounds = {};
+    this.compoundProperties.forEach(function (compound, key) {
+      compounds[key] = compound;
+    });
+    return _extends({}, props, compounds, toObjectRecursive(this.nested));
   };
@@ -70,0 +90,0 @@

esm/Sheet.js

@@ -9,3 +9,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 var Sheet = function () {
-  function Sheet() {
+  function Sheet(options) {
+    if (options === void 0) {
+      options = {};
+    }
+
     _defineProperty(this, "atRules", {});
@@ -15,3 +19,7 @@
 
+    _defineProperty(this, "options", void 0);
+
     _defineProperty(this, "ruleSets", {});
+
+    this.options = options;
   }
@@ -40,2 +48,6 @@
 
+  _proto.createSheet = function createSheet(options) {
+    return new Sheet(options || this.options);
+  };
+
   _proto.toObject = function toObject() {
@@ -42,0 +54,0 @@ var _this = this;

esm/StyleSheetManager.js

 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+import _getFlushedStyles from './helpers/getFlushedStyles';
+import _purgeStyles from './helpers/purgeStyles';
+
 var StyleSheetManager = function () {
@@ -19,6 +22,4 @@ function StyleSheetManager() {
 
-  _proto.getInjectedStyles = function getInjectedStyles() {
-    return (this.element.textContent || '') + Array.from(this.sheet.cssRules).map(function (rule) {
-      return rule.cssText;
-    }).join('');
+  _proto.getFlushedStyles = function getFlushedStyles() {
+    return _getFlushedStyles(this.element);
   };
@@ -36,2 +37,8 @@
 
+  _proto.purgeStyles = function purgeStyles() {
+    _purgeStyles(this.element);
+
+    return this;
+  };
+
   return StyleSheetManager;
@@ -38,0 +45,0 @@ }();

esm/testUtils.js

 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-export function cleanStyles(source) {
-  return source.replace(/\n/g, '').replace(/[\t-\r \xA0\u1680\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF]{2,}/g, '');
+function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
+
+import convertRTL from 'rtl-css-js';
+import Aesthetic from './Aesthetic';
+import getBaseFlushedStyles from './helpers/getFlushedStyles';
+import getStyleElements from './helpers/getStyleElements';
+import isObject from './helpers/isObject';
+export { getStyleElements };
+export var TestAesthetic = function (_Aesthetic) {
+  _inheritsLoose(TestAesthetic, _Aesthetic);
+
+  function TestAesthetic() {
+    return _Aesthetic.apply(this, arguments) || this;
+  }
+
+  var _proto = TestAesthetic.prototype;
+
+  _proto.transformToClassName = function transformToClassName(styles) {
+    return styles.map(function (style, i) {
+      return "class-" + i;
+    }).join(' ');
+  };
+
+  return TestAesthetic;
+}(Aesthetic);
+export function registerTestTheme(aesthetic) {
+  aesthetic.registerTheme('default', {
+    color: 'black',
+    unit: 8
+  }, function (_ref) {
+    var unit = _ref.unit;
+    return {
+      '@global': {
+        body: {
+          padding: unit
+        }
+      }
+    };
+  });
+  aesthetic.extendTheme('light', 'default', {});
+  aesthetic.extendTheme('dark', 'default', {});
 }
+export function cleanupStyleElements() {
+  getStyleElements().forEach(function (style) {
+    style.remove();
+  });
+}
+export function getFlushedStyles(namespace) {
+  return getBaseFlushedStyles(getStyleElements(namespace));
+}
+export function convertDirection(value, dir) {
+  if (dir !== 'rtl') {
+    return value;
+  }
+
+  if (Array.isArray(value)) {
+    return value.map(function (object) {
+      return convertDirection(object, dir);
+    });
+  }
+
+  if (!isObject(value)) {
+    return value;
+  }
+
+  var props = {};
+  var nested = {};
+  Object.keys(value).forEach(function (key) {
+    var prop = value[key];
+
+    if (isObject(prop) || Array.isArray(prop)) {
+      nested[key] = convertDirection(prop, dir);
+    } else {
+      props[key] = prop;
+    }
+  });
+  return _extends({}, convertRTL(props), nested);
+}
+export function renderAndExpect(aesthetic, styleSheet, expectedStyles, _ref2) {
+  if (expectedStyles === void 0) {
+    expectedStyles = {};
+  }
+
+  var dir = _ref2.dir,
+      _ref2$global = _ref2.global,
+      global = _ref2$global === void 0 ? false : _ref2$global;
+  var name = aesthetic.constructor.name.replace('Aesthetic', '').toLowerCase();
+  var options = {
+    name: name,
+    rtl: dir === 'rtl'
+  };
+  var convertedSheet = global ? aesthetic.syntax.convertGlobalSheet(styleSheet, options).toObject() : aesthetic.syntax.convertStyleSheet(styleSheet, options).toObject();
+  var parsedSheet = aesthetic.parseStyleSheet(convertedSheet, name);
+  var className = aesthetic.transformStyles(Object.values(parsedSheet), options);
+  aesthetic.flushStyles(name);
+  expect(convertedSheet).toEqual(convertDirection(expectedStyles, dir));
+  expect(getFlushedStyles()).toMatchSnapshot();
+  expect(className).toMatchSnapshot();
+}
+export var TEST_CLASS_NAMES = {
+  footer: '.footer',
+  header: '.header'
+};
+export var TEST_STATEMENT = {
+  footer: {
+    color: 'blue'
+  },
+  header: {
+    color: 'red'
+  }
+};
+export var DIRECTIONS = ['ltr', 'rtl'];
 export var FONT_ROBOTO = {
@@ -71,15 +180,11 @@ fontFamily: 'Roboto',
   '0%': {
-    opacity: 0
+    left: '0%'
   },
   '50%': {
-    opacity: 0.5
+    left: '50%'
   },
   '100%': {
-    opacity: 1
+    left: '100%'
   }
 };
-export var TEST_CLASS_NAMES = {
-  header: '.header',
-  footer: '.footer'
-};
 export var SYNTAX_UNIFIED_LOCAL = {
@@ -98,3 +203,3 @@ button: {
     textDecoration: 'none',
-    textAlign: 'center',
+    textAlign: 'left',
     backgroundColor: '#337ab7',
@@ -157,6 +262,6 @@ verticalAlign: 'middle',
 export var SYNTAX_IMPORT = {
-  '@import': './some/path.css'
+  '@import': 'url("./some/path.css")'
 };
 export var SYNTAX_IMPORT_MULTIPLE = {
-  '@import': ['./some/path.css', './another/path.css']
+  '@import': ['url("./some/path.css")', 'url("./another/path.css")']
 };
@@ -245,8 +350,11 @@ export var SYNTAX_FALLBACKS = {
     color: 'red',
+    paddingLeft: 10,
     '@media': {
       '(min-width: 300px)': {
-        color: 'blue'
+        color: 'blue',
+        paddingLeft: 15
       },
       '(max-width: 1000px)': {
-        color: 'green'
+        color: 'green',
+        paddingLeft: 20
       }
@@ -296,3 +404,4 @@ }
     display: 'inline',
-    margin: 10
+    marginRight: 10,
+    padding: 0
   }
@@ -331,3 +440,3 @@ };
 export var SYNTAX_RAW_CSS = {
-  button: "\n    display: 'block';\n    font-size: 16px;\n\n    &:hover {\n      color: 'red';\n    }\n\n    & {\n      vertical-align: 'middle';\n    }\n\n    @media (max-width: 600px) {\n      display: 'none';\n    }\n\n    @supports (display: flex) {\n      display: 'flex';\n    }\n  "
+  button: "\n    display: 'block';\n    font-size: 16px;\n    text-align: 'left';\n\n    &:hover {\n      color: 'red';\n    }\n\n    & {\n      vertical-align: 'middle';\n    }\n\n    @media (max-width: 600px) {\n      display: 'none';\n    }\n\n    @supports (display: flex) {\n      display: 'flex';\n    }\n  "
 };

esm/UnifiedSyntax.js

@@ -6,2 +6,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import Stylis from 'stylis';
+import { convertProperty } from 'rtl-css-js/core';
 import formatFontFace from './helpers/formatFontFace';
@@ -14,2 +15,21 @@ import isObject from './helpers/isObject';
 
+function rtlPlugin(context, content) {
+  if (context !== 1) {
+    return undefined;
+  }
+
+  var _content$split = content.split(':', 2),
+      rawKey = _content$split[0],
+      rawValue = _content$split[1];
+
+  var isQuoted = rawValue.trim().startsWith("'");
+  var unquotedValue = isQuoted ? rawValue.slice(1).slice(0, -1) : rawValue;
+
+  var _convertProperty = convertProperty(rawKey.trim(), unquotedValue.trim()),
+      key = _convertProperty.key,
+      value = _convertProperty.value;
+
+  return key + ":" + (isQuoted ? "'" + value + "'" : value);
+}
+
 var UnifiedSyntax = function () {
@@ -23,4 +43,2 @@ function UnifiedSyntax() {
 
-    _defineProperty(this, "stylis", void 0);
-
     _defineProperty(this, "handleAnimationName", function (ruleset, value) {
@@ -79,8 +97,2 @@ if (!value) {
     this.on('property:fontFamily', this.handleFontFamily);
-    this.stylis = new Stylis({
-      compress: !("production" !== process.env.NODE_ENV),
-      global: false,
-      keyframe: true,
-      prefix: true
-    });
   }
@@ -90,6 +102,6 @@
 
-  _proto.convertGlobalSheet = function convertGlobalSheet(globalSheet) {
+  _proto.convertGlobalSheet = function convertGlobalSheet(globalSheet, options) {
     var _this2 = this;
 
-    var sheet = new Sheet();
+    var sheet = new Sheet(options);
     Object.keys(globalSheet).forEach(function (rule) {
@@ -99,6 +111,6 @@ switch (rule) {
           {
-            var path = globalSheet[rule];
+            var _charset = globalSheet[rule];
 
-            if (typeof path === 'string') {
-              _this2.emit('charset', [sheet, path]);
+            if (typeof _charset === 'string') {
+              _this2.emit('charset', [sheet, _charset]);
             } else if ("production" !== process.env.NODE_ENV) {
@@ -203,6 +215,6 @@ throw new Error('@charset must be a string.');
 
-  _proto.convertStyleSheet = function convertStyleSheet(styleSheet, styleName) {
+  _proto.convertStyleSheet = function convertStyleSheet(styleSheet, options) {
     var _this3 = this;
 
-    var sheet = new Sheet();
+    var sheet = new Sheet(options);
     Object.keys(styleSheet).forEach(function (selector) {
@@ -223,3 +235,3 @@ var ruleset = styleSheet[selector];
         } else {
-          sheet.addClassName(selector, _this3.convertRawCss(styleName, selector, ruleset));
+          sheet.addClassName(selector, _this3.convertRawCss(sheet, selector, ruleset));
         }
@@ -235,5 +247,17 @@ } else if (isObject(ruleset)) {
 
-  _proto.convertRawCss = function convertRawCss(styleName, selector, declaration) {
+  _proto.convertRawCss = function convertRawCss(sheet, selector, declaration) {
+    var styleName = sheet.options.name;
     var className = styleName + "-" + selector;
-    this.emit('css', [this.stylis("." + className, declaration.trim()), className]);
+    var stylis = new Stylis({
+      compress: !("production" !== process.env.NODE_ENV),
+      global: false,
+      keyframe: true,
+      prefix: true
+    });
+
+    if (sheet.options.rtl) {
+      stylis.use(rtlPlugin);
+    }
+
+    this.emit('css', [stylis("." + className, declaration.trim()), className]);
     return className;
@@ -240,0 +264,0 @@ };

lib/Aesthetic.d.ts

@@ -1,9 +0,10 @@
-import React from 'react';
 import StyleSheetManager from './StyleSheetManager';
 import UnifiedSyntax from './UnifiedSyntax';
-import { ClassName, ClassNameGenerator, GlobalSheetDefinition, SheetMap, StyledComponentClass, StyleName, StyleSheet, StyleSheetDefinition, ThemeName, WithStylesOptions, WithStylesProps, WithStylesWrapperProps, WithThemeOptions, WithThemeProps, WithThemeWrapperProps } from './types';
+import { ClassName, GlobalSheetDefinition, TransformOptions, SheetMap, StyleName, StyleSheet, StyleSheetDefinition, ThemeName } from './types';
 export interface AestheticOptions {
+    cxPropName: string;
     extendable: boolean;
     passThemeProp: boolean;
     pure: boolean;
+    rtl: boolean;
     stylesPropName: string;
@@ -38,9 +39,15 @@ theme: ThemeName;
      */
-    applyGlobalStyles(): this;
+    applyGlobalStyles(baseOptions?: TransformOptions): this;
     /**
+     * Change the current theme to another registered theme.
+     * This requires all flushed styles to be purged, and for new styles
+     * to be regenerated.
+     */
+    changeTheme(themeName: ThemeName): this;
+    /**
      * Create and return a style sheet unique to an adapter.
      */
-    createStyleSheet(styleName: StyleName): SheetMap<ParsedBlock>;
+    createStyleSheet(styleName: StyleName, baseOptions?: TransformOptions): SheetMap<ParsedBlock>;
     /**
-     * Compose and extend multiple stylesheets to create 1 stylesheet.
+     * Compose and extend multiple style sheets to create 1 style sheet.
      */
@@ -53,55 +60,53 @@ extendStyles(...styleSheets: StyleSheetDefinition<Theme, any>[]): StyleSheetDefinition<Theme, any>;
     /**
-     * Flush parsed styles and inject them into the DOM.
+     * Flush transformed styles and inject them into the DOM.
      */
     flushStyles(styleName: StyleName): void;
     /**
-     * Register a theme with a pre-defined set of theme settings.
+     * Retrieve the defined component style sheet. If the definition is a function,
+     * execute it while passing the current theme.
      */
-    registerTheme<T>(themeName: ThemeName, theme: Theme, globalSheet?: GlobalSheetDefinition<Theme, T>): this;
+    getStyleSheet(styleName: StyleName): StyleSheet;
     /**
-     * Transform the list of style declarations to a list of class name.
+     * Return a theme object or throw an error.
      */
-    transformStyles: (...styles: (string | false | NativeBlock | ParsedBlock | undefined)[]) => string;
+    getTheme(name?: ThemeName): Theme;
     /**
-     * Hook within a component to provide a style sheet.
+     * Return true if the style object is a parsed block and not a native block.
      */
-    useStyles<T>(styleSheet: StyleSheetDefinition<Theme, T>, customName?: string): [SheetMap<ParsedBlock>, ClassNameGenerator<NativeBlock, ParsedBlock>, string];
+    isParsedBlock(block: NativeBlock | ParsedBlock): block is ParsedBlock;
     /**
-     * Hook within a component to provide the current theme object.
+     * Parse an Aesthetic style sheet into an adapter native style sheet.
      */
-    useTheme(): Theme;
+    parseStyleSheet(styleSheet: SheetMap<NativeBlock>, styleName: StyleName): SheetMap<ParsedBlock>;
     /**
-     * Wrap a React component with an HOC that injects the defined style sheet as a prop.
+     * Purge and remove all flushed styles from the DOM.
+     * If no name is provided, purge all transformed styles.
      */
-    withStyles<T>(styleSheet: StyleSheetDefinition<Theme, T>, options?: WithStylesOptions): <Props extends object = {}>(WrappedComponent: React.ComponentType<Props & WithStylesProps<Theme, ParsedBlock>>) => StyledComponentClass<Theme, Props & WithStylesWrapperProps>;
+    purgeStyles(): void;
     /**
-     * Wrap a React component with an HOC that injects the current theme object as a prop.
+     * Register a style sheet definition. Optionally extend from a parent style sheet if defined.
      */
-    withTheme(options?: WithThemeOptions): <Props extends object = {}>(WrappedComponent: React.ComponentType<Props & WithThemeProps<Theme>>) => React.ComponentClass<Props & WithThemeWrapperProps, any>;
+    registerStyleSheet<T>(styleName: StyleName, styleSheet: StyleSheetDefinition<Theme, T>, extendFrom?: StyleName): this;
     /**
-     * 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 set of parameters. Optionally register
+     * a global style sheet to apply to the entire document.
      */
-    protected getStyleSheet(styleName: StyleName): StyleSheet;
+    registerTheme<T>(themeName: ThemeName, theme: Theme, globalSheet?: GlobalSheetDefinition<Theme, T>): this;
     /**
-     * Return a native style sheet manager used for injecting CSS.
+     * Transform the list of style objects to a list of CSS class names.
      */
-    protected getStyleSheetManager(): StyleSheetManager;
+    transformStyles(styles: (undefined | false | ClassName | NativeBlock | ParsedBlock)[], baseOptions?: TransformOptions): ClassName;
     /**
-     * Return a theme object or throw an error.
+     * Transform the parsed style objects into CSS class names.
      */
-    protected getTheme(customTheme?: ThemeName): Theme;
+    abstract transformToClassName(styles: ParsedBlock[]): ClassName;
     /**
-     * Process from an Aesthetic style sheet to an adapter native style sheet.
+     * Return transform options with defaults applied.
      */
-    protected processStyleSheet(styleSheet: SheetMap<NativeBlock>, styleName: StyleName): SheetMap<ParsedBlock>;
+    protected getDefaultTransformOptions(baseOptions?: TransformOptions): TransformOptions;
     /**
-     * Set a style sheet definition for a component.
+     * Return a native style sheet manager used for injecting CSS.
      */
-    protected setStyleSheet(styleName: StyleName, styleSheet: StyleSheetDefinition<Theme, any>, extendFrom?: StyleName): this;
+    protected getStyleSheetManager(): StyleSheetManager;
     /**
-     * Transform the styles into CSS class names.
-     */
-    protected abstract transformToClassName(styles: (NativeBlock | ParsedBlock)[]): ClassName;
-    /**
      * Validate a style sheet or theme definition.
@@ -108,0 +113,0 @@ */

lib/Aesthetic.js

@@ -6,10 +6,6 @@ "use strict";
 
-var _react = _interopRequireWildcard(require("react"));
+var _extend = _interopRequireDefault(require("extend"));
 
 var _v = _interopRequireDefault(require("uuid/v4"));
 
-var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
-
-var _extend = _interopRequireDefault(require("extend"));
-
 var _isObject = _interopRequireDefault(require("./helpers/isObject"));
@@ -19,2 +15,4 @@
 
+var _Sheet = _interopRequireDefault(require("./Sheet"));
+
 var _StyleSheetManager = _interopRequireDefault(require("./StyleSheetManager"));
@@ -26,10 +24,2 @@
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
-
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -41,4 +31,2 @@
   function Aesthetic(options) {
-    var _this = this;
-
     if (options === void 0) {
@@ -66,37 +54,8 @@ options = {};
 
-    _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, 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 = _extends({
+      cxPropName: 'cx',
       extendable: false,
       passThemeProp: false,
       pure: true,
+      rtl: false,
       stylesPropName: 'styles',
@@ -107,2 +66,3 @@ theme: 'default',
     this.syntax = new _UnifiedSyntax.default();
+    document.documentElement.setAttribute('dir', this.options.rtl ? 'rtl' : 'ltr');
   }
@@ -112,3 +72,3 @@
 
-  _proto.applyGlobalStyles = function applyGlobalStyles() {
+  _proto.applyGlobalStyles = function applyGlobalStyles(baseOptions) {
     if (this.appliedGlobals) {
@@ -118,2 +78,3 @@ return this;
 
+    var options = this.getDefaultTransformOptions(baseOptions);
     var globalDef = this.globals[this.options.theme];
@@ -123,8 +84,4 @@ 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);
+      var sheet = this.parseStyleSheet(this.syntax.convertGlobalSheet(globalSheet, options).toObject(), ':root');
+      this.transformStyles(Object.values(sheet), options);
     }
@@ -137,3 +94,16 @@
 
-  _proto.createStyleSheet = function createStyleSheet(styleName) {
+  _proto.changeTheme = function changeTheme(themeName) {
+    this.getTheme(themeName);
+    this.options.theme = themeName;
+    this.purgeStyles();
+    this.getStyleSheetManager().purgeStyles();
+    this.cache = {};
+    this.appliedGlobals = false;
+    this.applyGlobalStyles({
+      rtl: this.options.rtl
+    });
+    return this;
+  };
+
+  _proto.createStyleSheet = function createStyleSheet(styleName, baseOptions) {
     if (this.cache[styleName]) {
@@ -143,6 +113,9 @@ return this.cache[styleName];
 
-    this.applyGlobalStyles();
-    var baseSheet = this.syntax.convertStyleSheet(this.getStyleSheet(styleName), styleName);
-    var styleSheet = this.processStyleSheet(baseSheet.toObject(), styleName);
-    this.cache[styleName] = _extends({}, styleSheet, baseSheet.classNames);
+    this.applyGlobalStyles(baseOptions);
+    var options = this.getDefaultTransformOptions(baseOptions);
+    var nativeSheet = this.syntax.convertStyleSheet(this.getStyleSheet(styleName), _extends({}, options, {
+      name: styleName
+    }));
+    var parsedSheet = this.parseStyleSheet(nativeSheet.toObject(), styleName);
+    this.cache[styleName] = _extends({}, parsedSheet, nativeSheet.classNames);
     return this.cache[styleName];
@@ -152,4 +125,4 @@ };
   _proto.extendStyles = function extendStyles() {
-    for (var _len2 = arguments.length, styleSheets = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      styleSheets[_key2] = arguments[_key2];
+    for (var _len = arguments.length, styleSheets = new Array(_len), _key = 0; _key < _len; _key++) {
+      styleSheets[_key] = arguments[_key];
     }
@@ -175,200 +148,130 @@
 
-  _proto.registerTheme = function registerTheme(themeName, theme, globalSheet) {
-    if (globalSheet === void 0) {
-      globalSheet = null;
-    }
+  _proto.getStyleSheet = function getStyleSheet(styleName) {
+    var parentStyleName = this.parents[styleName];
+    var styleDef = this.styles[styleName];
+    var styleSheet = styleDef(this.getTheme());
 
-    if ("production" !== process.env.NODE_ENV) {
-      if (this.themes[themeName]) {
-        throw new Error("Theme \"" + themeName + "\" already exists.");
-      } else if (!(0, _isObject.default)(theme)) {
-        throw new TypeError("Theme \"" + themeName + "\" must be a style object.");
-      }
+    if (parentStyleName) {
+      return (0, _extend.default)(true, {}, this.getStyleSheet(parentStyleName), styleSheet);
     }
 
-    this.themes[themeName] = theme;
-    this.globals[themeName] = this.validateDefinition(themeName, globalSheet, this.globals);
-    return this;
+    return styleSheet;
   };
 
-  _proto.useStyles = function useStyles(styleSheet, customName) {
-    var _this2 = this;
+  _proto.getTheme = function getTheme(name) {
+    var themeName = name || this.options.theme;
+    var theme = this.themes[themeName];
 
-    if (customName === void 0) {
-      customName = 'Component';
+    if ("production" !== process.env.NODE_ENV) {
+      if (!theme || !(0, _isObject.default)(theme)) {
+        throw new Error("Theme \"" + themeName + "\" does not exist.");
+      }
     }
 
-    var _useState = (0, _react.useState)(function () {
-      var name = customName + "-" + (0, _v.default)();
+    return theme;
+  };
 
-      _this2.setStyleSheet(name, styleSheet);
-
-      return name;
-    }),
-        styleName = _useState[0];
-
-    var sheet = this.createStyleSheet(styleName);
-    (0, _react.useLayoutEffect)(function () {
-      _this2.flushStyles(styleName);
-    }, [styleName]);
-    return [sheet, this.transformStyles, styleName];
+  _proto.isParsedBlock = function isParsedBlock(block) {
+    return (0, _isObject.default)(block);
   };
 
-  _proto.useTheme = function useTheme() {
-    return this.getTheme();
+  _proto.parseStyleSheet = function parseStyleSheet(styleSheet, styleName) {
+    return _extends({}, styleSheet);
   };
 
-  _proto.withStyles = function withStyles(styleSheet, options) {
-    if (options === void 0) {
-      options = {};
-    }
+  _proto.purgeStyles = function purgeStyles() {};
 
-    var aesthetic = this;
-    var _options = options,
-        _options$extendable = _options.extendable,
-        extendable = _options$extendable === void 0 ? this.options.extendable : _options$extendable,
-        _options$extendFrom = _options.extendFrom,
-        extendFrom = _options$extendFrom === void 0 ? '' : _options$extendFrom,
-        _options$passThemePro = _options.passThemeProp,
-        passThemeProp = _options$passThemePro === void 0 ? this.options.passThemeProp : _options$passThemePro,
-        _options$pure = _options.pure,
-        pure = _options$pure === void 0 ? this.options.pure : _options$pure,
-        _options$stylesPropNa = _options.stylesPropName,
-        stylesPropName = _options$stylesPropNa === void 0 ? this.options.stylesPropName : _options$stylesPropNa,
-        _options$themePropNam = _options.themePropName,
-        themePropName = _options$themePropNam === void 0 ? this.options.themePropName : _options$themePropNam;
-    return function withStylesFactory(WrappedComponent) {
-      var baseName = WrappedComponent.displayName || WrappedComponent.name;
-      var styleName = baseName + "-" + (0, _v.default)();
-      var Component = pure ? _react.default.PureComponent : _react.default.Component;
-      aesthetic.setStyleSheet(styleName, styleSheet, extendFrom);
-
-      var WithStyles = function (_Component) {
-        _inheritsLoose(WithStyles, _Component);
-
-        function WithStyles() {
-          var _this3;
-
-          for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-            args[_key3] = arguments[_key3];
-          }
-
-          _this3 = _Component.call.apply(_Component, [this].concat(args)) || this;
-
-          _defineProperty(_assertThisInitialized(_this3), "state", {
-            styles: aesthetic.createStyleSheet(styleName)
-          });
-
-          return _this3;
+  _proto.registerStyleSheet = function registerStyleSheet(styleName, styleSheet, extendFrom) {
+    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.');
         }
+      }
 
-        WithStyles.extendStyles = function extendStyles(customStyleSheet, extendOptions) {
-          if (extendOptions === void 0) {
-            extendOptions = {};
-          }
+      this.parents[styleName] = extendFrom;
+    }
 
-          if ("production" !== process.env.NODE_ENV) {
-            if (!extendable) {
-              throw new Error(baseName + " is not extendable.");
-            }
-          }
+    this.styles[styleName] = this.validateDefinition(styleName, styleSheet, this.styles);
+    return this;
+  };
 
-          return aesthetic.withStyles(customStyleSheet, _extends({}, options, extendOptions, {
-            extendFrom: styleName
-          }))(WrappedComponent);
-        };
+  _proto.registerTheme = function registerTheme(themeName, theme, globalSheet) {
+    if (globalSheet === void 0) {
+      globalSheet = null;
+    }
 
-        var _proto2 = WithStyles.prototype;
+    if ("production" !== process.env.NODE_ENV) {
+      if (this.themes[themeName]) {
+        throw new Error("Theme \"" + themeName + "\" already exists.");
+      } else if (!(0, _isObject.default)(theme)) {
+        throw new TypeError("Theme \"" + themeName + "\" must be a style object.");
+      }
+    }
 
-        _proto2.componentDidMount = function componentDidMount() {
-          aesthetic.flushStyles(styleName);
-        };
-
-        _proto2.render = function render() {
-          var _extraProps;
-
-          var _this$props = this.props,
-              wrappedRef = _this$props.wrappedRef,
-              props = _objectWithoutPropertiesLoose(_this$props, ["wrappedRef"]);
-
-          var extraProps = (_extraProps = {}, _extraProps[stylesPropName] = this.state.styles, _extraProps.ref = wrappedRef, _extraProps);
-
-          if (passThemeProp) {
-            extraProps[themePropName] = aesthetic.getTheme();
-          }
-
-          return _react.default.createElement(WrappedComponent, _extends({}, props, extraProps));
-        };
-
-        return WithStyles;
-      }(Component);
-
-      _defineProperty(WithStyles, "displayName", "withStyles(" + baseName + ")");
-
-      _defineProperty(WithStyles, "styleName", styleName);
-
-      _defineProperty(WithStyles, "WrappedComponent", WrappedComponent);
-
-      (0, _hoistNonReactStatics.default)(WithStyles, WrappedComponent);
-      return WithStyles;
-    };
+    this.themes[themeName] = theme;
+    this.globals[themeName] = this.validateDefinition(themeName, globalSheet, this.globals);
+    return this;
   };
 
-  _proto.withTheme = function withTheme(options) {
-    if (options === void 0) {
-      options = {};
-    }
+  _proto.transformStyles = function transformStyles(styles, baseOptions) {
+    var _this = this;
 
-    var aesthetic = this;
-    var _options2 = options,
-        _options2$pure = _options2.pure,
-        pure = _options2$pure === void 0 ? this.options.pure : _options2$pure,
-        _options2$themePropNa = _options2.themePropName,
-        themePropName = _options2$themePropNa === void 0 ? this.options.themePropName : _options2$themePropNa;
-    return function withThemeFactory(WrappedComponent) {
-      var baseName = WrappedComponent.displayName || WrappedComponent.name;
-      var Component = pure ? _react.default.PureComponent : _react.default.Component;
+    var options = this.getDefaultTransformOptions(baseOptions);
+    var classNames = [];
+    var nativeBlocks = [];
+    var parsedBlocks = [];
+    var inlineName = '';
+    styles.forEach(function (style) {
+      if (!style) {
+        return;
+      }
 
-      var WithTheme = function (_Component2) {
-        _inheritsLoose(WithTheme, _Component2);
-
-        function WithTheme() {
-          return _Component2.apply(this, arguments) || this;
+      if (typeof style === 'string') {
+        classNames.push.apply(classNames, String(style).split(' ').map(function (s) {
+          return (0, _stripClassPrefix.default)(s).trim();
+        }));
+      } else if ((0, _isObject.default)(style)) {
+        if (_this.isParsedBlock(style)) {
+          parsedBlocks.push(style);
+        } else {
+          nativeBlocks.push(style);
         }
+      } else if ("production" !== process.env.NODE_ENV) {
+        throw new Error('Unsupported style type to transform.');
+      }
+    });
 
-        var _proto3 = WithTheme.prototype;
+    if (nativeBlocks.length > 0) {
+      var nativeSheet = new _Sheet.default(options);
+      var counter = 0;
+      inlineName = (0, _v.default)();
+      nativeBlocks.forEach(function (block) {
+        nativeSheet.addRuleset(nativeSheet.createRuleset("inline-" + counter).addProperties(block));
+        counter += 1;
+      });
+      parsedBlocks.push.apply(parsedBlocks, Object.values(this.parseStyleSheet(nativeSheet.toObject(), inlineName)));
+    }
 
-        _proto3.render = function render() {
-          var _extraProps2;
+    if (parsedBlocks.length > 0) {
+      classNames.push(this.transformToClassName(parsedBlocks));
+    }
 
-          var _this$props2 = this.props,
-              wrappedRef = _this$props2.wrappedRef,
-              props = _objectWithoutPropertiesLoose(_this$props2, ["wrappedRef"]);
+    if (inlineName) {
+      this.flushStyles(inlineName);
+    }
 
-          var extraProps = (_extraProps2 = {}, _extraProps2[themePropName] = aesthetic.getTheme(), _extraProps2.ref = wrappedRef, _extraProps2);
-          return _react.default.createElement(WrappedComponent, _extends({}, props, extraProps));
-        };
-
-        return WithTheme;
-      }(Component);
-
-      _defineProperty(WithTheme, "displayName", "withTheme(" + baseName + ")");
-
-      _defineProperty(WithTheme, "WrappedComponent", WrappedComponent);
-
-      (0, _hoistNonReactStatics.default)(WithTheme, WrappedComponent);
-      return WithTheme;
-    };
+    return classNames.join(' ').trim();
   };
 
-  _proto.getStyleSheet = 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);
+  _proto.getDefaultTransformOptions = function getDefaultTransformOptions(baseOptions) {
+    if (baseOptions === void 0) {
+      baseOptions = {};
     }
 
-    return styleSheet;
+    return {
+      rtl: typeof baseOptions.rtl === 'undefined' ? this.options.rtl : baseOptions.rtl
+    };
   };
@@ -385,44 +288,2 @@
 
-  _proto.getTheme = function getTheme(customTheme) {
-    if (customTheme === void 0) {
-      customTheme = '';
-    }
-
-    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 \"" + themeName + "\" does not exist.");
-      }
-    }
-
-    return theme;
-  };
-
-  _proto.processStyleSheet = function processStyleSheet(styleSheet, styleName) {
-    return _extends({}, styleSheet);
-  };
-
-  _proto.setStyleSheet = function setStyleSheet(styleName, styleSheet, extendFrom) {
-    if (extendFrom === void 0) {
-      extendFrom = '';
-    }
-
-    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.parents[styleName] = extendFrom;
-    }
-
-    this.styles[styleName] = this.validateDefinition(styleName, styleSheet, this.styles);
-    return this;
-  };
-
   _proto.validateDefinition = function validateDefinition(key, value, cache) {
@@ -429,0 +290,0 @@ if ("production" !== process.env.NODE_ENV) {

lib/ClassNameAesthetic.d.ts

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

lib/helpers/toObjectRecursive.d.ts

@@ -6,3 +6,3 @@ export interface ToObjectable {
     [key: string]: ToObjectable;
-}): T;
+} | Map<string, ToObjectable>): T;
 //# sourceMappingURL=toObjectRecursive.d.ts.map

lib/helpers/toObjectRecursive.js

@@ -8,6 +8,14 @@ "use strict";
   var object = {};
-  Object.keys(map).forEach(function (key) {
-    object[key] = map[key].toObject();
-  });
+
+  if (map instanceof Map) {
+    map.forEach(function (obj, key) {
+      object[key] = obj.toObject();
+    });
+  } else {
+    Object.keys(map).forEach(function (key) {
+      object[key] = map[key].toObject();
+    });
+  }
+
   return object;
 }

lib/index.d.ts

@@ -10,5 +10,9 @@ /**
 import Sheet from './Sheet';
-export { AestheticOptions, ClassNameAesthetic, UnifiedSyntax, Ruleset, Sheet };
+import getFlushedStyles from './helpers/getFlushedStyles';
+import getStyleElements from './helpers/getStyleElements';
+import purgeStyles from './helpers/purgeStyles';
+import isRTL from './helpers/isRTL';
 export * from './types';
+export { AestheticOptions, ClassNameAesthetic, UnifiedSyntax, Ruleset, Sheet, getFlushedStyles, getStyleElements, isRTL, purgeStyles, };
 export default Aesthetic;
 //# sourceMappingURL=index.d.ts.map

lib/index.js

@@ -9,3 +9,7 @@ "use strict";
   Ruleset: true,
-  Sheet: true
+  Sheet: true,
+  getFlushedStyles: true,
+  getStyleElements: true,
+  purgeStyles: true,
+  isRTL: true
 };
@@ -34,2 +38,18 @@ exports.default = void 0;
 
+var _getFlushedStyles = _interopRequireDefault(require("./helpers/getFlushedStyles"));
+
+exports.getFlushedStyles = _getFlushedStyles.default;
+
+var _getStyleElements = _interopRequireDefault(require("./helpers/getStyleElements"));
+
+exports.getStyleElements = _getStyleElements.default;
+
+var _purgeStyles = _interopRequireDefault(require("./helpers/purgeStyles"));
+
+exports.purgeStyles = _purgeStyles.default;
+
+var _isRTL = _interopRequireDefault(require("./helpers/isRTL"));
+
+exports.isRTL = _isRTL.default;
+
 var _types = require("./types");
@@ -36,0 +56,0 @@

lib/Ruleset.d.ts

 import Sheet from './Sheet';
+import { CompoundProperties } from './types';
 export default class Ruleset<Block extends object> {
-    nested: {
-        [selector: string]: Ruleset<Block>;
-    };
+    compoundProperties: Map<CompoundProperties, (string | Block)[]>;
+    nested: Map<string, Ruleset<Block>>;
     parent: Ruleset<Block> | null;
@@ -11,4 +11,6 @@ properties: Partial<Block>;
     constructor(selector: string, root: Sheet<Block>, parent?: Ruleset<Block> | null);
+    addCompoundProperty(key: CompoundProperties, value: (string | Block)[]): this;
     addNested(selector: string, ruleset: Ruleset<Block>, merge?: boolean): this;
     addProperty(key: keyof Block, value: any): this;
+    addProperties(properties: Partial<Block>): this;
     createRuleset(selector: string): Ruleset<Block>;
@@ -15,0 +17,0 @@ merge(ruleset: Ruleset<Block>): this;

lib/Ruleset.js

@@ -6,2 +6,4 @@ "use strict";
 
+var _rtlCssJs = _interopRequireDefault(require("rtl-css-js"));
+
 var _toObjectRecursive = _interopRequireDefault(require("./helpers/toObjectRecursive"));
@@ -11,2 +13,4 @@
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -20,4 +24,6 @@
 
-    _defineProperty(this, "nested", {});
+    _defineProperty(this, "compoundProperties", new Map());
 
+    _defineProperty(this, "nested", new Map());
+
     _defineProperty(this, "parent", null);
@@ -38,2 +44,7 @@
 
+  _proto.addCompoundProperty = function addCompoundProperty(key, value) {
+    this.compoundProperties.set(key, value);
+    return this;
+  };
+
   _proto.addNested = function addNested(selector, ruleset, merge) {
@@ -44,6 +55,6 @@ if (merge === void 0) {
 
-    if (merge && this.nested[selector]) {
-      this.nested[selector].merge(ruleset);
+    if (merge && this.nested.has(selector)) {
+      this.nested.get(selector).merge(ruleset);
     } else {
-      this.nested[selector] = ruleset;
+      this.nested.set(selector, ruleset);
     }
@@ -59,2 +70,7 @@
 
+  _proto.addProperties = function addProperties(properties) {
+    Object.assign(this.properties, properties);
+    return this;
+  };
+
   _proto.createRuleset = function createRuleset(selector) {
@@ -68,4 +84,4 @@ return new Ruleset(selector, this.root, this);
     Object.assign(this.properties, ruleset.properties);
-    Object.keys(ruleset.nested).forEach(function (selector) {
-      _this.addNested(selector, ruleset.nested[selector]);
+    ruleset.nested.forEach(function (nested, selector) {
+      _this.addNested(selector, nested);
     });
@@ -76,3 +92,8 @@ return this;
   _proto.toObject = function toObject() {
-    return Object.assign({}, this.properties, (0, _toObjectRecursive.default)(this.nested));
+    var props = this.root.options.rtl ? (0, _rtlCssJs.default)(this.properties) : this.properties;
+    var compounds = {};
+    this.compoundProperties.forEach(function (compound, key) {
+      compounds[key] = compound;
+    });
+    return _extends({}, props, compounds, (0, _toObjectRecursive.default)(this.nested));
   };
@@ -79,0 +100,0 @@

lib/Sheet.d.ts

 import Ruleset from './Ruleset';
-import { ClassName, SheetMap } from './types';
+import { ClassName, SheetMap, TransformOptions } from './types';
 declare type AtRuleType<Block extends object> = string | string[] | Ruleset<Block> | Ruleset<Block>[] | Sheet<Block>;
@@ -11,5 +11,7 @@ export default class Sheet<Block extends object> {
     };
+    options: TransformOptions;
     ruleSets: {
         [selector: string]: Ruleset<Block>;
     };
+    constructor(options?: TransformOptions);
     addAtRule(rule: string, value: AtRuleType<Block>): this;
@@ -19,2 +21,3 @@ addClassName(selector: string, value: ClassName): this;
     createRuleset(selector: string): Ruleset<Block>;
+    createSheet(options?: TransformOptions): Sheet<Block>;
     toObject(): SheetMap<Block>;
@@ -21,0 +24,0 @@ }

lib/Sheet.js

@@ -17,3 +17,7 @@ "use strict";
 var Sheet = function () {
-  function Sheet() {
+  function Sheet(options) {
+    if (options === void 0) {
+      options = {};
+    }
+
     _defineProperty(this, "atRules", {});
@@ -23,3 +27,7 @@
 
+    _defineProperty(this, "options", void 0);
+
     _defineProperty(this, "ruleSets", {});
+
+    this.options = options;
   }
@@ -48,2 +56,6 @@
 
+  _proto.createSheet = function createSheet(options) {
+    return new Sheet(options || this.options);
+  };
+
   _proto.toObject = function toObject() {
@@ -50,0 +62,0 @@ var _this = this;

lib/StyleSheetManager.d.ts

@@ -5,6 +5,7 @@ export default class StyleSheetManager {
     constructor();
-    getInjectedStyles(): string;
+    getFlushedStyles(): string;
     injectRule(rule: string): this;
     injectStatements(css: string): this;
+    purgeStyles(): this;
 }
 //# sourceMappingURL=StyleSheetManager.d.ts.map

lib/StyleSheetManager.js

@@ -6,2 +6,8 @@ "use strict";
 
+var _getFlushedStyles2 = _interopRequireDefault(require("./helpers/getFlushedStyles"));
+
+var _purgeStyles2 = _interopRequireDefault(require("./helpers/purgeStyles"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -25,6 +31,4 @@
 
-  _proto.getInjectedStyles = function getInjectedStyles() {
-    return (this.element.textContent || '') + Array.from(this.sheet.cssRules).map(function (rule) {
-      return rule.cssText;
-    }).join('');
+  _proto.getFlushedStyles = function getFlushedStyles() {
+    return (0, _getFlushedStyles2.default)(this.element);
   };
@@ -42,2 +46,7 @@
 
+  _proto.purgeStyles = function purgeStyles() {
+    (0, _purgeStyles2.default)(this.element);
+    return this;
+  };
+
   return StyleSheetManager;
@@ -44,0 +53,0 @@ }();

lib/testUtils.d.ts

@@ -1,32 +0,38 @@
-import { FontFace } from './types';
-export declare function cleanStyles(source: string): string;
+import CSS from 'csstype';
+import Aesthetic from './Aesthetic';
+import getStyleElements from './helpers/getStyleElements';
+import { FontFace, Direction } from './types';
+export { getStyleElements };
+export interface TestTheme {
+    color: string;
+    unit: number;
+}
+export declare class TestAesthetic extends Aesthetic<TestTheme, any, any> {
+    transformToClassName(styles: any[]): string;
+}
+export declare function registerTestTheme(aesthetic: Aesthetic<TestTheme, any, any>): void;
+export declare function cleanupStyleElements(): void;
+export declare function getFlushedStyles(namespace?: string): string;
+export declare function convertDirection(value: object | object[], dir: Direction): any;
+export declare function renderAndExpect(aesthetic: Aesthetic<any, any, any>, styleSheet: any, expectedStyles: any, { dir, global, }: {
+    dir: Direction;
+    global?: boolean;
+}): void;
+export declare const TEST_CLASS_NAMES: {
+    footer: string;
+    header: string;
+};
+export declare const TEST_STATEMENT: {
+    footer: {
+        color: string;
+    };
+    header: {
+        color: string;
+    };
+};
+export declare const DIRECTIONS: Direction[];
 export declare const FONT_ROBOTO: FontFace;
-export declare const FONT_ROBOTO_FLAT_SRC: {
-    fontFamily: string;
-    fontStyle: string;
-    fontWeight: string;
-    src: string;
-};
-export declare const FONT_CIRCULAR_MULTIPLE: ({
-    fontFamily: string;
-    fontStyle: string;
-    fontWeight: string;
-    srcPaths: string[];
-} | {
-    fontFamily: string;
-    fontStyle: string;
-    fontWeight: number;
-    srcPaths: string[];
-})[];
-export declare const FONT_CIRCULAR_MULTIPLE_FLAT_SRC: ({
-    fontFamily: string;
-    fontStyle: string;
-    fontWeight: string;
-    src: string;
-} | {
-    fontFamily: string;
-    fontStyle: string;
-    fontWeight: number;
-    src: string;
-})[];
+export declare const FONT_ROBOTO_FLAT_SRC: CSS.FontFace;
+export declare const FONT_CIRCULAR_MULTIPLE: FontFace[];
+export declare const FONT_CIRCULAR_MULTIPLE_FLAT_SRC: CSS.FontFace[];
 export declare const KEYFRAME_FADE: {
@@ -42,15 +48,11 @@ from: {
     '0%': {
-        opacity: number;
+        left: string;
     };
     '50%': {
-        opacity: number;
+        left: string;
     };
     '100%': {
-        opacity: number;
+        left: string;
     };
 };
-export declare const TEST_CLASS_NAMES: {
-    header: string;
-    footer: string;
-};
 export declare const SYNTAX_UNIFIED_LOCAL: {
@@ -184,13 +186,3 @@ button: {
     '@font-face': {
-        Circular: ({
-            fontFamily: string;
-            fontStyle: string;
-            fontWeight: string;
-            srcPaths: string[];
-        } | {
-            fontFamily: string;
-            fontStyle: string;
-            fontWeight: number;
-            srcPaths: string[];
-        })[];
+        Circular: FontFace[];
     };
@@ -201,13 +193,3 @@ };
         Roboto: FontFace[];
-        Circular: ({
-            fontFamily: string;
-            fontStyle: string;
-            fontWeight: string;
-            srcPaths: string[];
-        } | {
-            fontFamily: string;
-            fontStyle: string;
-            fontWeight: number;
-            srcPaths: string[];
-        })[];
+        Circular: FontFace[];
     };
@@ -220,13 +202,3 @@ };
     multiple: {
-        fontFamily: (string | FontFace | {
-            fontFamily: string;
-            fontStyle: string;
-            fontWeight: string;
-            srcPaths: string[];
-        } | {
-            fontFamily: string;
-            fontStyle: string;
-            fontWeight: number;
-            srcPaths: string[];
-        })[];
+        fontFamily: (string | FontFace)[];
     };
@@ -266,9 +238,9 @@ };
             '0%': {
-                opacity: number;
+                left: string;
             };
             '50%': {
-                opacity: number;
+                left: string;
             };
             '100%': {
-                opacity: number;
+                left: string;
             };
@@ -290,9 +262,9 @@ };
             '0%': {
-                opacity: number;
+                left: string;
             };
             '50%': {
-                opacity: number;
+                left: string;
             };
             '100%': {
-                opacity: number;
+                left: string;
             };
@@ -307,9 +279,9 @@ };
             '0%': {
-                opacity: number;
+                left: string;
             };
             '50%': {
-                opacity: number;
+                left: string;
             };
             '100%': {
-                opacity: number;
+                left: string;
             };
@@ -329,9 +301,9 @@ };
             '0%': {
-                opacity: number;
+                left: string;
             };
             '50%': {
-                opacity: number;
+                left: string;
             };
             '100%': {
-                opacity: number;
+                left: string;
             };
@@ -344,8 +316,11 @@ })[];
         color: string;
+        paddingLeft: number;
         '@media': {
             '(min-width: 300px)': {
                 color: string;
+                paddingLeft: number;
             };
             '(max-width: 1000px)': {
                 color: string;
+                paddingLeft: number;
             };
@@ -395,3 +370,4 @@ };
         display: string;
-        margin: number;
+        marginRight: number;
+        padding: number;
     };
@@ -398,0 +374,0 @@ };

lib/testUtils.js

 "use strict";
 
 exports.__esModule = true;
-exports.cleanStyles = cleanStyles;
-exports.SYNTAX_RAW_CSS = exports.SYNTAX_VIEWPORT = exports.SYNTAX_SUPPORTS = exports.SYNTAX_PSEUDO = exports.SYNTAX_PROPERTIES = exports.SYNTAX_PAGE = exports.SYNTAX_NAMESPACE = exports.SYNTAX_MULTI_SELECTOR = exports.SYNTAX_MEDIA_QUERY_NESTED = exports.SYNTAX_MEDIA_QUERY = exports.SYNTAX_KEYFRAMES_INLINE = exports.SYNTAX_KEYFRAMES_MIXED = exports.SYNTAX_KEYFRAMES_PERCENT = exports.SYNTAX_KEYFRAMES = exports.SYNTAX_GLOBAL = exports.SYNTAX_FONT_FACES_INLINE = exports.SYNTAX_FONT_FACE_MIXED = exports.SYNTAX_FONT_FACE_MULTIPLE = exports.SYNTAX_FONT_FACE = exports.SYNTAX_FALLBACKS = exports.SYNTAX_IMPORT_MULTIPLE = exports.SYNTAX_IMPORT = exports.SYNTAX_DESCENDANT = exports.SYNTAX_CHARSET = exports.SYNTAX_ATTRIBUTE = exports.SYNTAX_UNIFIED_LOCAL_FULL = exports.SYNTAX_UNIFIED_GLOBAL_FULL = exports.SYNTAX_UNIFIED_LOCAL = exports.TEST_CLASS_NAMES = exports.KEYFRAME_SLIDE_PERCENT = exports.KEYFRAME_FADE = exports.FONT_CIRCULAR_MULTIPLE_FLAT_SRC = exports.FONT_CIRCULAR_MULTIPLE = exports.FONT_ROBOTO_FLAT_SRC = exports.FONT_ROBOTO = void 0;
+exports.registerTestTheme = registerTestTheme;
+exports.cleanupStyleElements = cleanupStyleElements;
+exports.getFlushedStyles = getFlushedStyles;
+exports.convertDirection = convertDirection;
+exports.renderAndExpect = renderAndExpect;
+exports.SYNTAX_RAW_CSS = exports.SYNTAX_VIEWPORT = exports.SYNTAX_SUPPORTS = exports.SYNTAX_PSEUDO = exports.SYNTAX_PROPERTIES = exports.SYNTAX_PAGE = exports.SYNTAX_NAMESPACE = exports.SYNTAX_MULTI_SELECTOR = exports.SYNTAX_MEDIA_QUERY_NESTED = exports.SYNTAX_MEDIA_QUERY = exports.SYNTAX_KEYFRAMES_INLINE = exports.SYNTAX_KEYFRAMES_MIXED = exports.SYNTAX_KEYFRAMES_PERCENT = exports.SYNTAX_KEYFRAMES = exports.SYNTAX_GLOBAL = exports.SYNTAX_FONT_FACES_INLINE = exports.SYNTAX_FONT_FACE_MIXED = exports.SYNTAX_FONT_FACE_MULTIPLE = exports.SYNTAX_FONT_FACE = exports.SYNTAX_FALLBACKS = exports.SYNTAX_IMPORT_MULTIPLE = exports.SYNTAX_IMPORT = exports.SYNTAX_DESCENDANT = exports.SYNTAX_CHARSET = exports.SYNTAX_ATTRIBUTE = exports.SYNTAX_UNIFIED_LOCAL_FULL = exports.SYNTAX_UNIFIED_GLOBAL_FULL = exports.SYNTAX_UNIFIED_LOCAL = exports.KEYFRAME_SLIDE_PERCENT = exports.KEYFRAME_FADE = exports.FONT_CIRCULAR_MULTIPLE_FLAT_SRC = exports.FONT_CIRCULAR_MULTIPLE = exports.FONT_ROBOTO_FLAT_SRC = exports.FONT_ROBOTO = exports.DIRECTIONS = exports.TEST_STATEMENT = exports.TEST_CLASS_NAMES = exports.TestAesthetic = void 0;
 
+var _rtlCssJs = _interopRequireDefault(require("rtl-css-js"));
+
+var _Aesthetic2 = _interopRequireDefault(require("./Aesthetic"));
+
+var _getFlushedStyles = _interopRequireDefault(require("./helpers/getFlushedStyles"));
+
+var _getStyleElements = _interopRequireDefault(require("./helpers/getStyleElements"));
+
+exports.getStyleElements = _getStyleElements.default;
+
+var _isObject = _interopRequireDefault(require("./helpers/isObject"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function cleanStyles(source) {
-  return source.replace(/\n/g, '').replace(/[\t-\r \xA0\u1680\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF]{2,}/g, '');
+function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
+
+var TestAesthetic = function (_Aesthetic) {
+  _inheritsLoose(TestAesthetic, _Aesthetic);
+
+  function TestAesthetic() {
+    return _Aesthetic.apply(this, arguments) || this;
+  }
+
+  var _proto = TestAesthetic.prototype;
+
+  _proto.transformToClassName = function transformToClassName(styles) {
+    return styles.map(function (style, i) {
+      return "class-" + i;
+    }).join(' ');
+  };
+
+  return TestAesthetic;
+}(_Aesthetic2.default);
+
+exports.TestAesthetic = TestAesthetic;
+
+function registerTestTheme(aesthetic) {
+  aesthetic.registerTheme('default', {
+    color: 'black',
+    unit: 8
+  }, function (_ref) {
+    var unit = _ref.unit;
+    return {
+      '@global': {
+        body: {
+          padding: unit
+        }
+      }
+    };
+  });
+  aesthetic.extendTheme('light', 'default', {});
+  aesthetic.extendTheme('dark', 'default', {});
 }
 
+function cleanupStyleElements() {
+  (0, _getStyleElements.default)().forEach(function (style) {
+    style.remove();
+  });
+}
+
+function getFlushedStyles(namespace) {
+  return (0, _getFlushedStyles.default)((0, _getStyleElements.default)(namespace));
+}
+
+function convertDirection(value, dir) {
+  if (dir !== 'rtl') {
+    return value;
+  }
+
+  if (Array.isArray(value)) {
+    return value.map(function (object) {
+      return convertDirection(object, dir);
+    });
+  }
+
+  if (!(0, _isObject.default)(value)) {
+    return value;
+  }
+
+  var props = {};
+  var nested = {};
+  Object.keys(value).forEach(function (key) {
+    var prop = value[key];
+
+    if ((0, _isObject.default)(prop) || Array.isArray(prop)) {
+      nested[key] = convertDirection(prop, dir);
+    } else {
+      props[key] = prop;
+    }
+  });
+  return _extends({}, (0, _rtlCssJs.default)(props), nested);
+}
+
+function renderAndExpect(aesthetic, styleSheet, expectedStyles, _ref2) {
+  if (expectedStyles === void 0) {
+    expectedStyles = {};
+  }
+
+  var dir = _ref2.dir,
+      _ref2$global = _ref2.global,
+      global = _ref2$global === void 0 ? false : _ref2$global;
+  var name = aesthetic.constructor.name.replace('Aesthetic', '').toLowerCase();
+  var options = {
+    name: name,
+    rtl: dir === 'rtl'
+  };
+  var convertedSheet = global ? aesthetic.syntax.convertGlobalSheet(styleSheet, options).toObject() : aesthetic.syntax.convertStyleSheet(styleSheet, options).toObject();
+  var parsedSheet = aesthetic.parseStyleSheet(convertedSheet, name);
+  var className = aesthetic.transformStyles(Object.values(parsedSheet), options);
+  aesthetic.flushStyles(name);
+  expect(convertedSheet).toEqual(convertDirection(expectedStyles, dir));
+  expect(getFlushedStyles()).toMatchSnapshot();
+  expect(className).toMatchSnapshot();
+}
+
+var TEST_CLASS_NAMES = {
+  footer: '.footer',
+  header: '.header'
+};
+exports.TEST_CLASS_NAMES = TEST_CLASS_NAMES;
+var TEST_STATEMENT = {
+  footer: {
+    color: 'blue'
+  },
+  header: {
+    color: 'red'
+  }
+};
+exports.TEST_STATEMENT = TEST_STATEMENT;
+var DIRECTIONS = ['ltr', 'rtl'];
+exports.DIRECTIONS = DIRECTIONS;
 var FONT_ROBOTO = {
@@ -83,17 +214,12 @@ fontFamily: 'Roboto',
   '0%': {
-    opacity: 0
+    left: '0%'
   },
   '50%': {
-    opacity: 0.5
+    left: '50%'
   },
   '100%': {
-    opacity: 1
+    left: '100%'
   }
 };
 exports.KEYFRAME_SLIDE_PERCENT = KEYFRAME_SLIDE_PERCENT;
-var TEST_CLASS_NAMES = {
-  header: '.header',
-  footer: '.footer'
-};
-exports.TEST_CLASS_NAMES = TEST_CLASS_NAMES;
 var SYNTAX_UNIFIED_LOCAL = {
@@ -112,3 +238,3 @@ button: {
     textDecoration: 'none',
-    textAlign: 'center',
+    textAlign: 'left',
     backgroundColor: '#337ab7',
@@ -177,7 +303,7 @@ verticalAlign: 'middle',
 var SYNTAX_IMPORT = {
-  '@import': './some/path.css'
+  '@import': 'url("./some/path.css")'
 };
 exports.SYNTAX_IMPORT = SYNTAX_IMPORT;
 var SYNTAX_IMPORT_MULTIPLE = {
-  '@import': ['./some/path.css', './another/path.css']
+  '@import': ['url("./some/path.css")', 'url("./another/path.css")']
 };
@@ -277,8 +403,11 @@ exports.SYNTAX_IMPORT_MULTIPLE = SYNTAX_IMPORT_MULTIPLE;
     color: 'red',
+    paddingLeft: 10,
     '@media': {
       '(min-width: 300px)': {
-        color: 'blue'
+        color: 'blue',
+        paddingLeft: 15
       },
       '(max-width: 1000px)': {
-        color: 'green'
+        color: 'green',
+        paddingLeft: 20
       }
@@ -333,3 +462,4 @@ }
     display: 'inline',
-    margin: 10
+    marginRight: 10,
+    padding: 0
   }
@@ -372,4 +502,4 @@ };
 var SYNTAX_RAW_CSS = {
-  button: "\n    display: 'block';\n    font-size: 16px;\n\n    &:hover {\n      color: 'red';\n    }\n\n    & {\n      vertical-align: 'middle';\n    }\n\n    @media (max-width: 600px) {\n      display: 'none';\n    }\n\n    @supports (display: flex) {\n      display: 'flex';\n    }\n  "
+  button: "\n    display: 'block';\n    font-size: 16px;\n    text-align: 'left';\n\n    &:hover {\n      color: 'red';\n    }\n\n    & {\n      vertical-align: 'middle';\n    }\n\n    @media (max-width: 600px) {\n      display: 'none';\n    }\n\n    @supports (display: flex) {\n      display: 'flex';\n    }\n  "
 };
 exports.SYNTAX_RAW_CSS = SYNTAX_RAW_CSS;

lib/types.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 import CSS from 'csstype';
@@ -7,9 +6,11 @@ import { Omit } from 'utility-types';
 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 ClassNameTransformer<N extends object, P extends object | string> = (...styles: (undefined | false | ClassName | N | P)[]) => ClassName;
 export declare type RawCss = string;
-export declare type ExtendedProperty<B, T> = B | T | (B | T)[];
+export declare type Direction = 'neutral' | 'ltr' | 'rtl';
+export declare type ExpandCompoundProperty<B, T> = B | T | (B | T)[];
+export declare type CompoundProperties = 'animationName' | 'fontFamily';
 export declare type AtRule = '@charset' | '@font-face' | '@global' | '@import' | '@keyframes' | '@media' | '@page' | '@selectors' | '@supports' | '@viewport' | '@fallbacks';
-export declare type Properties = Omit<CSS.Properties<string | number>, 'animationName' | 'fontFamily'> & {
-    animationName?: ExtendedProperty<CSS.AnimationNameProperty, Keyframes>;
-    fontFamily?: ExtendedProperty<CSS.FontFamilyProperty, FontFace>;
+export declare type Properties = Omit<CSS.Properties<string | number>, CompoundProperties> & {
+    animationName?: ExpandCompoundProperty<CSS.AnimationNameProperty, Keyframes>;
+    fontFamily?: ExpandCompoundProperty<CSS.FontFamilyProperty, FontFace>;
 };
@@ -77,54 +78,6 @@ export declare type PropertiesFallback = CSS.PropertiesFallback<string | number>;
 export declare type GlobalSheetDefinition<Theme, T> = ((theme: Theme) => GlobalSheet & GlobalSheetNeverize<T>) | null;
-export interface WithThemeWrapperProps {
-    /** Gain a reference to the wrapped component. Provided by `withTheme`. */
-    wrappedRef?: React.Ref<any>;
+export interface TransformOptions {
+    name?: StyleName;
+    rtl?: boolean;
 }
-export interface WithThemeProps<Theme> {
-    /** The ref passed through the `wrappedRef` prop. Provided by `withTheme`. */
-    ref?: React.Ref<any>;
-    /** The theme object. Provided by `withTheme`. */
-    theme: Theme;
-}
-export interface WithThemeOptions {
-    /** Render a pure component instead of a regular component. Provided by `withTheme`. */
-    pure?: boolean;
-    /** Name of the prop in which to pass the theme object to the wrapped component. Provided by `withTheme`. */
-    themePropName?: string;
-}
-export interface WithStylesWrapperProps {
-    /** Gain a reference to the wrapped component. Provided by `withStyles`. */
-    wrappedRef?: React.Ref<any>;
-}
-export interface WithStylesProps<Theme, ParsedBlock> {
-    /** The ref passed through the `wrappedRef` prop. Provided by `withStyles`. */
-    ref?: React.Ref<any>;
-    /** The parsed component style sheet in which rulesets can be transformed to class names. Provided by `withStyles`. */
-    styles: SheetMap<ParsedBlock>;
-    /** The theme object when `passThemeProp` is true. Provided by `withStyles`. */
-    theme?: Theme;
-}
-export interface WithStylesState<Props, ParsedBlock> {
-    props?: Props;
-    styles: SheetMap<ParsedBlock>;
-}
-export interface WithStylesOptions {
-    /** Can this component's styles be extended to create a new component. Provided by `withStyles`. */
-    extendable?: boolean;
-    /** The parent component ID in which to extend styles from. This is usually defined automatically. Provided by `withStyles`. */
-    extendFrom?: string;
-    /** Pass the theme object prop to the wrapped component. Provided by `withStyles`. */
-    passThemeProp?: boolean;
-    /** Render a pure component instead of a regular component. Provided by `withStyles`. */
-    pure?: boolean;
-    /** Name of the prop in which to pass styles to the wrapped component. Provided by `withStyles`. */
-    stylesPropName?: string;
-    /** Name of the prop in which to pass the theme object to the wrapped component. Provided by `withStyles`. */
-    themePropName?: string;
-}
-export interface StyledComponentClass<Theme, Props> extends React.ComponentClass<Props> {
-    displayName: string;
-    styleName: StyleName;
-    WrappedComponent: React.ComponentType<Props & WithStylesProps<Theme, any>>;
-    extendStyles<T>(styleSheet: StyleSheetDefinition<Theme, T>, extendOptions?: Omit<WithStylesOptions, 'extendFrom'>): StyledComponentClass<Theme, Props>;
-}
 //# sourceMappingURL=types.d.ts.map

lib/UnifiedSyntax.d.ts

@@ -1,5 +0,4 @@
-import Stylis from 'stylis';
 import Ruleset from './Ruleset';
 import Sheet from './Sheet';
-import { ComponentBlock, FontFace, GlobalSheet, Keyframes, Properties, StyleSheet, ClassName } from './types';
+import { ComponentBlock, FontFace, GlobalSheet, Keyframes, Properties, StyleSheet, ClassName, TransformOptions } from './types';
 export declare const SELECTOR: RegExp;
@@ -13,3 +12,2 @@ export declare const CLASS_NAME: RegExp;
     keyframesCount: number;
-    stylis: typeof Stylis;
     constructor();
@@ -19,7 +17,7 @@ /**
      */
-    convertGlobalSheet(globalSheet: GlobalSheet): Sheet<NativeBlock>;
+    convertGlobalSheet(globalSheet: GlobalSheet, options: TransformOptions): Sheet<NativeBlock>;
     /**
      * Convert a mapping of unified rulesets to their native syntax.
      */
-    convertStyleSheet(styleSheet: StyleSheet, styleName: string): Sheet<NativeBlock>;
+    convertStyleSheet(styleSheet: StyleSheet, options: TransformOptions): Sheet<NativeBlock>;
     /**
@@ -29,3 +27,3 @@ * Convert a pseudo CSS declaration block to raw CSS using Stylis.
      */
-    convertRawCss(styleName: string, selector: string, declaration: string): ClassName;
+    convertRawCss(sheet: Sheet<NativeBlock>, selector: string, declaration: string): ClassName;
     /**
@@ -32,0 +30,0 @@ * Convert a ruleset including local at-rules, blocks, and properties.

lib/UnifiedSyntax.js

@@ -8,2 +8,4 @@ "use strict";
 
+var _core = require("rtl-css-js/core");
+
 var _formatFontFace = _interopRequireDefault(require("./helpers/formatFontFace"));
@@ -28,2 +30,21 @@
 
+function rtlPlugin(context, content) {
+  if (context !== 1) {
+    return undefined;
+  }
+
+  var _content$split = content.split(':', 2),
+      rawKey = _content$split[0],
+      rawValue = _content$split[1];
+
+  var isQuoted = rawValue.trim().startsWith("'");
+  var unquotedValue = isQuoted ? rawValue.slice(1).slice(0, -1) : rawValue;
+
+  var _convertProperty = (0, _core.convertProperty)(rawKey.trim(), unquotedValue.trim()),
+      key = _convertProperty.key,
+      value = _convertProperty.value;
+
+  return key + ":" + (isQuoted ? "'" + value + "'" : value);
+}
+
 var UnifiedSyntax = function () {
@@ -37,4 +58,2 @@ function UnifiedSyntax() {
 
-    _defineProperty(this, "stylis", void 0);
-
     _defineProperty(this, "handleAnimationName", function (ruleset, value) {
@@ -93,8 +112,2 @@ if (!value) {
     this.on('property:fontFamily', this.handleFontFamily);
-    this.stylis = new _stylis.default({
-      compress: !("production" !== process.env.NODE_ENV),
-      global: false,
-      keyframe: true,
-      prefix: true
-    });
   }
@@ -104,6 +117,6 @@
 
-  _proto.convertGlobalSheet = function convertGlobalSheet(globalSheet) {
+  _proto.convertGlobalSheet = function convertGlobalSheet(globalSheet, options) {
     var _this2 = this;
 
-    var sheet = new _Sheet.default();
+    var sheet = new _Sheet.default(options);
     Object.keys(globalSheet).forEach(function (rule) {
@@ -113,6 +126,6 @@ switch (rule) {
           {
-            var path = globalSheet[rule];
+            var _charset = globalSheet[rule];
 
-            if (typeof path === 'string') {
-              _this2.emit('charset', [sheet, path]);
+            if (typeof _charset === 'string') {
+              _this2.emit('charset', [sheet, _charset]);
             } else if ("production" !== process.env.NODE_ENV) {
@@ -217,6 +230,6 @@ throw new Error('@charset must be a string.');
 
-  _proto.convertStyleSheet = function convertStyleSheet(styleSheet, styleName) {
+  _proto.convertStyleSheet = function convertStyleSheet(styleSheet, options) {
     var _this3 = this;
 
-    var sheet = new _Sheet.default();
+    var sheet = new _Sheet.default(options);
     Object.keys(styleSheet).forEach(function (selector) {
@@ -237,3 +250,3 @@ var ruleset = styleSheet[selector];
         } else {
-          sheet.addClassName(selector, _this3.convertRawCss(styleName, selector, ruleset));
+          sheet.addClassName(selector, _this3.convertRawCss(sheet, selector, ruleset));
         }
@@ -249,5 +262,17 @@ } else if ((0, _isObject.default)(ruleset)) {
 
-  _proto.convertRawCss = function convertRawCss(styleName, selector, declaration) {
+  _proto.convertRawCss = function convertRawCss(sheet, selector, declaration) {
+    var styleName = sheet.options.name;
     var className = styleName + "-" + selector;
-    this.emit('css', [this.stylis("." + className, declaration.trim()), className]);
+    var stylis = new _stylis.default({
+      compress: !("production" !== process.env.NODE_ENV),
+      global: false,
+      keyframe: true,
+      prefix: true
+    });
+
+    if (sheet.options.rtl) {
+      stylis.use(rtlPlugin);
+    }
+
+    this.emit('css', [stylis("." + className, declaration.trim()), className]);
     return className;
@@ -254,0 +279,0 @@ };

module.js

@@ -17,2 +17,3 @@ /**
 export { ClassNameAesthetic, UnifiedSyntax, Ruleset, Sheet };
+
 export default Aesthetic;

package.json

 {
   "name": "aesthetic",
-  "version": "3.5.1",
-  "description": "Aesthetic is a powerful type-safe React library for styling components through the use of adapters.",
+  "version": "4.0.0-alpha.0",
+  "description": "Aesthetic is a powerful type-safe, framework agnostic, CSS-in-JS library for styling components through the use of adapters.",
   "keywords": [
@@ -30,23 +30,14 @@ "aesthetic",
   "dependencies": {
-    "@types/extend": "^3.0.1",
-    "@types/hoist-non-react-statics": "^3.3.1",
-    "@types/react": "^16.8.14",
-    "@types/uuid": "^3.4.4",
-    "csstype": "^2.6.4",
+    "csstype": "^2.6.5",
     "extend": "^3.0.2",
-    "hoist-non-react-statics": "^3.3.0",
+    "rtl-css-js": "^1.13.0",
     "stylis": "^3.5.4",
-    "utility-types": "^3.6.1",
+    "utility-types": "^3.7.0",
     "uuid": "^3.3.2"
   },
-  "peerDependencies": {
-    "react": "^16.3.0"
-  },
   "devDependencies": {
-    "@types/prop-types": "^15.7.1",
-    "prop-types": "^15.7.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "@types/extend": "*",
+    "@types/uuid": "*"
   },
-  "gitHead": "facd3d0640bf2fe9b01adcdd625132650ecf7d0d"
+  "gitHead": "3d52f6bc0eceb9e53cf3196e38967730bfbf4f11"
 }

README.md

@@ -7,14 +7,40 @@ # Aesthetic
 
-Aesthetic is a powerful type-safe React library for styling components, whether it be CSS-in-JS
-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
-styles via third-party libraries, all the while providing customizability, theming, and a unified
+Aesthetic is a powerful type-safe, framework agnostic, CSS-in-JS library for styling components,
+whether it be with plain objects, importing style sheets, or simply referencing external class
+names. Simply put, Aesthetic is an abstraction layer for the compilation of styles via third-party
+libraries, all the while providing customizability, theming, additional features, and a unified
 syntax.
 
-Supports both an HOC and hook styled API!
+```ts
+import AphroditeAesthetic from 'aesthetic-adapter-aphrodite';
+import { Theme } from './types';
 
+const aesthetic = new AphroditeAesthetic<Theme>();
+
+// Register a theme
+aesthetic.registerTheme('light', {
+  unit: 8,
+});
+
+// Register a style sheet definition for a component
+aesthetic.registerStyleSheet('button', ({ unit }) => ({
+  button: {
+    textAlign: 'center',
+    display: 'inline-block',
+    padding: unit,
+  },
+}));
+
+// Parse the styles and generate CSS class names
+const styles = aesthetic.createStyleSheet('button');
+const className = aesthetic.transformStyles(styles.button);
+```
+
+## React
+
+Supports both an HOC and hook styled React API!
+
 ```tsx
 import React from 'react';
-import withStyles, { WithStylesProps } from './withStyles';
-import cx from './cx';
+import useStyles from './useStyles';
 
@@ -25,3 +51,11 @@ export type Props = {
 
-function Button({ children, styles }: Props & WithStylesProps) {
+export default function Button({ children }: Props) {
+  const [styles, cx] = useStyles(({ unit }) => ({
+    button: {
+      textAlign: 'center',
+      display: 'inline-block',
+      padding: unit,
+    },
+  }));
+
   return (
@@ -33,10 +67,2 @@ <button type="button" className={cx(styles.button)}>
 }
-
-export default withStyles(({ unit }) => ({
-  button: {
-    textAlign: 'center',
-    display: 'inline-block',
-    padding: unit,
-  },
-}))(Button);
 ```
@@ -46,3 +72,2 @@
 
-- React 16.3+ (16.8 if using hooks)
 - IE 11+
@@ -53,5 +78,5 @@
 ```
-yarn add aesthetic react
+yarn add aesthetic
 // Or
-npm install aesthetic react
+npm install aesthetic
 ```
@@ -58,0 +83,0 @@

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

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

169768

increased by7.71%

Dependency count

6

decreased by-45.45%

Dev dependency count

2

decreased by-50%

Number of package files

82

increased by34.43%

Lines of code

3548

increased by5.34%

Number of lines in readme file

82

increased by43.86%

Number of low supply chain risk alerts

49

decreased by-3.92%

Worsened metrics

Number of low quality alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedrtl-css-js@^1.13.0

• + Added@babel/runtime@7.26.0(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedrtl-css-js@1.16.1(transitive)

• - Removed@types/extend@^3.0.1

• - Removed@types/hoist-non-react-statics@^3.3.1

• - Removed@types/react@^16.8.14

• - Removed@types/uuid@^3.4.4

• - Removedhoist-non-react-statics@^3.3.0

• - Removed@types/extend@3.0.4(transitive)

• - Removed@types/hoist-non-react-statics@3.3.5(transitive)

• - Removed@types/prop-types@15.7.13(transitive)

• - Removed@types/react@16.14.62(transitive)

• - Removed@types/scheduler@0.16.8(transitive)

• - Removed@types/uuid@3.4.13(transitive)

• - Removedcsstype@3.1.3(transitive)

• - Removedhoist-non-react-statics@3.3.2(transitive)

• - Removedjs-tokens@4.0.0(transitive)

• - Removedloose-envify@1.4.0(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact@16.14.0(transitive)

• - Removedreact-is@16.13.1(transitive)

• Updatedcsstype@^2.6.5

• Updatedutility-types@^3.7.0