@uifabric/merge-styles - npm Package Compare versions

Comparing version 5.2.0 to 5.3.0

CHANGELOG.json

@@ -5,2 +5,16 @@ {
     {
+      "version": "5.3.0",
+      "tag": "@uifabric/merge-styles_v5.3.0",
+      "date": "Thu, 05 Oct 2017 10:17:42 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "David Zearing <[e-mail]>",
+            "commit": "f95fa74185b6faaf278fdc0a78e72635bcc3ec48",
+            "comment": "Adding selector support to target child class names that were generated in the same mergeStyleSets set."
+          }
+        ]
+      }
+    },
+    {
       "version": "5.2.0",
@@ -7,0 +21,0 @@ "tag": "@uifabric/merge-styles_v5.2.0",

CHANGELOG.md

 # Change Log - @uifabric/merge-styles
 
-This log was last generated on Sat, 30 Sep 2017 01:26:37 GMT and should not be manually modified.
+This log was last generated on Thu, 05 Oct 2017 10:17:42 GMT and should not be manually modified.
 
+## 5.3.0
+Thu, 05 Oct 2017 10:17:42 GMT
+
+### Minor changes
+
+- Adding selector support to target child class names that were generated in the same mergeStyleSets set.
+
 ## 5.2.0
@@ -6,0 +13,0 @@ Sat, 30 Sep 2017 01:26:37 GMT

dist/merge-styles.js

@@ -74,3 +74,3 @@ var MergeStyles =
 Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = __webpack_require__(10);
+var tslib_1 = __webpack_require__(11);
 var STYLESHEET_SETTING = '__stylesheet__';
@@ -214,6 +214,6 @@ var _stylesheet;
 Object.defineProperty(exports, "__esModule", { value: true });
-var rtlifyRules_1 = __webpack_require__(5);
-var provideUnits_1 = __webpack_require__(6);
-var prefixRules_1 = __webpack_require__(7);
-var kebabRules_1 = __webpack_require__(9);
+var rtlifyRules_1 = __webpack_require__(6);
+var provideUnits_1 = __webpack_require__(7);
+var prefixRules_1 = __webpack_require__(8);
+var kebabRules_1 = __webpack_require__(10);
 var Stylesheet_1 = __webpack_require__(0);
@@ -327,3 +327,3 @@ var DISPLAY_NAME = 'displayName';
 exports.serializeRuleEntries = serializeRuleEntries;
-function styleToClassName() {
+function styleToRegistration() {
     var args = [];
@@ -335,23 +335,61 @@ for (var _i = 0; _i < arguments.length; _i++) {
     var key = getKeyForRules(rules);
-    var className = '';
     if (key) {
         var stylesheet = Stylesheet_1.Stylesheet.getInstance();
-        className = stylesheet.classNameFromKey(key);
-        if (!className) {
-            className = stylesheet.getClassName(getDisplayName(rules));
-            var registeredRules = [];
+        var registration = {
+            className: stylesheet.classNameFromKey(key),
+            key: key,
+            args: args
+        };
+        if (!registration.className) {
+            registration.className = stylesheet.getClassName(getDisplayName(rules));
+            var rulesToInsert = [];
             for (var _a = 0, _b = rules.__order; _a < _b.length; _a++) {
                 var selector = _b[_a];
-                var rulesToInsert = serializeRuleEntries(rules[selector]);
-                if (rulesToInsert) {
-                    registeredRules.push(selector, rulesToInsert);
-                    selector = selector.replace(/\&/g, "." + className);
-                    stylesheet.insertRule(selector + "{" + rulesToInsert + "}");
-                }
+                rulesToInsert.push(selector, serializeRuleEntries(rules[selector]));
             }
-            stylesheet.cacheClassName(className, key, args, registeredRules);
+            registration.rulesToInsert = rulesToInsert;
         }
+        return registration;
     }
-    return className;
 }
+exports.styleToRegistration = styleToRegistration;
+function applyRegistration(registration, classMap) {
+    var stylesheet = Stylesheet_1.Stylesheet.getInstance();
+    var className = registration.className, key = registration.key, args = registration.args, rulesToInsert = registration.rulesToInsert;
+    if (rulesToInsert) {
+        // rulesToInsert is an ordered array of selector/rule pairs.
+        for (var i = 0; i < rulesToInsert.length; i += 2) {
+            var rules = rulesToInsert[i + 1];
+            if (rules) {
+                var selector = rulesToInsert[i];
+                // Fix selector using map.
+                selector = selector.replace(/(&)|\$([\w-]+)\b/g, function (match, amp, cn) {
+                    if (amp) {
+                        return '.' + registration.className;
+                    }
+                    else if (cn) {
+                        return '.' + ((classMap && classMap[cn]) || cn);
+                    }
+                    return '';
+                });
+                // Insert.
+                stylesheet.insertRule(selector + "{" + rules + "}");
+            }
+        }
+        stylesheet.cacheClassName(className, key, args, rulesToInsert);
+    }
+}
+exports.applyRegistration = applyRegistration;
+function styleToClassName() {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    var registration = styleToRegistration.apply(void 0, args);
+    if (registration) {
+        applyRegistration(registration);
+        return registration.className;
+    }
+    return '';
+}
 exports.styleToClassName = styleToClassName;
@@ -367,10 +405,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
-var styleToClassName_1 = __webpack_require__(1);
 var Stylesheet_1 = __webpack_require__(0);
 /**
- * Concatination helper, which can merge class names together. Skips over falsey values.
- *
- * @public
+ * Separates the classes and style objects. Any classes that are pre-registered
+ * args are auto expanded into objects.
  */
-function mergeStyles() {
+function extractStyleParts() {
     var args = [];
@@ -406,8 +442,8 @@ for (var _i = 0; _i < arguments.length; _i++) {
     _processArgs(args);
-    if (objects.length) {
-        classes.push(styleToClassName_1.styleToClassName(objects));
-    }
-    return classes.join(' ');
+    return {
+        classes: classes,
+        objects: objects
+    };
 }
-exports.mergeStyles = mergeStyles;
+exports.extractStyleParts = extractStyleParts;
 
@@ -462,11 +498,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
-var mergeStyles_1 = __webpack_require__(2);
+var mergeStyles_1 = __webpack_require__(5);
 exports.mergeStyles = mergeStyles_1.mergeStyles;
-var mergeStyleSets_1 = __webpack_require__(11);
+var mergeStyleSets_1 = __webpack_require__(12);
 exports.mergeStyleSets = mergeStyleSets_1.mergeStyleSets;
 var concatStyleSets_1 = __webpack_require__(3);
 exports.concatStyleSets = concatStyleSets_1.concatStyleSets;
-var fontFace_1 = __webpack_require__(12);
+var fontFace_1 = __webpack_require__(13);
 exports.fontFace = fontFace_1.fontFace;
-var keyframes_1 = __webpack_require__(13);
+var keyframes_1 = __webpack_require__(14);
 exports.keyframes = keyframes_1.keyframes;
@@ -484,2 +520,30 @@ var Stylesheet_1 = __webpack_require__(0);
 Object.defineProperty(exports, "__esModule", { value: true });
+var styleToClassName_1 = __webpack_require__(1);
+var extractStyleParts_1 = __webpack_require__(2);
+/**
+ * Concatination helper, which can merge class names together. Skips over falsey values.
+ *
+ * @public
+ */
+function mergeStyles() {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    var _a = extractStyleParts_1.extractStyleParts(args), classes = _a.classes, objects = _a.objects;
+    if (objects.length) {
+        classes.push(styleToClassName_1.styleToClassName(objects));
+    }
+    return classes.join(' ');
+}
+exports.mergeStyles = mergeStyles;
+
+
+/***/ }),
+/* 6 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
 var _nameReplacements = {
@@ -566,3 +630,3 @@ 'left': 'right',
 /***/ }),
-/* 6 */
+/* 7 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -597,3 +661,3 @@
 /***/ }),
