@glitz/core - npm Package Compare versions

Comparing version 1.1.0-beta.3 to 1.1.0-beta.4

cjs/index.development.js

@@ -40,21 +40,2 @@ 'use strict';
 var DEFAULT_HYDRATE_CLASS_NAME = '__glitz__';
-var shorthandLengthProperties = ['margin', 'padding'];
-var shorthandProperties = shorthandLengthProperties.concat([
-    'animation',
-    'background',
-    'border',
-    'borderBottom',
-    'borderImage',
-    'borderLeft',
-    'borderRight',
-    'borderTop',
-    'flex',
-    'font',
-    'grid',
-    'maskBorder',
-    'mask',
-    'offset',
-    'outline',
-    'transition',
-]);
 var Base = /** @class */ (function () {
@@ -148,36 +129,29 @@ function Base(injector, transformer) {
                     }
-                    if (shorthandProperties.indexOf(property) !== -1) {
-                        var longhand = {};
-                        for (var extension in value) {
-                            var longhandValue = value[extension];
-                            if (typeof longhandValue === 'string' ||
-                                typeof longhandValue === 'number' ||
-                                Array.isArray(longhandValue)) {
-                                if (extension === 'x') {
-                                    {
-                                        if (shorthandLengthProperties.indexOf(property) === -1) {
-                                            console.error('The longhand style property `%s.y` is only supported for %s in `%o`', property, shorthandLengthProperties.map(function (shorthand) { return "`" + shorthand + "`"; }).join('and'), value);
-                                        }
-                                    }
-                                    longhand[property + 'Left'] = longhandValue;
-                                    longhand[property + 'Right'] = longhandValue;
-                                    continue;
-                                }
-                                if (extension === 'y') {
-                                    {
-                                        if (shorthandLengthProperties.indexOf(property) === -1) {
-                                            console.error('The longhand style property `%s.y` is only supported for %s in `%o`', property, shorthandLengthProperties.map(function (shorthand) { return "`" + shorthand + "`"; }).join('and'), value);
-                                        }
-                                    }
-                                    longhand[property + 'Top'] = longhandValue;
-                                    longhand[property + 'Bottom'] = longhandValue;
-                                    continue;
-                                }
-                                longhand[property + extension[0].toUpperCase() + extension.slice(1)] = longhandValue;
+                    var isValid = true;
+                    var longhand = {};
+                    for (var extension in value) {
+                        var longhandValue = value[extension];
+                        if (typeof longhandValue === 'string' ||
+                            typeof longhandValue === 'number' ||
+                            Array.isArray(longhandValue)) {
+                            if (extension === 'x') {
+                                longhand[property + 'Left'] = longhandValue;
+                                longhand[property + 'Right'] = longhandValue;
                                 continue;
                             }
-                            {
-                                console.error('The longhand style property `%s.%s` only allows string or number as value, was `%o`', property, extension, value);
+                            if (extension === 'y') {
+                                longhand[property + 'Top'] = longhandValue;
+                                longhand[property + 'Bottom'] = longhandValue;
+                                continue;
                             }
+                            longhand[property + extension[0].toUpperCase() + extension.slice(1)] = longhandValue;
+                            continue;
                         }
+                        {
+                            console.error("The shorthand object `%s` will be ignored and be the cause of the error below because property `%s.%s` wasn't a string, number or array of values, was `%o`", property, property, extension, value);
+                        }
+                        isValid = false;
+                        break;
+                    }
+                    if (isValid) {
                         classNames += inject(longhand, media, pseudo);
@@ -359,3 +333,3 @@ continue;
                 if ('fontFamily' in style) {
-                    console.error('Defined font family for font faces are ignored');
+                    console.warn('The CSS property `font-family` font face will be ignored in %O', style);
                 }
@@ -362,0 +336,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},t="__glitz__",i=["margin","padding"].concat(["animation","background","border","borderBottom","borderImage","borderLeft","borderRight","borderTop","flex","font","grid","maskBorder","mask","offset","outline","transition"]),o=function(){function r(r,e){var n=e?function(r,n){return e(a(r,n))}:a,t={},o=this.inject=function(e,a,f){var u="";for(var c in e){u+=" ";var s=e[c];if("string"!=typeof s&&"number"!=typeof s){if("object"==typeof s){if(":"===c[0]){u+=o(s,a,(f||"")+c);continue}if(0===c.indexOf("@media")){var v=(a?a+" and ":"")+c.slice(7);u+=o(s,v,f);continue}if("@keyframes"===c||"animationName"===c){var l=r().injectKeyframesRule(s);if(l){u+=o({animationName:l},a,f);continue}}if("@font-face"===c||"fontFamily"===c){for(var p="",d=0,y=Array.isArray(s)?s:[s];d<y.length;d++){var m=y[d];p&&(p+=","),p+="string"==typeof m?m:r().injectFontFaceRule(m)}if(p){u+=o({fontFamily:p},a,f);continue}}if(Array.isArray(s)){u+=r(a).injectClassRule(n(c,s),f);continue}if(-1!==i.indexOf(c)){var g={};for(var h in s){var b=s[h];if("string"==typeof b||"number"==typeof b||Array.isArray(b)){if("x"===h){g[c+"Left"]=b,g[c+"Right"]=b;continue}if("y"===h){g[c+"Top"]=b,g[c+"Bottom"]=b;continue}g[c+h[0].toUpperCase()+h.slice(1)]=b}else;}u+=o(g,a,f);continue}}}else{var j=t;if(a&&f){var x=t[a]=t[a]||{};j=x[f]=x[f]||{}}else a?j=t[a]=t[a]||{}:f&&(j=t[f]=t[f]||{});var O=j[c]=j[c]||{};if(O[s]){u+=O[s];continue}var _=r(a).injectClassRule(n(c,s),f);_&&(O[s]=_),u+=_}}return u.slice(1)}}return r.prototype.injectStyle=function(r){return this.inject(r)},r}();function a(r,e){return(n={})[r]=e,n;var n}function f(r,e){var n=r.sheet;n.insertRule(e,n.cssRules.length)}function u(r,e){var n=document.createElement("style");return r&&(n.media=r),e?document.head.insertBefore(n,e):document.head.appendChild(n),n}function c(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}function s(r,e){return r+"{"+e+"}"}function v(r){var e,n="";for(e in r){var t=r[e];if("object"==typeof t)for(var i=0,o=t;i<o.length;i++){var a=o[i];n&&(n+=";"),n+=l(e,a)}else n&&(n+=";"),n+=l(e,t)}return n}function l(r,e){return"string"==typeof e||"number"==typeof e?m(r)+":"+e:""}var p=/[A-Z]/g,d=/^(ms|moz|webkit)/,y={};function m(r){return r in y?y[r]:y[r]=r.replace(p,"-$&").replace(d,"-$&").toLowerCase()}var g=/\.([a-z0-9])(:[^{]+)?\{([^}]+)\}/g,h=/@keyframes ([a-z0-9])\{((?:[a-z0-9%]+\{[^}]+\})+)\}/g,b=/@font-face \{([^}]+)\}/g,j=/font-family:([^;}]+)/,x=function(r){function n(e,n,t,i){void 0===n&&(n=c()),void 0===t&&(t=c()),void 0===i&&(i=c());var o={},a={},u={},v=e.textContent;if(v){for(var l=void 0;l=g.exec(v);){if(n(),l[2])(a[l[2]]=a[l[2]]||{})[l[3]]=l[1];else o[l[3]]=l[1]}for(;l=h.exec(v);)t(),u[l[2]]=l[1];for(;l=b.exec(v);){var p=j.exec(l[2]);i(),p&&(u[p[1]]=l[1])}}return r.call(this,o,a,u,{},n,t,i,function(r,n,t){var i=function(r,e,n){return void 0===n&&(n=""),"."+s(r+n,e)}(r,n,t);f(e,i)},function(r,n){var t=function(r,e){return"@keyframes "+s(r,e)}(r,n);f(e,t)},function(r){var n=function(r){return"@font-face {"+r+"}"}(r);f(e,n)})||this}return e(n,r),n}(function(){return function(r,e,t,i,o,a,f,u,c,l){this.injectClassRule=function(n,t){var i=v(n);if(i){var a=t?e[t]=e[t]||{}:r,f=a[i];if(f)return f;var c=o();return a[i]=c,u&&u(c,i,t),c}return""},this.injectKeyframesRule=function(r){var e="";for(var n in r)e+=s(n,v(r[n]));if(e){var i=t[e];if(i)return i;var o=a();return t[e]=o,c&&c(o,e),o}return""},this.injectFontFaceRule=function(r){delete r.fontFamily;var e=v(r);if(e){var t=i[e];if(t)return t;r=n({},r);var o=f();return r.fontFamily=o,i[e]=o,l&&l(v(r)),o}return""}}}()),O=function(r){function n(e,n){void 0===n&&(n={});var i,o,a=n.prefix,f=c(a),s=c(a),v=n.mediaOrder,l={},p=!1,d={};if(i=r.call(this,function(r){if(r){if(d[r])return d[r];var e=null;if(v&&p){var n=(a=(i=Object.keys(l)).concat(r).sort(v)).indexOf(r);n<a.length-1&&(e=l[a[n+1]])}p=!0;var t=l[r]=u(r,e);return d[r]=new x(t,f,s)}if(o)return o;e=null;if(p){var i=Object.keys(l);if(v){var a=i.sort(v);e=l[a[0]]}else e=l[i[0]]}return o=new x(u(null,e),f,s)},n.transformer)||this,"auto"===e&&(e=document.getElementsByClassName(t)),e)for(var y=0,m=e;y<m.length;y++){var g=m[y],h=g.media;h?(p=!0,l[h]=g,d[h]=new x(g,f,s)):o=new x(g,f,s)}return i}return e(n,r),n}(o);function _(r){var e,n="";for(e in r){n&&(n+=" and ");var t=r[e];n+=!0===t?"("+m(e)+")":"("+m(e)+": "+("string"==typeof t?t:R(e,"h")||R(e,"t")?t+"px":R(e,"n")?t+"dpi":t)+")"}return n}function R(r,e){return r.indexOf(e)===r.length-1}exports.default=O,exports.media=function(r,e){return(n={})["@media "+("string"==typeof r?r:_(r))]=e,n;var n},exports.query=_,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))}},r.pop()||function(r){return r})};
+"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 e in n)n.hasOwnProperty(e)&&(r[e]=n[e])};function n(n,e){function t(){this.constructor=n}r(n,e),n.prototype=null===e?Object.create(e):(t.prototype=e.prototype,new t)}var e=Object.assign||function(r){for(var n,e=1,t=arguments.length;e<t;e++)for(var i in n=arguments[e])Object.prototype.hasOwnProperty.call(n,i)&&(r[i]=n[i]);return r},t="__glitz__",i=function(){function r(r,n){var e=n?function(r,e){return n(o(r,e))}:o,t={},i=this.inject=function(n,o,a){var f="";for(var u in n){f+=" ";var c=n[u];if("string"!=typeof c&&"number"!=typeof c){if("object"==typeof c){if(":"===u[0]){f+=i(c,o,(a||"")+u);continue}if(0===u.indexOf("@media")){var s=(o?o+" and ":"")+u.slice(7);f+=i(c,s,a);continue}if("@keyframes"===u||"animationName"===u){var v=r().injectKeyframesRule(c);if(v){f+=i({animationName:v},o,a);continue}}if("@font-face"===u||"fontFamily"===u){for(var l="",p=0,y=Array.isArray(c)?c:[c];p<y.length;p++){var m=y[p];l&&(l+=","),l+="string"==typeof m?m:r().injectFontFaceRule(m)}if(l){f+=i({fontFamily:l},o,a);continue}}if(Array.isArray(c)){f+=r(o).injectClassRule(e(u,c),a);continue}var d=!0,h={};for(var g in c){var j=c[g];if("string"!=typeof j&&"number"!=typeof j&&!Array.isArray(j)){d=!1;break}"x"!==g?"y"!==g?h[u+g[0].toUpperCase()+g.slice(1)]=j:(h[u+"Top"]=j,h[u+"Bottom"]=j):(h[u+"Left"]=j,h[u+"Right"]=j)}if(d){f+=i(h,o,a);continue}}}else{var x=t;if(o&&a){var b=t[o]=t[o]||{};x=b[a]=b[a]||{}}else o?x=t[o]=t[o]||{}:a&&(x=t[a]=t[a]||{});var O=x[u]=x[u]||{};if(O[c]){f+=O[c];continue}var _=r(o).injectClassRule(e(u,c),a);_&&(O[c]=_),f+=_}}return f.slice(1)}}return r.prototype.injectStyle=function(r){return this.inject(r)},r}();function o(r,n){return(e={})[r]=n,e;var e}function a(r,n){var e=r.sheet;e.insertRule(n,e.cssRules.length)}function f(r,n){var e=document.createElement("style");return r&&(e.media=r),n?document.head.insertBefore(e,n):document.head.appendChild(e),e}function u(r){void 0===r&&(r="");var n=0,e=10,t=35,i=1,o=function(){var a=n+e;return a===t&&(e+=9*(t+1),t=Math.pow(36,++i)-1),n++,373===a?o():r+a.toString(36)};return o}function c(r,n){return r+"{"+n+"}"}function s(r){var n,e="";for(n in r){var t=r[n];if("object"==typeof t)for(var i=0,o=t;i<o.length;i++){var a=o[i];e&&(e+=";"),e+=v(n,a)}else e&&(e+=";"),e+=v(n,t)}return e}function v(r,n){return"string"==typeof n||"number"==typeof n?m(r)+":"+n:""}var l=/[A-Z]/g,p=/^(ms|moz|webkit)/,y={};function m(r){return r in y?y[r]:y[r]=r.replace(l,"-$&").replace(p,"-$&").toLowerCase()}var d=/\.([a-z0-9])(:[^{]+)?\{([^}]+)\}/g,h=/@keyframes ([a-z0-9])\{((?:[a-z0-9%]+\{[^}]+\})+)\}/g,g=/@font-face \{([^}]+)\}/g,j=/font-family:([^;}]+)/,x=function(r){function e(n,e,t,i){void 0===e&&(e=u()),void 0===t&&(t=u()),void 0===i&&(i=u());var o={},f={},s={},v=n.textContent;if(v){for(var l=void 0;l=d.exec(v);){if(e(),l[2])(f[l[2]]=f[l[2]]||{})[l[3]]=l[1];else o[l[3]]=l[1]}for(;l=h.exec(v);)t(),s[l[2]]=l[1];for(;l=g.exec(v);){var p=j.exec(l[2]);i(),p&&(s[p[1]]=l[1])}}return r.call(this,o,f,s,{},e,t,i,function(r,e,t){var i=function(r,n,e){return void 0===e&&(e=""),"."+c(r+e,n)}(r,e,t);a(n,i)},function(r,e){var t=function(r,n){return"@keyframes "+c(r,n)}(r,e);a(n,t)},function(r){var e=function(r){return"@font-face {"+r+"}"}(r);a(n,e)})||this}return n(e,r),e}(function(){return function(r,n,t,i,o,a,f,u,v,l){this.injectClassRule=function(e,t){var i=s(e);if(i){var a=t?n[t]=n[t]||{}:r,f=a[i];if(f)return f;var c=o();return a[i]=c,u&&u(c,i,t),c}return""},this.injectKeyframesRule=function(r){var n="";for(var e in r)n+=c(e,s(r[e]));if(n){var i=t[n];if(i)return i;var o=a();return t[n]=o,v&&v(o,n),o}return""},this.injectFontFaceRule=function(r){delete r.fontFamily;var n=s(r);if(n){var t=i[n];if(t)return t;r=e({},r);var o=f();return r.fontFamily=o,i[n]=o,l&&l(s(r)),o}return""}}}()),b=function(r){function e(n,e){void 0===e&&(e={});var i,o,a=e.prefix,c=u(a),s=u(a),v=e.mediaOrder,l={},p=!1,y={};if(i=r.call(this,function(r){if(r){if(y[r])return y[r];var n=null;if(v&&p){var e=(a=(i=Object.keys(l)).concat(r).sort(v)).indexOf(r);e<a.length-1&&(n=l[a[e+1]])}p=!0;var t=l[r]=f(r,n);return y[r]=new x(t,c,s)}if(o)return o;n=null;if(p){var i=Object.keys(l);if(v){var a=i.sort(v);n=l[a[0]]}else n=l[i[0]]}return o=new x(f(null,n),c,s)},e.transformer)||this,"auto"===n&&(n=document.getElementsByClassName(t)),n)for(var m=0,d=n;m<d.length;m++){var h=d[m],g=h.media;g?(p=!0,l[g]=h,y[g]=new x(h,c,s)):o=new x(h,c,s)}return i}return n(e,r),e}(i);function O(r){var n,e="";for(n in r){e&&(e+=" and ");var t=r[n];e+=!0===t?"("+m(n)+")":"("+m(n)+": "+("string"==typeof t?t:_(n,"h")||_(n,"t")?t+"px":_(n,"n")?t+"dpi":t)+")"}return e}function _(r,n){return r.indexOf(n)===r.length-1}exports.default=b,exports.media=function(r,n){return(e={})["@media "+("string"==typeof r?r:O(r))]=n,e;var e},exports.query=O,exports.pseudo=function(r,n){return(e={})[r]=n,e;var e},exports.compose=function(){for(var r=[],n=0;n<arguments.length;n++)r[n]=arguments[n];return r.reduceRight(function(r,n){return function(e){return n(r(e))}},r.pop()||function(r){return r})};

