@glitz/core - npm Package Compare versions

Comparing version 2.0.2 to 2.0.3

cjs/index.development.js

@@ -316,29 +316,37 @@ 'use strict';
                     if (!(property in declarations)) {
-                        if (property === ANIMATION_NAME && typeof value === 'object' && !Array.isArray(value)) {
-                            // Resolve `animationName` objects
-                            var list = {};
-                            for (var identifier in value) {
-                                var block = reverse(resolve(value[identifier], theme));
-                                list[identifier] = transformer ? transformer(block) : block;
+                        if (typeof value === 'object') {
+                            if (property === ANIMATION_NAME) {
+                                // Resolve `animationName` objects
+                                var animations = [].concat(value);
+                                for (var j = 0; j < animations.length; j++) {
+                                    if (typeof animations[j] === 'object') {
+                                        var list = {};
+                                        for (var identifier in animations[j]) {
+                                            var block = reverse(resolve(value[identifier], theme));
+                                            list[identifier] = transformer ? transformer(block) : block;
+                                        }
+                                        animations[j] = injector().injectKeyframes(list);
+                                    }
+                                }
+                                value = animations.length === 1 ? animations[0] : animations;
                             }
-                            value = injector().injectKeyframes(list);
-                        }
-                        if (property === FONT_FAMILY && typeof value === 'object') {
-                            // Resolve `fontFace` object
-                            var families = [].concat(value);
-                            var names = '';
-                            for (var _i = 0, families_1 = families; _i < families_1.length; _i++) {
-                                var family = families_1[_i];
-                                if (names) {
-                                    names += ',';
+                            if (property === FONT_FAMILY) {
+                                // Resolve `fontFace` object
+                                var families = [].concat(value);
+                                var names = '';
+                                for (var _i = 0, families_1 = families; _i < families_1.length; _i++) {
+                                    var family = families_1[_i];
+                                    if (names) {
+                                        names += ',';
+                                    }
+                                    if (typeof family === 'object') {
+                                        var fontFace = reverse(resolve(family, theme));
+                                        names += injector().injectFontFace((transformer ? transformer(fontFace) : fontFace));
+                                    }
+                                    else {
+                                        names += family;
+                                    }
                                 }
-                                if (typeof family === 'object') {
-                                    var fontFace = reverse(resolve(family, theme));
-                                    names += injector().injectFontFace((transformer ? transformer(fontFace) : fontFace));
-                                }
-                                else {
-                                    names += family;
-                                }
+                                value = names;
                             }
-                            value = names;
                         }
@@ -358,16 +366,22 @@ declarations[property] = value;
                     var longhandValue = value[extension];
+                    // Make sure to resolve plain object directly otherwise combinations
+                    // of `xy` extension alias with `y` or `x` will conflict
+                    var extensionDeclarations = typeof longhandValue === 'object' && !Array.isArray(longhandValue) ? {} : longhandDeclarations;
                     var alias = false;
                     if (extension === 'x' || extension === 'xy') {
                         alias = true;
-                        longhandDeclarations[property + 'Left'] = longhandValue;
-                        longhandDeclarations[property + 'Right'] = longhandValue;
+                        extensionDeclarations[property + 'Left'] = longhandValue;
+                        extensionDeclarations[property + 'Right'] = longhandValue;
                     }
                     if (extension === 'y' || extension === 'xy') {
                         alias = true;
-                        longhandDeclarations[property + 'Top'] = longhandValue;
-                        longhandDeclarations[property + 'Bottom'] = longhandValue;
+                        extensionDeclarations[property + 'Top'] = longhandValue;
+                        extensionDeclarations[property + 'Bottom'] = longhandValue;
                     }
                     if (!alias) {
-                        longhandDeclarations[property + extension[0].toUpperCase() + extension.slice(1)] = longhandValue;
+                        extensionDeclarations[property + extension[0].toUpperCase() + extension.slice(1)] = longhandValue;
                     }
+                    if (extensionDeclarations !== longhandDeclarations) {
+                        resolve(extensionDeclarations, theme, result, media, pseudo);
+                    }
                 }
@@ -374,0 +388,0 @@ resolve(longhandDeclarations, theme, result, media, pseudo);

cjs/index.production.js

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

esnext/index.js

@@ -278,28 +278,36 @@ const DEFAULT_HYDRATION_IDENTIFIER = 'glitz';
                     if (!(property in declarations)) {
-                        if (property === ANIMATION_NAME && typeof value === 'object' && !Array.isArray(value)) {
-                            // Resolve `animationName` objects
-                            const list = {};
-                            for (const identifier in value) {
-                                const block = reverse(resolve(value[identifier], theme));
-                                list[identifier] = transformer ? transformer(block) : block;
+                        if (typeof value === 'object') {
+                            if (property === ANIMATION_NAME) {
+                                // Resolve `animationName` objects
+                                const animations = [].concat(value);
+                                for (let j = 0; j < animations.length; j++) {
+                                    if (typeof animations[j] === 'object') {
+                                        const list = {};
+                                        for (const identifier in animations[j]) {
+                                            const block = reverse(resolve(value[identifier], theme));
+                                            list[identifier] = transformer ? transformer(block) : block;
+                                        }
+                                        animations[j] = injector().injectKeyframes(list);
+                                    }
+                                }
+                                value = animations.length === 1 ? animations[0] : animations;
                             }
-                            value = injector().injectKeyframes(list);
-                        }
-                        if (property === FONT_FAMILY && typeof value === 'object') {
-                            // Resolve `fontFace` object
-                            const families = [].concat(value);
-                            let names = '';
-                            for (const family of families) {
-                                if (names) {
-                                    names += ',';
+                            if (property === FONT_FAMILY) {
+                                // Resolve `fontFace` object
+                                const families = [].concat(value);
+                                let names = '';
+                                for (const family of families) {
+                                    if (names) {
+                                        names += ',';
+                                    }
+                                    if (typeof family === 'object') {
+                                        const fontFace = reverse(resolve(family, theme));
+                                        names += injector().injectFontFace((transformer ? transformer(fontFace) : fontFace));
+                                    }
+                                    else {
+                                        names += family;
+                                    }
                                 }
-                                if (typeof family === 'object') {
-                                    const fontFace = reverse(resolve(family, theme));
-                                    names += injector().injectFontFace((transformer ? transformer(fontFace) : fontFace));
-                                }
-                                else {
-                                    names += family;
-                                }
+                                value = names;
                             }
-                            value = names;
                         }
@@ -319,16 +327,22 @@ declarations[property] = value;
                     const longhandValue = value[extension];
+                    // Make sure to resolve plain object directly otherwise combinations
+                    // of `xy` extension alias with `y` or `x` will conflict
+                    const extensionDeclarations = typeof longhandValue === 'object' && !Array.isArray(longhandValue) ? {} : longhandDeclarations;
                     let alias = false;
                     if (extension === 'x' || extension === 'xy') {
                         alias = true;
-                        longhandDeclarations[property + 'Left'] = longhandValue;
-                        longhandDeclarations[property + 'Right'] = longhandValue;
+                        extensionDeclarations[property + 'Left'] = longhandValue;
+                        extensionDeclarations[property + 'Right'] = longhandValue;
                     }
                     if (extension === 'y' || extension === 'xy') {
                         alias = true;
-                        longhandDeclarations[property + 'Top'] = longhandValue;
-                        longhandDeclarations[property + 'Bottom'] = longhandValue;
+                        extensionDeclarations[property + 'Top'] = longhandValue;
+                        extensionDeclarations[property + 'Bottom'] = longhandValue;
                     }
                     if (!alias) {
-                        longhandDeclarations[property + extension[0].toUpperCase() + extension.slice(1)] = longhandValue;
+                        extensionDeclarations[property + extension[0].toUpperCase() + extension.slice(1)] = longhandValue;
                     }
+                    if (extensionDeclarations !== longhandDeclarations) {
+                        resolve(extensionDeclarations, theme, result, media, pseudo);
+                    }
                 }
@@ -335,0 +349,0 @@ resolve(longhandDeclarations, theme, result, media, pseudo);

mjs/index.js

@@ -312,29 +312,37 @@ var DEFAULT_HYDRATION_IDENTIFIER = 'glitz';
                     if (!(property in declarations)) {
-                        if (property === ANIMATION_NAME && typeof value === 'object' && !Array.isArray(value)) {
-                            // Resolve `animationName` objects
-                            var list = {};
-                            for (var identifier in value) {
-                                var block = reverse(resolve(value[identifier], theme));
-                                list[identifier] = transformer ? transformer(block) : block;
+                        if (typeof value === 'object') {
+                            if (property === ANIMATION_NAME) {
+                                // Resolve `animationName` objects
+                                var animations = [].concat(value);
+                                for (var j = 0; j < animations.length; j++) {
+                                    if (typeof animations[j] === 'object') {
+                                        var list = {};
+                                        for (var identifier in animations[j]) {
+                                            var block = reverse(resolve(value[identifier], theme));
+                                            list[identifier] = transformer ? transformer(block) : block;
+                                        }
+                                        animations[j] = injector().injectKeyframes(list);
+                                    }
+                                }
+                                value = animations.length === 1 ? animations[0] : animations;
                             }
-                            value = injector().injectKeyframes(list);
-                        }
-                        if (property === FONT_FAMILY && typeof value === 'object') {
-                            // Resolve `fontFace` object
-                            var families = [].concat(value);
-                            var names = '';
-                            for (var _i = 0, families_1 = families; _i < families_1.length; _i++) {
-                                var family = families_1[_i];
-                                if (names) {
-                                    names += ',';
+                            if (property === FONT_FAMILY) {
+                                // Resolve `fontFace` object
+                                var families = [].concat(value);
+                                var names = '';
+                                for (var _i = 0, families_1 = families; _i < families_1.length; _i++) {
+                                    var family = families_1[_i];
+                                    if (names) {
+                                        names += ',';
+                                    }
+                                    if (typeof family === 'object') {
+                                        var fontFace = reverse(resolve(family, theme));
+                                        names += injector().injectFontFace((transformer ? transformer(fontFace) : fontFace));
+                                    }
+                                    else {
+                                        names += family;
+                                    }
                                 }
-                                if (typeof family === 'object') {
-                                    var fontFace = reverse(resolve(family, theme));
-                                    names += injector().injectFontFace((transformer ? transformer(fontFace) : fontFace));
-                                }
-                                else {
-                                    names += family;
-                                }
+                                value = names;
                             }
-                            value = names;
                         }
@@ -354,16 +362,22 @@ declarations[property] = value;
                     var longhandValue = value[extension];
+                    // Make sure to resolve plain object directly otherwise combinations
+                    // of `xy` extension alias with `y` or `x` will conflict
+                    var extensionDeclarations = typeof longhandValue === 'object' && !Array.isArray(longhandValue) ? {} : longhandDeclarations;
                     var alias = false;
                     if (extension === 'x' || extension === 'xy') {
                         alias = true;
-                        longhandDeclarations[property + 'Left'] = longhandValue;
-                        longhandDeclarations[property + 'Right'] = longhandValue;
+                        extensionDeclarations[property + 'Left'] = longhandValue;
+                        extensionDeclarations[property + 'Right'] = longhandValue;
                     }
                     if (extension === 'y' || extension === 'xy') {
                         alias = true;
-                        longhandDeclarations[property + 'Top'] = longhandValue;
-                        longhandDeclarations[property + 'Bottom'] = longhandValue;
+                        extensionDeclarations[property + 'Top'] = longhandValue;
+                        extensionDeclarations[property + 'Bottom'] = longhandValue;
                     }
                     if (!alias) {
-                        longhandDeclarations[property + extension[0].toUpperCase() + extension.slice(1)] = longhandValue;
+                        extensionDeclarations[property + extension[0].toUpperCase() + extension.slice(1)] = longhandValue;
                     }
+                    if (extensionDeclarations !== longhandDeclarations) {
+                        resolve(extensionDeclarations, theme, result, media, pseudo);
+                    }
                 }
@@ -370,0 +384,0 @@ resolve(longhandDeclarations, theme, result, media, pseudo);

package.json

 {
   "name": "@glitz/core",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "main": "./cjs/index.js",
@@ -15,3 +15,3 @@ "module": "./mjs/index.js",
   "dependencies": {
-    "@glitz/type": "^2.0.0"
+    "@glitz/type": "^2.0.1"
   },
@@ -29,3 +29,3 @@ "scripts": {
   ],
-  "gitHead": "cc3cd0e7190137c5ed5a373598dded622d113275"
+  "gitHead": "fa9f650836e1fccc0bc2a90aa578412f7a0b6f8f"
 }

No alert changes

Improved metrics

Total package byte prevSize

117126

increased by2.94%

Lines of code

2368

increased by1.81%

Dependency changes

• Updated@glitz/type@^2.0.1