-/* 7 */
+/* 8 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -604,3 +668,3 @@
 Object.defineProperty(exports, "__esModule", { value: true });
-var getVendorSettings_1 = __webpack_require__(8);
+var getVendorSettings_1 = __webpack_require__(9);
 var autoPrefixNames = {
@@ -634,3 +698,3 @@ 'user-select': 1
 /***/ }),
-/* 8 */
+/* 9 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -677,3 +741,3 @@
 /***/ }),
-/* 9 */
+/* 10 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -691,3 +755,3 @@
 /***/ }),
-/* 10 */
+/* 11 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -876,3 +940,3 @@
 /***/ }),
-/* 11 */
+/* 12 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -883,4 +947,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
-var mergeStyles_1 = __webpack_require__(2);
+var extractStyleParts_1 = __webpack_require__(2);
 var concatStyleSets_1 = __webpack_require__(3);
+var styleToClassName_1 = __webpack_require__(1);
 /**
@@ -897,2 +962,3 @@ * Allows you to pass in 1 or more sets of areas which will return a merged
     }
+    // tslint:disable-next-line:no-any
     var classNameSet = {};
@@ -904,8 +970,21 @@ var cssSet = cssSets[0];
         }
+        var registrations = [];
         for (var prop in cssSet) {
             if (cssSet.hasOwnProperty(prop)) {
+                var args = cssSet[prop];
                 // tslint:disable-next-line:no-any
-                classNameSet[prop] = mergeStyles_1.mergeStyles(cssSet[prop]);
+                var _a = extractStyleParts_1.extractStyleParts(args), classes = _a.classes, objects = _a.objects;
+                var registration = styleToClassName_1.styleToRegistration({ displayName: prop }, objects);
+                registrations.push(registration);
+                if (registration) {
+                    classNameSet[prop] = classes.concat([registration.className]).join(' ');
+                }
             }
         }
+        for (var _b = 0, registrations_1 = registrations; _b < registrations_1.length; _b++) {
+            var registration = registrations_1[_b];
+            if (registration) {
+                styleToClassName_1.applyRegistration(registration, classNameSet);
+            }
+        }
     }
@@ -918,3 +997,3 @@ return classNameSet;
 /***/ }),
-/* 12 */
+/* 13 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -938,3 +1017,3 @@
 /***/ }),
