aesthetic - npm Package Compare versions

Comparing version 4.1.1 to 5.0.0-alpha.0

CHANGELOG.md

@@ -0,1 +1,29 @@
+## 5.0.0
+
+For improved interoperability, the `Aesthetic` instance is now global and no longer needs to be
+instantiated.
+
+[View the migration guide!](https://github.com/milesj/aesthetic/blob/master/docs/migrate/4.0.md)
+
+#### 💥 Breaking
+
+- Aesthetic default export is now a global instance instead of the class declaration.
+- Moved adapter functionality from `Aesthetic` into a new `Adapter` class.
+  - Methods `applyGlobalStyles`, `createStyleSheet`, `flushStyles`, `isParsedBlock`,
+    `parseStyleSheet`, `purgeStyles`, and `transformStyles`.
+- **[TS]** Theme objects are no longer typed through adapters and instead use generic inferrence.
+  This is a stop-gap until the new design system layer is implemented in the next version.
+- **[TS]** Updated `Aesthetic#options` to be read-only.
+- **[TS]** Renamed `GlobalSheetDefinition` to `GlobalSheetFactory`.
+- **[TS]** Renamed `StyleSheetDefinition` to `StyleSheetFactory`.
+
+#### 🚀 Updates
+
+- Added `Aesthetic#configure()` to modify global options.
+  - Supports a new `adapter` option in which the chosen adapter can be set.
+- Added `Aesthetic#getAdapter()` to return the configured adapter.
+- Added `Aesthetic#getGlobalSheet()` to return a theme global style sheet from the defined factory.
+- Added `Adapter#resetGlobalStyles()` to reset and clear global styles for the defined theme.
+- Removed `Aesthetic#extendTheme()`. Use the 4th argument of `registerTheme()` to define the parent.
+
 ### 4.1.1 - 2019-09-15
@@ -2,0 +30,0 @@

esm/Aesthetic.js

@@ -6,9 +6,14 @@ 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 deepMerge from 'extend';
-import uuid from 'uuid/v4';
-import { isObject, stripClassPrefix } from 'aesthetic-utils';
-import CacheManager from './CacheManager';
-import Sheet from './Sheet';
-import StyleSheetManager from './StyleSheetManager';
-import UnifiedSyntax from './UnifiedSyntax';
-import { GLOBAL_STYLE_NAME } from './constants';
+import { isObject } from 'aesthetic-utils';
+import ClassNameAdapter from './ClassNameAdapter';
+var DEFAULT_OPTIONS = {
+  adapter: new ClassNameAdapter(),
+  cxPropName: 'cx',
+  extendable: false,
+  passThemeProp: false,
+  rtl: false,
+  stylesPropName: 'styles',
+  theme: 'default',
+  themePropName: 'theme'
+};
 
@@ -21,27 +26,13 @@ var Aesthetic = function () {
 
-    _defineProperty(this, "globals", {});
+    _defineProperty(this, "globalSheets", {});
 
-    _defineProperty(this, "options", void 0);
+    _defineProperty(this, "options", _extends({}, DEFAULT_OPTIONS));
 
     _defineProperty(this, "parents", {});
 
-    _defineProperty(this, "styles", {});
+    _defineProperty(this, "styleSheets", {});
 
-    _defineProperty(this, "syntax", new UnifiedSyntax());
-
     _defineProperty(this, "themes", {});
 
-    _defineProperty(this, "cacheManager", new CacheManager());
-
-    _defineProperty(this, "sheetManager", null);
-
-    this.options = _extends({
-      cxPropName: 'cx',
-      extendable: false,
-      passThemeProp: false,
-      rtl: false,
-      stylesPropName: 'styles',
-      theme: 'default',
-      themePropName: 'theme'
-    }, options);
+    this.configure(options);
   }
@@ -51,35 +42,10 @@
 
-  _proto.applyGlobalStyles = function applyGlobalStyles(baseOptions) {
-    if (typeof document !== 'undefined') {
-      document.documentElement.setAttribute('dir', this.options.rtl ? 'rtl' : 'ltr');
-    }
-
-    var options = this.getPreparedTransformOptions(_extends({}, baseOptions, {
-      global: true,
-      name: GLOBAL_STYLE_NAME
-    }));
-    delete options.dir;
-    var cache = this.cacheManager.get(GLOBAL_STYLE_NAME, options);
-    var globalDef = this.globals[options.theme];
-
-    if (cache || !globalDef) {
-      return this;
-    }
-
-    var globalSheet = globalDef(this.getTheme(options.theme));
-    var parsedSheet = this.cacheManager.set(GLOBAL_STYLE_NAME, this.parseStyleSheet(this.syntax.convertGlobalSheet(globalSheet, options).toObject(), GLOBAL_STYLE_NAME), options);
-    this.transformStyles(Object.values(parsedSheet), options);
-    this.flushStyles(GLOBAL_STYLE_NAME);
-    return this;
-  };
-
   _proto.changeTheme = function changeTheme(themeName) {
-    var oldTheme = this.options.theme;
+    var adapter = this.getAdapter();
     this.getTheme(themeName);
-    this.options.theme = themeName;
-    this.purgeStyles(GLOBAL_STYLE_NAME);
-    this.cacheManager.clear(function (unit) {
-      return unit.global === true && unit.theme === oldTheme;
+    this.configure({
+      theme: themeName
     });
-    this.applyGlobalStyles({
+    adapter.resetGlobalStyles(this.options.theme);
+    adapter.applyGlobalStyles({
       theme: themeName
@@ -90,16 +56,5 @@ });
 
-  _proto.createStyleSheet = function createStyleSheet(styleName, baseOptions) {
-    var options = this.getPreparedTransformOptions(baseOptions);
-    var cache = this.cacheManager.get(styleName, options);
-
-    if (cache) {
-      return cache;
-    }
-
-    this.applyGlobalStyles(baseOptions);
-    var nativeSheet = this.syntax.convertStyleSheet(this.getStyleSheet(styleName, options.theme), _extends({}, options, {
-      name: styleName
-    }));
-    var parsedSheet = this.parseStyleSheet(nativeSheet.toObject(), styleName);
-    return this.cacheManager.set(styleName, _extends({}, parsedSheet, {}, nativeSheet.classNames), options);
+  _proto.configure = function configure(options) {
+    this.options = _extends({}, this.options, {}, options);
+    this.options.adapter.aesthetic = this;
   };
@@ -121,15 +76,24 @@
   _proto.extendTheme = function extendTheme(themeName, parentThemeName, theme, globalSheet) {
-    if (globalSheet === void 0) {
-      globalSheet = null;
+    return this.registerTheme(themeName, deepMerge(true, {}, this.getTheme(parentThemeName), theme), globalSheet || this.globalSheets[parentThemeName]);
+  };
+
+  _proto.getAdapter = function getAdapter() {
+    return this.options.adapter;
+  };
+
+  _proto.getGlobalSheet = function getGlobalSheet(themeName) {
+    var theme = this.getTheme(themeName);
+    var globalFactory = this.globalSheets[themeName];
+
+    if (!globalFactory) {
+      return null;
     }
 
-    return this.registerTheme(themeName, deepMerge(true, {}, this.getTheme(parentThemeName), theme), globalSheet || this.globals[parentThemeName]);
+    return globalFactory(theme);
   };
 
-  _proto.flushStyles = function flushStyles(styleName) {};
-
   _proto.getStyleSheet = function getStyleSheet(styleName, themeName) {
     var parentStyleName = this.parents[styleName];
-    var styleDef = this.styles[styleName];
-    var styleSheet = styleDef(this.getTheme(themeName || this.options.theme));
+    var styleFactory = this.styleSheets[styleName];
+    var styleSheet = styleFactory(this.getTheme(themeName));
 
@@ -156,16 +120,6 @@ if (parentStyleName) {
 
-  _proto.isParsedBlock = function isParsedBlock(block) {
-    return isObject(block);
-  };
-
-  _proto.parseStyleSheet = function parseStyleSheet(styleSheet, styleName) {
-    return _extends({}, styleSheet);
-  };
-
-  _proto.purgeStyles = function purgeStyles(styleName) {};
-
   _proto.registerStyleSheet = function registerStyleSheet(styleName, styleSheet, extendFrom) {
     if (extendFrom) {
       if ("production" !== process.env.NODE_ENV) {
-        if (!this.styles[extendFrom]) {
+        if (!this.styleSheets[extendFrom]) {
           throw new Error("Cannot extend from \"" + extendFrom + "\" as those styles do not exist.");
@@ -180,3 +134,3 @@ } else if (extendFrom === styleName) {
 
-    this.styles[styleName] = this.validateDefinition(styleName, styleSheet);
+    this.styleSheets[styleName] = this.validateDefinition(styleName, styleSheet);
     return this;
@@ -186,6 +140,2 @@ };
   _proto.registerTheme = function registerTheme(themeName, theme, globalSheet) {
-    if (globalSheet === void 0) {
-      globalSheet = null;
-    }
-
     if ("production" !== process.env.NODE_ENV) {
@@ -200,79 +150,20 @@ if (this.themes[themeName]) {
     this.themes[themeName] = theme;
-    this.globals[themeName] = this.validateDefinition(themeName, globalSheet);
-    return this;
-  };
 
-  _proto.transformStyles = function transformStyles(styles, baseOptions) {
-    var _this = this;
-
-    var options = this.getPreparedTransformOptions(baseOptions);
-    var classNames = [];
-    var nativeBlocks = [];
-    var parsedBlocks = [];
-    var inlineName = '';
-    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)) {
-        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.');
-      }
-    });
-
-    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)));
+    if (globalSheet) {
+      this.globalSheets[themeName] = this.validateDefinition(themeName, globalSheet);
     }
 
-    if (parsedBlocks.length > 0) {
-      classNames.push(this.transformToClassName(parsedBlocks));
-    }
-
-    if (inlineName) {
-      this.flushStyles(inlineName);
-    }
-
-    return classNames.join(' ').trim();
+    return this;
   };
 
-  _proto.getPreparedTransformOptions = function getPreparedTransformOptions(options) {
-    if (options === void 0) {
-      options = {};
+  _proto.resetForTesting = function resetForTesting() {
+    if (process.env.NODE_ENV === 'test') {
+      this.globalSheets = {};
+      this.parents = {};
+      this.styleSheets = {};
+      this.themes = {};
+      this.configure(DEFAULT_OPTIONS);
     }
-
-    var dir = this.options.rtl ? 'rtl' : 'ltr';
-    return {
-      dir: options.dir || dir,
-      global: options.global || false,
-      name: options.name || '',
-      theme: options.theme || this.options.theme
-    };
   };
 
-  _proto.getStyleSheetManager = function getStyleSheetManager() {
-    if (this.sheetManager) {
-      return this.sheetManager;
-    }
-
-    this.sheetManager = new StyleSheetManager();
-    return this.sheetManager;
-  };
-
   _proto.validateDefinition = function validateDefinition(key, value) {
@@ -279,0 +170,0 @@ if ("production" !== process.env.NODE_ENV) {

esm/index.js

@@ -5,4 +5,6 @@ /**
  */
+import instance from './instance';
+import Adapter from './Adapter';
 import Aesthetic from './Aesthetic';
-import ClassNameAesthetic from './ClassNameAesthetic';
+import ClassNameAdapter from './ClassNameAdapter';
 import UnifiedSyntax from './UnifiedSyntax';
@@ -13,3 +15,3 @@ import Ruleset from './Ruleset';
 export * from './types';
-export { ClassNameAesthetic, UnifiedSyntax, Ruleset, Sheet };
-export default Aesthetic;
+export { Adapter, Aesthetic, ClassNameAdapter, UnifiedSyntax, Ruleset, Sheet };
+export default instance;

esm/StyleSheetManager.js

@@ -7,6 +7,18 @@ 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; }
   function StyleSheetManager() {
-    _defineProperty(this, "element", void 0);
+    _defineProperty(this, "element", null);
 
-    _defineProperty(this, "sheet", void 0);
+    _defineProperty(this, "sheet", null);
+  }
 
+  var _proto = StyleSheetManager.prototype;
+
+  _proto.getFlushedStyles = function getFlushedStyles() {
+    return _getFlushedStyles(this.getStyleElement());
+  };
+
+  _proto.getStyleElement = function getStyleElement() {
+    if (this.element) {
+      return this.element;
+    }
+
     this.element = document.createElement('style');
@@ -18,11 +30,7 @@ this.element.type = 'text/css';
     this.sheet = this.element.sheet;
-  }
-
-  var _proto = StyleSheetManager.prototype;
-
-  _proto.getFlushedStyles = function getFlushedStyles() {
-    return _getFlushedStyles(this.element);
+    return this.element;
   };
 
   _proto.injectRule = function injectRule(rule) {
+    this.getStyleElement();
     this.sheet.insertRule(rule, this.sheet.cssRules.length);
@@ -33,3 +41,3 @@ return this;
   _proto.injectStatements = function injectStatements(css) {
-    this.element.textContent += css;
+    this.getStyleElement().textContent += css;
     return this;
@@ -39,3 +47,3 @@ };
   _proto.purgeStyles = function purgeStyles() {
-    _purgeStyles(this.element);
+    _purgeStyles(this.getStyleElement());
 
@@ -42,0 +50,0 @@ return this;

lib/Aesthetic.d.ts

@@ -1,29 +0,19 @@
-import CacheManager from './CacheManager';
-import StyleSheetManager from './StyleSheetManager';
-import UnifiedSyntax from './UnifiedSyntax';
-import { AestheticOptions, ClassName, GlobalSheetDefinition, TransformOptions, SheetMap, StyleName, StyleSheet, StyleSheetDefinition, ThemeName } from './types';
-export default abstract class Aesthetic<Theme extends object, NativeBlock extends object, ParsedBlock extends object | string = NativeBlock> {
-    globals: {
-        [themeName: string]: GlobalSheetDefinition<Theme, any>;
+import Adapter from './Adapter';
+import { AestheticOptions, GlobalSheetFactory, StyleName, StyleSheet, StyleSheetFactory, ThemeName, ThemeSheet } from './types';
+export default class Aesthetic {
+    globalSheets: {
+        [themeName: string]: GlobalSheetFactory;
     };
-    options: AestheticOptions;
+    options: Readonly<AestheticOptions>;
     parents: {
         [childStyleName: string]: StyleName;
     };
-    styles: {
-        [styleName: string]: StyleSheetDefinition<Theme, any>;
+    styleSheets: {
+        [styleName: string]: StyleSheetFactory;
     };
-    syntax: UnifiedSyntax<NativeBlock>;
     themes: {
-        [themeName: string]: Theme;
+        [themeName: string]: ThemeSheet;
     };
-    protected cacheManager: CacheManager<SheetMap<ParsedBlock>>;
-    protected sheetManager: StyleSheetManager | null;
     constructor(options?: Partial<AestheticOptions>);
     /**
-     * Apply and inject global styles for the current theme.
-     * This should only happen once!
-     */
-    applyGlobalStyles(baseOptions?: TransformOptions): this;
-    /**
      * Change the current theme to another registered theme.
@@ -34,21 +24,24 @@ * This will purge all flushed global styles and regenerate new ones.
     /**
-     * Create and return a style sheet unique to an adapter.
+     * Configure the global aesthetic instance by modifying the chosen adapter
+     * and optional settings.
      */
-    createStyleSheet(styleName: StyleName, baseOptions?: TransformOptions): SheetMap<ParsedBlock>;
+    configure(options: Partial<AestheticOptions>): void;
     /**
      * Compose and extend multiple style sheets to create 1 style sheet.
      */
-    extendStyles(...styleSheets: StyleSheetDefinition<Theme, any>[]): StyleSheetDefinition<Theme, any>;
+    extendStyles<T = ThemeSheet>(...styleSheets: StyleSheetFactory<T>[]): StyleSheetFactory<T>;
     /**
      * Register a theme by extending and merging with a previously defined theme.
      */
-    extendTheme<T>(themeName: ThemeName, parentThemeName: ThemeName, theme: Partial<Theme>, globalSheet?: GlobalSheetDefinition<Theme, T>): this;
+    extendTheme<T = ThemeSheet>(themeName: ThemeName, parentThemeName: ThemeName, theme: Partial<T>, globalSheet?: GlobalSheetFactory<T>): this;
     /**
-     * Flush a target component's transformed styles and inject them into the DOM.
-     * If no target defined, will flush all buffered styles.
+     * Return the configured adapter.
      */
-    flushStyles(styleName?: StyleName): void;
+    getAdapter<N extends object, P extends object | string = N>(): Adapter<N, P>;
     /**
+     * Retrieve the global style sheet for the defined theme.
+     */
+    getGlobalSheet(themeName: ThemeName): StyleSheet | null;
+    /**
      * Retrieve the component style sheet for the defined theme.
-     * If the definition is a function, execute it while passing the current theme.
      */
@@ -59,42 +52,18 @@ getStyleSheet(styleName: StyleName, themeName: ThemeName): StyleSheet;
      */
-    getTheme(name?: ThemeName): Theme;
+    getTheme<T = ThemeSheet>(name?: ThemeName): T;
     /**
-     * Return true if the style object is a parsed block and not a native block.
-     */
-    isParsedBlock(block: NativeBlock | ParsedBlock): block is ParsedBlock;
-    /**
-     * Parse an Aesthetic style sheet into an adapter native style sheet.
-     */
-    parseStyleSheet(styleSheet: SheetMap<NativeBlock>, styleName: StyleName): SheetMap<ParsedBlock>;
-    /**
-     * Purge and remove all styles from the DOM for the target component.
-     * If no target defined, will purge all possible styles.
-     */
-    purgeStyles(styleName?: StyleName): void;
-    /**
      * Register a style sheet definition. Optionally extend from a parent style sheet if defined.
      */
-    registerStyleSheet<T>(styleName: StyleName, styleSheet: StyleSheetDefinition<Theme, T>, extendFrom?: StyleName): this;
+    registerStyleSheet<T = ThemeSheet>(styleName: StyleName, styleSheet: StyleSheetFactory<T>, extendFrom?: StyleName): this;
     /**
      * Register a theme with a set of parameters. Optionally register
-     * a global style sheet to apply to the entire document.
+     * a global style sheet to apply to the entire document, and optionally
+     * extend from a parent theme if defined.
      */
-    registerTheme<T>(themeName: ThemeName, theme: Theme, globalSheet?: GlobalSheetDefinition<Theme, T>): this;
+    registerTheme<T = ThemeSheet>(themeName: ThemeName, theme: T, globalSheet?: GlobalSheetFactory<T> | null): this;
     /**
-     * Transform the list of style objects to a list of CSS class names.
+     * Reset state back to defaults for use within testing.
      */
-    transformStyles(styles: (undefined | false | ClassName | NativeBlock | ParsedBlock)[], baseOptions?: TransformOptions): ClassName;
+    resetForTesting(): void;
     /**
-     * Transform the parsed style objects into CSS class names.
-     */
-    abstract transformToClassName(styles: ParsedBlock[]): ClassName;
-    /**
-     * Return transform options with defaults applied.
-     */
-    protected getPreparedTransformOptions(options?: TransformOptions): Required<TransformOptions>;
-    /**
-     * Return a native style sheet manager used for injecting CSS.
-     */
-    protected getStyleSheetManager(): StyleSheetManager;
-    /**
      * Validate a style sheet or theme definition.
@@ -101,0 +70,0 @@ */

lib/Aesthetic.js

@@ -8,16 +8,6 @@ "use strict";
 
-var _v = _interopRequireDefault(require("uuid/v4"));
-
 var _aestheticUtils = require("aesthetic-utils");
 
-var _CacheManager = _interopRequireDefault(require("./CacheManager"));
+var _ClassNameAdapter = _interopRequireDefault(require("./ClassNameAdapter"));
 
-var _Sheet = _interopRequireDefault(require("./Sheet"));
-
-var _StyleSheetManager = _interopRequireDefault(require("./StyleSheetManager"));
-
-var _UnifiedSyntax = _interopRequireDefault(require("./UnifiedSyntax"));
-
-var _constants = require("./constants");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -29,2 +19,13 @@
 
+var DEFAULT_OPTIONS = {
+  adapter: new _ClassNameAdapter.default(),
+  cxPropName: 'cx',
+  extendable: false,
+  passThemeProp: false,
+  rtl: false,
+  stylesPropName: 'styles',
+  theme: 'default',
+  themePropName: 'theme'
+};
+
 var Aesthetic = function () {
@@ -36,27 +37,13 @@ function Aesthetic(options) {
 
-    _defineProperty(this, "globals", {});
+    _defineProperty(this, "globalSheets", {});
 
-    _defineProperty(this, "options", void 0);
+    _defineProperty(this, "options", _extends({}, DEFAULT_OPTIONS));
 
     _defineProperty(this, "parents", {});
 
-    _defineProperty(this, "styles", {});
+    _defineProperty(this, "styleSheets", {});
 
-    _defineProperty(this, "syntax", new _UnifiedSyntax.default());
-
     _defineProperty(this, "themes", {});
 
-    _defineProperty(this, "cacheManager", new _CacheManager.default());
-
-    _defineProperty(this, "sheetManager", null);
-
-    this.options = _extends({
-      cxPropName: 'cx',
-      extendable: false,
-      passThemeProp: false,
-      rtl: false,
-      stylesPropName: 'styles',
-      theme: 'default',
-      themePropName: 'theme'
-    }, options);
+    this.configure(options);
   }
@@ -66,35 +53,10 @@
 
-  _proto.applyGlobalStyles = function applyGlobalStyles(baseOptions) {
-    if (typeof document !== 'undefined') {
-      document.documentElement.setAttribute('dir', this.options.rtl ? 'rtl' : 'ltr');
-    }
-
-    var options = this.getPreparedTransformOptions(_extends({}, baseOptions, {
-      global: true,
-      name: _constants.GLOBAL_STYLE_NAME
-    }));
-    delete options.dir;
-    var cache = this.cacheManager.get(_constants.GLOBAL_STYLE_NAME, options);
-    var globalDef = this.globals[options.theme];
-
-    if (cache || !globalDef) {
-      return this;
-    }
-
-    var globalSheet = globalDef(this.getTheme(options.theme));
-    var parsedSheet = this.cacheManager.set(_constants.GLOBAL_STYLE_NAME, this.parseStyleSheet(this.syntax.convertGlobalSheet(globalSheet, options).toObject(), _constants.GLOBAL_STYLE_NAME), options);
-    this.transformStyles(Object.values(parsedSheet), options);
-    this.flushStyles(_constants.GLOBAL_STYLE_NAME);
-    return this;
-  };
-
   _proto.changeTheme = function changeTheme(themeName) {
-    var oldTheme = this.options.theme;
+    var adapter = this.getAdapter();
     this.getTheme(themeName);
-    this.options.theme = themeName;
-    this.purgeStyles(_constants.GLOBAL_STYLE_NAME);
-    this.cacheManager.clear(function (unit) {
-      return unit.global === true && unit.theme === oldTheme;
+    this.configure({
+      theme: themeName
     });
-    this.applyGlobalStyles({
+    adapter.resetGlobalStyles(this.options.theme);
+    adapter.applyGlobalStyles({
       theme: themeName
@@ -105,16 +67,5 @@ });
 
-  _proto.createStyleSheet = function createStyleSheet(styleName, baseOptions) {
-    var options = this.getPreparedTransformOptions(baseOptions);
-    var cache = this.cacheManager.get(styleName, options);
-
-    if (cache) {
-      return cache;
-    }
-
-    this.applyGlobalStyles(baseOptions);
-    var nativeSheet = this.syntax.convertStyleSheet(this.getStyleSheet(styleName, options.theme), _extends({}, options, {
-      name: styleName
-    }));
-    var parsedSheet = this.parseStyleSheet(nativeSheet.toObject(), styleName);
-    return this.cacheManager.set(styleName, _extends({}, parsedSheet, {}, nativeSheet.classNames), options);
+  _proto.configure = function configure(options) {
+    this.options = _extends({}, this.options, {}, options);
+    this.options.adapter.aesthetic = this;
   };
@@ -136,15 +87,24 @@
   _proto.extendTheme = function extendTheme(themeName, parentThemeName, theme, globalSheet) {
-    if (globalSheet === void 0) {
-      globalSheet = null;
+    return this.registerTheme(themeName, (0, _extend.default)(true, {}, this.getTheme(parentThemeName), theme), globalSheet || this.globalSheets[parentThemeName]);
+  };
+
+  _proto.getAdapter = function getAdapter() {
+    return this.options.adapter;
+  };
+
+  _proto.getGlobalSheet = function getGlobalSheet(themeName) {
+    var theme = this.getTheme(themeName);
+    var globalFactory = this.globalSheets[themeName];
+
+    if (!globalFactory) {
+      return null;
     }
 
-    return this.registerTheme(themeName, (0, _extend.default)(true, {}, this.getTheme(parentThemeName), theme), globalSheet || this.globals[parentThemeName]);
+    return globalFactory(theme);
   };
 
-  _proto.flushStyles = function flushStyles(styleName) {};
-
   _proto.getStyleSheet = function getStyleSheet(styleName, themeName) {
     var parentStyleName = this.parents[styleName];
-    var styleDef = this.styles[styleName];
-    var styleSheet = styleDef(this.getTheme(themeName || this.options.theme));
+    var styleFactory = this.styleSheets[styleName];
+    var styleSheet = styleFactory(this.getTheme(themeName));
 
@@ -171,16 +131,6 @@ if (parentStyleName) {
 
-  _proto.isParsedBlock = function isParsedBlock(block) {
-    return (0, _aestheticUtils.isObject)(block);
-  };
-
-  _proto.parseStyleSheet = function parseStyleSheet(styleSheet, styleName) {
-    return _extends({}, styleSheet);
-  };
-
-  _proto.purgeStyles = function purgeStyles(styleName) {};
-
   _proto.registerStyleSheet = function registerStyleSheet(styleName, styleSheet, extendFrom) {
     if (extendFrom) {
       if ("production" !== process.env.NODE_ENV) {
-        if (!this.styles[extendFrom]) {
+        if (!this.styleSheets[extendFrom]) {
           throw new Error("Cannot extend from \"" + extendFrom + "\" as those styles do not exist.");
@@ -195,3 +145,3 @@ } else if (extendFrom === styleName) {
 
-    this.styles[styleName] = this.validateDefinition(styleName, styleSheet);
+    this.styleSheets[styleName] = this.validateDefinition(styleName, styleSheet);
     return this;
@@ -201,6 +151,2 @@ };
   _proto.registerTheme = function registerTheme(themeName, theme, globalSheet) {
-    if (globalSheet === void 0) {
-      globalSheet = null;
-    }
-
     if ("production" !== process.env.NODE_ENV) {
@@ -215,79 +161,20 @@ if (this.themes[themeName]) {
     this.themes[themeName] = theme;
-    this.globals[themeName] = this.validateDefinition(themeName, globalSheet);
-    return this;
-  };
 
-  _proto.transformStyles = function transformStyles(styles, baseOptions) {
-    var _this = this;
-
-    var options = this.getPreparedTransformOptions(baseOptions);
-    var classNames = [];
-    var nativeBlocks = [];
-    var parsedBlocks = [];
-    var inlineName = '';
-    styles.forEach(function (style) {
-      if (!style) {
-        return;
-      }
-
-      if (typeof style === 'string') {
-        classNames.push.apply(classNames, String(style).split(' ').map(function (s) {
-          return (0, _aestheticUtils.stripClassPrefix)(s).trim();
-        }));
-      } else if ((0, _aestheticUtils.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.');
-      }
-    });
-
-    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)));
+    if (globalSheet) {
+      this.globalSheets[themeName] = this.validateDefinition(themeName, globalSheet);
     }
 
-    if (parsedBlocks.length > 0) {
-      classNames.push(this.transformToClassName(parsedBlocks));
-    }
-
-    if (inlineName) {
-      this.flushStyles(inlineName);
-    }
-
-    return classNames.join(' ').trim();
+    return this;
   };
 
-  _proto.getPreparedTransformOptions = function getPreparedTransformOptions(options) {
-    if (options === void 0) {
-      options = {};
+  _proto.resetForTesting = function resetForTesting() {
+    if (process.env.NODE_ENV === 'test') {
+      this.globalSheets = {};
+      this.parents = {};
+      this.styleSheets = {};
+      this.themes = {};
+      this.configure(DEFAULT_OPTIONS);
     }
-
-    var dir = this.options.rtl ? 'rtl' : 'ltr';
-    return {
-      dir: options.dir || dir,
-      global: options.global || false,
-      name: options.name || '',
-      theme: options.theme || this.options.theme
-    };
   };
 
-  _proto.getStyleSheetManager = function getStyleSheetManager() {
-    if (this.sheetManager) {
-      return this.sheetManager;
-    }
-
-    this.sheetManager = new _StyleSheetManager.default();
-    return this.sheetManager;
-  };
-
   _proto.validateDefinition = function validateDefinition(key, value) {
@@ -294,0 +181,0 @@ if ("production" !== process.env.NODE_ENV) {

lib/index.d.ts

@@ -5,4 +5,6 @@ /**
  */
+import instance from './instance';
+import Adapter from './Adapter';
 import Aesthetic from './Aesthetic';
-import ClassNameAesthetic from './ClassNameAesthetic';
+import ClassNameAdapter from './ClassNameAdapter';
 import UnifiedSyntax from './UnifiedSyntax';
@@ -13,4 +15,4 @@ import Ruleset from './Ruleset';
 export * from './types';
-export { ClassNameAesthetic, UnifiedSyntax, Ruleset, Sheet };
-export default Aesthetic;
+export { Adapter, Aesthetic, ClassNameAdapter, UnifiedSyntax, Ruleset, Sheet };
+export default instance;
 //# sourceMappingURL=index.d.ts.map

lib/index.js

@@ -5,3 +5,5 @@ "use strict";
 var _exportNames = {
-  ClassNameAesthetic: true,
+  Adapter: true,
+  Aesthetic: true,
+  ClassNameAdapter: true,
   UnifiedSyntax: true,
@@ -13,8 +15,16 @@ Ruleset: true,
 
+var _instance = _interopRequireDefault(require("./instance"));
+
+var _Adapter = _interopRequireDefault(require("./Adapter"));
+
+exports.Adapter = _Adapter.default;
+
 var _Aesthetic = _interopRequireDefault(require("./Aesthetic"));
 
-var _ClassNameAesthetic = _interopRequireDefault(require("./ClassNameAesthetic"));
+exports.Aesthetic = _Aesthetic.default;
 
-exports.ClassNameAesthetic = _ClassNameAesthetic.default;
+var _ClassNameAdapter = _interopRequireDefault(require("./ClassNameAdapter"));
 
+exports.ClassNameAdapter = _ClassNameAdapter.default;
+
 var _UnifiedSyntax = _interopRequireDefault(require("./UnifiedSyntax"));
@@ -54,3 +64,3 @@
  */
-var _default = _Aesthetic.default;
+var _default = _instance.default;
 exports.default = _default;

lib/StyleSheetManager.d.ts

 export default class StyleSheetManager {
     private element;
     private sheet;
-    constructor();
     getFlushedStyles(): string;
+    getStyleElement(): HTMLStyleElement;
     injectRule(rule: string): this;
@@ -7,0 +7,0 @@ injectStatements(css: string): this;

lib/StyleSheetManager.js

@@ -12,6 +12,18 @@ "use strict";
   function StyleSheetManager() {
-    _defineProperty(this, "element", void 0);
+    _defineProperty(this, "element", null);
 
-    _defineProperty(this, "sheet", void 0);
+    _defineProperty(this, "sheet", null);
+  }
 
+  var _proto = StyleSheetManager.prototype;
+
+  _proto.getFlushedStyles = function getFlushedStyles() {
+    return (0, _aestheticUtils.getFlushedStyles)(this.getStyleElement());
+  };
+
+  _proto.getStyleElement = function getStyleElement() {
+    if (this.element) {
+      return this.element;
+    }
+
     this.element = document.createElement('style');
@@ -23,11 +35,7 @@ this.element.type = 'text/css';
     this.sheet = this.element.sheet;
-  }
-
-  var _proto = StyleSheetManager.prototype;
-
-  _proto.getFlushedStyles = function getFlushedStyles() {
-    return (0, _aestheticUtils.getFlushedStyles)(this.element);
+    return this.element;
   };
 
   _proto.injectRule = function injectRule(rule) {
+    this.getStyleElement();
     this.sheet.insertRule(rule, this.sheet.cssRules.length);
@@ -38,3 +46,3 @@ return this;
   _proto.injectStatements = function injectStatements(css) {
-    this.element.textContent += css;
+    this.getStyleElement().textContent += css;
     return this;
@@ -44,3 +52,3 @@ };
   _proto.purgeStyles = function purgeStyles() {
-    (0, _aestheticUtils.purgeStyles)(this.element);
+    (0, _aestheticUtils.purgeStyles)(this.getStyleElement());
     return this;
@@ -47,0 +55,0 @@ };

lib/types.d.ts

 import CSS from 'csstype';
-import { Omit } from 'utility-types';
+import Adapter from './Adapter';
 export declare type StyleName = string;
 export declare type ThemeName = string;
 export declare type ClassName = string;
-export declare type ClassNameTransformer<N extends object, P extends object | string> = (...styles: (undefined | false | ClassName | N | P)[]) => ClassName;
 export declare type RawCss = string;
@@ -11,2 +10,5 @@ export declare type Direction = 'neutral' | 'ltr' | 'rtl';
 export declare type CompoundProperties = 'animationName' | 'fontFamily';
+export interface SheetMap<T> {
+    [selector: string]: T;
+}
 export declare type AtRule = '@charset' | '@font-face' | '@global' | '@import' | '@keyframes' | '@media' | '@page' | '@selectors' | '@supports' | '@viewport' | '@fallbacks';
@@ -31,10 +33,7 @@ export declare type Properties = Omit<CSS.Properties<string | number>, CompoundProperties> & {
 export interface Keyframes {
+    [percent: string]: Block | string | undefined;
     from?: Block;
     to?: Block;
     name?: string;
-    [percent: string]: Block | string | undefined;
 }
-export interface SheetMap<T> {
-    [selector: string]: T;
-}
 export declare type ComponentBlock = Block & {
@@ -59,3 +58,3 @@ '@fallbacks'?: PropertiesFallback;
 };
-export declare type StyleSheetDefinition<Theme, T> = (theme: Theme) => T extends unknown ? StyleSheet : StyleSheet & StyleSheetNeverize<T>;
+export declare type StyleSheetFactory<Theme = ThemeSheet, T = {}> = (theme: Theme) => StyleSheet & StyleSheetNeverize<T>;
 export interface GlobalSheet {
@@ -79,4 +78,10 @@ '@charset'?: string;
 };
-export declare type GlobalSheetDefinition<Theme, T> = ((theme: Theme) => GlobalSheet & GlobalSheetNeverize<T>) | null;
+export declare type GlobalSheetFactory<Theme = ThemeSheet, T = {}> = (theme: Theme) => GlobalSheet & GlobalSheetNeverize<T>;
+export interface ThemeSheet {
+    [key: string]: any;
+}
+export declare type ClassNameTransformer = (...styles: (undefined | false | ClassName | object | Block)[]) => ClassName;
+export declare type CompiledStyleSheet = SheetMap<ClassName | object>;
 export interface AestheticOptions {
+    adapter: Adapter<any, any>;
     cxPropName: string;
@@ -83,0 +88,0 @@ extendable: boolean;

package.json

 {
   "name": "aesthetic",
-  "version": "4.1.1",
+  "version": "5.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.",
@@ -30,15 +30,14 @@ "keywords": [
   "dependencies": {
-    "aesthetic-utils": "^2.0.1",
-    "csstype": "^2.6.6",
+    "aesthetic-utils": "^3.0.0-alpha.0",
+    "csstype": "^2.6.7",
     "extend": "^3.0.2",
-    "rtl-css-js": "^1.13.1",
+    "rtl-css-js": "^1.14.0",
     "stylis": "^3.5.4",
-    "utility-types": "^3.7.0",
     "uuid": "^3.3.3"
   },
-  "devDependencies": {
-    "@types/extend": "^3.0.1",
-    "@types/uuid": "^3.4.5"
+  "funding": {
+    "type": "ko-fi",
+    "url": "https://ko-fi.com/milesjohnson"
   },
-  "gitHead": "9e25a97050daf05f81b04815c301f93cdc1d3b56"
+  "gitHead": "1909ec6f57b2ddcc63355122e38d74c9d06d2a23"
 }

README.md

 # Aesthetic
 
-[![Build Status](https://travis-ci.org/milesj/aesthetic.svg?branch=master)](https://travis-ci.org/milesj/aesthetic)
+[![Build Status](https://github.com/milesj/aesthetic/workflows/Build/badge.svg)](https://github.com/milesj/aesthetic/actions?query=branch%3Amaster)
 [![npm version](https://badge.fury.io/js/aesthetic.svg)](https://www.npmjs.com/package/aesthetic)
@@ -14,9 +14,13 @@ [![npm deps](https://david-dm.org/milesj/aesthetic.svg?path=packages/core)](https://www.npmjs.com/package/aesthetic)
 ```ts
-import AphroditeAesthetic from 'aesthetic-adapter-aphrodite';
+import aesthetic from 'aesthetic';
+import AphroditeAdapter from 'aesthetic-adapter-aphrodite';
 import { Theme } from './types';
 
-const aesthetic = new AphroditeAesthetic<Theme>();
+aesthetic.configure({
+  adapter: new AphroditeAdapter(),
+  theme: 'light',
+});
 
 // Register a theme
-aesthetic.registerTheme('light', {
+aesthetic.registerTheme<Theme>('light', {
   unit: 8,
@@ -26,3 +30,3 @@ });
 // Register a style sheet definition for a component
-aesthetic.registerStyleSheet('button', ({ unit }) => ({
+aesthetic.registerStyleSheet<Theme>('button', ({ unit }) => ({
   button: {
@@ -46,3 +50,3 @@ textAlign: 'center',
 import React from 'react';
-import useStyles from './useStyles';
+import { useStyles } from 'aesthetic-react';
 
@@ -49,0 +53,0 @@ export type Props = {

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Improved metrics

Total package byte prevSize

169866

increased by8.77%

Dependency count

6

decreased by-14.29%

Dev dependency count

0

decreased by-100%

Number of package files

63

increased by21.15%

Lines of code

3751

increased by10.91%

Number of lines in readme file

86

increased by4.88%

Worsened metrics

Number of low quality alerts

2

increased by100%

Number of low supply chain risk alerts

49

increased by4.26%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedaesthetic-utils@3.1.0(transitive)

• - Removedutility-types@^3.7.0

• - Removedaesthetic-utils@2.0.1(transitive)

• - Removedutility-types@3.11.0(transitive)

• Updatedaesthetic-utils@^3.0.0-alpha.0

• Updatedcsstype@^2.6.7

• Updatedrtl-css-js@^1.14.0