cjs/server.js

@@ -40,21 +40,2 @@ 'use strict';
 var DEFAULT_HYDRATE_CLASS_NAME = '__glitz__';
-var shorthandLengthProperties = ['margin', 'padding'];
-var shorthandProperties = shorthandLengthProperties.concat([
-    'animation',
-    'background',
-    'border',
-    'borderBottom',
-    'borderImage',
-    'borderLeft',
-    'borderRight',
-    'borderTop',
-    'flex',
-    'font',
-    'grid',
-    'maskBorder',
-    'mask',
-    'offset',
-    'outline',
-    'transition',
-]);
 var Base = /** @class */ (function () {
@@ -148,36 +129,29 @@ function Base(injector, transformer) {
                     }
-                    if (shorthandProperties.indexOf(property) !== -1) {
-                        var longhand = {};
-                        for (var extension in value) {
-                            var longhandValue = value[extension];
-                            if (typeof longhandValue === 'string' ||
-                                typeof longhandValue === 'number' ||
-                                Array.isArray(longhandValue)) {
-                                if (extension === 'x') {
-                                    if (process.env.NODE_ENV !== 'production') {
-                                        if (shorthandLengthProperties.indexOf(property) === -1) {
-                                            console.error('The longhand style property `%s.y` is only supported for %s in `%o`', property, shorthandLengthProperties.map(function (shorthand) { return "`" + shorthand + "`"; }).join('and'), value);
-                                        }
-                                    }
-                                    longhand[property + 'Left'] = longhandValue;
-                                    longhand[property + 'Right'] = longhandValue;
-                                    continue;
-                                }
-                                if (extension === 'y') {
-                                    if (process.env.NODE_ENV !== 'production') {
-                                        if (shorthandLengthProperties.indexOf(property) === -1) {
-                                            console.error('The longhand style property `%s.y` is only supported for %s in `%o`', property, shorthandLengthProperties.map(function (shorthand) { return "`" + shorthand + "`"; }).join('and'), value);
-                                        }
-                                    }
-                                    longhand[property + 'Top'] = longhandValue;
-                                    longhand[property + 'Bottom'] = longhandValue;
-                                    continue;
-                                }
-                                longhand[property + extension[0].toUpperCase() + extension.slice(1)] = longhandValue;
+                    var isValid = true;
+                    var longhand = {};
+                    for (var extension in value) {
+                        var longhandValue = value[extension];
+                        if (typeof longhandValue === 'string' ||
+                            typeof longhandValue === 'number' ||
+                            Array.isArray(longhandValue)) {
+                            if (extension === 'x') {
+                                longhand[property + 'Left'] = longhandValue;
+                                longhand[property + 'Right'] = longhandValue;
                                 continue;
                             }
-                            if (process.env.NODE_ENV !== 'production') {
-                                console.error('The longhand style property `%s.%s` only allows string or number as value, was `%o`', property, extension, value);
+                            if (extension === 'y') {
+                                longhand[property + 'Top'] = longhandValue;
+                                longhand[property + 'Bottom'] = longhandValue;
+                                continue;
                             }
+                            longhand[property + extension[0].toUpperCase() + extension.slice(1)] = longhandValue;
+                            continue;
                         }
+                        if (process.env.NODE_ENV !== 'production') {
+                            console.error("The shorthand object `%s` will be ignored and be the cause of the error below because property `%s.%s` wasn't a string, number or array of values, was `%o`", property, property, extension, value);
+                        }
+                        isValid = false;
+                        break;
+                    }
+                    if (isValid) {
                         classNames += inject(longhand, media, pseudo);
@@ -341,3 +315,3 @@ continue;
                 if ('fontFamily' in style) {
-                    console.error('Defined font family for font faces are ignored');
+                    console.warn('The CSS property `font-family` font face will be ignored in %O', style);
                 }
@@ -344,0 +318,0 @@ }

es6/core/Base.js

 export const DEFAULT_HYDRATE_CLASS_NAME = '__glitz__';
-const shorthandLengthProperties = ['margin', 'padding'];
-const shorthandProperties = shorthandLengthProperties.concat([
-    'animation',
-    'background',
-    'border',
-    'borderBottom',
-    'borderImage',
-    'borderLeft',
-    'borderRight',
-    'borderTop',
-    'flex',
-    'font',
-    'grid',
-    'maskBorder',
-    'mask',
-    'offset',
-    'outline',
-    'transition',
-]);
 export default class Base {
@@ -107,36 +88,29 @@ constructor(injector, transformer) {
                     }
-                    if (shorthandProperties.indexOf(property) !== -1) {
-                        const longhand = {};
-                        for (const extension in value) {
-                            const longhandValue = value[extension];
-                            if (typeof longhandValue === 'string' ||
-                                typeof longhandValue === 'number' ||
-                                Array.isArray(longhandValue)) {
-                                if (extension === 'x') {
-                                    if (process.env.NODE_ENV !== 'production') {
-                                        if (shorthandLengthProperties.indexOf(property) === -1) {
-                                            console.error('The longhand style property `%s.y` is only supported for %s in `%o`', property, shorthandLengthProperties.map(shorthand => `\`${shorthand}\``).join('and'), value);
-                                        }
-                                    }
-                                    longhand[property + 'Left'] = longhandValue;
-                                    longhand[property + 'Right'] = longhandValue;
-                                    continue;
-                                }
-                                if (extension === 'y') {
-                                    if (process.env.NODE_ENV !== 'production') {
-                                        if (shorthandLengthProperties.indexOf(property) === -1) {
-                                            console.error('The longhand style property `%s.y` is only supported for %s in `%o`', property, shorthandLengthProperties.map(shorthand => `\`${shorthand}\``).join('and'), value);
-                                        }
-                                    }
-                                    longhand[property + 'Top'] = longhandValue;
-                                    longhand[property + 'Bottom'] = longhandValue;
-                                    continue;
-                                }
-                                longhand[property + extension[0].toUpperCase() + extension.slice(1)] = longhandValue;
+                    let isValid = true;
+                    const longhand = {};
+                    for (const extension in value) {
+                        const longhandValue = value[extension];
+                        if (typeof longhandValue === 'string' ||
+                            typeof longhandValue === 'number' ||
+                            Array.isArray(longhandValue)) {
+                            if (extension === 'x') {
+                                longhand[property + 'Left'] = longhandValue;
+                                longhand[property + 'Right'] = longhandValue;
                                 continue;
                             }
-                            if (process.env.NODE_ENV !== 'production') {
-                                console.error('The longhand style property `%s.%s` only allows string or number as value, was `%o`', property, extension, value);
+                            if (extension === 'y') {
+                                longhand[property + 'Top'] = longhandValue;
+                                longhand[property + 'Bottom'] = longhandValue;
+                                continue;
                             }
+                            longhand[property + extension[0].toUpperCase() + extension.slice(1)] = longhandValue;
+                            continue;
                         }
+                        if (process.env.NODE_ENV !== 'production') {
+                            console.error("The shorthand object `%s` will be ignored and be the cause of the error below because property `%s.%s` wasn't a string, number or array of values, was `%o`", property, property, extension, value);
+                        }
+                        isValid = false;
+                        break;
+                    }
+                    if (isValid) {
                         classNames += inject(longhand, media, pseudo);
@@ -143,0 +117,0 @@ continue;

es6/core/Injector.js

@@ -49,3 +49,3 @@ import { formatRule } from '../utils/format';
                 if ('fontFamily' in style) {
-                    console.error('Defined font family for font faces are ignored');
+                    console.warn('The CSS property `font-family` font face will be ignored in %O', style);
                 }
@@ -52,0 +52,0 @@ }

jsm/index.js

 const DEFAULT_HYDRATE_CLASS_NAME = '__glitz__';
-const shorthandLengthProperties = ['margin', 'padding'];
-const shorthandProperties = shorthandLengthProperties.concat([
-    'animation',
-    'background',
-    'border',
-    'borderBottom',
-    'borderImage',
-    'borderLeft',
-    'borderRight',
-    'borderTop',
-    'flex',
-    'font',
-    'grid',
-    'maskBorder',
-    'mask',
-    'offset',
-    'outline',
-    'transition',
-]);
 class Base {
@@ -106,36 +87,29 @@ constructor(injector, transformer) {
                     }
-                    if (shorthandProperties.indexOf(property) !== -1) {
-                        const longhand = {};
-                        for (const extension in value) {
-                            const longhandValue = value[extension];
-                            if (typeof longhandValue === 'string' ||
-                                typeof longhandValue === 'number' ||
-                                Array.isArray(longhandValue)) {
-                                if (extension === 'x') {
-                                    if (process.env.NODE_ENV !== 'production') {
-                                        if (shorthandLengthProperties.indexOf(property) === -1) {
-                                            console.error('The longhand style property `%s.y` is only supported for %s in `%o`', property, shorthandLengthProperties.map(shorthand => `\`${shorthand}\``).join('and'), value);
-                                        }
-                                    }
-                                    longhand[property + 'Left'] = longhandValue;
-                                    longhand[property + 'Right'] = longhandValue;
-                                    continue;
-                                }
-                                if (extension === 'y') {
-                                    if (process.env.NODE_ENV !== 'production') {
-                                        if (shorthandLengthProperties.indexOf(property) === -1) {
-                                            console.error('The longhand style property `%s.y` is only supported for %s in `%o`', property, shorthandLengthProperties.map(shorthand => `\`${shorthand}\``).join('and'), value);
-                                        }
-                                    }
-                                    longhand[property + 'Top'] = longhandValue;
-                                    longhand[property + 'Bottom'] = longhandValue;
-                                    continue;
-                                }
-                                longhand[property + extension[0].toUpperCase() + extension.slice(1)] = longhandValue;
+                    let isValid = true;
+                    const longhand = {};
+                    for (const extension in value) {
+                        const longhandValue = value[extension];
+                        if (typeof longhandValue === 'string' ||
+                            typeof longhandValue === 'number' ||
+                            Array.isArray(longhandValue)) {
+                            if (extension === 'x') {
+                                longhand[property + 'Left'] = longhandValue;
+                                longhand[property + 'Right'] = longhandValue;
                                 continue;
                             }
-                            if (process.env.NODE_ENV !== 'production') {
-                                console.error('The longhand style property `%s.%s` only allows string or number as value, was `%o`', property, extension, value);
+                            if (extension === 'y') {
+                                longhand[property + 'Top'] = longhandValue;
+                                longhand[property + 'Bottom'] = longhandValue;
+                                continue;
                             }
+                            longhand[property + extension[0].toUpperCase() + extension.slice(1)] = longhandValue;
+                            continue;
                         }
+                        if (process.env.NODE_ENV !== 'production') {
+                            console.error("The shorthand object `%s` will be ignored and be the cause of the error below because property `%s.%s` wasn't a string, number or array of values, was `%o`", property, property, extension, value);
+                        }
+                        isValid = false;
+                        break;
+                    }
+                    if (isValid) {
                         classNames += inject(longhand, media, pseudo);
@@ -312,3 +286,3 @@ continue;
                 if ('fontFamily' in style) {
-                    console.error('Defined font family for font faces are ignored');
+                    console.warn('The CSS property `font-family` font face will be ignored in %O', style);
                 }
@@ -315,0 +289,0 @@ }

jsm/server.js

 const DEFAULT_HYDRATE_CLASS_NAME = '__glitz__';
-const shorthandLengthProperties = ['margin', 'padding'];
-const shorthandProperties = shorthandLengthProperties.concat([
-    'animation',
-    'background',
-    'border',
-    'borderBottom',
-    'borderImage',
-    'borderLeft',
-    'borderRight',
-    'borderTop',
-    'flex',
-    'font',
-    'grid',
-    'maskBorder',
-    'mask',
-    'offset',
-    'outline',
-    'transition',
-]);
 class Base {
@@ -106,36 +87,29 @@ constructor(injector, transformer) {
                     }
-                    if (shorthandProperties.indexOf(property) !== -1) {
-                        const longhand = {};
-                        for (const extension in value) {
-                            const longhandValue = value[extension];
-                            if (typeof longhandValue === 'string' ||
-                                typeof longhandValue === 'number' ||
-                                Array.isArray(longhandValue)) {
-                                if (extension === 'x') {
-                                    if (process.env.NODE_ENV !== 'production') {
-                                        if (shorthandLengthProperties.indexOf(property) === -1) {
-                                            console.error('The longhand style property `%s.y` is only supported for %s in `%o`', property, shorthandLengthProperties.map(shorthand => `\`${shorthand}\``).join('and'), value);
-                                        }
-                                    }
-                                    longhand[property + 'Left'] = longhandValue;
-                                    longhand[property + 'Right'] = longhandValue;
-                                    continue;
-                                }
-                                if (extension === 'y') {
-                                    if (process.env.NODE_ENV !== 'production') {
-                                        if (shorthandLengthProperties.indexOf(property) === -1) {
-                                            console.error('The longhand style property `%s.y` is only supported for %s in `%o`', property, shorthandLengthProperties.map(shorthand => `\`${shorthand}\``).join('and'), value);
-                                        }
-                                    }
-                                    longhand[property + 'Top'] = longhandValue;
-                                    longhand[property + 'Bottom'] = longhandValue;
-                                    continue;
-                                }
-                                longhand[property + extension[0].toUpperCase() + extension.slice(1)] = longhandValue;
+                    let isValid = true;
+                    const longhand = {};
+                    for (const extension in value) {
+                        const longhandValue = value[extension];
+                        if (typeof longhandValue === 'string' ||
+                            typeof longhandValue === 'number' ||
+                            Array.isArray(longhandValue)) {
+                            if (extension === 'x') {
+                                longhand[property + 'Left'] = longhandValue;
+                                longhand[property + 'Right'] = longhandValue;
                                 continue;
                             }
-                            if (process.env.NODE_ENV !== 'production') {
-                                console.error('The longhand style property `%s.%s` only allows string or number as value, was `%o`', property, extension, value);
+                            if (extension === 'y') {
+                                longhand[property + 'Top'] = longhandValue;
+                                longhand[property + 'Bottom'] = longhandValue;
+                                continue;
                             }
+                            longhand[property + extension[0].toUpperCase() + extension.slice(1)] = longhandValue;
+                            continue;
                         }
+                        if (process.env.NODE_ENV !== 'production') {
+                            console.error("The shorthand object `%s` will be ignored and be the cause of the error below because property `%s.%s` wasn't a string, number or array of values, was `%o`", property, property, extension, value);
+                        }
+                        isValid = false;
+                        break;
+                    }
+                    if (isValid) {
                         classNames += inject(longhand, media, pseudo);
@@ -294,3 +268,3 @@ continue;
                 if ('fontFamily' in style) {
-                    console.error('Defined font family for font faces are ignored');
+                    console.warn('The CSS property `font-family` font face will be ignored in %O', style);
                 }
@@ -297,0 +271,0 @@ }

package.json

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

No alert changes

Worsened metrics

Total package byte prevSize

144101

decreased by-4.41%

Lines of code

3064

decreased by-4.1%

Dependency changes

• Updated@glitz/type@^1.1.0-beta.4