-/* 13 */
+/* 14 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -941,0 +1020,0 @@

dist/merge-styles.min.js

@@ -1,2 +0,2 @@
-var MergeStyles=function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var r={};return t.m=e,t.c=r,t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=4)}([function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n,o=r(10),i=function(){function e(e){this._config=o.__assign({async:!1,injectionMode:1},e),this.reset()}return e.getInstance=function(){var t="undefined"!=typeof window?window:{};return n=t.__stylesheet__,n||(n=t.__stylesheet__=new e),n},e.prototype.setConfig=function(e){this._config=o.__assign({},this._config,e)},e.prototype.getClassName=function(e){return(e||"css")+"-"+this._counter++},e.prototype.cacheClassName=function(e,t,r,n){this._keyToClassName[t]=e,this._classNameToArgs[e]={args:r,rules:n}},e.prototype.classNameFromKey=function(e){return this._keyToClassName[e]},e.prototype.argsFromClassName=function(e){var t=this._classNameToArgs[e];return t&&t.args},e.prototype.insertedRulesFromClassName=function(e){var t=this._classNameToArgs[e];return t&&t.rules},e.prototype.insertRule=function(e){var t=this._getElement();switch(t?this._config.injectionMode:0){case 1:var r=t.sheet;try{r.insertRule(e,r.cssRules.length)}catch(e){}break;default:this._rules.push(e)}},e.prototype.getRules=function(){return(this._rules.join("")||"")+(this._rulesToInsert.join("")||"")},e.prototype.reset=function(){this._rules=[],this._rulesToInsert=[],this._counter=0,this._classNameToArgs={},this._keyToClassName={},this._timerId&&(clearTimeout(this._timerId),this._timerId=0)},e.prototype._getElement=function(){return this._styleElement||"undefined"==typeof document||(this._styleElement=document.createElement("style"),document.head.appendChild(this._styleElement)),this._styleElement},e}();t.Stylesheet=i},function(e,t,r){"use strict";function n(e){var t=e&&e["&"];return t?t.displayName:void 0}function o(e,t,r){void 0===t&&(t={__order:[]}),void 0===r&&(r="&");var n=y.Stylesheet.getInstance(),s=t[r];s||(s={},t[r]=s,t.__order.push(r));for(var a=0,u=e;a<u.length;a++){var c=u[a];if("string"==typeof c){var f=n.argsFromClassName(c);f&&o(f,t)}else if(Array.isArray(c))o(c,t,r);else for(var l in c)if("selectors"===l){var p=c.selectors;for(var h in p)if(p.hasOwnProperty(h)){var d=p[h];h.indexOf("&")<0&&(h=r+h),o([d],t,h)}}else"margin"===l||"padding"===l?i(s,l,c[l]):s[l]=c[l]}return t}function i(e,t,r){var n="string"==typeof r?r.split(" "):[r];e[t+"Top"]=n[0],e[t+"Right"]=n[1]||n[0],e[t+"Bottom"]=n[2]||n[0],e[t+"Left"]=n[3]||n[1]||n[0]}function s(e){for(var t=[],r=!1,n=0,o=e.__order;n<o.length;n++){var i=o[n];t.push(i);var s=e[i];for(var a in s)s.hasOwnProperty(a)&&(r=!0,t.push(a,s[a]))}return r?t.join(""):void 0}function a(e){if(!e)return"";var t=[];for(var r in e)e.hasOwnProperty(r)&&r!==h&&t.push(r,e[r]);for(var n=0;n<t.length;n+=2)p.kebabRules(t,n),f.provideUnits(t,n),c.rtlifyRules(t,n),l.prefixRules(t,n);for(var n=1;n<t.length;n+=4)t.splice(n,1,":",t[n],";");return t.join("")}function u(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];var r=o(e),i=s(r),u="";if(i){var c=y.Stylesheet.getInstance();if(!(u=c.classNameFromKey(i))){u=c.getClassName(n(r));for(var f=[],l=0,p=r.__order;l<p.length;l++){var h=p[l],d=a(r[h]);d&&(f.push(h,d),h=h.replace(/\&/g,"."+u),c.insertRule(h+"{"+d+"}"))}c.cacheClassName(u,i,e,f)}}return u}Object.defineProperty(t,"__esModule",{value:!0});var c=r(5),f=r(6),l=r(7),p=r(9),y=r(0),h="displayName";t.serializeRuleEntries=a,t.styleToClassName=u},function(e,t,r){"use strict";function n(){function e(t){for(var r=0,o=t;r<o.length;r++){var i=o[r];if(i)if("string"==typeof i){var u=a.argsFromClassName(i);u?s.push(u):n.push(i)}else Array.isArray(i)?e(i):"object"==typeof i&&s.push(i)}}for(var t=[],r=0;r<arguments.length;r++)t[r]=arguments[r];var n=[],s=[],a=i.Stylesheet.getInstance();return e(t),s.length&&n.push(o.styleToClassName(s)),n.join(" ")}Object.defineProperty(t,"__esModule",{value:!0});var o=r(1),i=r(0);t.mergeStyles=n},function(e,t,r){"use strict";function n(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];for(var r={},n=0,o=e;n<o.length;n++){var i=o[n];if(i)for(var s in i)if(i.hasOwnProperty(s)){var a=r[s],u=i[s];r[s]=void 0===a?u:(Array.isArray(a)?a:[a]).concat(Array.isArray(u)?u:[u])}}return r}Object.defineProperty(t,"__esModule",{value:!0}),t.concatStyleSets=n},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=r(2);t.mergeStyles=n.mergeStyles;var o=r(11);t.mergeStyleSets=o.mergeStyleSets;var i=r(3);t.concatStyleSets=i.concatStyleSets;var s=r(12);t.fontFace=s.fontFace;var a=r(13);t.keyframes=a.keyframes;var u=r(0);t.Stylesheet=u.Stylesheet},function(e,t,r){"use strict";function n(e){l=e}function o(){return void 0===l&&(l="undefined"!=typeof document&&!!document.documentElement&&"rtl"===document.documentElement.getAttribute("dir")),l}function i(e,t){if(o()){var r=e[t],n=e[t+1];if(n.indexOf(f)>=0)e[t+1]=n.replace(/\s*(?:\/\*\s*)?\@noflip\b(?:\s*\*\/)?\s*?/g,"");else if(r.indexOf("left")>=0)e[t]=r.replace("left","right");else if(r.indexOf("right")>=0)e[t]=r.replace("right","left");else if(String(n).indexOf("left")>=0)e[t+1]=n.replace("left","right");else if(String(n).indexOf("right")>=0)e[t+1]=n.replace("right","left");else if(u[r])e[t]=u[r];else if(c[n])e[t+1]=c[n];else switch(r){case"margin":case"padding":e[t+1]=a(n);break;case"box-shadow":e[t+1]=s(n,0)}}}function s(e,t){var r=e.split(" "),n=parseInt(r[t],10);return r[0]=r[0].replace(String(n),String(-1*n)),r.join(" ")}function a(e){if("string"==typeof e){var t=e.split(" ");if(4===t.length)return t[0]+" "+t[3]+" "+t[2]+" "+t[1]}return e}Object.defineProperty(t,"__esModule",{value:!0});var u={left:"right",right:"left"},c={"w-resize":"e-resize","sw-resize":"se-resize","nw-resize":"ne-resize"},f="@noflip",l=o();t.setRTL=n,t.getRTL=o,t.rtlifyRules=i},function(e,t,r){"use strict";function n(e,t){var r=e[t],n=e[t+1];"number"==typeof n&&-1===o.indexOf(r)&&(e[t+1]=n+"px")}Object.defineProperty(t,"__esModule",{value:!0});var o=["column-count","font-weight","flex-basis","flex","flex-grow","flex-shrink","opacity","order","z-index","zoom"];t.provideUnits=n},function(e,t,r){"use strict";function n(e,t){var r=o.getVendorSettings(),n=e[t];if(i[n]){var s=e[t+1];i[n]&&(r.isWebkit&&e.push("-webkit-"+n,s),r.isMoz&&e.push("-moz-"+n,s),r.isMs&&e.push("-ms-"+n,s),r.isOpera&&e.push("-o-"+n,s))}}Object.defineProperty(t,"__esModule",{value:!0});var o=r(8),i={"user-select":1};t.prefixRules=n},function(e,t,r){"use strict";function n(){if(!i){var e="undefined"!=typeof document?document:void 0,t="undefined"!=typeof navigator?navigator:void 0,r=t?t.userAgent.toLowerCase():void 0;i=e?{isWebkit:!!(e&&"WebkitAppearance"in e.documentElement.style),isMoz:!!(r&&r.indexOf("firefox")>-1),isOpera:!!(r&&r.indexOf("opera")>-1),isMs:!(!t||!/rv:11.0/i.test(t.userAgent)&&!/Edge\/\d./i.test(navigator.userAgent))}:{isWebkit:!0,isMoz:!0,isOpera:!0,isMs:!0}}return i}function o(e){i=e}Object.defineProperty(t,"__esModule",{value:!0});var i;t.getVendorSettings=n,t.setVendorSettings=o},function(e,t,r){"use strict";function n(e,t){e[t]=e[t].replace(/([A-Z])/g,"-$1").toLowerCase()}Object.defineProperty(t,"__esModule",{value:!0}),t.kebabRules=n},function(e,t,r){"use strict";function n(e,t){function r(){this.constructor=e}g(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}function o(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols)for(var o=0,n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&(r[n[o]]=e[n[o]]);return r}function i(e,t,r,n){var o,i=arguments.length,s=i<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,r):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,r,n);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(s=(i<3?o(s):i>3?o(t,r,s):o(t,r))||s);return i>3&&s&&Object.defineProperty(t,r,s),s}function s(e,t){return function(r,n){t(r,n,e)}}function a(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function u(e,t,r,n){return new(r||(r=Promise))(function(o,i){function s(e){try{u(n.next(e))}catch(e){i(e)}}function a(e){try{u(n.throw(e))}catch(e){i(e)}}function u(e){e.done?o(e.value):new r(function(t){t(e.value)}).then(s,a)}u((n=n.apply(e,t||[])).next())})}function c(e,t){function r(e){return function(t){return n([e,t])}}function n(r){if(o)throw new TypeError("Generator is already executing.");for(;u;)try{if(o=1,i&&(s=i[2&r[0]?"return":r[0]?"throw":"next"])&&!(s=s.call(i,r[1])).done)return s;switch(i=0,s&&(r=[0,s.value]),r[0]){case 0:case 1:s=r;break;case 4:return u.label++,{value:r[1],done:!1};case 5:u.label++,i=r[1],r=[0];continue;case 7:r=u.ops.pop(),u.trys.pop();continue;default:if(s=u.trys,!(s=s.length>0&&s[s.length-1])&&(6===r[0]||2===r[0])){u=0;continue}if(3===r[0]&&(!s||r[1]>s[0]&&r[1]<s[3])){u.label=r[1];break}if(6===r[0]&&u.label<s[1]){u.label=s[1],s=r;break}if(s&&u.label<s[2]){u.label=s[2],u.ops.push(r);break}s[2]&&u.ops.pop(),u.trys.pop();continue}r=t.call(e,u)}catch(e){r=[6,e],i=0}finally{o=s=0}if(5&r[0])throw r[1];return{value:r[0]?r[1]:void 0,done:!0}}var o,i,s,a,u={label:0,sent:function(){if(1&s[0])throw s[1];return s[1]},trys:[],ops:[]};return a={next:r(0),throw:r(1),return:r(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a}function f(e,t){for(var r in e)t.hasOwnProperty(r)||(t[r]=e[r])}function l(e){var t="function"==typeof Symbol&&e[Symbol.iterator],r=0;return t?t.call(e):{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}}}function p(e,t){var r="function"==typeof Symbol&&e[Symbol.iterator];if(!r)return e;var n,o,i=r.call(e),s=[];try{for(;(void 0===t||t-- >0)&&!(n=i.next()).done;)s.push(n.value)}catch(e){o={error:e}}finally{try{n&&!n.done&&(r=i.return)&&r.call(i)}finally{if(o)throw o.error}}return s}function y(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(p(arguments[t]));return e}function h(e){return this instanceof h?(this.v=e,this):new h(e)}function d(e,t,r){function n(e){f[e]&&(c[e]=function(t){return new Promise(function(r,n){l.push([e,t,r,n])>1||o(e,t)})})}function o(e,t){try{i(f[e](t))}catch(e){u(l[0][3],e)}}function i(e){e.value instanceof h?Promise.resolve(e.value.v).then(s,a):u(l[0][2],e)}function s(e){o("next",e)}function a(e){o("throw",e)}function u(e,t){e(t),l.shift(),l.length&&o(l[0][0],l[0][1])}if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var c,f=r.apply(e,t||[]),l=[];return c={},n("next"),n("throw"),n("return"),c[Symbol.asyncIterator]=function(){return this},c}function v(e){function t(t,o){e[t]&&(r[t]=function(r){return(n=!n)?{value:h(e[t](r)),done:"return"===t}:o?o(r):r})}var r,n;return r={},t("next"),t("throw",function(e){throw e}),t("return"),r[Symbol.iterator]=function(){return this},r}function _(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t=e[Symbol.asyncIterator];return t?t.call(e):"function"==typeof l?l(e):e[Symbol.iterator]()}Object.defineProperty(t,"__esModule",{value:!0}),t.__extends=n,r.d(t,"__assign",function(){return m}),t.__rest=o,t.__decorate=i,t.__param=s,t.__metadata=a,t.__awaiter=u,t.__generator=c,t.__exportStar=f,t.__values=l,t.__read=p,t.__spread=y,t.__await=h,t.__asyncGenerator=d,t.__asyncDelegator=v,t.__asyncValues=_;/*! *****************************************************************************
+var MergeStyles=function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var r={};return t.m=e,t.c=r,t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=4)}([function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n,o=r(11),i=function(){function e(e){this._config=o.__assign({async:!1,injectionMode:1},e),this.reset()}return e.getInstance=function(){var t="undefined"!=typeof window?window:{};return n=t.__stylesheet__,n||(n=t.__stylesheet__=new e),n},e.prototype.setConfig=function(e){this._config=o.__assign({},this._config,e)},e.prototype.getClassName=function(e){return(e||"css")+"-"+this._counter++},e.prototype.cacheClassName=function(e,t,r,n){this._keyToClassName[t]=e,this._classNameToArgs[e]={args:r,rules:n}},e.prototype.classNameFromKey=function(e){return this._keyToClassName[e]},e.prototype.argsFromClassName=function(e){var t=this._classNameToArgs[e];return t&&t.args},e.prototype.insertedRulesFromClassName=function(e){var t=this._classNameToArgs[e];return t&&t.rules},e.prototype.insertRule=function(e){var t=this._getElement();switch(t?this._config.injectionMode:0){case 1:var r=t.sheet;try{r.insertRule(e,r.cssRules.length)}catch(e){}break;default:this._rules.push(e)}},e.prototype.getRules=function(){return(this._rules.join("")||"")+(this._rulesToInsert.join("")||"")},e.prototype.reset=function(){this._rules=[],this._rulesToInsert=[],this._counter=0,this._classNameToArgs={},this._keyToClassName={},this._timerId&&(clearTimeout(this._timerId),this._timerId=0)},e.prototype._getElement=function(){return this._styleElement||"undefined"==typeof document||(this._styleElement=document.createElement("style"),document.head.appendChild(this._styleElement)),this._styleElement},e}();t.Stylesheet=i},function(e,t,r){"use strict";function n(e){var t=e&&e["&"];return t?t.displayName:void 0}function o(e,t,r){void 0===t&&(t={__order:[]}),void 0===r&&(r="&");var n=h.Stylesheet.getInstance(),s=t[r];s||(s={},t[r]=s,t.__order.push(r));for(var a=0,u=e;a<u.length;a++){var c=u[a];if("string"==typeof c){var l=n.argsFromClassName(c);l&&o(l,t)}else if(Array.isArray(c))o(c,t,r);else for(var f in c)if("selectors"===f){var y=c.selectors;for(var p in y)if(y.hasOwnProperty(p)){var v=y[p];p.indexOf("&")<0&&(p=r+p),o([v],t,p)}}else"margin"===f||"padding"===f?i(s,f,c[f]):s[f]=c[f]}return t}function i(e,t,r){var n="string"==typeof r?r.split(" "):[r];e[t+"Top"]=n[0],e[t+"Right"]=n[1]||n[0],e[t+"Bottom"]=n[2]||n[0],e[t+"Left"]=n[3]||n[1]||n[0]}function s(e){for(var t=[],r=!1,n=0,o=e.__order;n<o.length;n++){var i=o[n];t.push(i);var s=e[i];for(var a in s)s.hasOwnProperty(a)&&(r=!0,t.push(a,s[a]))}return r?t.join(""):void 0}function a(e){if(!e)return"";var t=[];for(var r in e)e.hasOwnProperty(r)&&r!==d&&t.push(r,e[r]);for(var n=0;n<t.length;n+=2)v.kebabRules(t,n),y.provideUnits(t,n),f.rtlifyRules(t,n),p.prefixRules(t,n);for(var n=1;n<t.length;n+=4)t.splice(n,1,":",t[n],";");return t.join("")}function u(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];var r=o(e),i=s(r);if(i){var u=h.Stylesheet.getInstance(),c={className:u.classNameFromKey(i),key:i,args:e};if(!c.className){c.className=u.getClassName(n(r));for(var l=[],f=0,y=r.__order;f<y.length;f++){var p=y[f];l.push(p,a(r[p]))}c.rulesToInsert=l}return c}}function c(e,t){var r=h.Stylesheet.getInstance(),n=e.className,o=e.key,i=e.args,s=e.rulesToInsert;if(s){for(var a=0;a<s.length;a+=2){var u=s[a+1];if(u){var c=s[a];c=c.replace(/(&)|\$([\w-]+)\b/g,function(r,n,o){return n?"."+e.className:o?"."+(t&&t[o]||o):""}),r.insertRule(c+"{"+u+"}")}}r.cacheClassName(n,o,i,s)}}function l(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];var r=u.apply(void 0,e);return r?(c(r),r.className):""}Object.defineProperty(t,"__esModule",{value:!0});var f=r(6),y=r(7),p=r(8),v=r(10),h=r(0),d="displayName";t.serializeRuleEntries=a,t.styleToRegistration=u,t.applyRegistration=c,t.styleToClassName=l},function(e,t,r){"use strict";function n(){function e(t){for(var r=0,o=t;r<o.length;r++){var a=o[r];if(a)if("string"==typeof a){var u=s.argsFromClassName(a);u?i.push(u):n.push(a)}else Array.isArray(a)?e(a):"object"==typeof a&&i.push(a)}}for(var t=[],r=0;r<arguments.length;r++)t[r]=arguments[r];var n=[],i=[],s=o.Stylesheet.getInstance();return e(t),{classes:n,objects:i}}Object.defineProperty(t,"__esModule",{value:!0});var o=r(0);t.extractStyleParts=n},function(e,t,r){"use strict";function n(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];for(var r={},n=0,o=e;n<o.length;n++){var i=o[n];if(i)for(var s in i)if(i.hasOwnProperty(s)){var a=r[s],u=i[s];r[s]=void 0===a?u:(Array.isArray(a)?a:[a]).concat(Array.isArray(u)?u:[u])}}return r}Object.defineProperty(t,"__esModule",{value:!0}),t.concatStyleSets=n},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=r(5);t.mergeStyles=n.mergeStyles;var o=r(12);t.mergeStyleSets=o.mergeStyleSets;var i=r(3);t.concatStyleSets=i.concatStyleSets;var s=r(13);t.fontFace=s.fontFace;var a=r(14);t.keyframes=a.keyframes;var u=r(0);t.Stylesheet=u.Stylesheet},function(e,t,r){"use strict";function n(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];var r=i.extractStyleParts(e),n=r.classes,s=r.objects;return s.length&&n.push(o.styleToClassName(s)),n.join(" ")}Object.defineProperty(t,"__esModule",{value:!0});var o=r(1),i=r(2);t.mergeStyles=n},function(e,t,r){"use strict";function n(e){f=e}function o(){return void 0===f&&(f="undefined"!=typeof document&&!!document.documentElement&&"rtl"===document.documentElement.getAttribute("dir")),f}function i(e,t){if(o()){var r=e[t],n=e[t+1];if(n.indexOf(l)>=0)e[t+1]=n.replace(/\s*(?:\/\*\s*)?\@noflip\b(?:\s*\*\/)?\s*?/g,"");else if(r.indexOf("left")>=0)e[t]=r.replace("left","right");else if(r.indexOf("right")>=0)e[t]=r.replace("right","left");else if(String(n).indexOf("left")>=0)e[t+1]=n.replace("left","right");else if(String(n).indexOf("right")>=0)e[t+1]=n.replace("right","left");else if(u[r])e[t]=u[r];else if(c[n])e[t+1]=c[n];else switch(r){case"margin":case"padding":e[t+1]=a(n);break;case"box-shadow":e[t+1]=s(n,0)}}}function s(e,t){var r=e.split(" "),n=parseInt(r[t],10);return r[0]=r[0].replace(String(n),String(-1*n)),r.join(" ")}function a(e){if("string"==typeof e){var t=e.split(" ");if(4===t.length)return t[0]+" "+t[3]+" "+t[2]+" "+t[1]}return e}Object.defineProperty(t,"__esModule",{value:!0});var u={left:"right",right:"left"},c={"w-resize":"e-resize","sw-resize":"se-resize","nw-resize":"ne-resize"},l="@noflip",f=o();t.setRTL=n,t.getRTL=o,t.rtlifyRules=i},function(e,t,r){"use strict";function n(e,t){var r=e[t],n=e[t+1];"number"==typeof n&&-1===o.indexOf(r)&&(e[t+1]=n+"px")}Object.defineProperty(t,"__esModule",{value:!0});var o=["column-count","font-weight","flex-basis","flex","flex-grow","flex-shrink","opacity","order","z-index","zoom"];t.provideUnits=n},function(e,t,r){"use strict";function n(e,t){var r=o.getVendorSettings(),n=e[t];if(i[n]){var s=e[t+1];i[n]&&(r.isWebkit&&e.push("-webkit-"+n,s),r.isMoz&&e.push("-moz-"+n,s),r.isMs&&e.push("-ms-"+n,s),r.isOpera&&e.push("-o-"+n,s))}}Object.defineProperty(t,"__esModule",{value:!0});var o=r(9),i={"user-select":1};t.prefixRules=n},function(e,t,r){"use strict";function n(){if(!i){var e="undefined"!=typeof document?document:void 0,t="undefined"!=typeof navigator?navigator:void 0,r=t?t.userAgent.toLowerCase():void 0;i=e?{isWebkit:!!(e&&"WebkitAppearance"in e.documentElement.style),isMoz:!!(r&&r.indexOf("firefox")>-1),isOpera:!!(r&&r.indexOf("opera")>-1),isMs:!(!t||!/rv:11.0/i.test(t.userAgent)&&!/Edge\/\d./i.test(navigator.userAgent))}:{isWebkit:!0,isMoz:!0,isOpera:!0,isMs:!0}}return i}function o(e){i=e}Object.defineProperty(t,"__esModule",{value:!0});var i;t.getVendorSettings=n,t.setVendorSettings=o},function(e,t,r){"use strict";function n(e,t){e[t]=e[t].replace(/([A-Z])/g,"-$1").toLowerCase()}Object.defineProperty(t,"__esModule",{value:!0}),t.kebabRules=n},function(e,t,r){"use strict";function n(e,t){function r(){this.constructor=e}_(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}function o(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols)for(var o=0,n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&(r[n[o]]=e[n[o]]);return r}function i(e,t,r,n){var o,i=arguments.length,s=i<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,r):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,r,n);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(s=(i<3?o(s):i>3?o(t,r,s):o(t,r))||s);return i>3&&s&&Object.defineProperty(t,r,s),s}function s(e,t){return function(r,n){t(r,n,e)}}function a(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function u(e,t,r,n){return new(r||(r=Promise))(function(o,i){function s(e){try{u(n.next(e))}catch(e){i(e)}}function a(e){try{u(n.throw(e))}catch(e){i(e)}}function u(e){e.done?o(e.value):new r(function(t){t(e.value)}).then(s,a)}u((n=n.apply(e,t||[])).next())})}function c(e,t){function r(e){return function(t){return n([e,t])}}function n(r){if(o)throw new TypeError("Generator is already executing.");for(;u;)try{if(o=1,i&&(s=i[2&r[0]?"return":r[0]?"throw":"next"])&&!(s=s.call(i,r[1])).done)return s;switch(i=0,s&&(r=[0,s.value]),r[0]){case 0:case 1:s=r;break;case 4:return u.label++,{value:r[1],done:!1};case 5:u.label++,i=r[1],r=[0];continue;case 7:r=u.ops.pop(),u.trys.pop();continue;default:if(s=u.trys,!(s=s.length>0&&s[s.length-1])&&(6===r[0]||2===r[0])){u=0;continue}if(3===r[0]&&(!s||r[1]>s[0]&&r[1]<s[3])){u.label=r[1];break}if(6===r[0]&&u.label<s[1]){u.label=s[1],s=r;break}if(s&&u.label<s[2]){u.label=s[2],u.ops.push(r);break}s[2]&&u.ops.pop(),u.trys.pop();continue}r=t.call(e,u)}catch(e){r=[6,e],i=0}finally{o=s=0}if(5&r[0])throw r[1];return{value:r[0]?r[1]:void 0,done:!0}}var o,i,s,a,u={label:0,sent:function(){if(1&s[0])throw s[1];return s[1]},trys:[],ops:[]};return a={next:r(0),throw:r(1),return:r(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a}function l(e,t){for(var r in e)t.hasOwnProperty(r)||(t[r]=e[r])}function f(e){var t="function"==typeof Symbol&&e[Symbol.iterator],r=0;return t?t.call(e):{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}}}function y(e,t){var r="function"==typeof Symbol&&e[Symbol.iterator];if(!r)return e;var n,o,i=r.call(e),s=[];try{for(;(void 0===t||t-- >0)&&!(n=i.next()).done;)s.push(n.value)}catch(e){o={error:e}}finally{try{n&&!n.done&&(r=i.return)&&r.call(i)}finally{if(o)throw o.error}}return s}function p(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(y(arguments[t]));return e}function v(e){return this instanceof v?(this.v=e,this):new v(e)}function h(e,t,r){function n(e){l[e]&&(c[e]=function(t){return new Promise(function(r,n){f.push([e,t,r,n])>1||o(e,t)})})}function o(e,t){try{i(l[e](t))}catch(e){u(f[0][3],e)}}function i(e){e.value instanceof v?Promise.resolve(e.value.v).then(s,a):u(f[0][2],e)}function s(e){o("next",e)}function a(e){o("throw",e)}function u(e,t){e(t),f.shift(),f.length&&o(f[0][0],f[0][1])}if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var c,l=r.apply(e,t||[]),f=[];return c={},n("next"),n("throw"),n("return"),c[Symbol.asyncIterator]=function(){return this},c}function d(e){function t(t,o){e[t]&&(r[t]=function(r){return(n=!n)?{value:v(e[t](r)),done:"return"===t}:o?o(r):r})}var r,n;return r={},t("next"),t("throw",function(e){throw e}),t("return"),r[Symbol.iterator]=function(){return this},r}function g(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t=e[Symbol.asyncIterator];return t?t.call(e):"function"==typeof f?f(e):e[Symbol.iterator]()}Object.defineProperty(t,"__esModule",{value:!0}),t.__extends=n,r.d(t,"__assign",function(){return m}),t.__rest=o,t.__decorate=i,t.__param=s,t.__metadata=a,t.__awaiter=u,t.__generator=c,t.__exportStar=l,t.__values=f,t.__read=y,t.__spread=p,t.__await=v,t.__asyncGenerator=h,t.__asyncDelegator=d,t.__asyncValues=g;/*! *****************************************************************************
 Copyright (c) Microsoft Corporation. All rights reserved.
@@ -15,2 +15,2 @@ Licensed under the Apache License, Version 2.0 (the "License"); you may not use
 ***************************************************************************** */
