@glitz/core - npm Package Compare versions

Comparing version 1.1.0-beta.12 to 1.1.0

cjs/index.development.js

@@ -31,10 +31,2 @@ 'use strict';
 
-var __assign$1 = Object.assign || function __assign(t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-        s = arguments[i];
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-    }
-    return t;
-};
-
 function parseDeclarationBlock(declarations) {
@@ -222,4 +214,4 @@ var block = '';
 }
-function formatFontFaceRule(block) {
-    return "@font-face {" + block + "}";
+function formatFontFaceRule(name, block) {
+    return "@font-face {" + block + ";font-family:" + name + "}";
 }
@@ -230,3 +222,3 @@
 var Injector = /** @class */ (function () {
-    function Injector(plainDictionary, pseudoDictionary, keyframesDictionary, fontFaceDictionary, fontFaceOriginalDictionary, incrementClassHash, incrementKeyframesHash, incrementFontFaceHash, injectNewClassRule, injectNewKeyframesRule, injectNewFontFaceRule) {
+    function Injector(plainDictionary, pseudoDictionary, keyframesDictionary, fontFaceDictionary, incrementClassHash, incrementKeyframesHash, incrementFontFaceHash, injectNewClassRule, injectNewKeyframesRule, injectNewFontFaceRule) {
         this.injectClassName = function (declarations, pseudo) {
@@ -273,12 +265,18 @@ var block = parseDeclarationBlock(declarations);
         };
-        this.injectFontFace = function (originalDeclarations) {
+        this.injectFontFace = function (original) {
             {
-                if ('fontFamily' in originalDeclarations) {
-                    console.warn('The CSS property `font-family` font face will be ignored in %O', originalDeclarations);
+                if (FONT_FAMILY in original) {
+                    console.warn('The CSS property `%s` in font face will be ignored in %O', FONT_FAMILY, original);
                 }
             }
-            delete originalDeclarations[FONT_FAMILY];
-            var originalBlock = parseDeclarationBlock(originalDeclarations);
-            if (originalBlock) {
-                var existingClassName = fontFaceOriginalDictionary[originalBlock];
+            var declarations = {};
+            var property;
+            for (property in original) {
+                if (property !== FONT_FAMILY) {
+                    declarations[property] = original[property];
+                }
+            }
+            var block = parseDeclarationBlock(declarations);
+            if (block) {
+                var existingClassName = fontFaceDictionary[block];
                 if (existingClassName) {
@@ -289,7 +287,5 @@ return existingClassName;
                     var name = incrementFontFaceHash();
-                    var declarations = __assign$1({}, originalDeclarations, (_a = {}, _a[FONT_FAMILY] = name, _a));
-                    var block = parseDeclarationBlock(declarations);
-                    fontFaceDictionary[block] = fontFaceOriginalDictionary[originalBlock] = name;
+                    fontFaceDictionary[block] = name;
                     if (injectNewFontFaceRule) {
-                        injectNewFontFaceRule(block);
+                        injectNewFontFaceRule(name, block);
                     }
@@ -300,3 +296,2 @@ return name;
             return '';
-            var _a;
         };
@@ -533,4 +528,3 @@ }
 var KEYFRAMES_REGEX = /@keyframes ([a-z0-9])\{((?:[a-z0-9%]+\{[^}]+\})+)\}/g;
-var FONT_FACE_REGEX = /@font-face \{([^}]+)\}/g;
-var FONT_FACE_FAMILY_REGEX = /;?font-family:([^;}]+)/;
+var FONT_FACE_REGEX = /@font-face \{(.+);font-family:([^}]+)\}/g;
 var InjectorClient = /** @class */ (function (_super) {
@@ -544,3 +538,2 @@ __extends$1(InjectorClient, _super);
         var fontFaceDictionary = {};
-        var fontFaceOriginalDictionary = {};
         // Hydrate
@@ -566,8 +559,4 @@ var css = styleElement.textContent;
             while ((rule = FONT_FACE_REGEX.exec(css))) {
-                var name = FONT_FACE_FAMILY_REGEX.exec(rule[1]);
                 incrementFontFaceHash();
-                if (name) {
-                    fontFaceDictionary[rule[1]] = name[1];
-                    fontFaceOriginalDictionary[rule[1].replace(FONT_FACE_FAMILY_REGEX, '')] = name[1];
-                }
+                keyframesDictionary[rule[1]] = rule[2];
             }
@@ -583,7 +572,7 @@ }
         };
-        var injectNewFontFaceRule = function (block) {
-            var rule = formatFontFaceRule(block);
+        var injectNewFontFaceRule = function (name, block) {
+            var rule = formatFontFaceRule(name, block);
             injectSheetRule(styleElement, rule);
         };
-        _this = _super.call(this, plainDictionary, pseudoDictionary, keyframesDictionary, fontFaceDictionary, fontFaceOriginalDictionary, incrementClassHash, incrementKeyframesHash, incrementFontFaceHash, injectNewClassRule, injectNewKeyframesRule, injectNewFontFaceRule) || this;
+        _this = _super.call(this, plainDictionary, pseudoDictionary, keyframesDictionary, fontFaceDictionary, incrementClassHash, incrementKeyframesHash, incrementFontFaceHash, injectNewClassRule, injectNewKeyframesRule, injectNewFontFaceRule) || this;
         return _this;
@@ -590,0 +579,0 @@ }

cjs/index.production.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(r,e){r.__proto__=e}||function(r,e){for(var n in e)e.hasOwnProperty(n)&&(r[n]=e[n])};function e(e,n){function t(){this.constructor=e}r(e,n),e.prototype=null===n?Object.create(n):(t.prototype=n.prototype,new t)}var n=Object.assign||function(r){for(var e,n=1,t=arguments.length;n<t;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(r[i]=e[i]);return r};function t(r){var e,n="";for(e in r){var t=r[e];if("object"==typeof t)for(var o=0,a=t;o<a.length;o++){var f=a[o];n&&(n+=";"),n+=i(e,f)}else n&&(n+=";"),n+=i(e,t)}return n}function i(r,e){return"string"==typeof e||"number"==typeof e?u(r)+":"+e:""}var o=/[A-Z]/g,a=/^(ms|moz|webkit)/,f={};function u(r){return r in f?f[r]:f[r]=r.replace(o,"-$&").replace(a,"-$&").toLowerCase()}function c(r,e){return r+"{"+e+"}"}var s="animationName",v="fontFamily",l=function(){return function(r,e,i,o,a,f,u,s,l,y,p){this.injectClassName=function(n,i){var o=t(n);if(o){var a=i?e[i]=e[i]||{}:r,u=a[o];if(u)return u;var c=f();return a[o]=c,l&&l(c,o,i),c}return""},this.injectKeyframes=function(r){var e="";for(var n in r)e+=c(n,t(r[n]));if(e){var o=i[e];if(o)return o;var a=u();return i[e]=a,y&&y(a,e),a}return""},this.injectFontFace=function(r){delete r[v];var e,i=t(r);if(i){var f=a[i];if(f)return f;var u=s(),c=t(n({},r,((e={})[v]=u,e)));return o[c]=a[i]=u,p&&p(c),u}return""}}}(),y="__glitz__",p="$",m="@",h=":",d=function(){return function(r,e,n){var t=function(e,n,i,o){void 0===n&&(n={});for(var a=Object.keys(e),f=a.length-1;f>=0;f--){var u=a[f],c=e[u];if("@keyframes"===u&&(u=s),"@font-face"===u&&(u=v),j(c)||Array.isArray(c)||u===s||u===v){var l=g(n,i,o);if(!(u in l)){if(u===s&&(c=r().injectKeyframes(c)),u===v){for(var y="",p=0,d=[].concat(c);p<d.length;p++){var b=d[p];y&&(y+=","),y+=j(b)?b:r().injectFontFace(b)}c=y}l[u]=c}}else if(u[0]!==m&&u[0]!==h){var x=!0,O={},_=void 0;for(_ in c){var w=c[_];if(!(j(w)||Array.isArray(w)||"animation"===u&&"name"===_||"font"===u&&"family"===_)){x=!1;break}"x"!==_?"y"!==_?O[u+_[0].toUpperCase()+_.slice(1)]=w:(O[u+"Top"]=w,O[u+"Bottom"]=w):(O[u+"Left"]=w,O[u+"Right"]=w)}x&&t(O,n,i,o)}else t(c,n,u[0]===m?u:i,u[0]===h?(o||"")+u:o)}return n},i=function(n,t,i){return r(t).injectClassName(e?e(n):n,i)},o={},a=!1===n?function(r,e,n){for(var t="",o=Object.keys(r),f={},u=o.length-1;u>=0;u--){var c=o[u];(c[0]===m||c[0]===h?f:f[p]=f[p]||{})[c]=r[c]}for(var s in f)t+=s===p?" "+i(f[s],e,n):a(f[s],s[0]===m?s.slice(7):e,s[0]===h?s:n);return t}:function(r,e,n){for(var t,f="",u=Object.keys(r),c=g(o,e,n),s=u.length-1;s>=0;s--){var v=u[s],l=r[v];if(v[0]!==m&&v[0]!==h){var y=((t={})[v]=l,t);if(j(l)){var p=c[v]=c[v]||{};if(l in p){f+=" "+p[l];continue}var d=i(y,e,n);f+=" "+(p[l]=d)}else f+=" "+i(y,e,n)}else f+=a(l,v[0]===m?v.slice(7):e,v[0]===h?v:n)}return f},f=function(r,e){return t(e,r)};this.injectStyle=function(r){var e=Array.isArray(r)?r.length>1?r.reduceRight(f,{}):t(r[0]||{}):t(r);return a(e).slice(1)}}}();function g(r,e,n){var t=r;return e&&(t=t[e]=t[e]||{}),n?t[n]=t[n]||{}:t}function j(r){return"string"==typeof r||"number"==typeof r}function b(r,e){var n=r.sheet;n.insertRule(e,n.cssRules.length)}function x(r){var e=document.createElement("style");return r&&(e.media=r),e}function O(r,e){return document.head.insertBefore(r,e),r}function _(r){void 0===r&&(r="");var e=0,n=10,t=35,i=1,o=function(){var a=e+n;return a===t&&(n+=9*(t+1),t=Math.pow(36,++i)-1),e++,373===a?o():r+a.toString(36)};return o}var w=/\.([a-z0-9])(:[^{]+)?\{([^}]+)\}/g,k=/@keyframes ([a-z0-9])\{((?:[a-z0-9%]+\{[^}]+\})+)\}/g,A=/@font-face \{([^}]+)\}/g,C=/;?font-family:([^;}]+)/,z=function(r){function n(e,n,t,i){var o={},a={},f={},u={},s={},v=e.textContent;if(v){for(var l=void 0;l=w.exec(v);){if(n(),l[2])(a[l[2]]=a[l[2]]||{})[l[3]]=l[1];else o[l[3]]=l[1]}for(;l=k.exec(v);)t(),f[l[2]]=l[1];for(;l=A.exec(v);){var y=C.exec(l[1]);i(),y&&(u[l[1]]=y[1],s[l[1].replace(C,"")]=y[1])}}return r.call(this,o,a,f,u,s,n,t,i,function(r,n,t){var i=function(r,e,n){return void 0===n&&(n=""),"."+c(r+n,e)}(r,n,t);b(e,i)},function(r,n){var t=function(r,e){return"@keyframes "+c(r,e)}(r,n);b(e,t)},function(r){var n=function(r){return"@font-face {"+r+"}"}(r);b(e,n)})||this}return e(n,r),n}(l),F=function(r){function n(e,n){void 0===n&&(n={});var t,i,o=n.prefix,a=_(o),f=_(o),u=_(o),c=n.mediaOrder,s={},v=null,l={};if(t=r.call(this,function(r){if(r){if(l[r])return l[r];var e=s[r]=x(r),n=null;if(c){var t=Object.keys(s).sort(c);v=s[t[0]],n=s[t[t.indexOf(r)+1]]||null}return O(e,n),l[r]=new z(e,a,f,u)}if(i)return i;e=O(x(r),v);return i=new z(e,a,f,u)},n.transformer,n.atomic)||this,"auto"===e&&(e=document.getElementsByClassName(y)),e)for(var p=0,m=e;p<m.length;p++){var h=m[p],d=h.media;d?(v||(v=h),s[d]=h,l[d]=new z(h,a,f,u)):i=new z(h,a,f,u)}return t}return e(n,r),n}(d);function R(r){var e,n="";for(e in r){n&&(n+=" and ");var t=r[e];n+=!0===t?"("+u(e)+")":"("+u(e)+": "+t+")"}return n}exports.default=F,exports.media=function(r,e){return(n={})["@media "+("string"==typeof r?r:R(r))]=e,n;var n},exports.query=R,exports.pseudo=function(r,e){return(n={})[r]=e,n;var n},exports.compose=function(){for(var r=[],e=0;e<arguments.length;e++)r[e]=arguments[e];return r.reduceRight(function(r,e){return function(n){return e(r(n))}})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(r,n){r.__proto__=n}||function(r,n){for(var t in n)n.hasOwnProperty(t)&&(r[t]=n[t])};function n(n,t){function e(){this.constructor=n}r(n,t),n.prototype=null===t?Object.create(t):(e.prototype=t.prototype,new e)}function t(r){var n,t="";for(n in r){var i=r[n];if("object"==typeof i)for(var o=0,a=i;o<a.length;o++){var f=a[o];t&&(t+=";"),t+=e(n,f)}else t&&(t+=";"),t+=e(n,i)}return t}function e(r,n){return"string"==typeof n||"number"==typeof n?f(r)+":"+n:""}var i=/[A-Z]/g,o=/^(ms|moz|webkit)/,a={};function f(r){return r in a?a[r]:a[r]=r.replace(i,"-$&").replace(o,"-$&").toLowerCase()}function u(r,n){return r+"{"+n+"}"}var c="animationName",s="fontFamily",v=function(){return function(r,n,e,i,o,a,f,c,v,l){this.injectClassName=function(e,i){var a=t(e);if(a){var f=i?n[i]=n[i]||{}:r,u=f[a];if(u)return u;var s=o();return f[a]=s,c&&c(s,a,i),s}return""},this.injectKeyframes=function(r){var n="";for(var i in r)n+=u(i,t(r[i]));if(n){var o=e[n];if(o)return o;var f=a();return e[n]=f,v&&v(f,n),f}return""},this.injectFontFace=function(r){var n,e={};for(n in r)n!==s&&(e[n]=r[n]);var o=t(e);if(o){var a=i[o];if(a)return a;var u=f();return i[o]=u,l&&l(u,o),u}return""}}}(),l="__glitz__",y="$",m="@",p=":",h=function(){return function(r,n,t){var e=function(n,t,i,o){void 0===t&&(t={});for(var a=Object.keys(n),f=a.length-1;f>=0;f--){var u=a[f],v=n[u];if("@keyframes"===u&&(u=c),"@font-face"===u&&(u=s),g(v)||Array.isArray(v)||u===c||u===s){var l=d(t,i,o);if(!(u in l)){if(u===c&&(v=r().injectKeyframes(v)),u===s){for(var y="",h=0,j=[].concat(v);h<j.length;h++){var _=j[h];y&&(y+=","),y+=g(_)?_:r().injectFontFace(_)}v=y}l[u]=v}}else if(u[0]!==m&&u[0]!==p){var x=!0,b={},O=void 0;for(O in v){var k=v[O];if(!(g(k)||Array.isArray(k)||"animation"===u&&"name"===O||"font"===u&&"family"===O)){x=!1;break}"x"!==O?"y"!==O?b[u+O[0].toUpperCase()+O.slice(1)]=k:(b[u+"Top"]=k,b[u+"Bottom"]=k):(b[u+"Left"]=k,b[u+"Right"]=k)}x&&e(b,t,i,o)}else e(v,t,u[0]===m?u:i,u[0]===p?(o||"")+u:o)}return t},i=function(t,e,i){return r(e).injectClassName(n?n(t):t,i)},o={},a=!1===t?function(r,n,t){for(var e="",o=Object.keys(r),f={},u=o.length-1;u>=0;u--){var c=o[u];(c[0]===m||c[0]===p?f:f[y]=f[y]||{})[c]=r[c]}for(var s in f)e+=s===y?" "+i(f[s],n,t):a(f[s],s[0]===m?s.slice(7):n,s[0]===p?s:t);return e}:function(r,n,t){for(var e,f="",u=Object.keys(r),c=d(o,n,t),s=u.length-1;s>=0;s--){var v=u[s],l=r[v];if(v[0]!==m&&v[0]!==p){var y=((e={})[v]=l,e);if(g(l)){var h=c[v]=c[v]||{};if(l in h){f+=" "+h[l];continue}var j=i(y,n,t);f+=" "+(h[l]=j)}else f+=" "+i(y,n,t)}else f+=a(l,v[0]===m?v.slice(7):n,v[0]===p?v:t)}return f},f=function(r,n){return e(n,r)};this.injectStyle=function(r){var n=Array.isArray(r)?r.length>1?r.reduceRight(f,{}):e(r[0]||{}):e(r);return a(n).slice(1)}}}();function d(r,n,t){var e=r;return n&&(e=e[n]=e[n]||{}),t?e[t]=e[t]||{}:e}function g(r){return"string"==typeof r||"number"==typeof r}function j(r,n){var t=r.sheet;t.insertRule(n,t.cssRules.length)}function _(r){var n=document.createElement("style");return r&&(n.media=r),n}function x(r,n){return document.head.insertBefore(r,n),r}function b(r){void 0===r&&(r="");var n=0,t=10,e=35,i=1,o=function(){var a=n+t;return a===e&&(t+=9*(e+1),e=Math.pow(36,++i)-1),n++,373===a?o():r+a.toString(36)};return o}var O=/\.([a-z0-9])(:[^{]+)?\{([^}]+)\}/g,k=/@keyframes ([a-z0-9])\{((?:[a-z0-9%]+\{[^}]+\})+)\}/g,w=/@font-face \{(.+);font-family:([^}]+)\}/g,A=function(r){function t(n,t,e,i){var o={},a={},f={},c=n.textContent;if(c){for(var s=void 0;s=O.exec(c);){if(t(),s[2])(a[s[2]]=a[s[2]]||{})[s[3]]=s[1];else o[s[3]]=s[1]}for(;s=k.exec(c);)e(),f[s[2]]=s[1];for(;s=w.exec(c);)i(),f[s[1]]=s[2]}return r.call(this,o,a,f,{},t,e,i,function(r,t,e){var i=function(r,n,t){return void 0===t&&(t=""),"."+u(r+t,n)}(r,t,e);j(n,i)},function(r,t){var e=function(r,n){return"@keyframes "+u(r,n)}(r,t);j(n,e)},function(r,t){var e=function(r,n){return"@font-face {"+n+";font-family:"+r+"}"}(r,t);j(n,e)})||this}return n(t,r),t}(v),C=function(r){function t(n,t){void 0===t&&(t={});var e,i,o=t.prefix,a=b(o),f=b(o),u=b(o),c=t.mediaOrder,s={},v=null,y={};if(e=r.call(this,function(r){if(r){if(y[r])return y[r];var n=s[r]=_(r),t=null;if(c){var e=Object.keys(s).sort(c);v=s[e[0]],t=s[e[e.indexOf(r)+1]]||null}return x(n,t),y[r]=new A(n,a,f,u)}if(i)return i;n=x(_(r),v);return i=new A(n,a,f,u)},t.transformer,t.atomic)||this,"auto"===n&&(n=document.getElementsByClassName(l)),n)for(var m=0,p=n;m<p.length;m++){var h=p[m],d=h.media;d?(v||(v=h),s[d]=h,y[d]=new A(h,a,f,u)):i=new A(h,a,f,u)}return e}return n(t,r),t}(h);function z(r){var n,t="";for(n in r){t&&(t+=" and ");var e=r[n];t+=!0===e?"("+f(n)+")":"("+f(n)+": "+e+")"}return t}exports.default=C,exports.media=function(r,n){return(t={})["@media "+("string"==typeof r?r:z(r))]=n,t;var t},exports.query=z,exports.pseudo=function(r,n){return(t={})[r]=n,t;var t},exports.compose=function(){for(var r=[],n=0;n<arguments.length;n++)r[n]=arguments[n];return r.reduceRight(function(r,n){return function(t){return n(r(t))}})};

cjs/server.js

@@ -31,10 +31,2 @@ 'use strict';
 
-var __assign$1 = Object.assign || function __assign(t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-        s = arguments[i];
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-    }
-    return t;
-};
-
 function parseDeclarationBlock(declarations) {
@@ -222,4 +214,4 @@ var block = '';
 }
-function formatFontFaceRule(block) {
-    return "@font-face {" + block + "}";
+function formatFontFaceRule(name, block) {
+    return "@font-face {" + block + ";font-family:" + name + "}";
 }
@@ -230,3 +222,3 @@
 var Injector = /** @class */ (function () {
-    function Injector(plainDictionary, pseudoDictionary, keyframesDictionary, fontFaceDictionary, fontFaceOriginalDictionary, incrementClassHash, incrementKeyframesHash, incrementFontFaceHash, injectNewClassRule, injectNewKeyframesRule, injectNewFontFaceRule) {
+    function Injector(plainDictionary, pseudoDictionary, keyframesDictionary, fontFaceDictionary, incrementClassHash, incrementKeyframesHash, incrementFontFaceHash, injectNewClassRule, injectNewKeyframesRule, injectNewFontFaceRule) {
         this.injectClassName = function (declarations, pseudo) {
@@ -273,12 +265,18 @@ var block = parseDeclarationBlock(declarations);
         };
-        this.injectFontFace = function (originalDeclarations) {
+        this.injectFontFace = function (original) {
             if (process.env.NODE_ENV !== 'production') {
-                if ('fontFamily' in originalDeclarations) {
-                    console.warn('The CSS property `font-family` font face will be ignored in %O', originalDeclarations);
+                if (FONT_FAMILY in original) {
+                    console.warn('The CSS property `%s` in font face will be ignored in %O', FONT_FAMILY, original);
                 }
             }
-            delete originalDeclarations[FONT_FAMILY];
-            var originalBlock = parseDeclarationBlock(originalDeclarations);
-            if (originalBlock) {
-                var existingClassName = fontFaceOriginalDictionary[originalBlock];
+            var declarations = {};
+            var property;
+            for (property in original) {
+                if (property !== FONT_FAMILY) {
+                    declarations[property] = original[property];
+                }
+            }
+            var block = parseDeclarationBlock(declarations);
+            if (block) {
+                var existingClassName = fontFaceDictionary[block];
                 if (existingClassName) {
@@ -289,7 +287,5 @@ return existingClassName;
                     var name = incrementFontFaceHash();
-                    var declarations = __assign$1({}, originalDeclarations, (_a = {}, _a[FONT_FAMILY] = name, _a));
-                    var block = parseDeclarationBlock(declarations);
-                    fontFaceDictionary[block] = fontFaceOriginalDictionary[originalBlock] = name;
+                    fontFaceDictionary[block] = name;
                     if (injectNewFontFaceRule) {
-                        injectNewFontFaceRule(block);
+                        injectNewFontFaceRule(name, block);
                     }
@@ -300,3 +296,2 @@ return name;
             return '';
-            var _a;
         };
@@ -522,4 +517,3 @@ }
         var fontFaceDictionary = {};
-        var fontFaceOriginalDictionary = {};
-        _this = _super.call(this, plainDictionary, pseudoDictionary, keyframesDictionary, fontFaceDictionary, fontFaceOriginalDictionary, incrementClassHash, incrementKeyframesHash, incrementFontFaceHash) || this;
+        _this = _super.call(this, plainDictionary, pseudoDictionary, keyframesDictionary, fontFaceDictionary, incrementClassHash, incrementKeyframesHash, incrementFontFaceHash) || this;
         _this.getStyle = function () {
@@ -540,3 +534,3 @@ var css = '';
             for (var block in fontFaceDictionary) {
-                css += formatFontFaceRule(block);
+                css += formatFontFaceRule(fontFaceDictionary[block], block);
             }
@@ -543,0 +537,0 @@ return css;

es6/client/InjectorClient.js

@@ -7,4 +7,3 @@ // tslint:disable no-conditional-assignment
 const KEYFRAMES_REGEX = /@keyframes ([a-z0-9])\{((?:[a-z0-9%]+\{[^}]+\})+)\}/g;
-const FONT_FACE_REGEX = /@font-face \{([^}]+)\}/g;
-const FONT_FACE_FAMILY_REGEX = /;?font-family:([^;}]+)/;
+const FONT_FACE_REGEX = /@font-face \{(.+);font-family:([^}]+)\}/g;
 export default class InjectorClient extends Injector {
@@ -16,3 +15,2 @@ constructor(styleElement, incrementClassHash, incrementKeyframesHash, incrementFontFaceHash) {
         const fontFaceDictionary = {};
-        const fontFaceOriginalDictionary = {};
         // Hydrate
@@ -38,8 +36,4 @@ const css = styleElement.textContent;
             while ((rule = FONT_FACE_REGEX.exec(css))) {
-                const name = FONT_FACE_FAMILY_REGEX.exec(rule[1]);
                 incrementFontFaceHash();
-                if (name) {
-                    fontFaceDictionary[rule[1]] = name[1];
-                    fontFaceOriginalDictionary[rule[1].replace(FONT_FACE_FAMILY_REGEX, '')] = name[1];
-                }
+                keyframesDictionary[rule[1]] = rule[2];
             }
@@ -55,8 +49,8 @@ }
         };
-        const injectNewFontFaceRule = (block) => {
-            const rule = formatFontFaceRule(block);
+        const injectNewFontFaceRule = (name, block) => {
+            const rule = formatFontFaceRule(name, block);
             injectSheetRule(styleElement, rule);
         };
-        super(plainDictionary, pseudoDictionary, keyframesDictionary, fontFaceDictionary, fontFaceOriginalDictionary, incrementClassHash, incrementKeyframesHash, incrementFontFaceHash, injectNewClassRule, injectNewKeyframesRule, injectNewFontFaceRule);
+        super(plainDictionary, pseudoDictionary, keyframesDictionary, fontFaceDictionary, incrementClassHash, incrementKeyframesHash, incrementFontFaceHash, injectNewClassRule, injectNewKeyframesRule, injectNewFontFaceRule);
     }
 }

es6/core/Injector.d.ts

@@ -18,5 +18,3 @@ import { FontFace, Properties, PropertiesList } from '@glitz/type';
         [block: string]: string;
-    }, fontFaceOriginalDictionary: {
-        [block: string]: string;
-    }, incrementClassHash: () => string, incrementKeyframesHash: () => string, incrementFontFaceHash: () => string, injectNewClassRule?: (className: string, block: string, pseudo?: string) => void, injectNewKeyframesRule?: (name: string, blockList: string) => void, injectNewFontFaceRule?: (block: string) => void);
+    }, incrementClassHash: () => string, incrementKeyframesHash: () => string, incrementFontFaceHash: () => string, injectNewClassRule?: (className: string, block: string, pseudo?: string) => void, injectNewKeyframesRule?: (name: string, blockList: string) => void, injectNewFontFaceRule?: (name: string, block: string) => void);
 }

es6/core/Injector.js

@@ -6,3 +6,3 @@ import { formatRule } from '../utils/format';
 export default class Injector {
-    constructor(plainDictionary, pseudoDictionary, keyframesDictionary, fontFaceDictionary, fontFaceOriginalDictionary, incrementClassHash, incrementKeyframesHash, incrementFontFaceHash, injectNewClassRule, injectNewKeyframesRule, injectNewFontFaceRule) {
+    constructor(plainDictionary, pseudoDictionary, keyframesDictionary, fontFaceDictionary, incrementClassHash, incrementKeyframesHash, incrementFontFaceHash, injectNewClassRule, injectNewKeyframesRule, injectNewFontFaceRule) {
         this.injectClassName = (declarations, pseudo) => {
@@ -49,12 +49,18 @@ const block = parseDeclarationBlock(declarations);
         };
-        this.injectFontFace = originalDeclarations => {
+        this.injectFontFace = original => {
             if (process.env.NODE_ENV !== 'production') {
-                if ('fontFamily' in originalDeclarations) {
-                    console.warn('The CSS property `font-family` font face will be ignored in %O', originalDeclarations);
+                if (FONT_FAMILY in original) {
+                    console.warn('The CSS property `%s` in font face will be ignored in %O', FONT_FAMILY, original);
                 }
             }
-            delete originalDeclarations[FONT_FAMILY];
-            const originalBlock = parseDeclarationBlock(originalDeclarations);
-            if (originalBlock) {
-                const existingClassName = fontFaceOriginalDictionary[originalBlock];
+            const declarations = {};
+            let property;
+            for (property in original) {
+                if (property !== FONT_FAMILY) {
+                    declarations[property] = original[property];
+                }
+            }
+            const block = parseDeclarationBlock(declarations);
+            if (block) {
+                const existingClassName = fontFaceDictionary[block];
                 if (existingClassName) {
@@ -65,7 +71,5 @@ return existingClassName;
                     const name = incrementFontFaceHash();
-                    const declarations = Object.assign({}, originalDeclarations, { [FONT_FAMILY]: name });
-                    const block = parseDeclarationBlock(declarations);
-                    fontFaceDictionary[block] = fontFaceOriginalDictionary[originalBlock] = name;
+                    fontFaceDictionary[block] = name;
                     if (injectNewFontFaceRule) {
-                        injectNewFontFaceRule(block);
+                        injectNewFontFaceRule(name, block);
                     }
@@ -72,0 +76,0 @@ return name;

es6/index.d.ts

 export * from './types/options';
 export { default } from './client/GlitzClient';
-export { default as media, query } from './selectors/media';
-export { default as pseudo } from './selectors/pseudo';
+export { default as media, query } from './helpers/media';
+export { default as pseudo } from './helpers/pseudo';
 export { compose } from './utils/compose';

es6/index.js

 export { default } from './client/GlitzClient';
-export { default as media, query } from './selectors/media';
-export { default as pseudo } from './selectors/pseudo';
+export { default as media, query } from './helpers/media';
+export { default as pseudo } from './helpers/pseudo';
 export { compose } from './utils/compose';

es6/server.d.ts

 export * from './types/options';
 export { default } from './server/GlitzServer';
-export { default as media, query } from './selectors/media';
-export { default as pseudo } from './selectors/pseudo';
+export { default as media, query } from './helpers/media';
+export { default as pseudo } from './helpers/pseudo';
 export { compose } from './utils/compose';

es6/server.js

 export { default } from './server/GlitzServer';
-export { default as media, query } from './selectors/media';
-export { default as pseudo } from './selectors/pseudo';
+export { default as media, query } from './helpers/media';
+export { default as pseudo } from './helpers/pseudo';
 export { compose } from './utils/compose';

es6/server/InjectorServer.js

@@ -9,4 +9,3 @@ import Injector from '../core/Injector';
         const fontFaceDictionary = {};
-        const fontFaceOriginalDictionary = {};
-        super(plainDictionary, pseudoDictionary, keyframesDictionary, fontFaceDictionary, fontFaceOriginalDictionary, incrementClassHash, incrementKeyframesHash, incrementFontFaceHash);
+        super(plainDictionary, pseudoDictionary, keyframesDictionary, fontFaceDictionary, incrementClassHash, incrementKeyframesHash, incrementFontFaceHash);
         this.getStyle = () => {
@@ -27,3 +26,3 @@ let css = '';
             for (const block in fontFaceDictionary) {
-                css += formatFontFaceRule(block);
+                css += formatFontFaceRule(fontFaceDictionary[block], block);
             }
@@ -30,0 +29,0 @@ return css;

es6/utils/format.d.ts

 export declare function formatRule(identifier: string, block: string): string;
 export declare function formatClassRule(className: string, block: string, pseudo?: string): string;
 export declare function formatKeyframesRule(name: string, blockList: string): string;
-export declare function formatFontFaceRule(block: string): string;
+export declare function formatFontFaceRule(name: string, block: string): string;

es6/utils/format.js

@@ -10,4 +10,4 @@ export function formatRule(identifier, block) {
 }
-export function formatFontFaceRule(block) {
-    return `@font-face {${block}}`;
+export function formatFontFaceRule(name, block) {
+    return `@font-face {${block};font-family:${name}}`;
 }

jsm/index.js

@@ -180,4 +180,4 @@ function parseDeclarationBlock(declarations) {
 }
-function formatFontFaceRule(block) {
-    return `@font-face {${block}}`;
+function formatFontFaceRule(name, block) {
+    return `@font-face {${block};font-family:${name}}`;
 }
@@ -188,3 +188,3 @@
 class Injector {
-    constructor(plainDictionary, pseudoDictionary, keyframesDictionary, fontFaceDictionary, fontFaceOriginalDictionary, incrementClassHash, incrementKeyframesHash, incrementFontFaceHash, injectNewClassRule, injectNewKeyframesRule, injectNewFontFaceRule) {
+    constructor(plainDictionary, pseudoDictionary, keyframesDictionary, fontFaceDictionary, incrementClassHash, incrementKeyframesHash, incrementFontFaceHash, injectNewClassRule, injectNewKeyframesRule, injectNewFontFaceRule) {
         this.injectClassName = (declarations, pseudo) => {
@@ -231,12 +231,18 @@ const block = parseDeclarationBlock(declarations);
         };
-        this.injectFontFace = originalDeclarations => {
+        this.injectFontFace = original => {
             if (process.env.NODE_ENV !== 'production') {
-                if ('fontFamily' in originalDeclarations) {
-                    console.warn('The CSS property `font-family` font face will be ignored in %O', originalDeclarations);
+                if (FONT_FAMILY in original) {
+                    console.warn('The CSS property `%s` in font face will be ignored in %O', FONT_FAMILY, original);
                 }
             }
-            delete originalDeclarations[FONT_FAMILY];
-            const originalBlock = parseDeclarationBlock(originalDeclarations);
-            if (originalBlock) {
-                const existingClassName = fontFaceOriginalDictionary[originalBlock];
+            const declarations = {};
+            let property;
+            for (property in original) {
+                if (property !== FONT_FAMILY) {
+                    declarations[property] = original[property];
+                }
+            }
+            const block = parseDeclarationBlock(declarations);
+            if (block) {
+                const existingClassName = fontFaceDictionary[block];
                 if (existingClassName) {
@@ -247,7 +253,5 @@ return existingClassName;
                     const name = incrementFontFaceHash();
-                    const declarations = Object.assign({}, originalDeclarations, { [FONT_FAMILY]: name });
-                    const block = parseDeclarationBlock(declarations);
-                    fontFaceDictionary[block] = fontFaceOriginalDictionary[originalBlock] = name;
+                    fontFaceDictionary[block] = name;
                     if (injectNewFontFaceRule) {
-                        injectNewFontFaceRule(block);
+                        injectNewFontFaceRule(name, block);
                     }
@@ -481,4 +485,3 @@ return name;
 const KEYFRAMES_REGEX = /@keyframes ([a-z0-9])\{((?:[a-z0-9%]+\{[^}]+\})+)\}/g;
-const FONT_FACE_REGEX = /@font-face \{([^}]+)\}/g;
-const FONT_FACE_FAMILY_REGEX = /;?font-family:([^;}]+)/;
+const FONT_FACE_REGEX = /@font-face \{(.+);font-family:([^}]+)\}/g;
 class InjectorClient extends Injector {
@@ -490,3 +493,2 @@ constructor(styleElement, incrementClassHash, incrementKeyframesHash, incrementFontFaceHash) {
         const fontFaceDictionary = {};
-        const fontFaceOriginalDictionary = {};
         // Hydrate
@@ -512,8 +514,4 @@ const css = styleElement.textContent;
             while ((rule = FONT_FACE_REGEX.exec(css))) {
-                const name = FONT_FACE_FAMILY_REGEX.exec(rule[1]);
                 incrementFontFaceHash();
-                if (name) {
-                    fontFaceDictionary[rule[1]] = name[1];
-                    fontFaceOriginalDictionary[rule[1].replace(FONT_FACE_FAMILY_REGEX, '')] = name[1];
-                }
+                keyframesDictionary[rule[1]] = rule[2];
             }
@@ -529,7 +527,7 @@ }
         };
-        const injectNewFontFaceRule = (block) => {
-            const rule = formatFontFaceRule(block);
+        const injectNewFontFaceRule = (name, block) => {
+            const rule = formatFontFaceRule(name, block);
             injectSheetRule(styleElement, rule);
         };
-        super(plainDictionary, pseudoDictionary, keyframesDictionary, fontFaceDictionary, fontFaceOriginalDictionary, incrementClassHash, incrementKeyframesHash, incrementFontFaceHash, injectNewClassRule, injectNewKeyframesRule, injectNewFontFaceRule);
+        super(plainDictionary, pseudoDictionary, keyframesDictionary, fontFaceDictionary, incrementClassHash, incrementKeyframesHash, incrementFontFaceHash, injectNewClassRule, injectNewKeyframesRule, injectNewFontFaceRule);
     }
@@ -536,0 +534,0 @@ }

jsm/server.js

@@ -180,4 +180,4 @@ function parseDeclarationBlock(declarations) {
 }
-function formatFontFaceRule(block) {
-    return `@font-face {${block}}`;
+function formatFontFaceRule(name, block) {
+    return `@font-face {${block};font-family:${name}}`;
 }
@@ -188,3 +188,3 @@
 class Injector {
-    constructor(plainDictionary, pseudoDictionary, keyframesDictionary, fontFaceDictionary, fontFaceOriginalDictionary, incrementClassHash, incrementKeyframesHash, incrementFontFaceHash, injectNewClassRule, injectNewKeyframesRule, injectNewFontFaceRule) {
+    constructor(plainDictionary, pseudoDictionary, keyframesDictionary, fontFaceDictionary, incrementClassHash, incrementKeyframesHash, incrementFontFaceHash, injectNewClassRule, injectNewKeyframesRule, injectNewFontFaceRule) {
         this.injectClassName = (declarations, pseudo) => {
@@ -231,12 +231,18 @@ const block = parseDeclarationBlock(declarations);
         };
-        this.injectFontFace = originalDeclarations => {
+        this.injectFontFace = original => {
             if (process.env.NODE_ENV !== 'production') {
-                if ('fontFamily' in originalDeclarations) {
-                    console.warn('The CSS property `font-family` font face will be ignored in %O', originalDeclarations);
+                if (FONT_FAMILY in original) {
+                    console.warn('The CSS property `%s` in font face will be ignored in %O', FONT_FAMILY, original);
                 }
             }
-            delete originalDeclarations[FONT_FAMILY];
-            const originalBlock = parseDeclarationBlock(originalDeclarations);
-            if (originalBlock) {
-                const existingClassName = fontFaceOriginalDictionary[originalBlock];
+            const declarations = {};
+            let property;
+            for (property in original) {
+                if (property !== FONT_FAMILY) {
+                    declarations[property] = original[property];
+                }
+            }
+            const block = parseDeclarationBlock(declarations);
+            if (block) {
+                const existingClassName = fontFaceDictionary[block];
                 if (existingClassName) {
@@ -247,7 +253,5 @@ return existingClassName;
                     const name = incrementFontFaceHash();
-                    const declarations = Object.assign({}, originalDeclarations, { [FONT_FAMILY]: name });
-                    const block = parseDeclarationBlock(declarations);
-                    fontFaceDictionary[block] = fontFaceOriginalDictionary[originalBlock] = name;
+                    fontFaceDictionary[block] = name;
                     if (injectNewFontFaceRule) {
-                        injectNewFontFaceRule(block);
+                        injectNewFontFaceRule(name, block);
                     }
@@ -468,4 +472,3 @@ return name;
         const fontFaceDictionary = {};
-        const fontFaceOriginalDictionary = {};
-        super(plainDictionary, pseudoDictionary, keyframesDictionary, fontFaceDictionary, fontFaceOriginalDictionary, incrementClassHash, incrementKeyframesHash, incrementFontFaceHash);
+        super(plainDictionary, pseudoDictionary, keyframesDictionary, fontFaceDictionary, incrementClassHash, incrementKeyframesHash, incrementFontFaceHash);
         this.getStyle = () => {
@@ -486,3 +489,3 @@ let css = '';
             for (const block in fontFaceDictionary) {
-                css += formatFontFaceRule(block);
+                css += formatFontFaceRule(fontFaceDictionary[block], block);
             }
@@ -489,0 +492,0 @@ return css;

package.json

 {
   "name": "@glitz/core",
-  "version": "1.1.0-beta.12",
+  "version": "1.1.0",
   "main": "./cjs/index.js",
@@ -14,3 +14,3 @@ "module": "./jsm/index.js",
   "dependencies": {
-    "@glitz/type": "^1.1.0-beta.12"
+    "@glitz/type": "^1.1.0"
   },
@@ -17,0 +17,0 @@ "scripts": {

Fixed alerts

No v1

Quality

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

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

159863

decreased by-1.5%

Lines of code

3337

decreased by-0.63%

Dependency changes

• Updated@glitz/type@^1.1.0