@aesthetic/sss - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

esm/index.js

@@ -1,39 +0,3 @@
-import { toArray, isObject, generateHash, objectLoop, arrayLoop } from '@aesthetic/utils';
+import { objectLoop, toArray, isObject, arrayLoop } from '@aesthetic/utils';
 
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
-  try {
-    var info = gen[key](arg);
-    var value = info.value;
-  } catch (error) {
-    reject(error);
-    return;
-  }
-
-  if (info.done) {
-    resolve(value);
-  } else {
-    Promise.resolve(value).then(_next, _throw);
-  }
-}
-
-function _asyncToGenerator(fn) {
-  return function () {
-    var self = this,
-        args = arguments;
-    return new Promise(function (resolve, reject) {
-      var gen = fn.apply(self, args);
-
-      function _next(value) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
-      }
-
-      function _throw(err) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
-      }
-
-      _next(undefined);
-    });
-  };
-}
-
 function _defineProperty(obj, key, value) {
@@ -78,13 +42,5 @@ if (key in obj) {
 
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return self;
-}
-
 var Block = function () {
   function Block(selector) {
-    _defineProperty(this, "nested", new Map());
+    _defineProperty(this, "nested", {});
 
@@ -105,6 +61,6 @@ _defineProperty(this, "properties", {});
 
-    if (merge && this.nested.has(block.selector)) {
-      this.nested.get(block.selector).merge(block);
+    if (merge && this.nested[block.selector]) {
+      this.nested[block.selector].merge(block);
     } else {
-      this.nested.set(block.selector, block);
+      this.nested[block.selector] = block;
     }
@@ -126,4 +82,3 @@
   _proto.clone = function clone(selector) {
-    var block = new Block(selector);
-    return block.merge(this);
+    return new Block(selector).merge(this);
   };
@@ -135,3 +90,3 @@
     this.addProperties(block.properties);
-    block.nested.forEach(function (nested) {
+    objectLoop(block.nested, function (nested) {
       _this.addNested(nested);
@@ -145,3 +100,3 @@ });
 
-    this.nested.forEach(function (block, selector) {
+    objectLoop(this.nested, function (block, selector) {
       object[selector] = block.toObject();
@@ -371,3 +326,12 @@ });
 var SELECTOR = /^((\[[\x2Da-z\u017F\u212A]+\])|(::?[\x2Da-z\u017F\u212A]+))$/i;
-var ASYNC_TIMEOUT = 5000;
+var EVENT_MAP = {
+  onBlockAttribute: 'block:attribute',
+  onBlockFallback: 'block:fallback',
+  onBlockMedia: 'block:media',
+  onBlockProperty: 'block:property',
+  onBlockPseudo: 'block:pseudo',
+  onBlockSelector: 'block:selector',
+  onBlockSupports: 'block:supports',
+  onFontFace: 'font-face'
+};
 
@@ -382,5 +346,3 @@ var Parser = function () {
       objectLoop(handlers, function (handler, name) {
-        _this.on(name.slice(2).replace(/([A-Z])/g, function (match, char) {
-          return ":" + char.toLowerCase();
-        }), handler);
+        _this.on(EVENT_MAP[name] || name.slice(2).toLowerCase(), handler);
       });
@@ -392,10 +354,2 @@ }
 
-  _proto.hash = function hash() {
-    for (var _len = arguments.length, parts = new Array(_len), _key = 0; _key < _len; _key++) {
-      parts[_key] = arguments[_key];
-    }
-
-    return generateHash(parts.join('-'));
-  };
-
   _proto.parseBlock = function parseBlock(builder, object) {
@@ -434,3 +388,3 @@ var _this2 = this;
       if (!isObject(object)) {
-        throw new Error("@" + type + " must be an object of queries or conditions to declarations.");
+        throw new Error("@" + type + " must be an object of conditions to declarations.");
       }
@@ -469,3 +423,3 @@ }
 
-    var name = object.name || animationName || this.hash('keyframes');
+    var name = object.name || animationName;
     var keyframes = new Block("@keyframes " + name);
@@ -501,2 +455,8 @@ objectLoop(object, function (value, key) {
     if (props['@selectors']) {
+      if ("production" !== process.env.NODE_ENV) {
+        if (!isObject(props['@selectors'])) {
+          throw new Error('@selectors must be an object of CSS selectors to property declarations.');
+        }
+      }
+
       objectLoop(props['@selectors'], function (value, key) {
@@ -532,6 +492,6 @@ _this6.parseSelector(builder, key, value, true);
     var block = this.parseLocalBlock(new Block(selector), object);
-    var specificity = 0;
     arrayLoop(selector.split(','), function (k) {
       var name = k.trim();
       var type = 'block:selector';
+      var specificity = 0;
 
@@ -543,5 +503,5 @@ while (name.charAt(0) === '&') {
 
-      if (selector.charAt(0) === ':') {
+      if (name.charAt(0) === ':') {
         type = 'block:pseudo';
-      } else if (selector.charAt(0) === '[') {
+      } else if (name.charAt(0) === '[') {
         type = 'block:attribute';
@@ -591,4 +551,4 @@ }
 
-      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-        args[_key2 - 1] = arguments[_key2];
+      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        args[_key - 1] = arguments[_key];
       }
@@ -600,7 +560,2 @@
 
-  _proto.off = function off(name) {
-    delete this.handlers[name];
-    return this;
-  };
-
   _proto.on = function on(name, callback) {
@@ -611,53 +566,2 @@ this.handlers[name] = callback;
 
-  _proto.createAsyncQueue = function createAsyncQueue(size, factory) {
-    var counter = 0;
-    return new Promise(function (resolve, reject) {
-      var runCheck = function runCheck() {
-        counter += 1;
-
-        if (counter === size) {
-          resolve();
-        }
-      };
-
-      var enqueue = function () {
-        var _ref = _asyncToGenerator(regeneratorRuntime.mark(function _callee(cb) {
-          return regeneratorRuntime.wrap(function _callee$(_context) {
-            while (1) {
-              switch (_context.prev = _context.next) {
-                case 0:
-                  if (!(counter >= size)) {
-                    _context.next = 2;
-                    break;
-                  }
-
-                  return _context.abrupt("return");
-
-                case 2:
-                  _context.next = 4;
-                  return cb();
-
-                case 4:
-                  runCheck();
-
-                case 5:
-                case "end":
-                  return _context.stop();
-              }
-            }
-          }, _callee);
-        }));
-
-        return function enqueue(_x) {
-          return _ref.apply(this, arguments);
-        };
-      }();
-
-      factory(enqueue);
-      setTimeout(function () {
-        reject(new Error('Failed to parse and compile style sheet.'));
-      }, ASYNC_TIMEOUT);
-    });
-  };
-
   return Parser;
@@ -668,3 +572,3 @@ }();
   if (typeof value === 'string') {
-    return "\"" + value + "\"";
+    return value;
   }
@@ -678,4 +582,4 @@
 
-  if (value.query) {
-    path += " " + value.query;
+  if (value.media) {
+    path += " " + value.media;
   }
@@ -686,4 +590,2 @@
 
-var SHEET_LENGTH = 7;
-
 var GlobalParser = function (_Parser) {
@@ -698,65 +600,13 @@ _inheritsLoose(GlobalParser, _Parser);
 
-  _proto.parse = function () {
-    var _parse = _asyncToGenerator(regeneratorRuntime.mark(function _callee(styleSheet) {
-      var _this = this;
-
-      return regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              return _context.abrupt("return", this.createAsyncQueue(SHEET_LENGTH, function (enqueue) {
-                enqueue(function () {
-                  return _this.parseCharset(styleSheet['@charset']);
-                });
-                enqueue(function () {
-                  return _this.parseFontFaces(styleSheet['@font-face']);
-                });
-                enqueue(function () {
-                  return _this.parseGlobal(styleSheet['@global']);
-                });
-                enqueue(function () {
-                  return _this.parseImport(styleSheet['@import']);
-                });
-                enqueue(function () {
-                  return _this.parseKeyframes(styleSheet['@keyframes']);
-                });
-                enqueue(function () {
-                  return _this.parsePage(styleSheet['@page']);
-                });
-                enqueue(function () {
-                  return _this.parseViewport(styleSheet['@viewport']);
-                });
-              }));
-
-            case 1:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee, this);
-    }));
-
-    function parse(_x) {
-      return _parse.apply(this, arguments);
-    }
-
-    return parse;
-  }();
-
-  _proto.parseCharset = function parseCharset(charset) {
-    if (!charset) {
-      return;
-    }
-
-    if ("production" !== process.env.NODE_ENV) {
-      if (typeof charset !== 'string') {
-        throw new TypeError('@charset must be a string.');
-      }
-    }
-
-    this.emit('charset', charset);
+  _proto.parse = function parse(styleSheet) {
+    this.parseFontFaces(styleSheet['@font-face']);
+    this.parseGlobal(styleSheet['@global']);
+    this.parseImport(styleSheet['@import']);
+    this.parseKeyframes(styleSheet['@keyframes']);
+    this.parsePage(styleSheet['@page']);
+    this.parseViewport(styleSheet['@viewport']);
   };
 
   _proto.parseFontFaces = function parseFontFaces(fontFaces) {
-    var _this2 = this;
+    var _this = this;
 
@@ -775,3 +625,3 @@ if (!fontFaces) {
       arrayLoop(toArray(faces), function (fontFace) {
-        _this2.parseFontFace(name, fontFace);
+        _this.parseFontFace(name, fontFace);
       });
@@ -782,9 +632,17 @@ });
   _proto.parseGlobal = function parseGlobal(globals) {
-    if (globals) {
-      this.emit('global', this.parseLocalBlock(new Block('@global'), globals));
+    if (!globals) {
+      return;
     }
+
+    if ("production" !== process.env.NODE_ENV) {
+      if (!isObject(globals)) {
+        throw new Error('@global must be an object of style properties.');
+      }
+    }
+
+    this.emit('global', this.parseLocalBlock(new Block('@global'), globals));
   };
 
   _proto.parseImport = function parseImport(imports) {
-    var _this3 = this;
+    var _this2 = this;
 
@@ -802,3 +660,3 @@ if (!imports) {
     arrayLoop(imports, function (value) {
-      _this3.emit('import', formatImport(value));
+      _this2.emit('import', formatImport(value));
     });
@@ -808,3 +666,3 @@ };
   _proto.parseKeyframes = function parseKeyframes(keyframes) {
-    var _this4 = this;
+    var _this3 = this;
 
@@ -822,3 +680,3 @@ if (!keyframes) {
     objectLoop(keyframes, function (keyframe, name) {
-      _this4.parseKeyframesAnimation(name, keyframe);
+      _this3.parseKeyframesAnimation(name, keyframe);
     });
@@ -828,3 +686,3 @@ };
   _proto.parsePage = function parsePage(page) {
-    var _this5 = this;
+    var _this4 = this;
 
@@ -835,2 +693,8 @@ if (!page) {
 
+    if ("production" !== process.env.NODE_ENV) {
+      if (!isObject(page)) {
+        throw new Error('@page must be an object of properties.');
+      }
+    }
+
     var object = _extends({}, page);
@@ -843,3 +707,3 @@
       if (value) {
-        _this5.emit('page', _this5.parseBlock(new Block("@page " + selector), value));
+        _this4.emit('page', _this4.parseBlock(new Block("@page " + selector), value));
 
@@ -870,13 +734,3 @@ delete object[selector];
   function LocalParser() {
-    var _this;
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _Parser.call.apply(_Parser, [this].concat(args)) || this;
-
-    _defineProperty(_assertThisInitialized(_this), "stylis", void 0);
-
-    return _this;
+    return _Parser.apply(this, arguments) || this;
   }
@@ -886,99 +740,20 @@
 
-  _proto.parse = function () {
-    var _parse = _asyncToGenerator(regeneratorRuntime.mark(function _callee(styleSheet) {
-      var _this2 = this;
+  _proto.parse = function parse(styleSheet) {
+    var _this = this;
 
-      var entries;
-      return regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              entries = Object.entries(styleSheet);
-              return _context.abrupt("return", this.createAsyncQueue(entries.length * 3, function (enqueue) {
-                entries.forEach(function (_ref) {
-                  var selector = _ref[0],
-                      declaration = _ref[1];
-
-                  if (selector.charAt(0) === '@') {
-                    if ("production" !== process.env.NODE_ENV) {
-                      throw new SyntaxError("At-rules may not be defined at the root of a local block, found \"" + selector + "\".");
-                    }
-                  } else if (typeof declaration === 'string') {
-                    if (declaration.match(CLASS_NAME)) {
-                      enqueue(function () {
-                        return _this2.emit('class', declaration);
-                      });
-                    } else {
-                      enqueue(function () {
-                        return _this2.parseRawCSS(selector, declaration);
-                      });
-                    }
-                  } else if (isObject(declaration)) {
-                    enqueue(function () {
-                      _this2.emit('ruleset', selector, _this2.parseLocalBlock(new Block(selector), declaration));
-                    });
-                  } else if ("production" !== process.env.NODE_ENV) {
-                    throw new Error("Invalid declaration for \"" + selector + "\". Must be an object (style declaration) or string (raw css, class name).");
-                  }
-                });
-              }));
-
-            case 2:
-            case "end":
-              return _context.stop();
-          }
+    objectLoop(styleSheet, function (declaration, selector) {
+      if (selector.charAt(0) === '@') {
+        if ("production" !== process.env.NODE_ENV) {
+          throw new SyntaxError("At-rules may not be defined at the root of a local block, found \"" + selector + "\".");
         }
-      }, _callee, this);
-    }));
+      } else if (typeof declaration === 'string' && declaration.match(CLASS_NAME)) {
+        _this.emit('class', declaration);
+      } else if (isObject(declaration)) {
+        _this.emit('ruleset', selector, _this.parseLocalBlock(new Block(selector), declaration));
+      } else if ("production" !== process.env.NODE_ENV) {
+        throw new Error("Invalid declaration for \"" + selector + "\". Must be an object (style declaration) or string (class name).");
+      }
+    });
+  };
 
-    function parse(_x) {
-      return _parse.apply(this, arguments);
-    }
-
-    return parse;
-  }();
-
-  _proto.parseRawCSS = function () {
-    var _parseRawCSS = _asyncToGenerator(regeneratorRuntime.mark(function _callee2(selector, raw) {
-      var Stylis, className;
-      return regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              if (this.stylis) {
-                _context2.next = 5;
-                break;
-              }
-
-              _context2.next = 3;
-              return import('stylis');
-
-            case 3:
-              Stylis = _context2.sent.default;
-              this.stylis = new Stylis({
-                compress: !("production" !== process.env.NODE_ENV),
-                global: false,
-                keyframe: true,
-                prefix: true
-              });
-
-            case 5:
-              className = this.hash(selector);
-              this.emit('css', this.stylis("." + className, raw.trim()), className);
-
-            case 7:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2, this);
-    }));
-
-    function parseRawCSS(_x2, _x3) {
-      return _parseRawCSS.apply(this, arguments);
-    }
-
-    return parseRawCSS;
-  }();
-
   return LocalParser;
@@ -985,0 +760,0 @@ }(Parser);

lib/Block.d.ts

 export default class Block<T extends object> {
-    readonly nested: Map<string, Block<T>>;
+    readonly nested: {
+        [key: string]: Block<T>;
+    };
     readonly properties: Partial<T>;
@@ -4,0 +6,0 @@ readonly selector: string;

lib/formatFontFace.d.ts

 import CSS from 'csstype';
 import { FontFace } from './types';
-export default function formatFontFace(properties: FontFace): CSS.FontFace;
+export default function formatFontFace(properties: Partial<FontFace>): CSS.FontFace;
 //# sourceMappingURL=formatFontFace.d.ts.map

lib/GlobalParser.d.ts

 import Parser, { CommonEvents } from './Parser';
-import { GlobalStyleSheet, CharsetListener, BlockListener, ImportListener } from './types';
+import { GlobalStyleSheet, BlockListener, ImportListener } from './types';
 export interface GlobalEvents<T extends object> extends CommonEvents<T> {
-    onCharset?: CharsetListener;
     onGlobal?: BlockListener<T>;
@@ -11,4 +10,3 @@ onImport?: ImportListener;
 export default class GlobalParser<T extends object> extends Parser<T, GlobalEvents<T>> {
-    parse(styleSheet: GlobalStyleSheet): Promise<void>;
-    protected parseCharset(charset: GlobalStyleSheet['@charset']): void;
+    parse(styleSheet: GlobalStyleSheet): void;
     protected parseFontFaces(fontFaces: GlobalStyleSheet['@font-face']): void;
@@ -15,0 +13,0 @@ protected parseGlobal(globals: GlobalStyleSheet['@global']): void;

lib/index.js

@@ -5,59 +5,4 @@ 'use strict';
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) { return e; } else {
-    var n = {};
-    if (e) {
-      Object.keys(e).forEach(function (k) {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () {
-            return e[k];
-          }
-        });
-      });
-    }
-    n['default'] = e;
-    return n;
-  }
-}
-
 var utils = require('@aesthetic/utils');
 
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
-  try {
-    var info = gen[key](arg);
-    var value = info.value;
-  } catch (error) {
-    reject(error);
-    return;
-  }
-
-  if (info.done) {
-    resolve(value);
-  } else {
-    Promise.resolve(value).then(_next, _throw);
-  }
-}
-
-function _asyncToGenerator(fn) {
-  return function () {
-    var self = this,
-        args = arguments;
-    return new Promise(function (resolve, reject) {
-      var gen = fn.apply(self, args);
-
-      function _next(value) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
-      }
-
-      function _throw(err) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
-      }
-
-      _next(undefined);
-    });
-  };
-}
-
 function _defineProperty(obj, key, value) {
@@ -102,13 +47,5 @@ if (key in obj) {
 
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return self;
-}
-
 var Block = function () {
   function Block(selector) {
-    _defineProperty(this, "nested", new Map());
+    _defineProperty(this, "nested", {});
 
@@ -129,6 +66,6 @@ _defineProperty(this, "properties", {});
 
-    if (merge && this.nested.has(block.selector)) {
-      this.nested.get(block.selector).merge(block);
+    if (merge && this.nested[block.selector]) {
+      this.nested[block.selector].merge(block);
     } else {
-      this.nested.set(block.selector, block);
+      this.nested[block.selector] = block;
     }
@@ -150,4 +87,3 @@
   _proto.clone = function clone(selector) {
-    var block = new Block(selector);
-    return block.merge(this);
+    return new Block(selector).merge(this);
   };
@@ -159,3 +95,3 @@
     this.addProperties(block.properties);
-    block.nested.forEach(function (nested) {
+    utils.objectLoop(block.nested, function (nested) {
       _this.addNested(nested);
@@ -169,3 +105,3 @@ });
 
-    this.nested.forEach(function (block, selector) {
+    utils.objectLoop(this.nested, function (block, selector) {
       object[selector] = block.toObject();
@@ -395,3 +331,12 @@ });
 var SELECTOR = /^((\[[\x2Da-z\u017F\u212A]+\])|(::?[\x2Da-z\u017F\u212A]+))$/i;
-var ASYNC_TIMEOUT = 5000;
+var EVENT_MAP = {
+  onBlockAttribute: 'block:attribute',
+  onBlockFallback: 'block:fallback',
+  onBlockMedia: 'block:media',
+  onBlockProperty: 'block:property',
+  onBlockPseudo: 'block:pseudo',
+  onBlockSelector: 'block:selector',
+  onBlockSupports: 'block:supports',
+  onFontFace: 'font-face'
+};
 
@@ -406,5 +351,3 @@ var Parser = function () {
       utils.objectLoop(handlers, function (handler, name) {
-        _this.on(name.slice(2).replace(/([A-Z])/g, function (match, char) {
-          return ":" + char.toLowerCase();
-        }), handler);
+        _this.on(EVENT_MAP[name] || name.slice(2).toLowerCase(), handler);
       });
@@ -416,10 +359,2 @@ }
 
-  _proto.hash = function hash() {
-    for (var _len = arguments.length, parts = new Array(_len), _key = 0; _key < _len; _key++) {
-      parts[_key] = arguments[_key];
-    }
-
-    return utils.generateHash(parts.join('-'));
-  };
-
   _proto.parseBlock = function parseBlock(builder, object) {
@@ -458,3 +393,3 @@ var _this2 = this;
       if (!utils.isObject(object)) {
-        throw new Error("@" + type + " must be an object of queries or conditions to declarations.");
+        throw new Error("@" + type + " must be an object of conditions to declarations.");
       }
@@ -493,3 +428,3 @@ }
 
-    var name = object.name || animationName || this.hash('keyframes');
+    var name = object.name || animationName;
     var keyframes = new Block("@keyframes " + name);
@@ -525,2 +460,8 @@ utils.objectLoop(object, function (value, key) {
     if (props['@selectors']) {
+      if ("production" !== process.env.NODE_ENV) {
+        if (!utils.isObject(props['@selectors'])) {
+          throw new Error('@selectors must be an object of CSS selectors to property declarations.');
+        }
+      }
+
       utils.objectLoop(props['@selectors'], function (value, key) {
@@ -556,6 +497,6 @@ _this6.parseSelector(builder, key, value, true);
     var block = this.parseLocalBlock(new Block(selector), object);
-    var specificity = 0;
     utils.arrayLoop(selector.split(','), function (k) {
       var name = k.trim();
       var type = 'block:selector';
+      var specificity = 0;
 
@@ -567,5 +508,5 @@ while (name.charAt(0) === '&') {
 
-      if (selector.charAt(0) === ':') {
+      if (name.charAt(0) === ':') {
         type = 'block:pseudo';
-      } else if (selector.charAt(0) === '[') {
+      } else if (name.charAt(0) === '[') {
         type = 'block:attribute';
@@ -615,4 +556,4 @@ }
 
-      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-        args[_key2 - 1] = arguments[_key2];
+      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        args[_key - 1] = arguments[_key];
       }
@@ -624,7 +565,2 @@
 
-  _proto.off = function off(name) {
-    delete this.handlers[name];
-    return this;
-  };
-
   _proto.on = function on(name, callback) {
@@ -635,53 +571,2 @@ this.handlers[name] = callback;
 
-  _proto.createAsyncQueue = function createAsyncQueue(size, factory) {
-    var counter = 0;
-    return new Promise(function (resolve, reject) {
-      var runCheck = function runCheck() {
-        counter += 1;
-
-        if (counter === size) {
-          resolve();
-        }
-      };
-
-      var enqueue = function () {
-        var _ref = _asyncToGenerator(regeneratorRuntime.mark(function _callee(cb) {
-          return regeneratorRuntime.wrap(function _callee$(_context) {
-            while (1) {
-              switch (_context.prev = _context.next) {
-                case 0:
-                  if (!(counter >= size)) {
-                    _context.next = 2;
-                    break;
-                  }
-
-                  return _context.abrupt("return");
-
-                case 2:
-                  _context.next = 4;
-                  return cb();
-
-                case 4:
-                  runCheck();
-
-                case 5:
-                case "end":
-                  return _context.stop();
-              }
-            }
-          }, _callee);
-        }));
-
-        return function enqueue(_x) {
-          return _ref.apply(this, arguments);
-        };
-      }();
-
-      factory(enqueue);
-      setTimeout(function () {
-        reject(new Error('Failed to parse and compile style sheet.'));
-      }, ASYNC_TIMEOUT);
-    });
-  };
-
   return Parser;
@@ -692,3 +577,3 @@ }();
   if (typeof value === 'string') {
-    return "\"" + value + "\"";
+    return value;
   }
@@ -702,4 +587,4 @@
 
-  if (value.query) {
-    path += " " + value.query;
+  if (value.media) {
+    path += " " + value.media;
   }
@@ -710,4 +595,2 @@
 
-var SHEET_LENGTH = 7;
-
 var GlobalParser = function (_Parser) {
@@ -722,65 +605,13 @@ _inheritsLoose(GlobalParser, _Parser);
 
-  _proto.parse = function () {
-    var _parse = _asyncToGenerator(regeneratorRuntime.mark(function _callee(styleSheet) {
-      var _this = this;
-
-      return regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              return _context.abrupt("return", this.createAsyncQueue(SHEET_LENGTH, function (enqueue) {
-                enqueue(function () {
-                  return _this.parseCharset(styleSheet['@charset']);
-                });
-                enqueue(function () {
-                  return _this.parseFontFaces(styleSheet['@font-face']);
-                });
-                enqueue(function () {
-                  return _this.parseGlobal(styleSheet['@global']);
-                });
-                enqueue(function () {
-                  return _this.parseImport(styleSheet['@import']);
-                });
-                enqueue(function () {
-                  return _this.parseKeyframes(styleSheet['@keyframes']);
-                });
-                enqueue(function () {
-                  return _this.parsePage(styleSheet['@page']);
-                });
-                enqueue(function () {
-                  return _this.parseViewport(styleSheet['@viewport']);
-                });
-              }));
-
-            case 1:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee, this);
-    }));
-
-    function parse(_x) {
-      return _parse.apply(this, arguments);
-    }
-
-    return parse;
-  }();
-
-  _proto.parseCharset = function parseCharset(charset) {
-    if (!charset) {
-      return;
-    }
-
-    if ("production" !== process.env.NODE_ENV) {
-      if (typeof charset !== 'string') {
-        throw new TypeError('@charset must be a string.');
-      }
-    }
-
-    this.emit('charset', charset);
+  _proto.parse = function parse(styleSheet) {
+    this.parseFontFaces(styleSheet['@font-face']);
+    this.parseGlobal(styleSheet['@global']);
+    this.parseImport(styleSheet['@import']);
+    this.parseKeyframes(styleSheet['@keyframes']);
+    this.parsePage(styleSheet['@page']);
+    this.parseViewport(styleSheet['@viewport']);
   };
 
   _proto.parseFontFaces = function parseFontFaces(fontFaces) {
-    var _this2 = this;
+    var _this = this;
 
@@ -799,3 +630,3 @@ if (!fontFaces) {
       utils.arrayLoop(utils.toArray(faces), function (fontFace) {
-        _this2.parseFontFace(name, fontFace);
+        _this.parseFontFace(name, fontFace);
       });
@@ -806,9 +637,17 @@ });
   _proto.parseGlobal = function parseGlobal(globals) {
-    if (globals) {
-      this.emit('global', this.parseLocalBlock(new Block('@global'), globals));
+    if (!globals) {
+      return;
     }
+
+    if ("production" !== process.env.NODE_ENV) {
+      if (!utils.isObject(globals)) {
+        throw new Error('@global must be an object of style properties.');
+      }
+    }
+
+    this.emit('global', this.parseLocalBlock(new Block('@global'), globals));
   };
 
   _proto.parseImport = function parseImport(imports) {
-    var _this3 = this;
+    var _this2 = this;
 
@@ -826,3 +665,3 @@ if (!imports) {
     utils.arrayLoop(imports, function (value) {
-      _this3.emit('import', formatImport(value));
+      _this2.emit('import', formatImport(value));
     });
@@ -832,3 +671,3 @@ };
   _proto.parseKeyframes = function parseKeyframes(keyframes) {
-    var _this4 = this;
+    var _this3 = this;
 
@@ -846,3 +685,3 @@ if (!keyframes) {
     utils.objectLoop(keyframes, function (keyframe, name) {
-      _this4.parseKeyframesAnimation(name, keyframe);
+      _this3.parseKeyframesAnimation(name, keyframe);
     });
@@ -852,3 +691,3 @@ };
   _proto.parsePage = function parsePage(page) {
-    var _this5 = this;
+    var _this4 = this;
 
@@ -859,2 +698,8 @@ if (!page) {
 
+    if ("production" !== process.env.NODE_ENV) {
+      if (!utils.isObject(page)) {
+        throw new Error('@page must be an object of properties.');
+      }
+    }
+
     var object = _extends({}, page);
@@ -867,3 +712,3 @@
       if (value) {
-        _this5.emit('page', _this5.parseBlock(new Block("@page " + selector), value));
+        _this4.emit('page', _this4.parseBlock(new Block("@page " + selector), value));
 
@@ -894,13 +739,3 @@ delete object[selector];
   function LocalParser() {
-    var _this;
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _Parser.call.apply(_Parser, [this].concat(args)) || this;
-
-    _defineProperty(_assertThisInitialized(_this), "stylis", void 0);
-
-    return _this;
+    return _Parser.apply(this, arguments) || this;
   }
@@ -910,99 +745,20 @@
 
-  _proto.parse = function () {
-    var _parse = _asyncToGenerator(regeneratorRuntime.mark(function _callee(styleSheet) {
-      var _this2 = this;
+  _proto.parse = function parse(styleSheet) {
+    var _this = this;
 
-      var entries;
-      return regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              entries = Object.entries(styleSheet);
-              return _context.abrupt("return", this.createAsyncQueue(entries.length * 3, function (enqueue) {
-                entries.forEach(function (_ref) {
-                  var selector = _ref[0],
-                      declaration = _ref[1];
-
-                  if (selector.charAt(0) === '@') {
-                    if ("production" !== process.env.NODE_ENV) {
-                      throw new SyntaxError("At-rules may not be defined at the root of a local block, found \"" + selector + "\".");
-                    }
-                  } else if (typeof declaration === 'string') {
-                    if (declaration.match(CLASS_NAME)) {
-                      enqueue(function () {
-                        return _this2.emit('class', declaration);
-                      });
-                    } else {
-                      enqueue(function () {
-                        return _this2.parseRawCSS(selector, declaration);
-                      });
-                    }
-                  } else if (utils.isObject(declaration)) {
-                    enqueue(function () {
-                      _this2.emit('ruleset', selector, _this2.parseLocalBlock(new Block(selector), declaration));
-                    });
-                  } else if ("production" !== process.env.NODE_ENV) {
-                    throw new Error("Invalid declaration for \"" + selector + "\". Must be an object (style declaration) or string (raw css, class name).");
-                  }
-                });
-              }));
-
-            case 2:
-            case "end":
-              return _context.stop();
-          }
+    utils.objectLoop(styleSheet, function (declaration, selector) {
+      if (selector.charAt(0) === '@') {
+        if ("production" !== process.env.NODE_ENV) {
+          throw new SyntaxError("At-rules may not be defined at the root of a local block, found \"" + selector + "\".");
         }
-      }, _callee, this);
-    }));
+      } else if (typeof declaration === 'string' && declaration.match(CLASS_NAME)) {
+        _this.emit('class', declaration);
+      } else if (utils.isObject(declaration)) {
+        _this.emit('ruleset', selector, _this.parseLocalBlock(new Block(selector), declaration));
+      } else if ("production" !== process.env.NODE_ENV) {
+        throw new Error("Invalid declaration for \"" + selector + "\". Must be an object (style declaration) or string (class name).");
+      }
+    });
+  };
 
-    function parse(_x) {
-      return _parse.apply(this, arguments);
-    }
-
-    return parse;
-  }();
-
-  _proto.parseRawCSS = function () {
-    var _parseRawCSS = _asyncToGenerator(regeneratorRuntime.mark(function _callee2(selector, raw) {
-      var Stylis, className;
-      return regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              if (this.stylis) {
-                _context2.next = 5;
-                break;
-              }
-
-              _context2.next = 3;
-              return new Promise(function (resolve) { resolve(_interopNamespace(require('stylis'))); });
-
-            case 3:
-              Stylis = _context2.sent.default;
-              this.stylis = new Stylis({
-                compress: !("production" !== process.env.NODE_ENV),
-                global: false,
-                keyframe: true,
-                prefix: true
-              });
-
-            case 5:
-              className = this.hash(selector);
-              this.emit('css', this.stylis("." + className, raw.trim()), className);
-
-            case 7:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2, this);
-    }));
-
-    function parseRawCSS(_x2, _x3) {
-      return _parseRawCSS.apply(this, arguments);
-    }
-
-    return parseRawCSS;
-  }();
-
   return LocalParser;
@@ -1009,0 +765,0 @@ }(Parser);

lib/LocalParser.d.ts

 import Parser, { CommonEvents } from './Parser';
-import { LocalStyleSheet, ClassNameListener, CSSListener, RulesetListener } from './types';
+import { LocalStyleSheet, ClassNameListener, RulesetListener } from './types';
 export declare const CLASS_NAME: RegExp;
-export declare type StylisCallback = (selector: string, css: string) => string;
 export interface LocalEvents<T extends object> extends CommonEvents<T> {
     onClass?: ClassNameListener;
-    onCSS?: CSSListener;
     onRuleset?: RulesetListener<T>;
 }
 export default class LocalParser<T extends object> extends Parser<T, LocalEvents<T>> {
-    stylis?: StylisCallback;
-    parse(styleSheet: LocalStyleSheet): Promise<void>;
-    parseRawCSS(selector: string, raw: string): Promise<void>;
+    parse(styleSheet: LocalStyleSheet): void;
 }
 //# sourceMappingURL=LocalParser.d.ts.map

lib/Parser.d.ts

 import Block from './Block';
-import { BlockConditionListener, BlockListener, BlockNestedListener, BlockPropertyListener, CharsetListener, CSSListener, DeclarationBlock, FallbackProperties, FontFace, FontFaceListener, ImportListener, Keyframes, KeyframesListener, LocalBlock, RulesetListener } from './types';
+import { BlockConditionListener, BlockListener, BlockNestedListener, BlockPropertyListener, DeclarationBlock, FallbackProperties, FontFace, FontFaceListener, ImportListener, Keyframes, KeyframesListener, LocalBlock, RulesetListener, ClassNameListener } from './types';
 export declare const SELECTOR: RegExp;
-export declare const ASYNC_TIMEOUT = 5000;
-export declare type EnqueueCallback = (cb: () => void | Promise<void>) => void;
 export declare type Handler = (...args: any[]) => void;
@@ -25,3 +23,2 @@ export interface HandlerMap {
     constructor(handlers?: E);
-    hash(...parts: string[]): string;
     parseBlock(builder: Block<T>, object: DeclarationBlock): Block<T>;
@@ -44,4 +41,3 @@ parseConditionalBlock(builder: Block<T>, object: {
     emit(name: 'block' | 'global' | 'page' | 'viewport', ...args: Parameters<BlockListener<T>>): void;
-    emit(name: 'charset' | 'class', ...args: Parameters<CharsetListener>): void;
-    emit(name: 'css', ...args: Parameters<CSSListener>): void;
+    emit(name: 'class', ...args: Parameters<ClassNameListener>): void;
     emit(name: 'font-face', ...args: Parameters<FontFaceListener<T>>): void;
@@ -52,6 +48,2 @@ emit(name: 'import', ...args: Parameters<ImportListener>): void;
     /**
-     * Delete an event listener.
-     */
-    off(name: string): this;
-    /**
      * Register an event listener.
@@ -63,4 +55,3 @@ */
     on(name: 'block' | 'global' | 'page' | 'viewport', callback: BlockListener<T>): this;
-    on(name: 'charset' | 'class', callback: CharsetListener): this;
-    on(name: 'css', callback: CSSListener): this;
+    on(name: 'class', callback: ClassNameListener): this;
     on(name: 'font-face', callback: FontFaceListener<T>): this;
@@ -70,4 +61,3 @@ on(name: 'import', callback: ImportListener): this;
     on(name: 'ruleset', callback: RulesetListener<T>): this;
-    protected createAsyncQueue(size: number, factory: (enqueue: EnqueueCallback) => void): Promise<void>;
 }
 //# sourceMappingURL=Parser.d.ts.map

lib/types.d.ts

@@ -132,3 +132,3 @@ import CSS from 'csstype';
     path: string;
-    query?: string;
+    media?: string;
     url?: boolean;
@@ -178,5 +178,4 @@ }
 };
-export declare type GlobalAtRule = '@charset' | '@font-face' | '@global' | '@import' | '@keyframes' | '@page' | '@viewport';
+export declare type GlobalAtRule = '@font-face' | '@global' | '@import' | '@keyframes' | '@page' | '@viewport';
 export interface GlobalStyleSheet {
-    '@charset'?: string;
     '@font-face'?: {
@@ -204,5 +203,3 @@ [fontFamily: string]: FontFace | FontFace[];
 export declare type BlockListener<T extends object> = (block: Block<T>) => void;
-export declare type CharsetListener = (charset: string) => void;
 export declare type ClassNameListener = (className: string) => void;
-export declare type CSSListener = (css: string, className: string) => void;
 export declare type FontFaceListener<T extends object> = (fontFace: Block<T>, fontFamily: string, srcPaths: string[]) => void;
@@ -209,0 +206,0 @@ export declare type ImportListener = (path: string) => void;

package.json

 {
   "name": "@aesthetic/sss",
-  "version": "0.0.3",
-  "description": "A strict, type-safe, and structure-safe CSS-in-JS style sheet format.",
+  "version": "0.0.4",
+  "description": "A strict, type-safe, and structure-safe component style sheet format.",
   "keywords": [
@@ -29,6 +29,5 @@ "aesthetic",
     "@aesthetic/utils": "^0.0.2",
-    "csstype": "^2.6.8",
-    "stylis": "^3.5.4"
+    "csstype": "^2.6.9"
   },
-  "gitHead": "8b6f4b81340109bdab77ca1574bc929cd9694652"
+  "gitHead": "49404fc03a8f67e9a23b5151701f79f170d4207b"
 }

README.md

@@ -7,3 +7,3 @@ # Aesthetic - Structural Style Sheets
 
-A strict, type-safe, and structure-safe CSS-in-JS style sheet format.
+A strict, type-safe, and structure-safe component style sheet format.
 
@@ -10,0 +10,0 @@ ## Installation

No alert changes

Improved metrics

Dependency count

2

decreased by-33.33%

Worsened metrics

Total package byte prevSize

79546

decreased by-15.84%

Lines of code

1547

decreased by-20.87%

Number of low supply chain risk alerts

29

increased by7.41%

Dependency changes

• - Removedstylis@^3.5.4

• - Removedstylis@3.5.4(transitive)

• Updatedcsstype@^2.6.9