-var g=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r])},m=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++){t=arguments[r];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e}},function(e,t,r){"use strict";function n(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];var r={},n=e[0];if(n){e.length>1&&(n=i.concatStyleSets.apply(void 0,e));for(var s in n)n.hasOwnProperty(s)&&(r[s]=o.mergeStyles(n[s]))}return r}Object.defineProperty(t,"__esModule",{value:!0});var o=r(2),i=r(3);t.mergeStyleSets=n},function(e,t,r){"use strict";function n(e){o.Stylesheet.getInstance().insertRule("@font-face{"+i.serializeRuleEntries(e)+"}")}Object.defineProperty(t,"__esModule",{value:!0});var o=r(0),i=r(1);t.fontFace=n},function(e,t,r){"use strict";function n(e){var t=o.Stylesheet.getInstance(),r=t.getClassName(),n=[];for(var s in e)e.hasOwnProperty(s)&&n.push(s,"{",i.serializeRuleEntries(e[s]),"}");var a=n.join("");return t.insertRule("@keyframes "+r+"{"+a+"}"),r}Object.defineProperty(t,"__esModule",{value:!0});var o=r(0),i=r(1);t.keyframes=n}]);
+var _=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r])},m=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++){t=arguments[r];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e}},function(e,t,r){"use strict";function n(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];var r={},n=e[0];if(n){e.length>1&&(n=i.concatStyleSets.apply(void 0,e));var a=[];for(var u in n)if(n.hasOwnProperty(u)){var c=n[u],l=o.extractStyleParts(c),f=l.classes,y=l.objects,p=s.styleToRegistration({displayName:u},y);a.push(p),p&&(r[u]=f.concat([p.className]).join(" "))}for(var v=0,h=a;v<h.length;v++){var p=h[v];p&&s.applyRegistration(p,r)}}return r}Object.defineProperty(t,"__esModule",{value:!0});var o=r(2),i=r(3),s=r(1);t.mergeStyleSets=n},function(e,t,r){"use strict";function n(e){o.Stylesheet.getInstance().insertRule("@font-face{"+i.serializeRuleEntries(e)+"}")}Object.defineProperty(t,"__esModule",{value:!0});var o=r(0),i=r(1);t.fontFace=n},function(e,t,r){"use strict";function n(e){var t=o.Stylesheet.getInstance(),r=t.getClassName(),n=[];for(var s in e)e.hasOwnProperty(s)&&n.push(s,"{",i.serializeRuleEntries(e[s]),"}");var a=n.join("");return t.insertRule("@keyframes "+r+"{"+a+"}"),r}Object.defineProperty(t,"__esModule",{value:!0});var o=r(0),i=r(1);t.keyframes=n}]);

