@glitz/core - npm Package Compare versions

Comparing version 3.0.0-alpha.5 to 3.0.0-alpha.6

cjs/index.development.js

@@ -26,3 +26,3 @@ 'use strict';
         ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
     return extendStatics(d, b);
@@ -260,4 +260,7 @@ };
 function formatFontFaceRule(block) {
-    return "@font-face {" + block + "}";
+    return formatRule('@font-face', block);
 }
+function formatMediaRule(query, block) {
+    return "@media " + formatRule(query, block);
+}
 var PRETTY_REGEX = /[{:;}]|(?:(["']).*?\1)/g;
@@ -273,15 +276,11 @@ function prettifyRule(rule) {
 var Injector = /** @class */ (function () {
-    function Injector(plainIndex, selectorIndex, keyframesIndex, fontFaceIndex, incrementClassHash, incrementKeyframesHash, injectNewClassRule, injectNewKeyframesRule, injectNewFontFaceRule) {
+    function Injector(plainClassName, selectorClassName, keyframeName, handleFontFace) {
         this.injectClassName = function (declarations, selector) {
             var block = parseDeclarationBlock(declarations);
-            var index = selector ? (selectorIndex[selector] = selectorIndex[selector] || {}) : plainIndex;
-            if (index[block]) {
-                return index[block];
+            if (selector) {
+                return selectorClassName(selector, block);
             }
-            var className = incrementClassHash();
-            index[block] = className;
-            if (injectNewClassRule) {
-                injectNewClassRule(className, block, selector);
+            else {
+                return plainClassName(block);
             }
-            return className;
         };
@@ -294,11 +293,3 @@ this.injectKeyframes = function (declarationList) {
             }
-            if (keyframesIndex[blockList]) {
-                return keyframesIndex[blockList];
-            }
-            var name = incrementKeyframesHash();
-            keyframesIndex[blockList] = name;
-            if (injectNewKeyframesRule) {
-                injectNewKeyframesRule(name, blockList);
-            }
-            return name;
+            return keyframeName(blockList);
         };
@@ -320,9 +311,3 @@ this.injectFontFace = function (original) {
             var block = parseDeclarationBlock(declarations);
-            if (fontFaceIndex[block]) {
-                return fontFaceIndex[block];
-            }
-            fontFaceIndex[block] = family;
-            if (injectNewFontFaceRule) {
-                injectNewFontFaceRule(block);
-            }
+            handleFontFace(block);
             return family;
@@ -623,9 +608,5 @@ };
 
-// tslint:disable no-conditional-assignment
-var CLASS_RULE_REGEX = /\.([a-z0-9]+)([:\[][^{]+)?\{([^}]+)\}/g;
-var KEYFRAMES_REGEX = /@keyframes ([a-z0-9]+)\{((?:[a-z0-9%]+\{[^}]+\})+)\}/g;
-var FONT_FACE_REGEX = /@font-face \{(.+?;font-family:([^}]+))\}/g;
 var InjectorClient = /** @class */ (function (_super) {
     __extends(InjectorClient, _super);
-    function InjectorClient(styleElement, incrementClassHash, incrementKeyframesHash) {
+    function InjectorClient(element, incrementClassNameHash, incrementKeyframesHash) {
         var _this = this;
@@ -635,37 +616,51 @@ var plainIndex = {};
         var keyframesIndex = {};
-        var fontFaceIndex = {};
-        // Hydrate
-        var css = styleElement.textContent;
-        if (css) {
-            var rule = void 0;
-            while ((rule = CLASS_RULE_REGEX.exec(css))) {
-                incrementClassHash();
-                var index = rule[2] ? (selectorIndex[rule[2]] = selectorIndex[rule[2]] || {}) : plainIndex;
-                index[rule[3]] = rule[1];
+        var fontFaceIndex = [];
+        var sheet = element.sheet;
+        if (!isCSSStyleSheet(sheet)) {
+            throw new Error('HTMLStyleElement was not inserted properly into DOM');
+        }
+        _this = _super.call(this, function (block) {
+            if (plainIndex[block]) {
+                return plainIndex[block];
             }
-            while ((rule = KEYFRAMES_REGEX.exec(css))) {
-                incrementKeyframesHash();
-                keyframesIndex[rule[2]] = rule[1];
+            var className = incrementClassNameHash();
+            plainIndex[block] = className;
+            injectSheetRule(sheet, formatClassRule(className, block));
+            return className;
+        }, function (selector, block) {
+            var index = (selectorIndex[selector] = selectorIndex[selector] || {});
+            if (index[block]) {
+                return index[block];
             }
-            while ((rule = FONT_FACE_REGEX.exec(css))) {
-                fontFaceIndex[rule[1]] = rule[2];
+            var className = incrementClassNameHash();
+            index[block] = className;
+            injectSheetRule(sheet, formatClassRule(className, block, selector));
+            return className;
+        }, function (blockList) {
+            if (keyframesIndex[blockList]) {
+                return keyframesIndex[blockList];
             }
-        }
-        var sheet = styleElement.sheet;
-        if (!isCSSStyleSheet(sheet)) {
-            throw new Error('HTMLStyleElement was not inserted properly into DOM');
-        }
-        var injectNewClassRule = function (className, block, selector) {
-            var rule = formatClassRule(className, block, selector);
+            var name = incrementKeyframesHash();
+            keyframesIndex[blockList] = name;
+            injectSheetRule(sheet, formatKeyframesRule(name, blockList));
+            return name;
+        }, function (block) {
+            if (fontFaceIndex.indexOf(block) === -1) {
+                fontFaceIndex.push(block);
+                injectSheetRule(sheet, formatFontFaceRule(block));
+            }
+        }) || this;
+        _this.injectRaw = function (rule) {
             injectSheetRule(sheet, rule);
         };
-        var injectNewKeyframesRule = function (name, blockList) {
-            var rule = formatKeyframesRule(name, blockList);
-            injectSheetRule(sheet, rule);
+        _this.hydrateClassName = function (body, className, suffix) {
+            var index = suffix ? (selectorIndex[suffix] = selectorIndex[suffix] || {}) : plainIndex;
+            index[body] = className;
         };
-        var injectNewFontFaceRule = function (block) {
-            var rule = formatFontFaceRule(block);
-            injectSheetRule(sheet, rule);
+        _this.hydrateKeyframes = function (body, name) {
+            keyframesIndex[body] = name;
         };
-        _this = _super.call(this, plainIndex, selectorIndex, keyframesIndex, fontFaceIndex, incrementClassHash, incrementKeyframesHash, injectNewClassRule, injectNewKeyframesRule, injectNewFontFaceRule) || this;
+        _this.hydrateFontFace = function (body) {
+            fontFaceIndex.push(body);
+        };
         return _this;
@@ -676,2 +671,74 @@ }
 
+// tslint:disable no-conditional-assignment
+var BLOCK_START_CODE = '{'.charCodeAt(0);
+var BLOCK_END_CODE = '}'.charCodeAt(0);
+var PLAIN_SELECTOR = /\.([\w]+)((?::.+)|(\[.+\]))?/;
+var KEYFRAMES_SELECTOR = /@keyframes (.+)/;
+var MEDIA_SELECTOR = /@media (.+)/;
+function createHydrate(getInjector, incrementClassNameHash, incrementKeyframesHash) {
+    return function hydrate(css, explicitInjector, callback) {
+        var depth = 0;
+        var rule = '';
+        var media = '';
+        var selector = '';
+        var body = '';
+        // tslint:disable-next-line: prefer-for-of
+        for (var i = 0; i < css.length; i++) {
+            var character = css[i];
+            var code = character.charCodeAt(0);
+            rule += character;
+            if (code === BLOCK_START_CODE) {
+                depth++;
+                if (media ? depth === 2 : depth === 1) {
+                    var match = MEDIA_SELECTOR.exec(selector);
+                    if (match) {
+                        media = match[1];
+                        rule = '';
+                        selector = '';
+                    }
+                    continue;
+                }
+            }
+            if (code === BLOCK_END_CODE) {
+                depth--;
+                if (media && depth === 0) {
+                    media = '';
+                    continue;
+                }
+                if (media ? depth === 1 : depth === 0) {
+                    var currentInjector = explicitInjector !== null && explicitInjector !== void 0 ? explicitInjector : getInjector(media);
+                    var match = void 0;
+                    if ((match = PLAIN_SELECTOR.exec(selector))) {
+                        incrementClassNameHash();
+                        currentInjector.hydrateClassName(body, match[1], match[2]);
+                    }
+                    else if ((match = KEYFRAMES_SELECTOR.exec(selector))) {
+                        incrementKeyframesHash();
+                        currentInjector.hydrateKeyframes(body, match[1]);
+                    }
+                    else if (selector === '@font-face') {
+                        currentInjector.hydrateFontFace(body);
+                    }
+                    else {
+                        throw new Error('Unsupported CSS selector when hydrating in Glitz');
+                    }
+                    if (callback) {
+                        callback(currentInjector, rule);
+                    }
+                    rule = '';
+                    selector = '';
+                    body = '';
+                    continue;
+                }
+            }
+            if (media ? depth > 1 : depth > 0) {
+                body += character;
+            }
+            else {
+                selector += character;
+            }
+        }
+    };
+}
+
 var GlitzClient = /** @class */ (function (_super) {
@@ -683,4 +750,4 @@ __extends(GlitzClient, _super);
         var prefix = options.prefix;
-        var classHasher = createHashCounter(prefix);
-        var keyframesHasher = createHashCounter(prefix);
+        var incrementClassNameHash = createHashCounter(prefix);
+        var incrementKeyframesHash = createHashCounter(prefix);
         var mediaOrderOption = options.mediaOrder;
@@ -692,3 +759,3 @@ var mediaSheets = {};
         var identifier = options.identifier || DEFAULT_HYDRATION_IDENTIFIER;
-        var injector = function (media) {
+        var getInjector = function (media) {
             if (media) {
@@ -706,3 +773,3 @@ if (mediaIndex[media]) {
                 insertStyleElement(element, insertBefore);
-                return (mediaIndex[media] = new InjectorClient(element, classHasher, keyframesHasher));
+                return (mediaIndex[media] = new InjectorClient(element, incrementClassNameHash, incrementKeyframesHash));
             }
@@ -714,13 +781,15 @@ else {
                 var element = insertStyleElement(createStyleElement(media, identifier), initialMediaSheet);
-                return (plain = new InjectorClient(element, classHasher, keyframesHasher));
+                return (plain = new InjectorClient(element, incrementClassNameHash, incrementKeyframesHash));
             }
         };
-        _this = _super.call(this, injector, options.transformer, options.atomic) || this;
-        var preRenderStyles = document.head.querySelectorAll("[data-" + identifier + "]");
-        if (preRenderStyles) {
-            for (var _i = 0, preRenderStyles_1 = preRenderStyles; _i < preRenderStyles_1.length; _i++) {
-                var element = preRenderStyles_1[_i];
+        _this = _super.call(this, getInjector, options.transformer, options.atomic) || this;
+        var hydrate = (_this.hydrate = createHydrate(getInjector, incrementClassNameHash, incrementKeyframesHash));
+        var preRenderedStyleElements = document.head.querySelectorAll("style[data-" + identifier + "]");
+        if (preRenderedStyleElements) {
+            for (var _i = 0, preRenderedStyleElements_1 = preRenderedStyleElements; _i < preRenderedStyleElements_1.length; _i++) {
+                var element = preRenderedStyleElements_1[_i];
                 // Injector for style elements without `media` is stored with an empty key. So if there's any reason to have
                 // more than one of these in the future we need to change that part.
                 var media = element.media;
+                var injector = void 0;
                 if (media) {
@@ -731,7 +800,8 @@ if (!initialMediaSheet) {
                     mediaSheets[media] = element;
-                    mediaIndex[media] = new InjectorClient(element, classHasher, keyframesHasher);
+                    injector = mediaIndex[media] = new InjectorClient(element, incrementClassNameHash, incrementKeyframesHash);
                 }
                 else {
-                    plain = new InjectorClient(element, classHasher, keyframesHasher);
+                    injector = plain = new InjectorClient(element, incrementClassNameHash, incrementKeyframesHash);
                 }
+                hydrate(element.textContent, injector);
             }
@@ -754,2 +824,10 @@ {
         }
+        var streamedStyleElements = document.body.querySelectorAll("style[data-" + identifier + "]");
+        if (streamedStyleElements) {
+            for (var _a = 0, streamedStyleElements_1 = streamedStyleElements; _a < streamedStyleElements_1.length; _a++) {
+                var element = streamedStyleElements_1[_a];
+                hydrate(element.textContent, undefined, function (injector, rule) { return injector.injectRaw(rule); });
+                element.parentNode.removeChild(element);
+            }
+        }
         return _this;
@@ -764,20 +842,59 @@ }
         var _this = this;
-        var plainIndex = {};
-        var selectorIndex = {};
-        var keyframesIndex = {};
-        var fontFaceIndex = {};
-        _this = _super.call(this, plainIndex, selectorIndex, keyframesIndex, fontFaceIndex, incrementClassHash, incrementKeyframesHash) || this;
-        _this.getStyle = function () {
+        var plainFullIndex = {};
+        var selectorFullIndex = {};
+        var keyframesFullIndex = {};
+        var fontFaceFullIndex = [];
+        var plainResultIndex = {};
+        var selectorResultIndex = {};
+        var keyframesResultIndex = {};
+        var fontFaceResultIndex = [];
+        var plainStreamIndex = {};
+        var selectorStreamIndex = {};
+        var keyframesStreamIndex = {};
+        var fontFaceStreamIndex = [];
+        _this = _super.call(this, function (block) {
+            if (plainFullIndex[block]) {
+                return plainFullIndex[block];
+            }
+            var className = incrementClassHash();
+            plainFullIndex[block] = plainResultIndex[block] = plainStreamIndex[block] = className;
+            return className;
+        }, function (selector, block) {
+            var full = (selectorFullIndex[selector] = selectorFullIndex[selector] || {});
+            if (full[block]) {
+                return full[block];
+            }
+            var className = incrementClassHash();
+            var result = (selectorResultIndex[selector] = selectorResultIndex[selector] || {});
+            var stream = (selectorStreamIndex[selector] = selectorStreamIndex[selector] || {});
+            full[block] = result[block] = stream[block] = className;
+            return className;
+        }, function (blockList) {
+            if (keyframesFullIndex[blockList]) {
+                return keyframesFullIndex[blockList];
+            }
+            var name = incrementKeyframesHash();
+            keyframesFullIndex[blockList] = keyframesResultIndex[blockList] = keyframesStreamIndex[blockList] = name;
+            return name;
+        }, function (block) {
+            if (fontFaceFullIndex.indexOf(block) === -1) {
+                fontFaceFullIndex.push(block);
+                fontFaceResultIndex.push(block);
+                fontFaceStreamIndex.push(block);
+            }
+        }) || this;
+        _this.getStyleResult = function () {
             var css = '';
-            for (var block in fontFaceIndex) {
+            for (var _i = 0, fontFaceResultIndex_1 = fontFaceResultIndex; _i < fontFaceResultIndex_1.length; _i++) {
+                var block = fontFaceResultIndex_1[_i];
                 css += formatFontFaceRule(block);
             }
-            for (var blockList in keyframesIndex) {
-                css += formatKeyframesRule(keyframesIndex[blockList], blockList);
+            for (var blockList in keyframesResultIndex) {
+                css += formatKeyframesRule(keyframesResultIndex[blockList], blockList);
             }
-            for (var block in plainIndex) {
-                css += formatClassRule(plainIndex[block], block);
+            for (var block in plainResultIndex) {
+                css += formatClassRule(plainResultIndex[block], block);
             }
-            for (var selector in selectorIndex) {
-                var index = selectorIndex[selector];
+            for (var selector in selectorResultIndex) {
+                var index = selectorResultIndex[selector];
                 for (var block in index) {
@@ -789,2 +906,38 @@ css += formatClassRule(index[block], block, selector);
         };
+        _this.getStyleStream = function () {
+            var css = '';
+            if (fontFaceStreamIndex.length > 0) {
+                for (var _i = 0, fontFaceStreamIndex_1 = fontFaceStreamIndex; _i < fontFaceStreamIndex_1.length; _i++) {
+                    var block = fontFaceStreamIndex_1[_i];
+                    css += formatFontFaceRule(block);
+                }
+                fontFaceStreamIndex.splice(0, fontFaceStreamIndex.length);
+            }
+            for (var blockList in keyframesStreamIndex) {
+                css += formatKeyframesRule(keyframesStreamIndex[blockList], blockList);
+                delete keyframesStreamIndex[blockList];
+            }
+            for (var block in plainStreamIndex) {
+                css += formatClassRule(plainStreamIndex[block], block);
+                delete plainStreamIndex[block];
+            }
+            for (var selector in selectorStreamIndex) {
+                var index = selectorStreamIndex[selector];
+                for (var block in index) {
+                    css += formatClassRule(index[block], block, selector);
+                }
+                delete selectorStreamIndex[selector];
+            }
+            return css;
+        };
+        _this.hydrateClassName = function (body, className, suffix) {
+            var index = suffix ? (selectorFullIndex[suffix] = selectorFullIndex[suffix] || {}) : plainFullIndex;
+            index[body] = className;
+        };
+        _this.hydrateKeyframes = function (body, name) {
+            keyframesFullIndex[body] = name;
+        };
+        _this.hydrateFontFace = function (body) {
+            fontFaceFullIndex.push(body);
+        };
         return _this;
@@ -801,17 +954,18 @@ }
         var prefix = options.prefix;
-        var classHasher = createHashCounter(prefix);
-        var keyframesHasher = createHashCounter(prefix);
+        var incrementClassNameHash = createHashCounter(prefix);
+        var incrementKeyframesHash = createHashCounter(prefix);
         var plain;
         var mediaIndex = {};
-        var injector = function (media) {
+        var getInjector = function (media) {
             return media
-                ? (mediaIndex[media] = mediaIndex[media] || new InjectorServer(classHasher, keyframesHasher))
-                : (plain = plain || new InjectorServer(classHasher, keyframesHasher));
+                ? (mediaIndex[media] = mediaIndex[media] || new InjectorServer(incrementClassNameHash, incrementKeyframesHash))
+                : (plain = plain || new InjectorServer(incrementClassNameHash, incrementKeyframesHash));
         };
-        _this = _super.call(this, injector, options.transformer, options.atomic) || this;
+        _this = _super.call(this, getInjector, options.transformer, options.atomic) || this;
+        _this.hydrate = createHydrate(getInjector, incrementClassNameHash, incrementKeyframesHash);
+        var identifier = options.identifier || DEFAULT_HYDRATION_IDENTIFIER;
         _this.getStyleMarkup = function () {
-            var identifier = options.identifier || DEFAULT_HYDRATION_IDENTIFIER;
             var markup = '';
             if (plain) {
-                markup += "<style data-" + identifier + ">" + plain.getStyle() + "</style>";
+                markup += "<style data-" + identifier + ">" + plain.getStyleResult() + "</style>";
             }
@@ -821,6 +975,22 @@ var medias = options.mediaOrder ? Object.keys(mediaIndex).sort(options.mediaOrder) : Object.keys(mediaIndex);
                 var media = medias_1[_i];
-                markup += "<style data-" + identifier + " media=\"" + media + "\">" + mediaIndex[media].getStyle() + "</style>";
+                markup += "<style data-" + identifier + " media=\"" + media + "\">" + mediaIndex[media].getStyleResult() + "</style>";
             }
             return markup;
         };
+        _this.getStyleStream = function () {
+            var _a;
+            var css = '';
+            if (plain) {
+                css += plain.getStyleStream();
+            }
+            var medias = options.mediaOrder ? Object.keys(mediaIndex).sort(options.mediaOrder) : Object.keys(mediaIndex);
+            for (var _i = 0, medias_2 = medias; _i < medias_2.length; _i++) {
+                var media = medias_2[_i];
+                css += formatMediaRule(media, mediaIndex[media].getStyleStream());
+            }
+            if (css) {
+                return ['style', (_a = {}, _a["data-" + identifier] = '', _a), css];
+            }
+            return undefined;
+        };
         return _this;
@@ -831,2 +1001,35 @@ }
 
+var GlitzStatic = /** @class */ (function (_super) {
+    __extends(GlitzStatic, _super);
+    function GlitzStatic(options) {
+        if (options === void 0) { options = {}; }
+        var _this = this;
+        var prefix = options.prefix;
+        var incrementClassNameHash = createHashCounter(prefix);
+        var incrementKeyframesHash = createHashCounter(prefix);
+        var plain;
+        var mediaIndex = {};
+        var injector = function (media) {
+            return media
+                ? (mediaIndex[media] = mediaIndex[media] || new InjectorServer(incrementClassNameHash, incrementKeyframesHash))
+                : (plain = plain || new InjectorServer(incrementClassNameHash, incrementKeyframesHash));
+        };
+        _this = _super.call(this, injector, options.transformer, options.atomic) || this;
+        _this.getStyle = function () {
+            var css = '';
+            if (plain) {
+                css += plain.getStyleResult();
+            }
+            var medias = options.mediaOrder ? Object.keys(mediaIndex).sort(options.mediaOrder) : Object.keys(mediaIndex);
+            for (var _i = 0, medias_1 = medias; _i < medias_1.length; _i++) {
+                var media = medias_1[_i];
+                css += formatMediaRule(media, mediaIndex[media].getStyleResult());
+            }
+            return css;
+        };
+        return _this;
+    }
+    return GlitzStatic;
+}(Base));
+
 // Unfortunately we need this until there's a way to have index signatures for
@@ -876,2 +1079,3 @@ // other types like: https://github.com/Microsoft/TypeScript/issues/7765.
 exports.GlitzServer = GlitzServer;
+exports.GlitzStatic = GlitzStatic;
 exports.compose = compose;
@@ -878,0 +1082,0 @@ exports.media = media;

cjs/index.production.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=function(t,e){return(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(r,t){r.__proto__=t}||function(r,t){for(var e in t)t.hasOwnProperty(e)&&(r[e]=t[e])})(t,e)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=function(e,r){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])})(e,r)};
 /*! *****************************************************************************
@@ -15,2 +15,2 @@ Copyright (c) Microsoft Corporation.
 PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */function t(t,e){function n(){this.constructor=t}r(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}var e=function(){return(e=Object.assign||function(r){for(var t,e=1,n=arguments.length;e<n;e++)for(var o in t=arguments[e])Object.prototype.hasOwnProperty.call(t,o)&&(r[o]=t[o]);return r}).apply(this,arguments)};function n(r){var t,e="";for(t in r){var n=r[t];if("object"==typeof n)for(var i=0,a=n;i<a.length;i++){e&&(e+=";"),e+=o(t,a[i])}else e&&(e+=";"),e+=o(t,n)}return e}function o(r,t){return f(r)+":"+t}var i=/(?:^(ms|moz|webkit))|[A-Z]/g,a={};function f(r){return r in a?a[r]:a[r]=r.replace(i,"-$&").toLowerCase()}function c(r){for(var t={},e=Object.keys(r),n=e.length;n>0;n--)t[e[n-1]]=r[e[n-1]];return t}function u(r,t){return r+"{"+t+"}"}function s(r,t,e){return void 0===e&&(e=""),"."+u(r+e,t)}function v(r,t){return"@keyframes "+u(r,t)}function l(r){return"@font-face {"+r+"}"}var y=function(r,t,e,o,i,a,f,c,s){this.injectClassName=function(e,o){var a=n(e),c=o?t[o]=t[o]||{}:r;if(c[a])return c[a];var u=i();return c[a]=u,f&&f(u,a,o),u},this.injectKeyframes=function(r){var t="";for(var o in r)t+=u(o,n(r[o]));if(e[t])return e[t];var i=a();return e[t]=i,c&&c(i,t),i},this.injectFontFace=function(r){var t={};for(var e in r)"fontFamily"!==e&&(t[e]=r[e]);var i=r.fontFamily;t.fontFamily=i;var a=n(t);return o[a]?o[a]:(o[a]=i,s&&s(a),i)}},h="@".charCodeAt(0),d=":".charCodeAt(0),p="[".charCodeAt(0),m=function(r,t,e){var n=function(e,o,i,a,f){var u,s,v;void 0===i&&(i={});for(var l=Object.keys(e),y=l.length;y>0;y--){var m=l[y-1],j=e[m];if("function"==typeof j&&(j=j(o)),null===j&&(j=void 0),"@keyframes"===m&&(m="animationName"),"@font-face"===m&&(m="fontFamily"),"animationName"===m||"fontFamily"===m||"object"!=typeof j||Array.isArray(j)){var O=g(i,a,f);if(!(m in O)){if("object"==typeof j){if("animationName"===m){for(var b=[].concat(j),x=[],A=0;A<b.length;A++){var w=b[A];if("object"==typeof w){var k={};for(var C in w){var F=c(n(w[C],o));k[C]=t?t(F):F}x[A]=r().injectKeyframes(k)}}j=1===x.length?x[0]:x}if("fontFamily"===m){x=[];for(var _=0,z=[].concat(j);_<z.length;_++){var S=z[_];if("object"==typeof S){var N=c(n(S,o)),R=r().injectFontFace(t?t(N):N);-1===x.indexOf(R)&&x.push(R)}else x.push(S)}j=x.join(",")}}O[m]=j}}else{var E=m.charCodeAt(0);if(E!==h&&E!==d&&E!==p){var M=Object.keys(j);for(A=M.length;A>0;A--){var T=M[A-1],D=j[T],I=!1;"y"!==T&&"xy"!==T||(I=!0,n(((u={})[m+"Top"]=D,u[m+"Bottom"]=D,u),o,i,a,f)),"x"!==T&&"xy"!==T||(I=!0,n(((s={})[m+"Left"]=D,s[m+"Right"]=D,s),o,i,a,f)),I||n(((v={})[m+T[0].toUpperCase()+T.slice(1)]=D,v),o,i,a,f)}}else n(j,o,i,E===h?m:a,E===d||E===p?(f||"")+m:f)}}return i},o=function(e,n,o){return r(n).injectClassName(t?t(e):e,o)},i={},a=!1===e?function(r,t,e){for(var n="",i=Object.keys(r),f={},c=i.length-1;c>=0;c--){var u=i[c];void 0!==r[u]&&(((v=u.charCodeAt(0))===h||v===d||v===p?f:f.$=f.$||{})[u]=r[u])}for(var s in f)if("$"===s)n+=" "+o(f[s],t,e);else{var v=s.charCodeAt(0);n+=a(f[s],v===h?s.slice(7):t,v===d||v===p?s:e)}return n}:function(r,t,e){for(var n,f="",c=Object.keys(r),u=g(i,t,e),s=c.length-1;s>=0;s--){var v=c[s],l=r[v];if(void 0!==l){var y=v.charCodeAt(0);if(y!==h&&y!==d&&y!==p){var m=((n={})[v]=l,n);if("string"!=typeof l&&"number"!=typeof l)f+=" "+o(m,t,e);else{var j=u[v]=u[v]||{};if(l in j){f+=" "+j[l];continue}var O=o(m,t,e);f+=" "+(j[l]=O)}}else f+=a(l,y===h?v.slice(7):t,y===d||y===p?v:e)}}return f};this.injectStyle=function(r,t){void 0===t&&(t={});var e={};if(Array.isArray(r))for(var o=r.length-1;o>=0;o--)n(r[o],t,e);else n(r,t,e);return a(e).slice(1)}};function g(r,t,e){var n=r;return t&&(n=n[t]=n[t]||{}),e?n[e]=n[e]||{}:n}function j(r,t){var e=r.cssRules.length;try{r.insertRule(t,e)}catch(r){}}function O(r,t){var e=document.createElement("style");return r&&(e.media=r),e.dataset[t]="",e}function b(r,t){return document.head.insertBefore(r,t),r}function x(r){void 0===r&&(r="");var t=0,e=10,n=35,o=1,i=function(){var a=t+e;return a===n&&(e+=9*(n+1),n=Math.pow(36,++o)-1),t++,373===a?i():r+a.toString(36)};return i}var A=/\.([a-z0-9]+)([:\[][^{]+)?\{([^}]+)\}/g,w=/@keyframes ([a-z0-9]+)\{((?:[a-z0-9%]+\{[^}]+\})+)\}/g,k=/@font-face \{(.+?;font-family:([^}]+))\}/g,C=function(r){function e(t,e,n){var o={},i={},a={},f={},c=t.textContent;if(c){for(var u=void 0;u=A.exec(c);){e(),(u[2]?i[u[2]]=i[u[2]]||{}:o)[u[3]]=u[1]}for(;u=w.exec(c);)n(),a[u[2]]=u[1];for(;u=k.exec(c);)f[u[1]]=u[2]}var y=t.sheet;if(!function(r){return!!r&&"cssRules"in r}(y))throw new Error("HTMLStyleElement was not inserted properly into DOM");return r.call(this,o,i,a,f,e,n,(function(r,t,e){var n=s(r,t,e);j(y,n)}),(function(r,t){var e=v(r,t);j(y,e)}),(function(r){var t=l(r);j(y,t)}))||this}return t(e,r),e}(y),F=function(r){function e(t){void 0===t&&(t={});var e,n,o=t.prefix,i=x(o),a=x(o),f=t.mediaOrder,c={},u=null,s={},v=t.identifier||"glitz";e=r.call(this,(function(r){if(r){if(s[r])return s[r];var t=c[r]=O(r,v),e=null;if(f){var o=Object.keys(c).sort(f);u=c[o[0]],e=c[o[o.indexOf(r)+1]]||null}return b(t,e),s[r]=new C(t,i,a)}if(n)return n;t=b(O(r,v),u);return n=new C(t,i,a)}),t.transformer,t.atomic)||this;var l=document.head.querySelectorAll("[data-"+v+"]");if(l)for(var y=0,h=l;y<h.length;y++){var d=h[y],p=d.media;p?(u||(u=d),c[p]=d,s[p]=new C(d,i,a)):n=new C(d,i,a)}return e}return t(e,r),e}(m),_=function(r){function e(t,e){var n=this,o={},i={},a={},f={};return(n=r.call(this,o,i,a,f,t,e)||this).getStyle=function(){var r="";for(var t in f)r+=l(t);for(var e in a)r+=v(a[e],e);for(var t in o)r+=s(o[t],t);for(var n in i){var c=i[n];for(var t in c)r+=s(c[t],t,n)}return r},n}return t(e,r),e}(y),z=function(r){function e(t){void 0===t&&(t={});var e,n=this,o=t.prefix,i=x(o),a=x(o),f={};return(n=r.call(this,(function(r){return r?f[r]=f[r]||new _(i,a):e=e||new _(i,a)}),t.transformer,t.atomic)||this).getStyleMarkup=function(){var r=t.identifier||"glitz",n="";e&&(n+="<style data-"+r+">"+e.getStyle()+"</style>");for(var o=0,i=t.mediaOrder?Object.keys(f).sort(t.mediaOrder):Object.keys(f);o<i.length;o++){var a=i[o];n+="<style data-"+r+' media="'+a+'">'+f[a].getStyle()+"</style>"}return n},n}return t(e,r),e}(m);function S(r){var t,e="";for(t in r){e&&(e+=" and ");var n=r[t];e+=!0===n?"("+f(t)+")":"("+f(t)+": "+n+")"}return e}exports.DEFAULT_HYDRATION_IDENTIFIER="glitz",exports.GlitzClient=F,exports.GlitzServer=z,exports.compose=function(){for(var r=[],t=0;t<arguments.length;t++)r[t]=arguments[t];return r.reduceRight((function(r,t){return function(e){return t(r(e))}}))},exports.media=function(r,t){var e;return(e={})["@media "+("string"==typeof r?r:S(r))]=t,e},exports.query=S,exports.selector=function(r,t){var n;return"string"==typeof r?((n={})[r]=t,n):r.reduce((function(r,n){var o;return e(e({},r),((o={})[n]=t,o))}),{})};
+***************************************************************************** */function e(e,r){function n(){this.constructor=e}t(e,r),e.prototype=null===r?Object.create(r):(n.prototype=r.prototype,new n)}var r=function(){return(r=Object.assign||function(t){for(var e,r=1,n=arguments.length;r<n;r++)for(var i in e=arguments[r])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)};function n(t){var e,r="";for(e in t){var n=t[e];if("object"==typeof n)for(var o=0,a=n;o<a.length;o++){r&&(r+=";"),r+=i(e,a[o])}else r&&(r+=";"),r+=i(e,n)}return r}function i(t,e){return f(t)+":"+e}var o=/(?:^(ms|moz|webkit))|[A-Z]/g,a={};function f(t){return t in a?a[t]:a[t]=t.replace(o,"-$&").toLowerCase()}function u(t){for(var e={},r=Object.keys(t),n=r.length;n>0;n--)e[r[n-1]]=t[r[n-1]];return e}function c(t,e){return t+"{"+e+"}"}function s(t,e,r){return void 0===r&&(r=""),"."+c(t+r,e)}function l(t,e){return"@keyframes "+c(t,e)}function v(t){return c("@font-face",t)}function y(t,e){return"@media "+c(t,e)}var d=function(t,e,r,i){this.injectClassName=function(r,i){var o=n(r);return i?e(i,o):t(o)},this.injectKeyframes=function(t){var e="";for(var i in t)e+=c(i,n(t[i]));return r(e)},this.injectFontFace=function(t){var e={};for(var r in t)"fontFamily"!==r&&(e[r]=t[r]);var o=t.fontFamily;e.fontFamily=o;var a=n(e);return i(a),o}},h="@".charCodeAt(0),m=":".charCodeAt(0),p="[".charCodeAt(0),g=function(t,e,r){var n=function(r,i,o,a,f){var c,s,l;void 0===o&&(o={});for(var v=Object.keys(r),y=v.length;y>0;y--){var d=v[y-1],g=r[d];if("function"==typeof g&&(g=g(i)),null===g&&(g=void 0),"@keyframes"===d&&(d="animationName"),"@font-face"===d&&(d="fontFamily"),"animationName"===d||"fontFamily"===d||"object"!=typeof g||Array.isArray(g)){var j=O(o,a,f);if(!(d in j)){if("object"==typeof g){if("animationName"===d){for(var b=[].concat(g),x=[],S=0;S<b.length;S++){var w=b[S];if("object"==typeof w){var C={};for(var A in w){var F=u(n(w[A],i));C[A]=e?e(F):F}x[S]=t().injectKeyframes(C)}}g=1===x.length?x[0]:x}if("fontFamily"===d){x=[];for(var k=0,R=[].concat(g);k<R.length;k++){var _=R[k];if("object"==typeof _){var N=u(n(_,i)),z=t().injectFontFace(e?e(N):N);-1===x.indexOf(z)&&x.push(z)}else x.push(_)}g=x.join(",")}}j[d]=g}}else{var E=d.charCodeAt(0);if(E!==h&&E!==m&&E!==p){var K=Object.keys(g);for(S=K.length;S>0;S--){var M=K[S-1],T=g[M],D=!1;"y"!==M&&"xy"!==M||(D=!0,n(((c={})[d+"Top"]=T,c[d+"Bottom"]=T,c),i,o,a,f)),"x"!==M&&"xy"!==M||(D=!0,n(((s={})[d+"Left"]=T,s[d+"Right"]=T,s),i,o,a,f)),D||n(((l={})[d+M[0].toUpperCase()+M.slice(1)]=T,l),i,o,a,f)}}else n(g,i,o,E===h?d:a,E===m||E===p?(f||"")+d:f)}}return o},i=function(r,n,i){return t(n).injectClassName(e?e(r):r,i)},o={},a=!1===r?function(t,e,r){for(var n="",o=Object.keys(t),f={},u=o.length-1;u>=0;u--){var c=o[u];void 0!==t[c]&&(((l=c.charCodeAt(0))===h||l===m||l===p?f:f.$=f.$||{})[c]=t[c])}for(var s in f)if("$"===s)n+=" "+i(f[s],e,r);else{var l=s.charCodeAt(0);n+=a(f[s],l===h?s.slice(7):e,l===m||l===p?s:r)}return n}:function(t,e,r){for(var n,f="",u=Object.keys(t),c=O(o,e,r),s=u.length-1;s>=0;s--){var l=u[s],v=t[l];if(void 0!==v){var y=l.charCodeAt(0);if(y!==h&&y!==m&&y!==p){var d=((n={})[l]=v,n);if("string"!=typeof v&&"number"!=typeof v)f+=" "+i(d,e,r);else{var g=c[l]=c[l]||{};if(v in g){f+=" "+g[v];continue}var j=i(d,e,r);f+=" "+(g[v]=j)}}else f+=a(v,y===h?l.slice(7):e,y===m||y===p?l:r)}}return f};this.injectStyle=function(t,e){void 0===e&&(e={});var r={};if(Array.isArray(t))for(var i=t.length-1;i>=0;i--)n(t[i],e,r);else n(t,e,r);return a(r).slice(1)}};function O(t,e,r){var n=t;return e&&(n=n[e]=n[e]||{}),r?n[r]=n[r]||{}:n}function j(t,e){var r=t.cssRules.length;try{t.insertRule(e,r)}catch(t){}}function b(t,e){var r=document.createElement("style");return t&&(r.media=t),r.dataset[e]="",r}function x(t,e){return document.head.insertBefore(t,e),t}function S(t){void 0===t&&(t="");var e=0,r=10,n=35,i=1,o=function(){var a=e+r;return a===n&&(r+=9*(n+1),n=Math.pow(36,++i)-1),e++,373===a?o():t+a.toString(36)};return o}var w=function(t){function r(e,r,n){var i=this,o={},a={},f={},u=[],c=e.sheet;if(!function(t){return!!t&&"cssRules"in t}(c))throw new Error("HTMLStyleElement was not inserted properly into DOM");return(i=t.call(this,(function(t){if(o[t])return o[t];var e=r();return o[t]=e,j(c,s(e,t)),e}),(function(t,e){var n=a[t]=a[t]||{};if(n[e])return n[e];var i=r();return n[e]=i,j(c,s(i,e,t)),i}),(function(t){if(f[t])return f[t];var e=n();return f[t]=e,j(c,l(e,t)),e}),(function(t){-1===u.indexOf(t)&&(u.push(t),j(c,v(t)))}))||this).injectRaw=function(t){j(c,t)},i.hydrateClassName=function(t,e,r){(r?a[r]=a[r]||{}:o)[t]=e},i.hydrateKeyframes=function(t,e){f[t]=e},i.hydrateFontFace=function(t){u.push(t)},i}return e(r,t),r}(d),C="{".charCodeAt(0),A="}".charCodeAt(0),F=/\.([\w]+)((?::.+)|(\[.+\]))?/,k=/@keyframes (.+)/,R=/@media (.+)/;function _(t,e,r){return function(n,i,o){for(var a=0,f="",u="",c="",s="",l=0;l<n.length;l++){var v=n[l],y=v.charCodeAt(0);if(f+=v,y!==C||(a++,u?2!==a:1!==a)){if(y===A){if(a--,u&&0===a){u="";continue}if(u?1===a:0===a){var d=null!=i?i:t(u);h=void 0;if(h=F.exec(c))e(),d.hydrateClassName(s,h[1],h[2]);else if(h=k.exec(c))r(),d.hydrateKeyframes(s,h[1]);else{if("@font-face"!==c)throw new Error("Unsupported CSS selector when hydrating in Glitz");d.hydrateFontFace(s)}o&&o(d,f),f="",c="",s="";continue}}(u?a>1:a>0)?s+=v:c+=v}else{var h;(h=R.exec(c))&&(u=h[1],f="",c="")}}}}var N=function(t){function r(e){void 0===e&&(e={});var r,n=this,i=e.prefix,o=S(i),a=S(i),f=e.mediaOrder,u={},c=null,s={},l=e.identifier||"glitz",v=function(t){if(t){if(s[t])return s[t];var e=u[t]=b(t,l),n=null;if(f){var i=Object.keys(u).sort(f);c=u[i[0]],n=u[i[i.indexOf(t)+1]]||null}return x(e,n),s[t]=new w(e,o,a)}if(r)return r;e=x(b(t,l),c);return r=new w(e,o,a)},y=(n=t.call(this,v,e.transformer,e.atomic)||this).hydrate=_(v,o,a),d=document.head.querySelectorAll("style[data-"+l+"]");if(d)for(var h=0,m=d;h<m.length;h++){var p=(A=m[h]).media,g=void 0;p?(c||(c=A),u[p]=A,g=s[p]=new w(A,o,a)):g=r=new w(A,o,a),y(A.textContent,g)}var O=document.body.querySelectorAll("style[data-"+l+"]");if(O)for(var j=0,C=O;j<C.length;j++){var A;y((A=C[j]).textContent,void 0,(function(t,e){return t.injectRaw(e)})),A.parentNode.removeChild(A)}return n}return e(r,t),r}(g),z=function(t){function r(e,r){var n=this,i={},o={},a={},f=[],u={},c={},y={},d=[],h={},m={},p={},g=[];return(n=t.call(this,(function(t){if(i[t])return i[t];var r=e();return i[t]=u[t]=h[t]=r,r}),(function(t,r){var n=o[t]=o[t]||{};if(n[r])return n[r];var i=e(),a=c[t]=c[t]||{},f=m[t]=m[t]||{};return n[r]=a[r]=f[r]=i,i}),(function(t){if(a[t])return a[t];var e=r();return a[t]=y[t]=p[t]=e,e}),(function(t){-1===f.indexOf(t)&&(f.push(t),d.push(t),g.push(t))}))||this).getStyleResult=function(){for(var t="",e=0,r=d;e<r.length;e++){t+=v(i=r[e])}for(var n in y)t+=l(y[n],n);for(var i in u)t+=s(u[i],i);for(var o in c){var a=c[o];for(var i in a)t+=s(a[i],i,o)}return t},n.getStyleStream=function(){var t="";if(g.length>0){for(var e=0,r=g;e<r.length;e++){t+=v(i=r[e])}g.splice(0,g.length)}for(var n in p)t+=l(p[n],n),delete p[n];for(var i in h)t+=s(h[i],i),delete h[i];for(var o in m){var a=m[o];for(var i in a)t+=s(a[i],i,o);delete m[o]}return t},n.hydrateClassName=function(t,e,r){(r?o[r]=o[r]||{}:i)[t]=e},n.hydrateKeyframes=function(t,e){a[t]=e},n.hydrateFontFace=function(t){f.push(t)},n}return e(r,t),r}(d),E=function(t){function r(e){void 0===e&&(e={});var r,n=this,i=e.prefix,o=S(i),a=S(i),f={},u=function(t){return t?f[t]=f[t]||new z(o,a):r=r||new z(o,a)};(n=t.call(this,u,e.transformer,e.atomic)||this).hydrate=_(u,o,a);var c=e.identifier||"glitz";return n.getStyleMarkup=function(){var t="";r&&(t+="<style data-"+c+">"+r.getStyleResult()+"</style>");for(var n=0,i=e.mediaOrder?Object.keys(f).sort(e.mediaOrder):Object.keys(f);n<i.length;n++){var o=i[n];t+="<style data-"+c+' media="'+o+'">'+f[o].getStyleResult()+"</style>"}return t},n.getStyleStream=function(){var t,n="";r&&(n+=r.getStyleStream());for(var i=0,o=e.mediaOrder?Object.keys(f).sort(e.mediaOrder):Object.keys(f);i<o.length;i++){var a=o[i];n+=y(a,f[a].getStyleStream())}if(n)return["style",(t={},t["data-"+c]="",t),n]},n}return e(r,t),r}(g),K=function(t){function r(e){void 0===e&&(e={});var r,n=this,i=e.prefix,o=S(i),a=S(i),f={};return(n=t.call(this,(function(t){return t?f[t]=f[t]||new z(o,a):r=r||new z(o,a)}),e.transformer,e.atomic)||this).getStyle=function(){var t="";r&&(t+=r.getStyleResult());for(var n=0,i=e.mediaOrder?Object.keys(f).sort(e.mediaOrder):Object.keys(f);n<i.length;n++){var o=i[n];t+=y(o,f[o].getStyleResult())}return t},n}return e(r,t),r}(g);function M(t){var e,r="";for(e in t){r&&(r+=" and ");var n=t[e];r+=!0===n?"("+f(e)+")":"("+f(e)+": "+n+")"}return r}exports.DEFAULT_HYDRATION_IDENTIFIER="glitz",exports.GlitzClient=N,exports.GlitzServer=E,exports.GlitzStatic=K,exports.compose=function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];return t.reduceRight((function(t,e){return function(r){return e(t(r))}}))},exports.media=function(t,e){var r;return(r={})["@media "+("string"==typeof t?t:M(t))]=e,r},exports.query=M,exports.selector=function(t,e){var n;return"string"==typeof t?((n={})[t]=e,n):t.reduce((function(t,n){var i;return r(r({},t),((i={})[n]=e,i))}),{})};

esnext/index.js

@@ -201,4 +201,7 @@ const DEFAULT_HYDRATION_IDENTIFIER = 'glitz';
 function formatFontFaceRule(block) {
-    return `@font-face {${block}}`;
+    return formatRule('@font-face', block);
 }
+function formatMediaRule(query, block) {
+    return `@media ${formatRule(query, block)}`;
+}
 const PRETTY_REGEX = /[{:;}]|(?:(["']).*?\1)/g;
@@ -212,15 +215,11 @@ function prettifyRule(rule) {
 class Injector {
-    constructor(plainIndex, selectorIndex, keyframesIndex, fontFaceIndex, incrementClassHash, incrementKeyframesHash, injectNewClassRule, injectNewKeyframesRule, injectNewFontFaceRule) {
+    constructor(plainClassName, selectorClassName, keyframeName, handleFontFace) {
         this.injectClassName = (declarations, selector) => {
             const block = parseDeclarationBlock(declarations);
-            const index = selector ? (selectorIndex[selector] = selectorIndex[selector] || {}) : plainIndex;
-            if (index[block]) {
-                return index[block];
+            if (selector) {
+                return selectorClassName(selector, block);
             }
-            const className = incrementClassHash();
-            index[block] = className;
-            if (injectNewClassRule) {
-                injectNewClassRule(className, block, selector);
+            else {
+                return plainClassName(block);
             }
-            return className;
         };
@@ -233,11 +232,3 @@ this.injectKeyframes = declarationList => {
             }
-            if (keyframesIndex[blockList]) {
-                return keyframesIndex[blockList];
-            }
-            const name = incrementKeyframesHash();
-            keyframesIndex[blockList] = name;
-            if (injectNewKeyframesRule) {
-                injectNewKeyframesRule(name, blockList);
-            }
-            return name;
+            return keyframeName(blockList);
         };
@@ -259,9 +250,3 @@ this.injectFontFace = original => {
             const block = parseDeclarationBlock(declarations);
-            if (fontFaceIndex[block]) {
-                return fontFaceIndex[block];
-            }
-            fontFaceIndex[block] = family;
-            if (injectNewFontFaceRule) {
-                injectNewFontFaceRule(block);
-            }
+            handleFontFace(block);
             return family;
@@ -553,54 +538,136 @@ };
 
-// tslint:disable no-conditional-assignment
-const CLASS_RULE_REGEX = /\.([a-z0-9]+)([:\[][^{]+)?\{([^}]+)\}/g;
-const KEYFRAMES_REGEX = /@keyframes ([a-z0-9]+)\{((?:[a-z0-9%]+\{[^}]+\})+)\}/g;
-const FONT_FACE_REGEX = /@font-face \{(.+?;font-family:([^}]+))\}/g;
 class InjectorClient extends Injector {
-    constructor(styleElement, incrementClassHash, incrementKeyframesHash) {
+    constructor(element, incrementClassNameHash, incrementKeyframesHash) {
         const plainIndex = {};
         const selectorIndex = {};
         const keyframesIndex = {};
-        const fontFaceIndex = {};
-        // Hydrate
-        const css = styleElement.textContent;
-        if (css) {
-            let rule;
-            while ((rule = CLASS_RULE_REGEX.exec(css))) {
-                incrementClassHash();
-                const index = rule[2] ? (selectorIndex[rule[2]] = selectorIndex[rule[2]] || {}) : plainIndex;
-                index[rule[3]] = rule[1];
+        const fontFaceIndex = [];
+        const sheet = element.sheet;
+        if (!isCSSStyleSheet(sheet)) {
+            throw new Error('HTMLStyleElement was not inserted properly into DOM');
+        }
+        super(block => {
+            if (plainIndex[block]) {
+                return plainIndex[block];
             }
-            while ((rule = KEYFRAMES_REGEX.exec(css))) {
-                incrementKeyframesHash();
-                keyframesIndex[rule[2]] = rule[1];
+            const className = incrementClassNameHash();
+            plainIndex[block] = className;
+            injectSheetRule(sheet, formatClassRule(className, block));
+            return className;
+        }, (selector, block) => {
+            const index = (selectorIndex[selector] = selectorIndex[selector] || {});
+            if (index[block]) {
+                return index[block];
             }
-            while ((rule = FONT_FACE_REGEX.exec(css))) {
-                fontFaceIndex[rule[1]] = rule[2];
+            const className = incrementClassNameHash();
+            index[block] = className;
+            injectSheetRule(sheet, formatClassRule(className, block, selector));
+            return className;
+        }, blockList => {
+            if (keyframesIndex[blockList]) {
+                return keyframesIndex[blockList];
             }
-        }
-        const sheet = styleElement.sheet;
-        if (!isCSSStyleSheet(sheet)) {
-            throw new Error('HTMLStyleElement was not inserted properly into DOM');
-        }
-        const injectNewClassRule = (className, block, selector) => {
-            const rule = formatClassRule(className, block, selector);
+            const name = incrementKeyframesHash();
+            keyframesIndex[blockList] = name;
+            injectSheetRule(sheet, formatKeyframesRule(name, blockList));
+            return name;
+        }, block => {
+            if (fontFaceIndex.indexOf(block) === -1) {
+                fontFaceIndex.push(block);
+                injectSheetRule(sheet, formatFontFaceRule(block));
+            }
+        });
+        this.injectRaw = rule => {
             injectSheetRule(sheet, rule);
         };
-        const injectNewKeyframesRule = (name, blockList) => {
-            const rule = formatKeyframesRule(name, blockList);
-            injectSheetRule(sheet, rule);
+        this.hydrateClassName = (body, className, suffix) => {
+            const index = suffix ? (selectorIndex[suffix] = selectorIndex[suffix] || {}) : plainIndex;
+            index[body] = className;
         };
-        const injectNewFontFaceRule = (block) => {
-            const rule = formatFontFaceRule(block);
-            injectSheetRule(sheet, rule);
+        this.hydrateKeyframes = (body, name) => {
+            keyframesIndex[body] = name;
         };
-        super(plainIndex, selectorIndex, keyframesIndex, fontFaceIndex, incrementClassHash, incrementKeyframesHash, injectNewClassRule, injectNewKeyframesRule, injectNewFontFaceRule);
+        this.hydrateFontFace = body => {
+            fontFaceIndex.push(body);
+        };
     }
 }
 
+// tslint:disable no-conditional-assignment
+const BLOCK_START_CODE = '{'.charCodeAt(0);
+const BLOCK_END_CODE = '}'.charCodeAt(0);
+const PLAIN_SELECTOR = /\.([\w]+)((?::.+)|(\[.+\]))?/;
+const KEYFRAMES_SELECTOR = /@keyframes (.+)/;
+const MEDIA_SELECTOR = /@media (.+)/;
+function createHydrate(getInjector, incrementClassNameHash, incrementKeyframesHash) {
+    return function hydrate(css, explicitInjector, callback) {
+        let depth = 0;
+        let rule = '';
+        let media = '';
+        let selector = '';
+        let body = '';
+        // tslint:disable-next-line: prefer-for-of
+        for (let i = 0; i < css.length; i++) {
+            const character = css[i];
+            const code = character.charCodeAt(0);
+            rule += character;
+            if (code === BLOCK_START_CODE) {
+                depth++;
+                if (media ? depth === 2 : depth === 1) {
+                    const match = MEDIA_SELECTOR.exec(selector);
+                    if (match) {
+                        media = match[1];
+                        rule = '';
+                        selector = '';
+                    }
+                    continue;
+                }
+            }
+            if (code === BLOCK_END_CODE) {
+                depth--;
+                if (media && depth === 0) {
+                    media = '';
+                    continue;
+                }
+                if (media ? depth === 1 : depth === 0) {
+                    const currentInjector = explicitInjector ?? getInjector(media);
+                    let match;
+                    if ((match = PLAIN_SELECTOR.exec(selector))) {
+                        incrementClassNameHash();
+                        currentInjector.hydrateClassName(body, match[1], match[2]);
+                    }
+                    else if ((match = KEYFRAMES_SELECTOR.exec(selector))) {
+                        incrementKeyframesHash();
+                        currentInjector.hydrateKeyframes(body, match[1]);
+                    }
+                    else if (selector === '@font-face') {
+                        currentInjector.hydrateFontFace(body);
+                    }
+                    else {
+                        throw new Error('Unsupported CSS selector when hydrating in Glitz');
+                    }
+                    if (callback) {
+                        callback(currentInjector, rule);
+                    }
+                    rule = '';
+                    selector = '';
+                    body = '';
+                    continue;
+                }
+            }
+            if (media ? depth > 1 : depth > 0) {
+                body += character;
+            }
+            else {
+                selector += character;
+            }
+        }
+    };
+}
+
 class GlitzClient extends Base {
     constructor(options = {}) {
         const prefix = options.prefix;
-        const classHasher = createHashCounter(prefix);
-        const keyframesHasher = createHashCounter(prefix);
+        const incrementClassNameHash = createHashCounter(prefix);
+        const incrementKeyframesHash = createHashCounter(prefix);
         const mediaOrderOption = options.mediaOrder;
@@ -612,3 +679,3 @@ const mediaSheets = {};
         const identifier = options.identifier || DEFAULT_HYDRATION_IDENTIFIER;
-        const injector = (media) => {
+        const getInjector = (media) => {
             if (media) {
@@ -626,3 +693,3 @@ if (mediaIndex[media]) {
                 insertStyleElement(element, insertBefore);
-                return (mediaIndex[media] = new InjectorClient(element, classHasher, keyframesHasher));
+                return (mediaIndex[media] = new InjectorClient(element, incrementClassNameHash, incrementKeyframesHash));
             }
@@ -634,12 +701,14 @@ else {
                 const element = insertStyleElement(createStyleElement(media, identifier), initialMediaSheet);
-                return (plain = new InjectorClient(element, classHasher, keyframesHasher));
+                return (plain = new InjectorClient(element, incrementClassNameHash, incrementKeyframesHash));
             }
         };
-        super(injector, options.transformer, options.atomic);
-        const preRenderStyles = document.head.querySelectorAll(`[data-${identifier}]`);
-        if (preRenderStyles) {
-            for (const element of preRenderStyles) {
+        super(getInjector, options.transformer, options.atomic);
+        const hydrate = (this.hydrate = createHydrate(getInjector, incrementClassNameHash, incrementKeyframesHash));
+        const preRenderedStyleElements = document.head.querySelectorAll(`style[data-${identifier}]`);
+        if (preRenderedStyleElements) {
+            for (const element of preRenderedStyleElements) {
                 // Injector for style elements without `media` is stored with an empty key. So if there's any reason to have
                 // more than one of these in the future we need to change that part.
                 const media = element.media;
+                let injector;
                 if (media) {
@@ -650,7 +719,8 @@ if (!initialMediaSheet) {
                     mediaSheets[media] = element;
-                    mediaIndex[media] = new InjectorClient(element, classHasher, keyframesHasher);
+                    injector = mediaIndex[media] = new InjectorClient(element, incrementClassNameHash, incrementKeyframesHash);
                 }
                 else {
-                    plain = new InjectorClient(element, classHasher, keyframesHasher);
+                    injector = plain = new InjectorClient(element, incrementClassNameHash, incrementKeyframesHash);
                 }
+                hydrate(element.textContent, injector);
             }
@@ -673,2 +743,9 @@ if (process.env.NODE_ENV !== 'production') {
         }
+        const streamedStyleElements = document.body.querySelectorAll(`style[data-${identifier}]`);
+        if (streamedStyleElements) {
+            for (const element of streamedStyleElements) {
+                hydrate(element.textContent, undefined, (injector, rule) => injector.injectRaw(rule));
+                element.parentNode.removeChild(element);
+            }
+        }
     }
@@ -679,20 +756,58 @@ }
     constructor(incrementClassHash, incrementKeyframesHash) {
-        const plainIndex = {};
-        const selectorIndex = {};
-        const keyframesIndex = {};
-        const fontFaceIndex = {};
-        super(plainIndex, selectorIndex, keyframesIndex, fontFaceIndex, incrementClassHash, incrementKeyframesHash);
-        this.getStyle = () => {
+        const plainFullIndex = {};
+        const selectorFullIndex = {};
+        const keyframesFullIndex = {};
+        const fontFaceFullIndex = [];
+        const plainResultIndex = {};
+        const selectorResultIndex = {};
+        const keyframesResultIndex = {};
+        const fontFaceResultIndex = [];
+        const plainStreamIndex = {};
+        const selectorStreamIndex = {};
+        const keyframesStreamIndex = {};
+        const fontFaceStreamIndex = [];
+        super(block => {
+            if (plainFullIndex[block]) {
+                return plainFullIndex[block];
+            }
+            const className = incrementClassHash();
+            plainFullIndex[block] = plainResultIndex[block] = plainStreamIndex[block] = className;
+            return className;
+        }, (selector, block) => {
+            const full = (selectorFullIndex[selector] = selectorFullIndex[selector] || {});
+            if (full[block]) {
+                return full[block];
+            }
+            const className = incrementClassHash();
+            const result = (selectorResultIndex[selector] = selectorResultIndex[selector] || {});
+            const stream = (selectorStreamIndex[selector] = selectorStreamIndex[selector] || {});
+            full[block] = result[block] = stream[block] = className;
+            return className;
+        }, blockList => {
+            if (keyframesFullIndex[blockList]) {
+                return keyframesFullIndex[blockList];
+            }
+            const name = incrementKeyframesHash();
+            keyframesFullIndex[blockList] = keyframesResultIndex[blockList] = keyframesStreamIndex[blockList] = name;
+            return name;
+        }, block => {
+            if (fontFaceFullIndex.indexOf(block) === -1) {
+                fontFaceFullIndex.push(block);
+                fontFaceResultIndex.push(block);
+                fontFaceStreamIndex.push(block);
+            }
+        });
+        this.getStyleResult = () => {
             let css = '';
-            for (const block in fontFaceIndex) {
+            for (const block of fontFaceResultIndex) {
                 css += formatFontFaceRule(block);
             }
-            for (const blockList in keyframesIndex) {
-                css += formatKeyframesRule(keyframesIndex[blockList], blockList);
+            for (const blockList in keyframesResultIndex) {
+                css += formatKeyframesRule(keyframesResultIndex[blockList], blockList);
             }
-            for (const block in plainIndex) {
-                css += formatClassRule(plainIndex[block], block);
+            for (const block in plainResultIndex) {
+                css += formatClassRule(plainResultIndex[block], block);
             }
-            for (const selector in selectorIndex) {
-                const index = selectorIndex[selector];
+            for (const selector in selectorResultIndex) {
+                const index = selectorResultIndex[selector];
                 for (const block in index) {
@@ -704,2 +819,37 @@ css += formatClassRule(index[block], block, selector);
         };
+        this.getStyleStream = () => {
+            let css = '';
+            if (fontFaceStreamIndex.length > 0) {
+                for (const block of fontFaceStreamIndex) {
+                    css += formatFontFaceRule(block);
+                }
+                fontFaceStreamIndex.splice(0, fontFaceStreamIndex.length);
+            }
+            for (const blockList in keyframesStreamIndex) {
+                css += formatKeyframesRule(keyframesStreamIndex[blockList], blockList);
+                delete keyframesStreamIndex[blockList];
+            }
+            for (const block in plainStreamIndex) {
+                css += formatClassRule(plainStreamIndex[block], block);
+                delete plainStreamIndex[block];
+            }
+            for (const selector in selectorStreamIndex) {
+                const index = selectorStreamIndex[selector];
+                for (const block in index) {
+                    css += formatClassRule(index[block], block, selector);
+                }
+                delete selectorStreamIndex[selector];
+            }
+            return css;
+        };
+        this.hydrateClassName = (body, className, suffix) => {
+            const index = suffix ? (selectorFullIndex[suffix] = selectorFullIndex[suffix] || {}) : plainFullIndex;
+            index[body] = className;
+        };
+        this.hydrateKeyframes = (body, name) => {
+            keyframesFullIndex[body] = name;
+        };
+        this.hydrateFontFace = body => {
+            fontFaceFullIndex.push(body);
+        };
     }
@@ -711,25 +861,65 @@ }
         const prefix = options.prefix;
-        const classHasher = createHashCounter(prefix);
-        const keyframesHasher = createHashCounter(prefix);
+        const incrementClassNameHash = createHashCounter(prefix);
+        const incrementKeyframesHash = createHashCounter(prefix);
         let plain;
         const mediaIndex = {};
-        const injector = (media) => media
-            ? (mediaIndex[media] = mediaIndex[media] || new InjectorServer(classHasher, keyframesHasher))
-            : (plain = plain || new InjectorServer(classHasher, keyframesHasher));
-        super(injector, options.transformer, options.atomic);
+        const getInjector = (media) => media
+            ? (mediaIndex[media] = mediaIndex[media] || new InjectorServer(incrementClassNameHash, incrementKeyframesHash))
+            : (plain = plain || new InjectorServer(incrementClassNameHash, incrementKeyframesHash));
+        super(getInjector, options.transformer, options.atomic);
+        this.hydrate = createHydrate(getInjector, incrementClassNameHash, incrementKeyframesHash);
+        const identifier = options.identifier || DEFAULT_HYDRATION_IDENTIFIER;
         this.getStyleMarkup = () => {
-            const identifier = options.identifier || DEFAULT_HYDRATION_IDENTIFIER;
             let markup = '';
             if (plain) {
-                markup += `<style data-${identifier}>${plain.getStyle()}</style>`;
+                markup += `<style data-${identifier}>${plain.getStyleResult()}</style>`;
             }
             const medias = options.mediaOrder ? Object.keys(mediaIndex).sort(options.mediaOrder) : Object.keys(mediaIndex);
             for (const media of medias) {
-                markup += `<style data-${identifier} media="${media}">${mediaIndex[media].getStyle()}</style>`;
+                markup += `<style data-${identifier} media="${media}">${mediaIndex[media].getStyleResult()}</style>`;
             }
             return markup;
         };
+        this.getStyleStream = () => {
+            let css = '';
+            if (plain) {
+                css += plain.getStyleStream();
+            }
+            const medias = options.mediaOrder ? Object.keys(mediaIndex).sort(options.mediaOrder) : Object.keys(mediaIndex);
+            for (const media of medias) {
+                css += formatMediaRule(media, mediaIndex[media].getStyleStream());
+            }
+            if (css) {
+                return ['style', { [`data-${identifier}`]: '' }, css];
+            }
+            return undefined;
+        };
     }
 }
 
+class GlitzStatic extends Base {
+    constructor(options = {}) {
+        const prefix = options.prefix;
+        const incrementClassNameHash = createHashCounter(prefix);
+        const incrementKeyframesHash = createHashCounter(prefix);
+        let plain;
+        const mediaIndex = {};
+        const injector = (media) => media
+            ? (mediaIndex[media] = mediaIndex[media] || new InjectorServer(incrementClassNameHash, incrementKeyframesHash))
+            : (plain = plain || new InjectorServer(incrementClassNameHash, incrementKeyframesHash));
+        super(injector, options.transformer, options.atomic);
+        this.getStyle = () => {
+            let css = '';
+            if (plain) {
+                css += plain.getStyleResult();
+            }
+            const medias = options.mediaOrder ? Object.keys(mediaIndex).sort(options.mediaOrder) : Object.keys(mediaIndex);
+            for (const media of medias) {
+                css += formatMediaRule(media, mediaIndex[media].getStyleResult());
+            }
+            return css;
+        };
+    }
+}
+
 // Unfortunately we need this until there's a way to have index signatures for
@@ -768,2 +958,2 @@ // other types like: https://github.com/Microsoft/TypeScript/issues/7765.
 
-export { DEFAULT_HYDRATION_IDENTIFIER, GlitzClient, GlitzServer, compose, media, query, selector };
+export { DEFAULT_HYDRATION_IDENTIFIER, GlitzClient, GlitzServer, GlitzStatic, compose, media, query, selector };

mjs/index.js

@@ -22,3 +22,3 @@ var DEFAULT_HYDRATION_IDENTIFIER = 'glitz';
         ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
     return extendStatics(d, b);
@@ -256,4 +256,7 @@ };
 function formatFontFaceRule(block) {
-    return "@font-face {" + block + "}";
+    return formatRule('@font-face', block);
 }
+function formatMediaRule(query, block) {
+    return "@media " + formatRule(query, block);
+}
 var PRETTY_REGEX = /[{:;}]|(?:(["']).*?\1)/g;
@@ -269,15 +272,11 @@ function prettifyRule(rule) {
 var Injector = /** @class */ (function () {
-    function Injector(plainIndex, selectorIndex, keyframesIndex, fontFaceIndex, incrementClassHash, incrementKeyframesHash, injectNewClassRule, injectNewKeyframesRule, injectNewFontFaceRule) {
+    function Injector(plainClassName, selectorClassName, keyframeName, handleFontFace) {
         this.injectClassName = function (declarations, selector) {
             var block = parseDeclarationBlock(declarations);
-            var index = selector ? (selectorIndex[selector] = selectorIndex[selector] || {}) : plainIndex;
-            if (index[block]) {
-                return index[block];
+            if (selector) {
+                return selectorClassName(selector, block);
             }
-            var className = incrementClassHash();
-            index[block] = className;
-            if (injectNewClassRule) {
-                injectNewClassRule(className, block, selector);
+            else {
+                return plainClassName(block);
             }
-            return className;
         };
@@ -290,11 +289,3 @@ this.injectKeyframes = function (declarationList) {
             }
-            if (keyframesIndex[blockList]) {
-                return keyframesIndex[blockList];
-            }
-            var name = incrementKeyframesHash();
-            keyframesIndex[blockList] = name;
-            if (injectNewKeyframesRule) {
-                injectNewKeyframesRule(name, blockList);
-            }
-            return name;
+            return keyframeName(blockList);
         };
@@ -316,9 +307,3 @@ this.injectFontFace = function (original) {
             var block = parseDeclarationBlock(declarations);
-            if (fontFaceIndex[block]) {
-                return fontFaceIndex[block];
-            }
-            fontFaceIndex[block] = family;
-            if (injectNewFontFaceRule) {
-                injectNewFontFaceRule(block);
-            }
+            handleFontFace(block);
             return family;
@@ -619,9 +604,5 @@ };
 
-// tslint:disable no-conditional-assignment
-var CLASS_RULE_REGEX = /\.([a-z0-9]+)([:\[][^{]+)?\{([^}]+)\}/g;
-var KEYFRAMES_REGEX = /@keyframes ([a-z0-9]+)\{((?:[a-z0-9%]+\{[^}]+\})+)\}/g;
-var FONT_FACE_REGEX = /@font-face \{(.+?;font-family:([^}]+))\}/g;
 var InjectorClient = /** @class */ (function (_super) {
     __extends(InjectorClient, _super);
-    function InjectorClient(styleElement, incrementClassHash, incrementKeyframesHash) {
+    function InjectorClient(element, incrementClassNameHash, incrementKeyframesHash) {
         var _this = this;
@@ -631,37 +612,51 @@ var plainIndex = {};
         var keyframesIndex = {};
-        var fontFaceIndex = {};
-        // Hydrate
-        var css = styleElement.textContent;
-        if (css) {
-            var rule = void 0;
-            while ((rule = CLASS_RULE_REGEX.exec(css))) {
-                incrementClassHash();
-                var index = rule[2] ? (selectorIndex[rule[2]] = selectorIndex[rule[2]] || {}) : plainIndex;
-                index[rule[3]] = rule[1];
+        var fontFaceIndex = [];
+        var sheet = element.sheet;
+        if (!isCSSStyleSheet(sheet)) {
+            throw new Error('HTMLStyleElement was not inserted properly into DOM');
+        }
+        _this = _super.call(this, function (block) {
+            if (plainIndex[block]) {
+                return plainIndex[block];
             }
-            while ((rule = KEYFRAMES_REGEX.exec(css))) {
-                incrementKeyframesHash();
-                keyframesIndex[rule[2]] = rule[1];
+            var className = incrementClassNameHash();
+            plainIndex[block] = className;
+            injectSheetRule(sheet, formatClassRule(className, block));
+            return className;
+        }, function (selector, block) {
+            var index = (selectorIndex[selector] = selectorIndex[selector] || {});
+            if (index[block]) {
+                return index[block];
             }
-            while ((rule = FONT_FACE_REGEX.exec(css))) {
-                fontFaceIndex[rule[1]] = rule[2];
+            var className = incrementClassNameHash();
+            index[block] = className;
+            injectSheetRule(sheet, formatClassRule(className, block, selector));
+            return className;
+        }, function (blockList) {
+            if (keyframesIndex[blockList]) {
+                return keyframesIndex[blockList];
             }
-        }
-        var sheet = styleElement.sheet;
-        if (!isCSSStyleSheet(sheet)) {
-            throw new Error('HTMLStyleElement was not inserted properly into DOM');
-        }
-        var injectNewClassRule = function (className, block, selector) {
-            var rule = formatClassRule(className, block, selector);
+            var name = incrementKeyframesHash();
+            keyframesIndex[blockList] = name;
+            injectSheetRule(sheet, formatKeyframesRule(name, blockList));
+            return name;
+        }, function (block) {
+            if (fontFaceIndex.indexOf(block) === -1) {
+                fontFaceIndex.push(block);
+                injectSheetRule(sheet, formatFontFaceRule(block));
+            }
+        }) || this;
+        _this.injectRaw = function (rule) {
             injectSheetRule(sheet, rule);
         };
-        var injectNewKeyframesRule = function (name, blockList) {
-            var rule = formatKeyframesRule(name, blockList);
-            injectSheetRule(sheet, rule);
+        _this.hydrateClassName = function (body, className, suffix) {
+            var index = suffix ? (selectorIndex[suffix] = selectorIndex[suffix] || {}) : plainIndex;
+            index[body] = className;
         };
-        var injectNewFontFaceRule = function (block) {
-            var rule = formatFontFaceRule(block);
-            injectSheetRule(sheet, rule);
+        _this.hydrateKeyframes = function (body, name) {
+            keyframesIndex[body] = name;
         };
-        _this = _super.call(this, plainIndex, selectorIndex, keyframesIndex, fontFaceIndex, incrementClassHash, incrementKeyframesHash, injectNewClassRule, injectNewKeyframesRule, injectNewFontFaceRule) || this;
+        _this.hydrateFontFace = function (body) {
+            fontFaceIndex.push(body);
+        };
         return _this;
@@ -672,2 +667,74 @@ }
 
+// tslint:disable no-conditional-assignment
+var BLOCK_START_CODE = '{'.charCodeAt(0);
+var BLOCK_END_CODE = '}'.charCodeAt(0);
+var PLAIN_SELECTOR = /\.([\w]+)((?::.+)|(\[.+\]))?/;
+var KEYFRAMES_SELECTOR = /@keyframes (.+)/;
+var MEDIA_SELECTOR = /@media (.+)/;
+function createHydrate(getInjector, incrementClassNameHash, incrementKeyframesHash) {
+    return function hydrate(css, explicitInjector, callback) {
+        var depth = 0;
+        var rule = '';
+        var media = '';
+        var selector = '';
+        var body = '';
+        // tslint:disable-next-line: prefer-for-of
+        for (var i = 0; i < css.length; i++) {
+            var character = css[i];
+            var code = character.charCodeAt(0);
+            rule += character;
+            if (code === BLOCK_START_CODE) {
+                depth++;
+                if (media ? depth === 2 : depth === 1) {
+                    var match = MEDIA_SELECTOR.exec(selector);
+                    if (match) {
+                        media = match[1];
+                        rule = '';
+                        selector = '';
+                    }
+                    continue;
+                }
+            }
+            if (code === BLOCK_END_CODE) {
+                depth--;
+                if (media && depth === 0) {
+                    media = '';
+                    continue;
+                }
+                if (media ? depth === 1 : depth === 0) {
+                    var currentInjector = explicitInjector !== null && explicitInjector !== void 0 ? explicitInjector : getInjector(media);
+                    var match = void 0;
+                    if ((match = PLAIN_SELECTOR.exec(selector))) {
+                        incrementClassNameHash();
+                        currentInjector.hydrateClassName(body, match[1], match[2]);
+                    }
+                    else if ((match = KEYFRAMES_SELECTOR.exec(selector))) {
+                        incrementKeyframesHash();
+                        currentInjector.hydrateKeyframes(body, match[1]);
+                    }
+                    else if (selector === '@font-face') {
+                        currentInjector.hydrateFontFace(body);
+                    }
+                    else {
+                        throw new Error('Unsupported CSS selector when hydrating in Glitz');
+                    }
+                    if (callback) {
+                        callback(currentInjector, rule);
+                    }
+                    rule = '';
+                    selector = '';
+                    body = '';
+                    continue;
+                }
+            }
+            if (media ? depth > 1 : depth > 0) {
+                body += character;
+            }
+            else {
+                selector += character;
+            }
+        }
+    };
+}
+
 var GlitzClient = /** @class */ (function (_super) {
@@ -679,4 +746,4 @@ __extends(GlitzClient, _super);
         var prefix = options.prefix;
-        var classHasher = createHashCounter(prefix);
-        var keyframesHasher = createHashCounter(prefix);
+        var incrementClassNameHash = createHashCounter(prefix);
+        var incrementKeyframesHash = createHashCounter(prefix);
         var mediaOrderOption = options.mediaOrder;
@@ -688,3 +755,3 @@ var mediaSheets = {};
         var identifier = options.identifier || DEFAULT_HYDRATION_IDENTIFIER;
-        var injector = function (media) {
+        var getInjector = function (media) {
             if (media) {
@@ -702,3 +769,3 @@ if (mediaIndex[media]) {
                 insertStyleElement(element, insertBefore);
-                return (mediaIndex[media] = new InjectorClient(element, classHasher, keyframesHasher));
+                return (mediaIndex[media] = new InjectorClient(element, incrementClassNameHash, incrementKeyframesHash));
             }
@@ -710,13 +777,15 @@ else {
                 var element = insertStyleElement(createStyleElement(media, identifier), initialMediaSheet);
-                return (plain = new InjectorClient(element, classHasher, keyframesHasher));
+                return (plain = new InjectorClient(element, incrementClassNameHash, incrementKeyframesHash));
             }
         };
-        _this = _super.call(this, injector, options.transformer, options.atomic) || this;
-        var preRenderStyles = document.head.querySelectorAll("[data-" + identifier + "]");
-        if (preRenderStyles) {
-            for (var _i = 0, preRenderStyles_1 = preRenderStyles; _i < preRenderStyles_1.length; _i++) {
-                var element = preRenderStyles_1[_i];
+        _this = _super.call(this, getInjector, options.transformer, options.atomic) || this;
+        var hydrate = (_this.hydrate = createHydrate(getInjector, incrementClassNameHash, incrementKeyframesHash));
+        var preRenderedStyleElements = document.head.querySelectorAll("style[data-" + identifier + "]");
+        if (preRenderedStyleElements) {
+            for (var _i = 0, preRenderedStyleElements_1 = preRenderedStyleElements; _i < preRenderedStyleElements_1.length; _i++) {
+                var element = preRenderedStyleElements_1[_i];
                 // Injector for style elements without `media` is stored with an empty key. So if there's any reason to have
                 // more than one of these in the future we need to change that part.
                 var media = element.media;
+                var injector = void 0;
                 if (media) {
@@ -727,7 +796,8 @@ if (!initialMediaSheet) {
                     mediaSheets[media] = element;
-                    mediaIndex[media] = new InjectorClient(element, classHasher, keyframesHasher);
+                    injector = mediaIndex[media] = new InjectorClient(element, incrementClassNameHash, incrementKeyframesHash);
                 }
                 else {
-                    plain = new InjectorClient(element, classHasher, keyframesHasher);
+                    injector = plain = new InjectorClient(element, incrementClassNameHash, incrementKeyframesHash);
                 }
+                hydrate(element.textContent, injector);
             }
@@ -750,2 +820,10 @@ if (process.env.NODE_ENV !== 'production') {
         }
+        var streamedStyleElements = document.body.querySelectorAll("style[data-" + identifier + "]");
+        if (streamedStyleElements) {
+            for (var _a = 0, streamedStyleElements_1 = streamedStyleElements; _a < streamedStyleElements_1.length; _a++) {
+                var element = streamedStyleElements_1[_a];
+                hydrate(element.textContent, undefined, function (injector, rule) { return injector.injectRaw(rule); });
+                element.parentNode.removeChild(element);
+            }
+        }
         return _this;
@@ -760,20 +838,59 @@ }
         var _this = this;
-        var plainIndex = {};
-        var selectorIndex = {};
-        var keyframesIndex = {};
-        var fontFaceIndex = {};
-        _this = _super.call(this, plainIndex, selectorIndex, keyframesIndex, fontFaceIndex, incrementClassHash, incrementKeyframesHash) || this;
-        _this.getStyle = function () {
+        var plainFullIndex = {};
+        var selectorFullIndex = {};
+        var keyframesFullIndex = {};
+        var fontFaceFullIndex = [];
+        var plainResultIndex = {};
+        var selectorResultIndex = {};
+        var keyframesResultIndex = {};
+        var fontFaceResultIndex = [];
+        var plainStreamIndex = {};
+        var selectorStreamIndex = {};
+        var keyframesStreamIndex = {};
+        var fontFaceStreamIndex = [];
+        _this = _super.call(this, function (block) {
+            if (plainFullIndex[block]) {
+                return plainFullIndex[block];
+            }
+            var className = incrementClassHash();
+            plainFullIndex[block] = plainResultIndex[block] = plainStreamIndex[block] = className;
+            return className;
+        }, function (selector, block) {
+            var full = (selectorFullIndex[selector] = selectorFullIndex[selector] || {});
+            if (full[block]) {
+                return full[block];
+            }
+            var className = incrementClassHash();
+            var result = (selectorResultIndex[selector] = selectorResultIndex[selector] || {});
+            var stream = (selectorStreamIndex[selector] = selectorStreamIndex[selector] || {});
+            full[block] = result[block] = stream[block] = className;
+            return className;
+        }, function (blockList) {
+            if (keyframesFullIndex[blockList]) {
+                return keyframesFullIndex[blockList];
+            }
+            var name = incrementKeyframesHash();
+            keyframesFullIndex[blockList] = keyframesResultIndex[blockList] = keyframesStreamIndex[blockList] = name;
+            return name;
+        }, function (block) {
+            if (fontFaceFullIndex.indexOf(block) === -1) {
+                fontFaceFullIndex.push(block);
+                fontFaceResultIndex.push(block);
+                fontFaceStreamIndex.push(block);
+            }
+        }) || this;
+        _this.getStyleResult = function () {
             var css = '';
-            for (var block in fontFaceIndex) {
+            for (var _i = 0, fontFaceResultIndex_1 = fontFaceResultIndex; _i < fontFaceResultIndex_1.length; _i++) {
+                var block = fontFaceResultIndex_1[_i];
                 css += formatFontFaceRule(block);
             }
-            for (var blockList in keyframesIndex) {
-                css += formatKeyframesRule(keyframesIndex[blockList], blockList);
+            for (var blockList in keyframesResultIndex) {
+                css += formatKeyframesRule(keyframesResultIndex[blockList], blockList);
             }
-            for (var block in plainIndex) {
-                css += formatClassRule(plainIndex[block], block);
+            for (var block in plainResultIndex) {
+                css += formatClassRule(plainResultIndex[block], block);
             }
-            for (var selector in selectorIndex) {
-                var index = selectorIndex[selector];
+            for (var selector in selectorResultIndex) {
+                var index = selectorResultIndex[selector];
                 for (var block in index) {
@@ -785,2 +902,38 @@ css += formatClassRule(index[block], block, selector);
         };
+        _this.getStyleStream = function () {
+            var css = '';
+            if (fontFaceStreamIndex.length > 0) {
+                for (var _i = 0, fontFaceStreamIndex_1 = fontFaceStreamIndex; _i < fontFaceStreamIndex_1.length; _i++) {
+                    var block = fontFaceStreamIndex_1[_i];
+                    css += formatFontFaceRule(block);
+                }
+                fontFaceStreamIndex.splice(0, fontFaceStreamIndex.length);
+            }
+            for (var blockList in keyframesStreamIndex) {
+                css += formatKeyframesRule(keyframesStreamIndex[blockList], blockList);
+                delete keyframesStreamIndex[blockList];
+            }
+            for (var block in plainStreamIndex) {
+                css += formatClassRule(plainStreamIndex[block], block);
+                delete plainStreamIndex[block];
+            }
+            for (var selector in selectorStreamIndex) {
+                var index = selectorStreamIndex[selector];
+                for (var block in index) {
+                    css += formatClassRule(index[block], block, selector);
+                }
+                delete selectorStreamIndex[selector];
+            }
+            return css;
+        };
+        _this.hydrateClassName = function (body, className, suffix) {
+            var index = suffix ? (selectorFullIndex[suffix] = selectorFullIndex[suffix] || {}) : plainFullIndex;
+            index[body] = className;
+        };
+        _this.hydrateKeyframes = function (body, name) {
+            keyframesFullIndex[body] = name;
+        };
+        _this.hydrateFontFace = function (body) {
+            fontFaceFullIndex.push(body);
+        };
         return _this;
@@ -797,17 +950,18 @@ }
         var prefix = options.prefix;
-        var classHasher = createHashCounter(prefix);
-        var keyframesHasher = createHashCounter(prefix);
+        var incrementClassNameHash = createHashCounter(prefix);
+        var incrementKeyframesHash = createHashCounter(prefix);
         var plain;
         var mediaIndex = {};
-        var injector = function (media) {
+        var getInjector = function (media) {
             return media
-                ? (mediaIndex[media] = mediaIndex[media] || new InjectorServer(classHasher, keyframesHasher))
-                : (plain = plain || new InjectorServer(classHasher, keyframesHasher));
+                ? (mediaIndex[media] = mediaIndex[media] || new InjectorServer(incrementClassNameHash, incrementKeyframesHash))
+                : (plain = plain || new InjectorServer(incrementClassNameHash, incrementKeyframesHash));
         };
-        _this = _super.call(this, injector, options.transformer, options.atomic) || this;
+        _this = _super.call(this, getInjector, options.transformer, options.atomic) || this;
+        _this.hydrate = createHydrate(getInjector, incrementClassNameHash, incrementKeyframesHash);
+        var identifier = options.identifier || DEFAULT_HYDRATION_IDENTIFIER;
         _this.getStyleMarkup = function () {
-            var identifier = options.identifier || DEFAULT_HYDRATION_IDENTIFIER;
             var markup = '';
             if (plain) {
-                markup += "<style data-" + identifier + ">" + plain.getStyle() + "</style>";
+                markup += "<style data-" + identifier + ">" + plain.getStyleResult() + "</style>";
             }
@@ -817,6 +971,22 @@ var medias = options.mediaOrder ? Object.keys(mediaIndex).sort(options.mediaOrder) : Object.keys(mediaIndex);
                 var media = medias_1[_i];
-                markup += "<style data-" + identifier + " media=\"" + media + "\">" + mediaIndex[media].getStyle() + "</style>";
+                markup += "<style data-" + identifier + " media=\"" + media + "\">" + mediaIndex[media].getStyleResult() + "</style>";
             }
             return markup;
         };
+        _this.getStyleStream = function () {
+            var _a;
+            var css = '';
+            if (plain) {
+                css += plain.getStyleStream();
+            }
+            var medias = options.mediaOrder ? Object.keys(mediaIndex).sort(options.mediaOrder) : Object.keys(mediaIndex);
+            for (var _i = 0, medias_2 = medias; _i < medias_2.length; _i++) {
+                var media = medias_2[_i];
+                css += formatMediaRule(media, mediaIndex[media].getStyleStream());
+            }
+            if (css) {
+                return ['style', (_a = {}, _a["data-" + identifier] = '', _a), css];
+            }
+            return undefined;
+        };
         return _this;
@@ -827,2 +997,35 @@ }
 
+var GlitzStatic = /** @class */ (function (_super) {
+    __extends(GlitzStatic, _super);
+    function GlitzStatic(options) {
+        if (options === void 0) { options = {}; }
+        var _this = this;
+        var prefix = options.prefix;
+        var incrementClassNameHash = createHashCounter(prefix);
+        var incrementKeyframesHash = createHashCounter(prefix);
+        var plain;
+        var mediaIndex = {};
+        var injector = function (media) {
+            return media
+                ? (mediaIndex[media] = mediaIndex[media] || new InjectorServer(incrementClassNameHash, incrementKeyframesHash))
+                : (plain = plain || new InjectorServer(incrementClassNameHash, incrementKeyframesHash));
+        };
+        _this = _super.call(this, injector, options.transformer, options.atomic) || this;
+        _this.getStyle = function () {
+            var css = '';
+            if (plain) {
+                css += plain.getStyleResult();
+            }
+            var medias = options.mediaOrder ? Object.keys(mediaIndex).sort(options.mediaOrder) : Object.keys(mediaIndex);
+            for (var _i = 0, medias_1 = medias; _i < medias_1.length; _i++) {
+                var media = medias_1[_i];
+                css += formatMediaRule(media, mediaIndex[media].getStyleResult());
+            }
+            return css;
+        };
+        return _this;
+    }
+    return GlitzStatic;
+}(Base));
+
 // Unfortunately we need this until there's a way to have index signatures for
@@ -869,2 +1072,2 @@ // other types like: https://github.com/Microsoft/TypeScript/issues/7765.
 
-export { DEFAULT_HYDRATION_IDENTIFIER, GlitzClient, GlitzServer, compose, media, query, selector };
+export { DEFAULT_HYDRATION_IDENTIFIER, GlitzClient, GlitzServer, GlitzStatic, compose, media, query, selector };

package.json

 {
   "name": "@glitz/core",
-  "version": "3.0.0-alpha.5",
+  "version": "3.0.0-alpha.6",
   "main": "./cjs/index.js",
@@ -28,3 +28,3 @@ "module": "./mjs/index.js",
   ],
-  "gitHead": "8e1168e8ae23dc62b1050d4cd962dbdefe55ec0c"
+  "gitHead": "62d9749194df572aa02c414f88e9006cd159c8ac"
 }

types/client/GlitzClient.d.ts

@@ -5,3 +5,4 @@ import { Style } from '@glitz/type';
 export default class GlitzClient<TStyle = Style> extends Base<TStyle> {
+    hydrate: (css: string) => void;
     constructor(options?: Options);
 }

types/client/InjectorClient.d.ts

 import Injector from '../core/Injector';
 export default class InjectorClient extends Injector {
-    constructor(styleElement: HTMLStyleElement, incrementClassHash: () => string, incrementKeyframesHash: () => string);
+    injectRaw: (rule: string) => void;
+    hydrateClassName: (body: string, className: string, suffix?: string) => void;
+    hydrateKeyframes: (body: string, name: string) => void;
+    hydrateFontFace: (body: string) => void;
+    constructor(element: HTMLStyleElement, incrementClassNameHash: () => string, incrementKeyframesHash: () => string);
 }

types/core/Injector.d.ts

@@ -8,13 +8,3 @@ import { ResolvedDeclarationList, ResolvedDeclarations } from '@glitz/type';
     injectFontFace: (declarations: ResolvedDeclarations) => string;
-    constructor(plainIndex: {
-        [block: string]: string;
-    }, selectorIndex: {
-        [selector: string]: {
-            [block: string]: string;
-        };
-    }, keyframesIndex: {
-        [blockList: string]: string;
-    }, fontFaceIndex: {
-        [block: string]: string;
-    }, incrementClassHash: () => string, incrementKeyframesHash: () => string, injectNewClassRule?: (className: string, block: string, selector?: string) => void, injectNewKeyframesRule?: (name: string, blockList: string) => void, injectNewFontFaceRule?: (block: string) => void);
+    constructor(plainClassName: (block: string) => string, selectorClassName: (selector: string, block: string) => string, keyframeName: (blockList: string) => string, handleFontFace: (block: string) => void);
 }

types/index.d.ts

 export * from './types/options';
 export { default as GlitzClient } from './client/GlitzClient';
 export { default as GlitzServer } from './server/GlitzServer';
+export { default as GlitzStatic } from './server/GlitzStatic';
 export { default as media, query } from './helpers/media';
 export { default as selector } from './helpers/selector';
 export { compose } from './utils/compose';

types/server/GlitzServer.d.ts

@@ -5,4 +5,8 @@ import { Style } from '@glitz/type';
 export default class GlitzServer<TStyle = Style> extends Base<TStyle> {
+    hydrate: (css: string) => void;
     getStyleMarkup: () => string;
+    getStyleStream: () => [string, {
+        [name: string]: string;
+    }, string] | undefined;
     constructor(options?: Options);
 }

types/server/InjectorServer.d.ts

 import Injector from '../core/Injector';
 export default class InjectorServer extends Injector {
-    getStyle: () => void;
+    getStyleResult: () => string;
+    getStyleStream: () => string;
+    hydrateClassName: (body: string, className: string, suffix?: string) => void;
+    hydrateKeyframes: (body: string, name: string) => void;
+    hydrateFontFace: (body: string) => void;
     constructor(incrementClassHash: () => string, incrementKeyframesHash: () => string);
 }

types/utils/format.d.ts

@@ -5,2 +5,3 @@ export declare function formatRule(identifier: string, block: string): string;
 export declare function formatFontFaceRule(block: string): string;
+export declare function formatMediaRule(query: string, block: string): string;
 export declare function prettifyRule(rule: string): string;

No alert changes

Improved metrics

Total package byte prevSize

158977

increased by23.13%

Number of package files

29

increased by7.41%

Lines of code

3197

increased by23.91%

No dependency changes