lib-amd/mergeStyles.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "./styleToClassName", "./Stylesheet"], function (require, exports, styleToClassName_1, Stylesheet_1) {
+define(["require", "exports", "./styleToClassName", "./extractStyleParts"], function (require, exports, styleToClassName_1, extractStyleParts_1) {
     "use strict";
@@ -14,28 +14,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
         }
-        var classes = [];
-        var objects = [];
-        var stylesheet = Stylesheet_1.Stylesheet.getInstance();
-        function _processArgs(argsList) {
-            for (var _i = 0, argsList_1 = argsList; _i < argsList_1.length; _i++) {
-                var arg = argsList_1[_i];
-                if (arg) {
-                    if (typeof arg === 'string') {
-                        var translatedArgs = stylesheet.argsFromClassName(arg);
-                        if (translatedArgs) {
-                            objects.push(translatedArgs);
-                        }
-                        else {
-                            classes.push(arg);
-                        }
-                    }
-                    else if (Array.isArray(arg)) {
-                        _processArgs(arg);
-                    }
-                    else if (typeof arg === 'object') {
-                        objects.push(arg);
-                    }
-                }
-            }
-        }
-        _processArgs(args);
+        var _a = extractStyleParts_1.extractStyleParts(args), classes = _a.classes, objects = _a.objects;
         if (objects.length) {
@@ -42,0 +17,0 @@ classes.push(styleToClassName_1.styleToClassName(objects));

lib-amd/mergeStyleSets.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "./mergeStyles", "./concatStyleSets"], function (require, exports, mergeStyles_1, concatStyleSets_1) {
+define(["require", "exports", "./extractStyleParts", "./concatStyleSets", "./styleToClassName"], function (require, exports, extractStyleParts_1, concatStyleSets_1, styleToClassName_1) {
     "use strict";
@@ -15,2 +15,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
         }
+        // tslint:disable-next-line:no-any
         var classNameSet = {};
@@ -22,8 +23,21 @@ var cssSet = cssSets[0];
             }
+            var registrations = [];
             for (var prop in cssSet) {
                 if (cssSet.hasOwnProperty(prop)) {
+                    var args = cssSet[prop];
                     // tslint:disable-next-line:no-any
-                    classNameSet[prop] = mergeStyles_1.mergeStyles(cssSet[prop]);
+                    var _a = extractStyleParts_1.extractStyleParts(args), classes = _a.classes, objects = _a.objects;
+                    var registration = styleToClassName_1.styleToRegistration({ displayName: prop }, objects);
+                    registrations.push(registration);
+                    if (registration) {
+                        classNameSet[prop] = classes.concat([registration.className]).join(' ');
+                    }
                 }
             }
+            for (var _b = 0, registrations_1 = registrations; _b < registrations_1.length; _b++) {
+                var registration = registrations_1[_b];
+                if (registration) {
+                    styleToClassName_1.applyRegistration(registration, classNameSet);
+                }
+            }
         }
@@ -30,0 +44,0 @@ return classNameSet;

lib-amd/styleToClassName.d.ts

@@ -5,2 +5,12 @@ import { IStyle } from './IStyle';
 }): string;
+export interface IRegistration {
+    className: string;
+    key: string;
+    args: IStyle[];
+    rulesToInsert: string[];
+}
+export declare function styleToRegistration(...args: IStyle[]): IRegistration | undefined;
+export declare function applyRegistration(registration: IRegistration, classMap?: {
+    [key: string]: string;
+}): void;
 export declare function styleToClassName(...args: IStyle[]): string;

lib-amd/styleToClassName.js

@@ -111,3 +111,3 @@ define(["require", "exports", "./transforms/rtlifyRules", "./transforms/provideUnits", "./transforms/prefixRules", "./transforms/kebabRules", "./Stylesheet"], function (require, exports, rtlifyRules_1, provideUnits_1, prefixRules_1, kebabRules_1, Stylesheet_1) {
     exports.serializeRuleEntries = serializeRuleEntries;
-    function styleToClassName() {
+    function styleToRegistration() {
         var args = [];
@@ -119,25 +119,63 @@ for (var _i = 0; _i < arguments.length; _i++) {
         var key = getKeyForRules(rules);
-        var className = '';
         if (key) {
             var stylesheet = Stylesheet_1.Stylesheet.getInstance();
-            className = stylesheet.classNameFromKey(key);
-            if (!className) {
-                className = stylesheet.getClassName(getDisplayName(rules));
-                var registeredRules = [];
+            var registration = {
+                className: stylesheet.classNameFromKey(key),
+                key: key,
+                args: args
+            };
+            if (!registration.className) {
+                registration.className = stylesheet.getClassName(getDisplayName(rules));
+                var rulesToInsert = [];
                 for (var _a = 0, _b = rules.__order; _a < _b.length; _a++) {
                     var selector = _b[_a];
-                    var rulesToInsert = serializeRuleEntries(rules[selector]);
-                    if (rulesToInsert) {
-                        registeredRules.push(selector, rulesToInsert);
-                        selector = selector.replace(/\&/g, "." + className);
-                        stylesheet.insertRule(selector + "{" + rulesToInsert + "}");
-                    }
+                    rulesToInsert.push(selector, serializeRuleEntries(rules[selector]));
                 }
-                stylesheet.cacheClassName(className, key, args, registeredRules);
+                registration.rulesToInsert = rulesToInsert;
             }
+            return registration;
         }
-        return className;
     }
+    exports.styleToRegistration = styleToRegistration;
+    function applyRegistration(registration, classMap) {
+        var stylesheet = Stylesheet_1.Stylesheet.getInstance();
+        var className = registration.className, key = registration.key, args = registration.args, rulesToInsert = registration.rulesToInsert;
+        if (rulesToInsert) {
+            // rulesToInsert is an ordered array of selector/rule pairs.
+            for (var i = 0; i < rulesToInsert.length; i += 2) {
+                var rules = rulesToInsert[i + 1];
+                if (rules) {
+                    var selector = rulesToInsert[i];
+                    // Fix selector using map.
+                    selector = selector.replace(/(&)|\$([\w-]+)\b/g, function (match, amp, cn) {
+                        if (amp) {
+                            return '.' + registration.className;
+                        }
+                        else if (cn) {
+                            return '.' + ((classMap && classMap[cn]) || cn);
+                        }
+                        return '';
+                    });
+                    // Insert.
+                    stylesheet.insertRule(selector + "{" + rules + "}");
+                }
+            }
+            stylesheet.cacheClassName(className, key, args, rulesToInsert);
+        }
+    }
+    exports.applyRegistration = applyRegistration;
+    function styleToClassName() {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        var registration = styleToRegistration.apply(void 0, args);
+        if (registration) {
+            applyRegistration(registration);
+            return registration.className;
+        }
+        return '';
+    }
     exports.styleToClassName = styleToClassName;
 });
 //# sourceMappingURL=styleToClassName.js.map

lib/mergeStyles.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var styleToClassName_1 = require("./styleToClassName");
-var Stylesheet_1 = require("./Stylesheet");
+var extractStyleParts_1 = require("./extractStyleParts");
 /**
@@ -15,28 +15,3 @@ * Concatination helper, which can merge class names together. Skips over falsey values.
     }
-    var classes = [];
-    var objects = [];
-    var stylesheet = Stylesheet_1.Stylesheet.getInstance();
-    function _processArgs(argsList) {
-        for (var _i = 0, argsList_1 = argsList; _i < argsList_1.length; _i++) {
-            var arg = argsList_1[_i];
-            if (arg) {
-                if (typeof arg === 'string') {
-                    var translatedArgs = stylesheet.argsFromClassName(arg);
-                    if (translatedArgs) {
-                        objects.push(translatedArgs);
-                    }
-                    else {
-                        classes.push(arg);
-                    }
-                }
-                else if (Array.isArray(arg)) {
-                    _processArgs(arg);
-                }
-                else if (typeof arg === 'object') {
-                    objects.push(arg);
-                }
-            }
-        }
-    }
-    _processArgs(args);
+    var _a = extractStyleParts_1.extractStyleParts(args), classes = _a.classes, objects = _a.objects;
     if (objects.length) {
@@ -43,0 +18,0 @@ classes.push(styleToClassName_1.styleToClassName(objects));

lib/mergeStyleSets.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var mergeStyles_1 = require("./mergeStyles");
+var extractStyleParts_1 = require("./extractStyleParts");
 var concatStyleSets_1 = require("./concatStyleSets");
+var styleToClassName_1 = require("./styleToClassName");
 /**
@@ -16,2 +17,3 @@ * Allows you to pass in 1 or more sets of areas which will return a merged
     }
+    // tslint:disable-next-line:no-any
     var classNameSet = {};
@@ -23,8 +25,21 @@ var cssSet = cssSets[0];
         }
+        var registrations = [];
         for (var prop in cssSet) {
             if (cssSet.hasOwnProperty(prop)) {
+                var args = cssSet[prop];
                 // tslint:disable-next-line:no-any
-                classNameSet[prop] = mergeStyles_1.mergeStyles(cssSet[prop]);
+                var _a = extractStyleParts_1.extractStyleParts(args), classes = _a.classes, objects = _a.objects;
+                var registration = styleToClassName_1.styleToRegistration({ displayName: prop }, objects);
+                registrations.push(registration);
+                if (registration) {
+                    classNameSet[prop] = classes.concat([registration.className]).join(' ');
+                }
             }
         }
+        for (var _b = 0, registrations_1 = registrations; _b < registrations_1.length; _b++) {
+            var registration = registrations_1[_b];
+            if (registration) {
+                styleToClassName_1.applyRegistration(registration, classNameSet);
+            }
+        }
     }
@@ -31,0 +46,0 @@ return classNameSet;

lib/styleToClassName.d.ts

@@ -5,2 +5,12 @@ import { IStyle } from './IStyle';
 }): string;
+export interface IRegistration {
+    className: string;
+    key: string;
+    args: IStyle[];
+    rulesToInsert: string[];
+}
+export declare function styleToRegistration(...args: IStyle[]): IRegistration | undefined;
+export declare function applyRegistration(registration: IRegistration, classMap?: {
+    [key: string]: string;
+}): void;
 export declare function styleToClassName(...args: IStyle[]): string;

lib/styleToClassName.js

@@ -115,3 +115,3 @@ "use strict";
 exports.serializeRuleEntries = serializeRuleEntries;
-function styleToClassName() {
+function styleToRegistration() {
     var args = [];
@@ -123,24 +123,62 @@ for (var _i = 0; _i < arguments.length; _i++) {
     var key = getKeyForRules(rules);
-    var className = '';
     if (key) {
         var stylesheet = Stylesheet_1.Stylesheet.getInstance();
-        className = stylesheet.classNameFromKey(key);
-        if (!className) {
-            className = stylesheet.getClassName(getDisplayName(rules));
-            var registeredRules = [];
+        var registration = {
+            className: stylesheet.classNameFromKey(key),
+            key: key,
+            args: args
+        };
+        if (!registration.className) {
+            registration.className = stylesheet.getClassName(getDisplayName(rules));
+            var rulesToInsert = [];
             for (var _a = 0, _b = rules.__order; _a < _b.length; _a++) {
                 var selector = _b[_a];
-                var rulesToInsert = serializeRuleEntries(rules[selector]);
-                if (rulesToInsert) {
-                    registeredRules.push(selector, rulesToInsert);
-                    selector = selector.replace(/\&/g, "." + className);
-                    stylesheet.insertRule(selector + "{" + rulesToInsert + "}");
-                }
+                rulesToInsert.push(selector, serializeRuleEntries(rules[selector]));
             }
-            stylesheet.cacheClassName(className, key, args, registeredRules);
+            registration.rulesToInsert = rulesToInsert;
         }
+        return registration;
     }
-    return className;
 }
+exports.styleToRegistration = styleToRegistration;
+function applyRegistration(registration, classMap) {
+    var stylesheet = Stylesheet_1.Stylesheet.getInstance();
+    var className = registration.className, key = registration.key, args = registration.args, rulesToInsert = registration.rulesToInsert;
+    if (rulesToInsert) {
+        // rulesToInsert is an ordered array of selector/rule pairs.
+        for (var i = 0; i < rulesToInsert.length; i += 2) {
+            var rules = rulesToInsert[i + 1];
+            if (rules) {
+                var selector = rulesToInsert[i];
+                // Fix selector using map.
+                selector = selector.replace(/(&)|\$([\w-]+)\b/g, function (match, amp, cn) {
+                    if (amp) {
+                        return '.' + registration.className;
+                    }
+                    else if (cn) {
+                        return '.' + ((classMap && classMap[cn]) || cn);
+                    }
+                    return '';
+                });
+                // Insert.
+                stylesheet.insertRule(selector + "{" + rules + "}");
+            }
+        }
+        stylesheet.cacheClassName(className, key, args, rulesToInsert);
+    }
+}
+exports.applyRegistration = applyRegistration;
+function styleToClassName() {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    var registration = styleToRegistration.apply(void 0, args);
+    if (registration) {
+        applyRegistration(registration);
+        return registration.className;
+    }
+    return '';
+}
 exports.styleToClassName = styleToClassName;
 //# sourceMappingURL=styleToClassName.js.map

package.json

 {
   "name": "@uifabric/merge-styles",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "description": "Office UI Fabric style loading utilities.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -7,4 +7,22 @@ # [merge-styles](http://dev.office.com/fabric)
 
-The basic idea is to provide a method which can take in one or more style objects css styling javascript objects representing the styles for a given element, and return a single class name. If the same set of styling is passed in, the same name returns and nothing is re-registered.
+Simple usage:
+```
+import { mergeStyles, mergeStyleSet } from '@uifabric/merge-styles';
 
+// Produces 'css-0' class name which can be used anywhere
+mergeStyles({ background: 'red' });
+
+// Produces a class map for a bunch of rules all at once
+mergeStyleSet({
+  root: { background: 'red' },
+  child: { background: 'green' }
+});
+
+// Returns { root: 'root-0', child: 'child-1' }
+```
+
+Both utilities behave similar to a deep Object.assign; you can collapse may objects down into one class name or class map.
+
+The basic idea is to provide tools which can take in one or more css styling objects representing the styles for a given element, and return a single class name. If the same set of styling is passed in, the same name returns and nothing is re-registered.
+
 ## Motivation
@@ -134,2 +152,4 @@
 
+### Basic pseudo-selectors (:hover, :active, etc)
+
 Custom selectors can be defined within `IStyle` definitions under the `selectors` section:
@@ -148,3 +168,3 @@
 
-By default, the rule will be appended to the current selector scope. That is, in the above scenario, there will be 2 rules inserted when using `mergeRules`:
+By default, the rule will be appended to the current selector scope. That is, in the above scenario, there will be 2 rules inserted when using `mergeStyles`:
 
@@ -156,2 +176,4 @@ ```css
 
+### Parent/child selectors
+
 In some cases, you may need to use parent or child selectors. To do so, you can define a selector from scratch and use the `&` character to represent the generated class name. When using the `&`, the current scope is ignored. Example:
@@ -180,9 +202,55 @@
 ```
+### Referencing child elements within the mergeStyleSets scope
 
+One important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:
+
+```tsx
+mergeStyleSets({
+  root: { background: 'red' }
+  thumb: { background: 'green' }
+});
+```
+
+Produces:
+
+```css
+.root-0 { background: red; }
+.thumb-1 { background: green; }
+```
+
+In some cases, you may need to alter a child area by interacting with the parent. For example, when the parent is hovered, change the child background. You can reference the areas defined in the style set using $ tokens:
+
+```tsx
+mergeStyleSets({
+  root: {
+    selectors: {
+      ':hover $thumb': { background: 'lightgreen' }
+    }
+   }
+  thumb: { background: 'green' }
+});
+```
+
+The `$thumb` reference in the selector on root will be replaced with the class name generated for thumb.
+
 ## Custom class names
 
-By default class names that are generated will use the prefix `css-` followed by a number, creating unique rules where needed.
+By default when using `mergeStyles`, class names that are generated will use the prefix `css-` followed by a number, creating unique rules where needed. For example, the first class name produced will be 'css-0'.
 
-While this prefix is fine, sometimes a more readable prefix is desired. You can pass in a `displayName` to resolve this:
+When using `mergeStyleSets`, class names automatically use the area name as the prefix.
 
+Merging rules like:
+
+```ts
+mergeStyleSets({ a: { ... }, b: { ... } })
+```
+
+Will produce the class name map:
+
+```ts
+{ a: 'a-0', b: 'b-1' }
+```
+
+If you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:
+
 ```tsx
@@ -189,0 +257,0 @@ {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

703577

increased by4.67%

Number of package files

122

increased by5.17%

Lines of code

7735

increased by4.56%

Number of lines in readme file

388

increased by21.25%

No dependency changes